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

3 posts, 1 answers
  1. Andrew
    Andrew avatar
    23 posts
    Member since:
    May 2016

    Posted 25 Sep Link to this post

    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.

  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 27 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Andrew
    Andrew avatar
    23 posts
    Member since:
    May 2016

    Posted 27 Sep Link to this post

    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.

Back to Top