This is a migrated thread and some comments may be shown as answers.

Change Grid filters with Slider

5 Answers 225 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 1
Allan asked on 01 Oct 2015, 02:31 PM

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.

5 Answers, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 05 Oct 2015, 02:37 PM
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
0
Kyle
Top achievements
Rank 1
answered on 26 Jan 2018, 07:13 PM
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.
0
Stefan
Telerik team
answered on 30 Jan 2018, 08:20 AM
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.
0
Kyle
Top achievements
Rank 1
answered on 30 Jan 2018, 01:45 PM

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.

0
Stefan
Telerik team
answered on 01 Feb 2018, 07:01 AM
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.
Tags
Grid
Asked by
Allan
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Kyle
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or