title: kendo UI pagination
body: <p>I have specific problem in which I have two datasources.  I want to reset the pagination to 1 when I switch drop-downs from <strong>Recently Written</strong> to <strong>Recently Dined</strong>.  I think the issue is since these are coming from two different data sources the pagination doesn't refresh instead it will stay on, as an example, page 2 even after I click on a different select drop down list.</p>
  
  <p>the pagination happens here but I'm not sure how to "reset" it.<img src="https://i.stack.imgur.com/I6XwV.png" alt="Recently Dined"><img src="https://i.stack.imgur.com/vQMMq.png" alt="Recently Written"></p>
  
  <pre><code>if (this.dataSource.totalPages() &lt;= 1) {
      this.pager.element.hide();
  }
  else {
      this.pager.element.show();
  }
  </code></pre>
  
  <hr>
  
  <pre><code>jQuery(document).ready(function() {
  (function ($) {
  
      var kendo = window.kendo;
      var ui = kendo.ui,
          Grid = ui.Grid,
          DATABOUND = "dataBound";
      var
          _init = kendo.ui.Grid.fn.init;
  
  
      var CompanyGrid = Grid.extend({
          init: function (element, options) {
              var that = this;
  
              Grid.fn.init.call(that, element, options);
  
              // register custom dataBound
              that._registerDataBound();
          },
          _registerDataBound: function () {
              var that = this;
  
              that.bind(DATABOUND, function(e) {
                  if (!this.pager) {
                    return;
                  }
                  // Hides page arrows if &lt;= 1 page
                  if (this.dataSource.totalPages() &lt;= 1) {
                      this.pager.element.hide();
                  }
                  else {
                      this.pager.element.show();
                  }
              });
          }
      });
  
      ui.plugin(VengaGrid);
  }(jQuery));
  </code></pre>
  
  <p>});</p>
  
  <p>Here's the documentation: <a href="http://docs.telerik.com/kendo-ui/api/javascript/ui/pager" rel="nofollow noreferrer">http://docs.telerik.com/kendo-ui/api/javascript/ui/pager</a>
  <strong>Update</strong></p>
  
  <p>I tried </p>
  
  <pre><code> if (this.dataSource.totalPages() &lt;= 1) {
      this.pager.element.hide();
  } else {
      this.pager.page(1);
  }
  
  and got this
   &lt;error&gt;jquery.min.js:1 p.Eventjquery.min.js:14 p.Eventjquery.min.js:14 p.event.fixjquery.min.js:14 p.event.dispatchjquery.min.js:14 p.event.add.g.handle.h
  jquery.min.js:14 &lt;error&gt;
  3jquery.min.js:1 &lt;error&gt;
  2jquery.min.js:1 &lt;error&gt;
  86jquery.min.js:14 &lt;error&gt;
  jquery.js?body=1:347 Uncaught RangeError: Maximum call stack size exceeded
  </code></pre>