CODEWITHSUNDEEP
kendo-grid
Ali Bayat
Ali Bayat

Reputation: 4066

how to provide a external (Serverside)search box to our Kendo UI grid?

how to provide a external search box to our Kendo UI grid that Search in Sever Side?

 function onSearch()
    {
      var q = $("#txtSearchString").val();
          var grid = $("#kGrid").data("kendoGrid");
          grid.dataSource.query({
            page:1,
            pageSize:20,
            filter:{
              logic:"or",
              filters:[
                {field:"ID", operator:"contains",value:q},
                {field:"Title", operator:"contains",value:q},
                ]
             }
          });
    }
    
      $("#btnSearch").kendoButton({
        click:onSearch
      })
      
      
      $("#kGrid").kendoGrid({
        dataSource:{
          type:"odata",
          transport:{
            read:"ContactType/GetContactTypes"
          },
          schema:{
            data:function(data){
            	return data.d.results
            },
            total:function(data){
            	return data.d.__count
            },
            
          },
          serverPaging:true,
          serverFiltering:true,
          pageSize:20
        },
        height:550,
        pageable:true,
        columns:[
        	'CustomerID',
          'CompanyName',
          'ContactName',
          'ContactTitle',
          'Address',
          'City',
          'PostalCode',
          'Country'
        ]
        
      })
    }
            
    $(document).ready(onReady);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
</head>
<body>
  <div>
    <div>
      <div>
        Search By ID/Title
        <input class=k-textbox type=text id="txtSearchString" placeholder="enter search text..." />
        <button id="btnSearch">Search</button>
      </div>
        <br><br>
      <div id="kGrid"></div>
    </div>
  </div>
</body>
</html>

        public ActionResult GetContactTypes()
    {
        using (var context = CommerceChamberContext.GetContext())
        {
            var data = context.ContactTypes.Select(x => new { x.ID, x.Title }).ToList();
            int count = data.Count;
            var jsonData = new { total = count, data };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }
    }

I have this code, but it does not Filter anything...

I like to have a text box and a button to initiate the search in server side.

Upvotes: 0

Views: 988

Answers (1)

The Dread Pirate Stephen
The Dread Pirate Stephen

Reputation: 3169

You aren't doing anything with the query parameters in your server action(GetContactTypes).

If you look at what is posted if the browser dev tools when you click your Search button you will see something like this in the query string parameters:

$callback:jQuery112305717723066421754_1473786887565
$inlinecount:allpages
$format:json
$top:20
$filter:(substringof('SearchForThis',ID) or substringof('SearchForThis',Title))

Because you have configured the grid to use serverFiltering: true, it is your responsibility to incorporate the $filter(and $top, and $skip) parameter into your query with an appropriate WHERE clause that uses the passed $filter values.

As it stands right now, your server action is being passed the filter but you are returning your entire ContactTypes list.

Do you want to use client-side filtering? Server filtering = you do the filtering on the server and return only the matching rows. Client filtering = kendo will do the filtering in javascript with the dataSource it already has(will not call your server action)

Upvotes: 2

Related Questions