Getting Started with KendoReact

In this article, you'll learn the basics about working with KendoReact. First, you’ll complete the installation steps necessary to get KendoReact up and running. Next, you’ll see how to use multiple KendoReact components. And finally, you’ll find a few useful 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.

Installing Your First KendoReact Component

1. Creating the React App

The easiest way to start with KendoReact is to use the create-kendoreact-app tool—a thin wrapper around the popular create-react-app. The create-kendoreact-app tool provides a setup wizard that guides you through the process of creating a new React application with KendoReact components. The tool handles the following tasks for you:

  • Creates a new KendoReact project.
  • Configures the project to use TypeScript or JavaScript.
  • Optionally adds SASS support.
  • Installs a KendoReact visual theme and imports the KendoReact styles.
  • Installs all KendoReact components and makes them available for import.

To start your first KendoReact project:

  1. Use npx to fetch and run the create-kendoreact-app package.

    npx create-kendoreact-app
  2. Answer the questions in the setup wizard as demonstrated below.

    ? What is the name of your project? my-kendoreact-app
    ? Do you want to use TypeScript? No
    ? Do you want to use SASS? Yes
    ? Which Kendo UI Theme do you want to use?
    ❯ default
      bootstrap
      material

When you use the options listed above, create-kendoreact-app scaffolds the React project and configures it to use SASS. The tool also installs the KendoReact Default visual theme and imports the required CSS file. If you prefer the Bootstrap or Material theme instead, select the corresponding option in the last step.

As create-kendoreact-app creates a small app with a KendoReact Button component, let's clean up this sample app by removing the following lines from src/App.js:

  1. The imported Button and the kendoka.
  2. The handleClick event handler.
  3. Everything inside the App container div: <div className="App"> ... </div>.

The clean src/App.js will look like this:

import React from 'react';
import './App.scss';

function App() {

  return (
    <div className="App">
    </div>
  );
}

export default App;

2. Using KendoReact Components

KendoReact is a library of 100+ UI components. In this section, you’ll learn how to use one of these components, the React Calendar, in only two steps.

The create-kendoreact-app tool has already installed all KendoReact components and their dependencies. So the next step to use any of these components is importing them. 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. Import the Calendar into src/App.js.

    import { Calendar } from "@progress/kendo-react-dateinputs";
  2. Then, add the Calendar component to your markup. Now you have a fully functioning calendar in two lines of code!

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

Using any other KendoReact component is as straightforward as using the Calendar—you import the component and use the component’s markup in your apps.

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

3. Activating Your Trial or Commercial License

KendoReact is a professionally developed library distributed under a commercial license. 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 follow the tutorial below to learn how to combine multiple KendoReact components and make them work together.

Integrating Multiple KendoReact Components

KendoReact is a rich suite of modular React components. Next, you’ll use three of these components: the React Grid, React Window, and React DropDownList to build a small demo application.

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

1. Adding the KendoReact Data Grid

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

In this section, you’ll try out several Grid features, but let’s start by importing the component and adding some sample data.

  1. Import the components into your src/App.js file.

    import { Grid, GridColumn } from "@progress/kendo-react-grid";
  2. To add some sample data, create a src/products.json file, and then copy-paste this content from GitHub into the new file.

  3. Import the sample data into src/App.js.

    import products from "./products.json";
  4. Create a Grid and bind it to your list of products.

    <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 basic KendoReact Data Grid! Next, you will add the DropDownList component, and then you will use it to enable Grid filtering and several advanced features.

2. Adding the KendoReact DropDownList

Adding the KendoReact DropDownList allows you to display all available categories of products. To use the component, you must import it and bind it to data.

  1. Import the DropDownList into your src/App.js file.

    import { DropDownList } from "@progress/kendo-react-dropdowns";
  2. Create a new src/categories.json file and paste this content from GitHub. This will be the sample data for the DropDownList.

  3. Import the newly added data.

    import categories from "./categories.json";
  4. Bind the DropDownList to a list of categories from the sample data.

    <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 use an array of objects and therefore specify both the dataItemKey and textField properties.

To display a hint for the users when no item is selected, use the defaultItem property. The default item must have a field that matches the textField name.

DropDownList Code with Enabled Features

The following code represents a sample DropDownList implementation that also renders the ID of the selected category next to the DropDownList. To achieve this, define a category field in the application state and implement an onChange handler.

To see the DropDownList in use, copy the sample code below and add it to your src/App.js file.

import React, { Component } from "react";
import './App.scss';
import categories from "./categories.json";
import { DropDownList } from "@progress/kendo-react-dropdowns";

function App() {
  const [category, setCategory] = React.useState(null);

  const handleDropDownChange = React.useCallback((event) => {
    setCategory(event.target.value.CategoryID);
  }, []);

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

export default App;

3. Configuring an Advanced React Grid with DropDownList Filtering

To make this sample Grid resemble a real-world scenario, let's use a portion of the Grid APIs and add the features listed below. Here you will also learn how to enable the local data operations of the Grid and configure the already created DropDownList to filter the bound data.

Enabling Grid Features

When you familiarize yourself with the Grid API, copy-paste the updated sample App.js code in your app and see the features listed below in use.

  • To activate scrolling, add a height style to the Grid (enabled by default).

    <Grid style={{ height: "400px" }}></Grid>
  • Add user-friendly column titles.

    <GridColumn field="ProductName" title="Product Name" />
  • Format the numbers in the Price column.

    <GridColumn field="UnitPrice" title="Price" format="{0:c}" />
  • Enable paging and sorting. These features require you to enable data operations.

    <Grid pageable={true} sortable={true}></Grid>
  • Display the boolean values in the Discontinued column as checkboxes. For this purpose, you will customize the table cell rendering through the cell property and a custom checkboxColumn component.

    <Grid>
        <GridColumn field="Discontinued" cell={checkboxColumn} />
    </Grid>
    • To define the custom checkboxColumn component:

      const CheckboxColumn = (props) => {
        return (
          <td>
            <input
              type="checkbox"
              checked={props.dataItem[props.field]}
              disabled="disabled"
            />
          </td>
        );
      };
Enabling Local Data Operations

Features like sorting, filtering, and paging require you to configure data operations. As the Grid in this tutorial is bound to local (client-side) data, enable local data operations by following these steps:

  1. Enable each data operation separately in the Grid declaration (pageable={true} and sortable={true}).

  2. Configure the data operation settings and the initial state of the Grid data. For example:

  3. Define an onDataStateChange handler. Its purpose is to update dataState after each user interaction. In turn, this will cause the Grid to refresh and display the expected data.

  4. To display the correct Grid data, you bind the Grid to the output of a function, rather than the products array directly. For this purpose, import the process function from the kendo-data-query package.

    import { process } from "@progress/kendo-data-query";
  5. Finally, add Grid filtering through the DropDownList. To do that, use the existing handleDropDownChange function and add a filter descriptor to gridDataState. As the number of data items and pages will decrease, reset the page index (skip) to zero.

Sample Code with all React Grid Features Enabled

To see all these features in action, copy the updated App.js code below. This code includes the implementation for the features described above.

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

function App() {
  const [categody, setCategory] = React.useState(null);
  const [dataState, setDateState] = React.useState({
    sort: [{ field: "ProductName", dir: "asc" }],
    skip: 0,
    take: 10,
  });

  const handleDropDownChange = React.useCallback(
    (event) => {
      let newDataState = { ...dataState };
      if (event.target.value.CategoryID !== null) {
        newDataState.filter = {
          logic: "and",
          filters: [
            {
              field: "CategoryID",
              operator: "eq",
              value: event.target.value.CategoryID,
            },
          ],
        };
        newDataState.skip = 0;
      } else {
        newDataState.filter = [];
        newDataState.skip = 0;
      }

      setCategory(event.target.value.CategoryID);
      setDateState(newDataState);
    },
    [dataState]
  );

  const handleGridDataStateChange = (event) => {
    setDateState(event.dataState);
  };

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

      <Grid
        data={process(products, dataState)}
        pageable={true}
        sortable={true}
        {...dataState}
        onDataStateChange={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>
  );
};

const CheckboxColumn = (props) => {
  return (
    <td>
      <input
        type="checkbox"
        checked={props.dataItem[props.field]}
        disabled="disabled"
      />
    </td>
  );
};

export default App;

In this section, you added a robust Data Grid to your application—enhanced with paging, filtering, and sorting—and you explored the KendoReact APIs.

Feel free to explore the KendoReact Grid documentation pages to get a sense of just how many things the Grid can do. Next, let's add a KendoReact DropDownList to the React app.

4. Adding the KendoReact Window

The products array contains some fields that are not displayed in the Grid that you added previously. To display these additional product details when users select a Grid row, you’ll use the KendoReact Window. Responding to user actions and displaying information from the Grid in other React components is a very common interaction between KendoReact components.

To use the KendoReact Window in the sample application:

  1. Import the Window component.

    import { Window } from "@progress/kendo-react-dialogs";
  2. Define new windowVisible and gridClickedRow constants in your application state.

    const [windowVisible, setWindowVisible] = React.useState(false);
    const [gridClickedRow, setGridClickedRow] = React.useState({});
  3. Add a row click handler to the Grid.

    <Grid onRowClick={handleGridRowClick}></Grid>
  4. Add the handleGridRowClick function that 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 = (event) => {
      setWindowVisible(true);
      setGridClickedRow(event.dataItem);
    };
  5. Immediately after the </Grid>, add the Window declaration. Note that the Window will be rendered only if the windowVisible flag value is true.

    {
      windowVisible && (
        <Window title="Product Details" onClose={closeWindow} height={250}>
          <dl style={{ textAlign: "left" }}>
            <dt>Product Name</dt>
            <dd>{gridClickedRow.ProductName}</dd>
            <dt>Product ID</dt>
            <dd>{gridClickedRow.ProductID}</dd>
            <dt>Quantity per Unit</dt>
            <dd>{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.

    const closeWindow = React.useCallback((event) => {
      setWindowVisible(false);
    }, []);

With this code in place, try clicking a row in the grid. A custom window with additional product information appears.

With KendoReact, you get a powerful collection of React components that are easy to add to your app and solve hard problems—in this case, building a customizable cross-browser-friendly Window. That’s the power of KendoReact!

To learn more about the Window component and what it can do, see the KendoReact Window documentation.

5. Getting the Sample App 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 inspire you how to become a more productive React developer and build complex UI in no time with our professional UI library.

Resources

Let’s look at a few more tips and tools that can help you master KendoReact.

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. The complete getting started example is also available in TypeScript.

2. VS Code Extension

To help you create projects even faster, we introduced the Kendo UI Productivity Tools extension for Visual Studio Code. This extension comes with a handy template wizard that facilitates the creation of new projects and with a rich code snippet library that allows you to add KendoReact components to your project.

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 building blocks that match 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, check out our feature-packed sample applications for inspiration:

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

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!