title: TypeError : r.getClientRects is not a function
body: <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>