Does Telerik have plans for custom filtering in the Telerik ASP.NET Core UI Grid

5 posts, 1 answers
  1. Reid
    Reid avatar
    448 posts
    Member since:
    Oct 2008

    Posted 30 Oct 2019 Link to this post

    Does Telerik have plans for custom filtering in the Telerik ASP.NET Core UI Grid?

    When I ask, "Custom" I mean truly custom. 

    Our need is to have a listbox (or similar) with multiple check boxes (scrolling) in it for each column of each grid.
    This is for allowing the user to select one or more values.  These are parameter values.

    So if we could inject a Razor partial or draw it in a hooked event into the row[0] of the grid we could gather these values when the search button is clicked.

    Right now we draw the filtering partial view above the grid and play hell trying to align column widths in general, but our designer cannot make it work with mobile resolutions, etc.  So we need to draw the filter in the grid to make it work.

    If Telerik has no plans to accommodate this scenario we need to know.  And if necessary we have to find a component suite that does.
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1240 posts

    Posted 04 Nov 2019 Link to this post

    Hi Reid,

    The Telerik .Net Core Grid supports Multi Checkbox filter for each of its columns. On the following Demo you will find two examples of how to configure such a filter in the Grid:

    - Column configured with client-side filtering:

    @( Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("client")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName).Filterable(ftb => ftb.Multi(true).Search(true));
    ...

    - And configured with server filtering:

    @( Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
        .Name("server")
        .Columns(columns =>
        {
            //when ServerOperations of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check columns
            columns.Bound(e => e.FirstName)
                .Width(220)
                .Filterable(ftb => ftb.Multi(true)
                .Search(true)
                .DataSource(ds => ds.Read(r => r.Action("Unique", "Grid").Data("{ field: 'FirstName' }")))
             );
    ....

    Note that in the second case the server operations on the Grid DataSource are also enabled:

    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
    )

    If the above does not cover the scenario in question, I would like to ask you to explain a bit more in detail what is the needed functionality of the filter. This way I will be able to provide you with some further hints on how to achieve the desired.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Reid
    Reid avatar
    448 posts
    Member since:
    Oct 2008

    Posted 28 Nov 2019 in reply to Veselin Tsvetanov Link to this post

    Thank you for the reply.

    While this might work for part of our need (multi checkbox) what about anything else?  When I say custom I mean the ability to add *any* controls.  Check boxes, drop downs together, etc.
  4. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1240 posts

    Posted 03 Dec 2019 Link to this post

    Hi Reid,

    You could define a custom widget (DropDownList, for example) as a filter by using the UI() method of the filterable configuration:

    columns.Bound(e => e.Title).Filterable(filterable => filterable.UI("titleFilter"));

    That should point to a function returning the actual filter:

      function titleFilter(element) {
            element.kendoAutoComplete({
                dataSource: {
                    transport: {
                        read: "@Url.Action("FilterMenuCustomization_Titles")"
                    }
                }
            });
        }

    Here is a demo on the above: https://demos.telerik.com/aspnet-core/grid/filter-menu-customization

    That, however, would not allow you to use it in combination with the checkboxes filtering in the same filter. If you want to define an entirely custom filter container with custom widgets as per your requirement, you will have to create that as an external element (outside the default filter pop-up). That would also require a custom implementation for the filtering logic of the Grid source.

    FOr example, to achieve the desired, you could disable the available filtering in the Grid, inject with jQuery a custom icon in the corresponding column title. Attach a click handler to that icon that would open a Kendo Popup. In that pop-up, you could define any types of widgets, inputs, and buttons that your use case requires. Upon filter submit, you should implement the custom logic that will gather the info from the inputs and widgets, build the actual filter expression and filter the Grid DataSource.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Reid
    Reid avatar
    448 posts
    Member since:
    Oct 2008

    Posted 12 Jan 2020 in reply to Veselin Tsvetanov Link to this post

    Thank you for this.  I apologize about the delay.  I am no longer on that project and as such have not needed to implement anything since.

     

    Best wishes

Back to Top