How to call the kendo ui datasource read from a Grid using React.js

Question

I have a Kendo UI Grid instance that has an inline DataSource making a call to a RESTful web service.

I have set the "autoBind": false property of the Grid because I don't want to pull the data when the page loads.

I want to manually trigger the dataSource.read() method, but don't know how to using React.

I'm using create-react-app to set up my environment, which uses webpack.

I would like to trigger the Grid's DataSource read method when a button is pressed.

I have tried calling this.state.grid.ds.read, 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.

I have tried read(), but I get an console error saying that read is not defined as a method.

this.state.grid.ds.read()

Below is a snippet of the code for reference:

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" && 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: "&nbsp;", width: "250px" }
        ],
        editable: "inline"
      }
    }
  }

  refreshDS(){
     this.state.grid.ds.read
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
        <button 
           onClick={this.refreshDS()}> 
           Refresh Grid
        </button>
        </p>
        <br />
        <Grid 
          {...this.state.gridOptions}  />
      </div>
    );
  }
}

Any help is appreciated.

Ruepen Ruepen · Accepted Answer · 2017-10-25T14:53:53

There is a widgetInstance that is available when you make a reference to the child react component from the parent.

The parent component here being the class App and the child here being the < Grid />.

Sample code below:

<code>
   class App extends Component {
      constructor(props) {
         super(props);
     }

    refreshDS(){
        this.child.widgetInstance.dataSource.read();
    }
    ...
    render() {
      ...
      <button 
        onClick={this.refreshDS()}> 
        Refresh Grid
      </button>
      </p>
      <br />
      <Grid
        ref={instance => {this.child = instance;}}
        {...this.state.gridOptions} />
}

</code>

This snippet below is the reference that needs to be added to the Kendo UI < Grid /> component. More about this here: https://reactjs.org/docs/refs-and-the-dom.html

ref={instance => {this.child = instance;}}

The widgetInstance below is the instance object that you work with. This is called from the refreshDS() method of the App component.

this.child.widgetInstance.dataSource.read())

Once I made the reference to the child from the parent I was able to access the instance of the Grid component and cause a manual trigger of the DataSource.read() method.

How to call the kendo ui datasource read from a Grid using React.js

1 Answers