TypeError : r.getClientRects is not a function
<p>I am trying to create a custom toolbar in KendoUI grid following this link:<a href="http://demos.telerik.com/kendo-ui/grid/toolbar-template" rel="noreferrer">http://demos.telerik.com/kendo-ui/grid/toolbar-template</a> but getting stuck with an error.</p>

<p>This is what I am trying to do in my code:</p>

<pre><code>&lt;div id="example"&gt;
    &lt;script type="text/x-kendo-template" id="template"&gt;
        &lt;div class="toolbar"&gt;
            &lt;label class="category-label" for="category"&gt;Show products by category:&lt;/label&gt;
            &lt;input type="search" id="category" style="width: 150px" /&gt;
        &lt;/div&gt;
    &lt;/script&gt;
    &lt;div id="grid"&gt;&lt;/div&gt;
    &lt;script&gt;
        $(document).ready(function () {
            var grid = $("#grid").kendoGrid({
                dataSource: {

                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: function (response) {
                            return $(response.Data).length;
                        }
                    },
                    pageSize: 10
                },
                toolbar: kendo.template($("#template").html()),
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [
                            {
                                field: "CustomerAltID",
                                filterable: true
                            },
                            {
                                field: "CustomerID",
                                title: "Customer ID"
                            },

                            {
                                field: "CustomerName",
                                title: "Customer Name",

                                template: "&lt;div class='customer-photo'" +
                                                            "style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'&gt;&lt;/div&gt;" +
                                                        "&lt;div class='customer-name'&gt;#: CustomerName #&lt;/div&gt;"
                            },
                            {
                                field: "Gender",
                                title: "Gender",
                                template: "&lt;div class='gender-photo'" +
                                                            "style='background-image: url(../Content/Images/#:data.Gender#.jpg);'&gt;&lt;/div&gt;" 

                            }
                ]
            });
            var dropDown = grid.find("#category").kendoDropDownList({
                dataTextField: "Gender",
                dataValueField: "CustomerID",
                autoBind: false,
                optionLabel: "All",
                dataSource: {

                    severFiltering: true,
                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data:"Data"
                    }
                },
                change: function () {
                    var value = this.value();
                    if (value) {
                        grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
                    } else {
                        grid.data("kendoGrid").dataSource.filter({});
                    }
                }
            });
        });
    &lt;/script&gt;
&lt;/div&gt;
</code></pre>

<p>I don't know what the problem is and its been hours  that I am unable to figure out the solution for it. </p>

<p>I am using the following versions- Jquery <strong>v-3.1</strong> and Jquery UI-<strong>1.12</strong></p>