Kendo UI web grid search with sorting

3 posts, 0 answers
  1. Tharindu
    Tharindu avatar
    4 posts
    Member since:
    Jul 2014

    Posted 26 Sep 2014 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 30 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Tharindu
    Tharindu avatar
    4 posts
    Member since:
    Jul 2014

    Posted 30 Sep 2014 in reply to Rosen Link to this post

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