Kendo UI web grid search with sorting

[Tharindu]

Hi,

I have a grid with server side paging and sorting. A search field is added where we execute 

$scope.mainGridOptions.dataSource.read(
{
   data: $scope.searchText
 });

We have defined our data source as

var gridData = new kendo.data.DataSource({
 transport: {
   read: {
       url: "api/engagement/GetEngagementLists",
       data: {
           searchStr: $scope.searchText
       },
       type: "GET",
            contentType: "application/json"
       }
    },
     schema: {
          data: "Data",
          total: "Count",
          errors: "Errors"
     },
     error: (e) => {
         console.log("error");
         toastFactory.error("error");
     },
        pageSize: 10,
        serverPaging: true,
        serverSorting: true
     });

The problem we faced is when we have some text in search box and if we do sorting by clicking a header it won't pass the search string. Therefore it will loose the search capability. Please let me know what can we do correct this problem.

Thanks

[Rosen]

Hello Tharindu,

In order to send additional data with the read request, you will need to pass it via the read data option. However, instead of assigning it during the DataSource construction, as with the provided code snippet, you will need to set it as a function. This way the most recent value will be send with each request. Similar to the following:

$scope.mainGridOptions.dataSource.read(); // there is not need to send the searchStr value manually

///...
transport: {
   read: {
       url: "api/engagement/GetEngagementLists",
       data: {
           searchStr: function() { return $scope.searchText; } // the value will be automatically send with each read request
       },
       type: "GET",
       contentType: "application/json"
  }
/*..*/
}

Regards,
Rosen
Telerik

 

 

[Tharindu]

Thanks for the solution Rosen. It's working now :)