title: How to call the kendo ui datasource read from a Grid using React.js
body: <p>I have a Kendo UI Grid instance that has an inline DataSource making a call to a RESTful web service.</p>
  
  <p>I have set the <code>"autoBind": false</code> property of the Grid because I don't want to pull the data when the page loads.</p>
  
  <p>I want to manually trigger the <code>dataSource.read()</code> method, but don't know how to using React.</p>
  
  <p>I'm using create-react-app to set up my environment, which uses webpack.</p>
  
  <p>I would like to trigger the Grid's DataSource read method when a button is pressed.</p>
  
  <p>I have tried calling <code>this.state.grid.ds.read</code>, which should call the read method of the DataSource, but it seems to only access the property value. 
  I'm not sure if I need to get an instance of the Grid object or DataSource object so that I can call the read() method and not reference the property.</p>
  
  <p>I have tried read(), but I get an console error saying that read is not defined as a method.</p>
  
  <p><code>this.state.grid.ds.read()</code></p>
  
  <p>Below is a snippet of the code for reference:</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        gridOptions: {
          autoBind: false,
          dataSource: {
            transport: {
              read: {
                url: "http://localhost:8080/students",
                dataType: "json"
              },
              parameterMap: function(options, operation) {
                if (operation !== "read" &amp;&amp; options.models) {
                  return { models: kendo.stringify(options.models) };
                }
              }
            },
            batch: true,
            pageSize: 20,
            schema: {
              model: {
                id: "id",
                fields: {
                    id: { type: "string" },
                    firstName: { type: "string"},
                    lastName: { type: "string"},
                    country: { type: "string" }
                }
              }
            }
          },
          pageable: true,
          height: 550,
          columns: [
              { field: "id", title: "Student/Teacher" },
              { field: "firstName", title: "First Name" },
              { field: "lastName", title: "Last Name" },
              { field: "country", title: "Country" },
              { command: ["edit", "destroy"], title: "&amp;nbsp;", width: "250px" }
          ],
          editable: "inline"
        }
      }
    }
  
    refreshDS(){
       this.state.grid.ds.read
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;Welcome to React&lt;/h1&gt;
          &lt;/header&gt;
          &lt;p className="App-intro"&gt;
          &lt;button 
             onClick={this.refreshDS()}&gt; 
             Refresh Grid
          &lt;/button&gt;
          &lt;/p&gt;
          &lt;br /&gt;
          &lt;Grid 
            {...this.state.gridOptions}  /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Any help is appreciated. </p>