Get Started with KendoReact

In this article you’ll learn how to get started with KendoReact. First, you’ll learn the installation steps necessary to get KendoReact up and running. Next, you’ll see how to use multiple KendoReact components by completing a short tutorial. And finally, you’ll learn about a few helping learning resources that will help you be successful with KendoReact.

Let’s get started.

New to KendoReact?

KendoReact is a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

Installation: Add KendoReact to a React app

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.

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;

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

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

The KendoReact UI components are architected in such a way that the components themselves are not tightly coupled to a specific theme. While you need to include one of these three themes, or your own custom theme, this also allows you to change the look and feel by modifying a sass or CSS file, or even swap themes for your entire application by changing a single import.

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

3. Using KendoReact Components

KendoReact is a library of 100+ UI components. In this section, we’ll use one of those components, the Calendar, to show how easy it is to install and use KendoReact components in your applications.

A first step to using any component is installing its package, and KendoReact is distributed as multiple npm packages, scoped to @progress. For example, the Calendar component is part of the @progress/kendo-react-dateinputs package.

  1. First, let's install the dateinputs package and its dependencies:

    npm install --save @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing

    or

    yarn add @progress/kendo-react-dateinputs @progress/kendo-react-intl @progress/kendo-licensing
  2. Then we have to import it inside the component where it will be used:

    import { Calendar } from '@progress/kendo-react-dateinputs'
  3. Finally add the Calendar component to your markup, and voila—you have a fully functioning calendar in two lines of code!

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

Using the many other KendoReact components is just as easy as the Calendar—all you have to do is install the appropriate npm package, import the component, and use the component’s markup in your apps.

As a final step to getting KendoReact up and running, let’s next look at how to handle licensing.

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

Now that you have a KendoReact theme installed, components imported and licensing set up, you’re ready to start developing with KendoReact! Feel free to explore the full list of KendoReact components, or to follow the tutorial below for an example of how multiple KendoReact components can work together.

Tutorial: Integrate multiple KendoReact components

KendoReact is a rich suite of many modular components. In this tutorial you’ll use three of these components, the Grid, the Window and the DropDownList, to build a small demo application.

Before continuing with the tutorial, let’s first remove the Calendar from the page so that you again have a blank app to work with.

1. 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 installing, importing the component and adding some sample data.

  1. Install the Grid package and its dependencies:

    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 @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-treeview

    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 @progress/kendo-react-animation @progress/kendo-licensing @progress/kendo-react-treeview
  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';
  3. Create a src/products.json file and copy-paste this content from GitHub inside, then import it in src/App.js.

    import products from './products.json';
  4. 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" }
      ],
      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.dataState});
  }

  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.

2. Add a KendoReact DropDownList

Now lets add the KendoReact DropDownList and display all avaialbe categories of products. We already have the package installed as it is one of the Grid dependencies. We only have to import it.

import { DropDownList } from '@progress/kendo-react-dropdowns';

We can create src/categories.json file and copy-paste this content from GitHub inside. We will use this data for the DropDownList.

Now we have to import it:

import categories from './categories.json';

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.

3. 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. This will give us a chance to see a very common interaction with the KendoReact Data Grid: responding to user interactions and displaying information from the Grid in other React components.

Here are the required steps:

  1. Install the required packages and import the Window component:

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

    or

    yarn add @progress/kendo-react-dialogs @progress/kendo-licensing
    import { Window } from '@progress/kendo-react-dialogs';
  2. Then, define new windowVisible and gridClickedRow fields in your application state.

    state = {
      // ...
      windowVisible: false,
      gridClickedRow: {}
    }
  3. Next, add a row click handler to the Grid.

    <Grid onRowClick={this.handleGridRowClick}>
    </Grid>
  4. 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
      });
    }
  5. 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>
    }
  6. 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.

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

Resources

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

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

3. UI Kits for Figma

KendoReact comes with three UI Kits for Figma: Material, Bootstrap, and Kendo UI Default. They provide the designers of your application with a building block that matches the UI components available in the KendoReact suite. Having matching building blocks guarantees the smooth implementation of the design.

Sample Applications

If you want to see more KendoReact components in action, please check our cool and interesting sample applications:

  1. Finance Portfolio Application
  2. Coffee Warehouse Dashboard Application
  3. Github Issues Grid

Next Steps

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

Happy coding!