Edit this page

Use Grid Filtering with Kendo UI RangeSliders

Your project might require you to create range filtering in the Grid by using the Kendo UI RangeSlider.

To see how the following example functions, filter the column by using the Kendo UI RangeSlider. As a result, the Grid filters the data in the given range.

Example
   <div id="grid">
</div>
<script>
    $(document).ready(function () {
        $("#grid").kendoGrid({
            filterMenuInit: onFilterMenuInit,
            dataSource: {
                type: "odata",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
            },
            height: 550,
            filterable: true,
            pageable: true,
            columns:
            [{
                field: "OrderID"
            },
            {
                field: "ShipName",
                title: "Ship Name"
            }, {
                field: "Freight",

            }, {
                field: "OrderDate",
                title: "Order Date",
                format: "{0:MM/dd/yyyy}"
            }]
        });
    });

    function onFilterMenuInit(e) {

        if (e.field == 'Freight') {
            $(e.container[0]).html(`
            <div id="rangeslider" class="humidity">
                <input  />
                <input  />
            </div>
             `)

            $('#rangeslider').kendoRangeSlider({
                change: submitFilter,
                min: 0,
                max: 100,
                smallStep: 1,
                largeStep: 10,
                tickPlacement: "both"
            })

        }
    }

    function submitFilter(e) {
        var grid = $('#grid').data('kendoGrid');
        grid.dataSource.filter({
            logic: 'and',
            filters: [
                { field: 'Freight', operator: 'gte', value: e.values[0] },
                { field: 'Freight', operator: 'lte', value: e.values[1] }
            ]
        })
    }

</script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy