Client side filtering incompatible with MVC -style filters

3 posts, 1 answers
  1. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 08 Oct 2012 Link to this post

    When using the MVC helpers and want to update a filter on the client (without using the built-in column filters), the filter (and whole request) that gets sent to the server is different than the filter format that the MVC extensions produce so it is impossible to modify client filters when using the MVC extensions.

    For example if I had a grid declaration like this:

    @(Html.Kendo.Grid<Model>()
      .DataSource(dataSource => dataSource
        .Read("JsonAction", "Controller")
        .Filter(filter =>
        {
           filter.Add(f => f.ID)
                .IsEqualTo(ViewBag.ID));
     
           filter.Add(f => f.StartDate)
                .IsGreaterThan(ViewBag.StartDate)
                .And()
                .IsLessThan(ViewBag.EndDate)
        })
      )
    )

    The above filter would look something like this:

    ID~eq~1~and~(StartDate~gte~datetme'2012-10-01'~and~StartDate~lte~datetime'2012-10-02')

    Then after the user selects a different date range, I try to update the filter using JavaScript like so:

    var filterExpression = {
       logic: 'and',
       field: 'PublisherID',
       operator: 'eq',
       value: @Session["PublisherID"],
       filters: [
          { field: 'StartDate', operator: 'gte', value: startDate, logic: 'and' },
          { field: 'StartDate', operator: 'lte', value: endDate }
       ]
     };
     
    grid.dataSource.filter(filterExpression);
    grid.dataSource.read();

    This filter expression looks like the filterExpression variable when it gets sent to the server.

    Is there a way to implement custom client side filtering compatible with MVC extensions (and not having to re-invent the wheel on all our own filtering and sorting that we already do) or is this another limitation of the MVC extensions?

    What is the point of sending completely different filter and other expressions using the MVC extensions than the standalone Kendo UI Web package? Do you have any examples of how to manipulate the filter, sort, group and aggregate expressions defined using MVC helpers using custom client side JavaScript or is that another thing that's not currently possible with the MVC extension?
  2. Answer
    Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 09 Oct 2012 Link to this post

    Hello Vesselin,

    Looking at the code you have pasted I have noticed few issues:
    - The composite filter does have unnecessary field such as field, value, operator etc. Please refer to the documentation for the correct format.
            - As you may know, filter method will issue a request in case the server filtering is enabled. Thus, there is no need to call read method after the filtering.

    Beside this issues and if the project is setup correctly, both of the server and set via client-side API filter expressions should be send in a single unified format. As demonstrated in the attached project.

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 09 Oct 2012 Link to this post

    Thanks Rosen, was unaware that the filter() method triggered a read() event as well (hadn't gotten there yet), and I see what you're saying about the extra fields.

    My problem was actually very stupid, the View I was using was in turn using a Layout that did NOT have kendo.aspnetmvc.min.js. Now filtering works correctly. One thing I did learn in the process though is if you create a new dataSource, it's transport should be set to aspnetmvc-ajax. Definitely something to keep in mind when working with DataSourceRequest and DataSourceResult.
Back to Top