Get Started with KendoReact

In this article you’ll learn how to use KendoReact components by building a small app that includes a Grid, a DropDownList, a Window and a design theme.

1. Set Up the React Project

The easiest way to start with React is to use create-react-app. To scaffold your project structure, follow the installation instructions.

Copy Codenpx create-react-app my-app --use-npm
cd my-app
npm start

or

Copy Codeyarn create react-app my-app
cd my-app
yarn start

Before you start playing with KendoReact, let's clean up the sample app a bit. Here is a list of suggested edits, with the resulting src/App.js code below:

• src/App.js
  • Remove everything inside the App container div: <div className="App"> ... </div>
  • Remove the logo.svg import
  • Import {Component} in addition to React
• Remove the contents of src/App.css
• Delete src/logo.svg

Copy Codeimport React, {Component} from 'react';
import './App.css';

class App extends Component {

  render() {
    return (
      <div className="App">
        <h1>Hello KendoReact!</h1>
      </div>
    );
  }
}

export default App;

2. Add JSON Data

Let's create some dummy data for our components.

Create a src/categories.json file and copy-paste this content from GitHub inside.

Create a src/products.json file and copy-paste this content from GitHub inside.

Finally, import them in src/App.js:

Copy Codeimport categories from './categories.json';
import products from './products.json';

3. Import KendoReact Components

KendoReact is distributed as multiple NPM packages, scoped to @progress. For example, the name of the Grid package is @progress/kendo-react-grid.

KendoReact is a rich suite of many modular components. For your dashboard example, you’ll use three of these components: the Grid, the Window and the DropDownList.

1. First, let's add these components’ packages and their dependencies:

   For the Grid:

   Copy Codenpm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-data-tools @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-treeview

   or

   Copy Codeyarn add @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-drawing @progress/kendo-react-data-tools @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-treeview

   For the Window:

   Copy Codenpm install --save @progress/kendo-react-dialogs @progress/kendo-licensing

   or

   Copy Codeyarn add @progress/kendo-react-dialogs @progress/kendo-licensing

   For the DropDownList, you’re all set because you installed its package as a Grid dependency. You also installed another important package: kendo-data-query. It contains useful functions for client-side data operations.

2. Next, import the installed components into your source code. Add the following to src/App.js:

   Copy Codeimport { process } from '@progress/kendo-data-query';
   import { Grid, GridColumn } from '@progress/kendo-react-grid';
   import { DropDownList } from '@progress/kendo-react-dropdowns';
   import { Window } from '@progress/kendo-react-dialogs';

4. Import the KendoReact CSS Styles

KendoReact includes three gorgeous themes, which are all available as separate NPM packages. The available theme packages are @progress/kendo-theme-default, @progress/kendo-theme-bootstrap and @progress/kendo-theme-material.

Let’s take the Default theme and install it just like you did with the component packages:

Copy Codenpm install --save @progress/kendo-theme-default

or

Copy Codeyarn add @progress/kendo-theme-default

Next, import the CSS file from the package in src/App.js. (Add this import before your existing App.css import.)

Copy Codeimport '@progress/kendo-theme-default/dist/all.css';

If needed, any additional custom styles can go in the empty src/App.css.

5. Add a KendoReact DropDownList

Now that you have everything set up and ready to go, let’s begin using the KendoReact components, starting with the KendoReact DropDownList.

Use the code below to bind a DropDownList to a list of categories.

Copy Code<p>
  <DropDownList
    data={categories}
    dataItemKey="CategoryID"
    textField="CategoryName"
    />
</p>

The data property of the DropDownList points to an array of objects or primitive values. In this case, you’re using an array of objects, and therefore specify both dataItemKey and textField properties.

You can also use the defaultItem property to display a hint for the users when no item is selected. The default item should have a field that matches the textField name.

To show a little more of the DropDownList in action, update your code to use the version of src/App.js below:

Copy Codeimport React, {Component} from 'react';
import '@progress/kendo-theme-default/dist/all.css';
import './App.css';
import categories from './categories.json';
import products from './products.json';
import { process } from '@progress/kendo-data-query';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Window } from '@progress/kendo-react-dialogs';

class App extends Component {

  state = {
    dropdownlistCategory: null
  }

  handleDropDownChange = (e) => {
    this.setState({
      dropdownlistCategory: e.target.value.CategoryID
    });
  }

  render() {
    return (
      <div className="App">
        <h1>Hello KendoReact!</h1>
        <p>
          <DropDownList
            data={categories}
            dataItemKey="CategoryID"
            textField="CategoryName"
            defaultItem={{CategoryID: null, CategoryName: "Product categories"}}
            onChange={this.handleDropDownChange}
            />
          &nbsp; Selected category ID: <strong>{this.state.dropdownlistCategory}</strong>
        </p>
      </div>
    );
  }
}

export default App;

This code additionally renders the ID of the selected category next to the DropDownList. You do this by defining a dropdownlistCategory field in the application state and implementing an onChange handler to set it.

Now that you’ve seen what a basic KendoReact component looks like, let’s next implement something more complex with the KendoReact Grid.

6. Add a KendoReact Data Grid

The KendoReact Grid provides 100+ ready-to-use features, covering everything from paging, sorting, filtering, editing and grouping, to row and column virtualization and Excel export.

In this section you’ll try out several of these features, but let’s start by seeing a simple Grid in action.

Add the code below to create a Grid bound to your list of products. (Add it right after the <p> that contains the DropDownList.)

Copy Code<Grid
  data={products}>
  <GridColumn field="ProductName" />
  <GridColumn field="UnitPrice" />
  <GridColumn field="UnitsInStock" />
  <GridColumn field="Discontinued" />
</Grid>

When your browser refreshes, you’ll see your first Grid! Pretty simple, but not quite real-world yet.

To fill out this example, let’s use the Grid APIs to add the list of features below. Read through the features, and then grab the updated App.js code (below) to try the updated Grid for yourself.

• Add a height style to the Grid to activate scrolling.
• Add user-friendly column titles.
• Format the numbers in the Price column.
• Enable paging and sorting. This will require a few additions to the application code, explained below.
• Display the boolean values in the Discontinued column as checkboxes. For this purpose, we will customize the table cell rendering via the cell property and a custom component.

The Grid is databound to client-side data, so we will enable local data operations. This is how we do it:

• Enable each data operation separately in the Grid declaration (pageable={true} and sortable={true}).
• Configure data operation settings and the initial state of the Grid data. For example:
  • The initial page (skip) will be the first one.
  • The page size (take) will be 10.
  • The Grid will be initially sorted by Product Name.
  • We will save all these settings in the App state as this.state.gridDataState and apply them to the Grid in bulk with {...this.state.gridDataState}.
• Define an onDataStateChange handler. Its purpose is to update this.state.gridDataState after each user interaction. In turn, this will cause the Grid to refresh and display the expected data.
• To display the correct Grid data, we will bind the Grid to the output of a function, rather than the products array directly. We will use the imported process function, which is part of the kendo-data-query package.
• Finally, we will add Grid filtering via the DropDownList. To do that, we will use the existing handleDropDownChange function and add a filter descriptor to gridDataState. We also need to reset the page index (skip) to zero, as the number of data items and pages will decrease.

To try all this out, copy in this version of App.js, which has all these features implemented:

Copy Codeimport React, {Component} from 'react';
import '@progress/kendo-theme-default/dist/all.css';
import './App.css';
import categories from './categories.json';
import products from './products.json';
import { process } from '@progress/kendo-data-query';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Window } from '@progress/kendo-react-dialogs';

class App extends Component {

  state = {
    dropdownlistCategory: null,
    gridDataState: {
      sort: [
        { field: "ProductName", dir: "asc" }
      ],
      page: { skip: 0, take: 10 }
    }
  }

  handleDropDownChange = (e) => {
    let newDataState = { ...this.state.gridDataState }
    if (e.target.value.CategoryID !== null) {
      newDataState.filter = {
        logic: 'and',
        filters: [{ field: 'CategoryID', operator: 'eq', value: e.target.value.CategoryID }]
      }
      newDataState.skip = 0
    } else {
      newDataState.filter = []
      newDataState.skip = 0
    }
    this.setState({
      dropdownlistCategory: e.target.value.CategoryID,
      gridDataState: newDataState
    });
  }

  handleGridDataStateChange = (e) => {
    this.setState({gridDataState: e.data});
  }

  render() {
    return (
      <div className="App">
        <h1>Hello KendoReact!</h1>
        <p>
          <DropDownList
            data={categories}
            dataItemKey="CategoryID"
            textField="CategoryName"
            defaultItem={{CategoryID: null, CategoryName: "Product categories"}}
            onChange={this.handleDropDownChange}
            />
          &nbsp; Selected category ID: <strong>{this.state.dropdownlistCategory}</strong>
        </p>

        <Grid
          data={process(products, this.state.gridDataState)}
          pageable={true}
          sortable={true}
          {...this.state.gridDataState}
          onDataStateChange={this.handleGridDataStateChange}
          style={{ height: "400px" }}>
          <GridColumn field="ProductName" title="Product Name" />
          <GridColumn field="UnitPrice" title="Price" format="{0:c}" />
          <GridColumn field="UnitsInStock" title="Units in Stock" />
          <GridColumn field="Discontinued" cell={checkboxColumn} />
        </Grid>
      </div>
    );
  }
}

class checkboxColumn extends Component {
  render() {
    return (
        <td>
          <input type="checkbox" checked={this.props.dataItem[this.props.field]} disabled="disabled" />
        </td>
    );
  }
}

export default App;

In this section you were able to add a robust grid to your application—complete with paging, filtering, and sorting—and you were able to do so using React APIs. Not a bad accomplishment for a few minutes' worth of work!

Feel free to explore the KendoReact Grid documentation page to get a sense of just how many things the Grid can do. For now though, to wrap up, let’s look at one more powerful KendoReact component: the Window.

7. Add a KendoReact Window

The products array contains some fields which are not displayed in the Grid. In this section, you’ll use the KendoReact Window to display those additional product details when users select a Grid row.

Here are the required steps.

First, define new windowVisible and gridClickedRow fields in your application state.

Copy Codestate = {
  // ...
  windowVisible: false,
  gridClickedRow: {}
}

Next, add a row click handler to the Grid.

Copy Code<Grid onRowClick={this.handleGridRowClick}>
</Grid>

After that, add the handleGridRowClick function below, which will set the windowVisible flag to true, and save the Grid data item in the application state. You’ll use the data item values to render the Window's content.

Copy CodehandleGridRowClick = (e) => {
  this.setState({
      windowVisible: true,
      gridClickedRow: e.dataItem
  });
}

Next, add the following Window declaration. (Add it immediately after the </Grid>.) Notice how the Window will be rendered only if the windowVisible flag value is true.

Copy Code{this.state.windowVisible &&
  <Window
    title="Product Details"
    onClose={this.closeWindow}
    height={250}>
    <dl style={{textAlign:"left"}}>
      <dt>Product Name</dt>
      <dd>{this.state.gridClickedRow.ProductName}</dd>
      <dt>Product ID</dt>
      <dd>{this.state.gridClickedRow.ProductID}</dd>
      <dt>Quantity per Unit</dt>
      <dd>{this.state.gridClickedRow.QuantityPerUnit}</dd>
    </dl>
  </Window>
}

Finally, add the following Window close handler, which will set the windowVisible flag to false when the user closes the Window.

Copy CodecloseWindow = (e) => {
  this.setState({
      windowVisible: false
  });
}

With this code in place, try tapping on a row in the grid. You should see a custom window appear with additional product information.

Once again, note how simple this functionality was to implement. With KendoReact, you get a collection of React components that are easy to drop in and solve hard problems—in this case, building a customizable cross-browser-friendly Window. That’s the power of KendoReact!

You can learn more about the Window component and what it can do on the KendoReact Window documentation page.

8. Activate Your Trial or Commercial License

KendoReact is a professionally developed library distributed under a commercial license. Starting from version 4.0.0, using any of the UI components from the KendoReact library requires either a commercial license key or an active trial license key.

Follow the instructions on the KendoReact My License page to activate your license.

9. Complete Source Code

Your KendoReact Getting Started application is complete! You can download and run the complete sample application from the kendo-react-getting-started GitHub repository. Alternatively, run, fork and experiment with the application directly in StackBlitz.

This article shows just a glimpse of what you can create with KendoReact. We hope we’ve managed to get you excited about becoming more a productive React developer and building complex UI in a short time through our professional UI library. Let’s look at a few more tips and tools that can help get started with KendoReact.

10. TypeScript Support

All KendoReact components are natively written with TypeScript and provide all of the benefits of TypeScript, like typings, intellisense and many others. We have made the full getting started example available in TypeScript and you can check it out here.

11. VS Code Extension

To help you create projects even faster we have introduced the Kendo UI VS Code Template Wizard. To learn more about this awesome extension please check Introducing the Kendo UI Template Wizard for Visual Studio Code.

12. Sales Dashboard Sample App

If you want to see more KendoReact components in action, follow this tutorial demonstrating how to build a sales dashboard app using the KendoReact Data Grid, Charts, Material Theme and more.