Change Grid filters with Slider

6 posts, 0 answers
  1. Allan
    Allan avatar
    34 posts
    Member since:
    Aug 2015

    Posted 01 Oct 2015 Link to this post

    Hello there,

    I have a Kendo Grid with a lot of numerical data in it and I'd like to incorporate the Kendo range Slider into it so that users can adjust the sliders and this will filter the grid.  Having read the documentation I'm not 100% sure how to do this. Can anyone help?

     

    @(Html.Kendo().Grid(Model)
        .Name("MyGrid")
        .Columns(columns =>
            {
                columns.Bound(p => p.vessel_name).Title("Vessel");
                columns.Bound(p => p.vessel_bhp).Title("Type");
                columns.Bound(p => p.fixture_charterer).Title("Charterer");
                columns.Bound(p => p.current_location).Title("Location");
                columns.Bound(p => p.next_charterer_info).Title("Next Charter").Width(200);
                columns.Bound(p => p.fixture_work).Title("Work");
                columns.Bound(p => p.fixture_note).Title("Notes");
                columns.Bound(p => p.vessel_status).Title("Status");        
            }
        )
        .Pageable()
        .Scrollable()
        .Sortable()
        .Events(e => e.DataBound("OnDataBound"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(p => p.vessel_idx);
                model.Field(p => p.vessel_idx).Editable(false);
            })
            .PageSize(50)
            .Sort(sort => sort.Add("vessel_status").Ascending())
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Create(update => update.Action("EditingInline_Create", "Grid"))
            .Read(read => read.Action("EditingInline_Read", "Grid"))
                    .Update(update => update.Action("tbl_vessels", "Grid"))
            .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
            ))

    For example I'd like the ranger slider to filter the grid when people choose a range for vessel_bhp.

    Any help is appreciated.

  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1144 posts

    Posted 05 Oct 2015 Link to this post

    Hi,

    In order to use a slider as a filter you can initialize it(the slider widget) in the filter UI. An example implementation of this approach can be observed in this demo. In the filter for the city and title columns a drop down list and an auto complete controls are used but the same approach can be applied for the slider as well.

    Regards,
    Angel Petrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Kyle
    Kyle avatar
    7 posts
    Member since:
    Feb 2016

    Posted 26 Jan 2018 in reply to Angel Petrov Link to this post

    Are you able to provide any better examples of implementing the slider UI on a grid filter?  The example in your link is only for the dropdown...which works on a single HTML element. But the slider UI is multiple inputs.
  4. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 30 Jan 2018 Link to this post

    Hello, Kyle,

    We have an example directly demonstrating a Range Slider like a Grid filter on the numeric field:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/use-range-slider-in-filter-menu

    I hope this is helpful.

    Regards,
    Stefan
    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.
  5. Kyle
    Kyle avatar
    7 posts
    Member since:
    Feb 2016

    Posted 30 Jan 2018 in reply to Stefan Link to this post

    Hi Stefan,

    I have seen this example and I like the UI results of it. But this example is only viable when the slider is the ONLY filter on the grid. As is, the submitFilter(e) function calls grid.dataSource.filter() on its own, and ignores any other columns you're filtering with.

    For example, filter on the Ship Name column first, then filter the Freight column with the slider. The Ship Name filter is now reset and ignored. To get around this, the submitFilter(e) function should really read the dataSource filters, and then inject numbers from the slider into dataSource.filter as a new nested filter, instead of just replacing all previous filters.

    I'm looking for something more intuitive in the column filter configuration, like <column>: filterable: { ui: "slider" } that will work alongside other filters on the same grid, and will render a UI like the example you've linked. Currently using filterable: { ui: "slider" } gives a fairly limited interface, with a slider going from 0-10, mixed in with the regular filter operator selector.

  6. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 01 Feb 2018 Link to this post

    Hello, Kyle,

    Indeed, this is just a how-to example and it has its limitations.

    If the desired result is to have a more integrated functional slider filter, I can suggest submitting a feature request for a built-in slider filter and describe how would you expect it to function. Then based on its popularity among to community we may implement it in a future release:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=170280

    Regards,
    Stefan
    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