title: Kendo Grid - reloading data gives javaScript "undefined" error
body: <p>I have an Html page that displays a Kendo Grid.  The grid loads correctly when the page loads and I'd like the grid to reload data when I click the &quot;Filter&quot; button. I believe I'm handling it correctly using this function,</p>
  <pre><code> $('#filter').click(function () {
       $('#grid').data(&quot;kendoGrid&quot;).dataSource.read();
       $('#grid').data(&quot;kendoGrid&quot;).refresh();
   });
  </code></pre>
  <p>but I get this error when I click it:</p>
  <blockquote>
  <pre><code>Uncaught TypeError: Cannot read properties of undefined (reading 'dataSource')
  at HTMLAnchorElement.&lt;anonymous&gt; (RevenueByManager:241)
  at HTMLAnchorElement.dispatch (jquery.min.js:3)
  at HTMLAnchorElement.r.handle (jquery.min.js:3)
  </code></pre>
  </blockquote>
  <p>Here's a screenshot of the page</p>
  <p><a href="https://i.stack.imgur.com/aXmWK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aXmWK.png" alt="enter image description here" /></a></p>
  <p>and here's the full body</p>
  <pre><code>&lt;body&gt;
      &lt;div id=&quot;example&quot;&gt;
          &lt;hr /&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-5&quot;&gt;
                          &lt;h2&gt;Revenue By Manager&lt;/h2&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-sm-5&quot;&gt;
                          &lt;label for=&quot;Managers&quot;&gt;Managers&lt;/label&gt;
                          &lt;select asp-for=&quot;Managers&quot; asp-items=&quot;@(new MultiSelectList(Model.Managers, &quot;Key&quot;, &quot;Value&quot;))&quot; multiple rows=&quot;10&quot; class=&quot;form-select&quot;&gt;
                              &lt;option value=&quot;-1&quot; disabled=&quot;&quot; selected=&quot;&quot;&gt;--Select Manager(s) --&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-sm-2 float-end&quot;&gt;
                          &lt;label&gt;Start Date&lt;/label&gt;
                          &lt;input asp-for=&quot;StartDate&quot; class=&quot;form-control&quot; /&gt;
                          &lt;label&gt;End Date&lt;/label&gt;
                          &lt;input asp-for=&quot;EndDate&quot; class=&quot;form-control&quot; /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-12&quot;&gt;
                          &lt;a id=&quot;filter&quot; class=&quot;btn btn-primary float-end&quot;&gt;Filter&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
                      &lt;hr /&gt;
                      &lt;div id=&quot;grid&quot;&gt;&lt;/div&gt;
                      &lt;script type=&quot;text/javascript&quot;&gt;
  
                         
                          function getFilters() {
                              var filterObject = {
                                  startDate: $('#StartDate').val(),
                                  endDate: $('#EndDate').val(),
                                  ManagerIds: $('#Managers').val().join(&quot;|&quot;)
                              }
                              return filterObject;
                          }
  
                          $(&quot;#grid&quot;).kendoGrid({
                              toolbar: [&quot;excel&quot;],
                              excel: {
                                  filterable: true
                              },
                              excelExport: function (e) {
                                  e.workbook.fileName = &quot;Revenue By Manager - &quot; + new Date().toISOString();
                              },
                              dataSource: {
                                  transport: {
                                      read: { &quot;url&quot;: &quot;/Report/GetRevenueByManagerData&quot;, &quot;data&quot;: getFilters },
                                      dataType: &quot;json&quot;
                                  },
                                  aggregate: [{ field: &quot;solo&quot;, aggregate: &quot;sum&quot; },
                                      { field: &quot;solo&quot;, aggregate: &quot;sum&quot; },
                                  { field: &quot;shared&quot;, aggregate: &quot;sum&quot; },
                                  { field: &quot;senior&quot;, aggregate: &quot;sum&quot; },
                                  { field: &quot;junior&quot;, aggregate: &quot;sum&quot; },
                                  { field: &quot;servicing&quot;, aggregate: &quot;sum&quot; },
                                  { field: &quot;total&quot;, aggregate: &quot;sum&quot; }]
                              },
                              height: 600,
                              groupable: false,
                              sortable: false,
                              //filterable: {
                              //    extra: true,
                              //    operators: {
                              //        date: {
                              //            gt: &quot;Is After&quot;,
                              //            lt: &quot;Is Before&quot;,
                              //            gte: &quot;Is After or equal to&quot;,
                              //            lte: &quot;Is Before or equal to&quot;,
                              //            eq: &quot;Is Equal to&quot;,
                              //            neq: &quot;Is Not equal to&quot;,
                              //            isnull: &quot;Is Null&quot;,
                              //            isnotnull: &quot;Is Not Null&quot;
                              //        }
                              //    }
                              //},
                              //pageable: {
                              //    refresh: true,
                              //    pageSizes: true,
                              //    buttonCount: 15
                              //},
                              columns: [{
                                  field: &quot;fullName&quot;,
                                  title: &quot;Manager&quot;,
                                  footerTemplate: &quot;Total&quot;
                              }, {
                                  field: &quot;clientName&quot;,
                                  title: &quot;Client&quot;
                              }, {
                                  field: &quot;solo&quot;,
                                  title: &quot;100%&quot;,
                                  filterable: false,
                                  format: &quot;{0:c}&quot;,
                                  aggregates: [&quot;sum&quot;],
                                  footerTemplate: &quot;#=kendo.toString(sum, 'c')#&quot;
                              }, {
                                  field: &quot;shared&quot;,
                                  title: &quot;50% / 50%&quot;,
                                  filterable: false,
                                  format: &quot;{0:c}&quot;,
                                  aggregates: [&quot;sum&quot;],
                                  footerTemplate: &quot;#=kendo.toString(sum, 'c')#&quot;
                              }, {
                                  field: &quot;senior&quot;,
                                  title: &quot;Senior 75%&quot;,
                                  filterable: false,
                                  format: &quot;{0:c}&quot;,
                                  aggregates: [&quot;sum&quot;],
                                  footerTemplate: &quot;#=kendo.toString(sum, 'c')#&quot;
                              }, {
                                  field: &quot;junior&quot;,
                                  title: &quot;Junior 25%&quot;,
                                  filterable: false,
                                  format: &quot;{0:c}&quot;,
                                  aggregates: [&quot;sum&quot;],
                                  footerTemplate: &quot;#=kendo.toString(sum, 'c')#&quot;
                              }, {
                                  field: &quot;servicing&quot;,
                                  title: &quot;Servicing&quot;,
                                  filterable: false,
                                  format: &quot;{0:c}&quot;,
                                  aggregates: [&quot;sum&quot;],
                                  footerTemplate: &quot;#=kendo.toString(sum, 'c')#&quot;
                              }, {
                                  field: &quot;total&quot;,
                                  title: &quot;Total&quot;,
                                  filterable: false,
                                  format: &quot;{0:c}&quot;,
                                  aggregates: [&quot;sum&quot;],
                                  footerTemplate: &quot;#=kendo.toString(sum, 'c')#&quot;
                              }
                              ]
                          });
  
  
                          $('#filter').click(function () {
                              $('#grid').data(&quot;kendoGrid&quot;).dataSource.read();
                              $('#grid').data(&quot;kendoGrid&quot;).refresh();
                          });
  
  
                      &lt;/script&gt;
                  &lt;/div&gt;
  &lt;/body&gt;
  
  </code></pre>