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.

KendoReact is a professionally developed commercial library of 70+ UI components built specifically for React. To try it out, you need to sign up for a 30-day trial. This gives you access to all components and features of the library, plus our legendary technical support.

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.

npx create-react-app my-app --use-npm
cd my-app
npm start

or

yarn 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
import React, {Component} from 'react';
import './App.css';

class App extends Component {

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

export default App;

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:

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

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:

    npm 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

    or

    yarn 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

    For the Window:

    npm install --save @progress/kendo-react-dialogs

    or

    yarn add @progress/kendo-react-dialogs

    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:

    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';

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:

npm install --save @progress/kendo-theme-default

or

yarn 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.)

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

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

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.

<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:

import 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.

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.)

<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:

import 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.

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.

state = {
  // ...
  windowVisible: false,
  gridClickedRow: {}
}

Next, add a row click handler to the Grid.

<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.

handleGridRowClick = (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.

{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.

closeWindow = (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.

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. We’re in it for the long run, so dive in!"

VSCode 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.

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.

Next Steps

We are sure that you are looking for more—browse the components section and discover the amazing features that KendoReact brings to the table.

Happy coding!