How to use JS front end widgets with MVC back end for data controls?

[Andrew]

In Kendo UI MVC, you can use one action for all your data widgets (grid, combobox, etc.) and filtering is handled the same. However, when I try to use a kendo-ui JS widget to hit that same action, it passes the filtering differently. Why is that? How can I bridge that gap?

If you use MVC Combobox and post to action, the filtering gets sent as:

sort: Name-asc
page: 1
pageSize: 80
group:
filter: Name~contains~'manager'

 

If you use the JS Combobox and post to action, its sent as:

filter[logic]: and
filter[filters][0][value]: manager
filter[filters][0][field]: Name
filter[filters][0][operator]: contains
filter[filters][0][ignoreCase]: true

 

Because of this different structure, my action with signature:

public IActionResult QueryEntities([DataSourceRequest] DataSourceRequest request)

The request.Filters is always empty. How can I convert the js filter for combobox so my action can recognize it? And why are they handled differently anyway? I thought MVC version just wraps the JS version and generates the JS from server side code.

[Veselin Tsvetanov]

Hello Andrew,

Attached you will find a simple project implementing a Telerik UI for ASP.NET MVC ComboBox HTML helper and a jQuery Kendo UI ComboBox. You will notice, that both widgets use the same GetProducts endpoint, which filters the returned results in them. You will notice, that both widgets send the query data in the following format:

text:fi
filter[filters][0][value]:fi
filter[filters][0][field]:ProductName
filter[filters][0][operator]:contains
filter[filters][0][ignoreCase]:true
filter[logic]:and

Concerning your final question, yes the Telerik UI for ASP.NET MVC ComboBox is simply a wrapper of the Kendo UI widget. Therefore, their functionality should not differ.

Regards,
Veselin Tsvetanov
Progress Telerik

[Andrew]

I see what the difference was. My MVC combo boxes had the line:

.Type("aspnetmvc-ajax")

Because all the online examples had that in it. I didn't realize what this did or even think to look at that.

I was able to fix this issue by including aspnetmvc.js and then setting the JS combobox datasource's type to that as well. Then everything worked.