Edit this page

Prevent Grid Filter Menu from Closing on Browser Scroll

Environment

Product Version 2017.3 1026
Product Progress Kendo UI Grid

Description

How can I prevent the filter popup from closing when the user scrolls the page of the Grid?

Solution

  1. Handle the scroll event of the window.
  2. In the event handler, set a global variable to true.
  3. In the filterMenuInit event handler of the Grid, bind the close event to the Popup widget.
  4. Based on the global variable, prevent the default behavior in the close event handler.
<div class="wrapper">
    <div id="client"></div>
</div>
<style>
    .wrapper {
        height: 1200px;
    }
</style>
<script>
    var scroll = false;
    $(document).ready(function() {
        var telerikWebServiceBase = "https://demos.telerik.com/kendo-ui/service/";
        $("#client").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: telerikWebServiceBase + "/Products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: telerikWebServiceBase + "/Products/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: telerikWebServiceBase + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: telerikWebServiceBase + "/Products/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: {
                                editable: false,
                                nullable: true
                            },
                            ProductName: {
                                validation: {
                                    required: true
                                }
                            },
                            UnitPrice: {
                                type: "number",
                                validation: {
                                    required: true,
                                    min: 1
                                }
                            },
                            Discontinued: {
                                type: "boolean"
                            },
                            UnitsInStock: {
                                type: "number",
                                validation: {
                                    min: 0,
                                    required: true
                                }
                            }
                        }
                    }
                }
            },
            filterMenuInit: function(e) {
                if (e.field === "UnitPrice" || e.field === "UnitsInStock") {
                    var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
                    filterMultiCheck.container.empty();
                    filterMultiCheck.checkSource.sort({
                        field: e.field,
                        dir: "asc"
                    });

                    filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
                    filterMultiCheck.createCheckBoxes();

                    var popup = $(e.container[0]).data("kendoPopup");
                    popup.bind("close", function(e) {
                        if (scroll) {
                            e.preventDefault(); //prevent popup closing                    
                        }
                    });
                }
            },
            filterable: true,
            pageable: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: [{
                    field: "ProductName",
                    filterable: {
                        multi: true
                    }
                },
                {
                    field: "UnitPrice",
                    title: "Unit Price",
                    format: "{0:c}",
                    width: 120,
                    filterable: {
                        multi: true
                    }
                },
                {
                    field: "UnitsInStock",
                    title: "Units In Stock",
                    width: 120,
                    filterable: {
                        multi: true
                    }
                },
                {
                    field: "Discontinued",
                    width: 120,
                    filterable: {
                        multi: true,
                        dataSource: [{
                            Discontinued: true
                        }, {
                            Discontinued: false
                        }]
                    }
                },
                {
                    command: "destroy",
                    title: "&nbsp;",
                    width: 150
                }
            ],
            editable: true
        });

        $(window).scroll(function() {
            scroll = true;
            setTimeout(function(e) {
                scroll = false;
            });
        });
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy