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.

Installing Your First KendoReact Component

Prerequisites

• React 18 (or a version >= 16.8.x)
• NodeJS 18 (or a version >= 14). Use the node -v command to check your node versions.
• A bash terminal of your choice, for example, the one available in the Visual Studio Code console.

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.

Since version 5.16.0 (25 July 2023) of KendoReact, a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section. More information about the introduced changes can be found in this Invalid License section.

To experience the full potential of the KendoReact components, follow the instructions on the My License page to activate your license and hide the invalid/non-activated license attributes.

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:

   • 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.
   • You will save all these settings in the App state as dataState and apply them in bulk to the Grid with {...dataState}.

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. Building Blocks and Page Templates

Page Templates offer ready-to-use React layouts that effectively integrate the KendoReact components. These templates consist of Building Blocks, which are the individual elements that form the complete layouts. The templates and blocks streamline the development process by providing pre-designed, customizable elements. For more details, refer to the Building Blocks and Page Templates documentation.

2. ThemeBuilder

To take full control over the appearance of the KendoReact components, you can create your own styles by using ThemeBuilder.

ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the React components, you can export a zip file with the styles for your theme and use them in your React app.

3. UI Kits for Figma

KendoReact comes with four UI Kits for Figma: Material, Bootstrap, Fluent, 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.

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

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

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