Change Grid filters with Slider

2 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?


        .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");        
        .Events(e => e.DataBound("OnDataBound"))
        .DataSource(dataSource => dataSource
            .Model(model =>
                model.Id(p => p.vessel_idx);
                model.Field(p => p.vessel_idx).Editable(false);
            .Sort(sort => sort.Add("vessel_status").Ascending())
            .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
    Angel Petrov avatar
    1044 posts

    Posted 05 Oct 2015 Link to this post


    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.

    Angel Petrov
    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
Back to Top