Grid multi filter values

4 posts, 0 answers
  1. Tom
    Tom avatar
    20 posts
    Member since:
    Apr 2016

    Posted 09 Jan Link to this post

    I am trying to reduce the amount of back-and-forth on a number of columns that are configured to use multi-checkbox filtering, as per the below example:

    .Columns(columns => { columns.Bound(c => c.Status).Filterable(f => f.Multi(true) })

    I would like to set the available values of this filter. The default behaviour is for the entire dataset to be re-requested and returned to the user, where a distinct list of values can be deduced. I am able to implement a more efficient solution for my particular case, but I cannot seem to set the available values of these filters. Finding the relevant th object and setting the data as follows does not seem to work:

    var myGrid = $("#MyGrid").data("kendoGrid");
    var listOfFilterValues = [{"Status": "first"},{"Status": "second"},{"Status": "etc"}];
    myGrid.thead.find("th").each(function (i,s) {
        if($(s).data("field") == "Status" && $(s).data("kendoFilterMultiCheck") != null){
            $(s).data("kendoFilterMultiCheck").checkSource.data(listOfFilterValues );
        }
    }

    Is this possible? If so, how?

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2373 posts

    Posted 11 Jan Link to this post

    Hello Tom,

    The easiest way for achieving the desired result would be to set separate DataSource for the filter (refer to configuration of the second Grid):
    You can also use BindTo to a collection:
    columns.Bound(e => e.FirstName).Width(220).Filterable(ftb => ftb.Multi(true).BindTo(new List<EmployeeViewModel>() { new EmployeeViewModel() { FirstName = "Test"} })
    );

    As for custom solution within the filterMenuInit event, you can take a look at the implementation in the following HowTo article, where the checkboxes are recreated when their data changes:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tom
    Tom avatar
    20 posts
    Member since:
    Apr 2016

    Posted 11 Jan in reply to Konstantin Dikov Link to this post

    Sorry, but this doesn't really address what I am trying to achieve. I am aware a separate datasource can be specified and bound to a specified list, but this only works if the available values are known when the grid is defined, and never change. Setting this datasource to call a separate controller action is something I am specifically trying to avoid here.

    What I am trying to achieve here is to change the filter values on the page on the fly, using javascript. No calls to controller actions, no pre-defined lists.

    Is this possible, and if so, how?

  4. Tsvetina
    Admin
    Tsvetina avatar
    2346 posts

    Posted 15 Jan Link to this post

    Hi Tom,

    You can change the data used in the multi-checkbox filter on the fly in the filterMenuOpen and filterMenuInit events.

    You can use this example as a base:
    Sort Multiple Checkbox Filter

    You can modify it to use the filterMenuOpen event instead of filterMenuInit one to be able to replace the filter checkboxes DataSource each time the filter menu opens and some condition is fulfilled.

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top