Dynamic filtering of Grid

[Moshe Hayun]

Hello,



In my application (Dynamics 365), I added many Kendo Grid (using TypeScript and C# WCF as Backend). I'd like to implement a general dynamic functionnality of server filtering (because I use paging on read request, so it must be filtered on server side).

 

Firstly, I'd like to know how to implement exactly a server filtering of data source. In my backend function, I have the DataSourceRequest parameter, I added serverFiltering:true to my DataSource definition in TS. But I think that I miss something here, particularly the filter parameters on the data source (JSON format right?). Something like this:

{
   "take":10,
   "skip":0,
   "page":1,
   "pageSize":10,
   "filter":{
      "filters":[
         {
            "field":"Column1",
            "operator":"eq",
            "value":"val1"
         },
         {
            "field":"Column1",
            "operator":"eq",
            "value":"val2"
         },
         {
            "logic":"or",
            "filters":[
               {
                  "field":"Column2",
                  "operator":"eq",
                  "value":5
               },
               {
                  "field":"Column2",
                  "operator":"eq",
                  "value":1
               }
            ]
         }
      ],
      "logic":"and"
   },
   "group":[

   ]
}

 

How it can be done?Should I check if filtering is applied every column of my grid and what is the filter? And I guess that once the filter passed, I will be able to read it on the parameter passed to the backend function (request.Filters).

 

I'm newbie on Kendo, so I'll appreciate a detailed answer with full example if possible.

 

Thank you.

Moshe.

[Stefan]

Hello, Moshe,

When the serverFiltering is applied to the Grid, it will automatically add the filter parameters as part of the request. The format of the parameters can be observed in the documentation:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverFiltering

When using a WCF as a backend, there are some specifics which has to be taken into account. I can suggest checking the following forum thread, with examples and code snippets demonstrating how to use DataSourceRequest with WCF:

https://www.telerik.com/forums/kendo-mvc-and-wcf

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Moshe Hayun]

Hello Stefan,

 

Thank you for your answer. But I found a solution. I simply forgot (or ignored) to add type:"aspnetmvc-ajax" to my DataSource (and not to my transport read!)

 

export const ACTIVITIES_GRID_DATASOURCE = new kendo.data.DataSource({
    serverPaging: true,
    serverFiltering: true,
    filter: [],
    type: "aspnetmvc-ajax",
    transport: {
        read: {
            url: `${crudServiceBaseUrl}/ActivitiesList`,
            dataType: "jsonp",
            data: function () {
                var toolbar: kendo.ui.ToolBar = $("#menu").data("kendoToolBar");
                var selected: any = (toolbar && toolbar.getSelectedFromGroup("radio") || "");
                return { viewType: (selected && selected.attr("id") || "") };
            }
        },
    },

 

Solution found here: https://www.telerik.com/forums/datasourcerequest-filters-and-sorts-fields-null-here-is-the-solution

 

Have a nice day.

 

Regards,

Moshe

[Moshe Hayun]

And this is why my request.Filters received on the backend were null.