Using with Kendo UI Productivity Tools

You can easily start a new project with KendoReact components by using the Kendo UI Productivity Tools Extension for Visual Studio (VS) Code.

Prerequisites

• React 18 (or a version >= 16.8.x)
• NodeJS—Download v18.17.1 (or a version >= 14). Use the node -v command to check your node versions.
• Visual Studio Code.

Install VS Code Extensions

You can install the Kendo UI Productivity Tools extension for Visual Studio Code through:

• The Visual Studio Marketplace.

• The Extensions tab in Visual Studio Code:

  1. Search for Kendo UI Productivity Tools.
  2. Select the extension from the results list.
  3. Click the Install button.

  

Create a New Project Using the Grid Template Wizard for VS Code

The Template Wizard provides pre-built templates to easily set up React applications by using the KendoReact components. You can follow the steps below to create a new project with a Grid template:

1. Open the VS Code Command Palette (Ctrl + Shift + P for Windows and Command + Shift + P for Mac) and type Kendo UI Template Wizard in the command input.
2. In the loaded Template Wizard, set the project name and the path to it.
3. Set the type to KendoReact

1. In the Programming Language button group, select the JavaScript option.
2. Add a Grid template from the Select pages for your application section.
3. In the final step you will have the option to select one of the supported KendoReact themes and start your application with it. We will choose Bootstrap for our sample project.
4. Click the Create Project button button to finish the setup.

5. Install the NPM dependencies by typing npm install in the terminal. 6. Run the application by typing npm start in the terminal. 7. Navigate to http://localhost:3000/grid to see the KendoReact Grid page.

You can also check the detailed guide for the Kendo UI Template Wizard for VS Code.

Use a Code Snippet to Add a DropDownList to the Project

The Kendo UI Productivity Tools extension for Visual Studio (VS) Code provides a set of code snippets allowing you to add the components directly to the source code of your project.

Following the steps below, we will add a DropDownListcomponent just above the Grid in the already created project:

1. Open the src/components/Grid.jsx file in the created project and click just after the <div className="container-fluid"> tag.
2. Type the kr- snippet prefix to show the available KendoReact snippets
3. Navigate to the kr-dropdownlist snippet and press Enter

1. Make sure that the DropDownList component is imported on the page:

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

2. Use the data prop to bind the inserted DropDownList to the already defined data object set its textField prop to ProductName:

Copy Code<DropDownList data={data} textField='ProductName' />

1. Navigate to http://localhost:3000/grid to see the added DropDownList component.

You can see a full list with the code snippets available in the Kendo UI Productivity Tools extension for VS Code here.

Generate a Bar Chart by Scaffolding

Utilizing the Scaffolders functionality of the Kendo UI Productivity Tools extension for Visual Studio (VS) Code you can also generate complex KendoReact components from an interactive wizard-like user interface.

In this section you will see how to scaffold a KendoReact Bar Chart component to an existing React project. To do so:

1. Open the created MyTemplateProject project in VS Code and right-click on a the src/components folder on the project tree.
2. Select the New KendoReact Project Item option which will open the KendoReact Scaffolding tab.
3. In the loaded Item Generator set the Project Item Type to Chart, choose a name of the page and select bar for Chart Type.

4. Click the Create button to generate the Bar Chart component.

The result will be similar to:

Copy Codeimport * as React from 'react';
import { Chart, ChartSeries, ChartSeriesItem } from '@progress/kendo-react-charts';

const data = [1, 2, 3, 5, 8, 13];

const ChartPageComponent = (props) => {
  return (
    <Chart>
      <ChartSeries>
        <ChartSeriesItem data={data} name="Fibonacci" />
      </ChartSeries>
    </Chart>
  );
}

export default ChartPageComponent;

1. Navigate to http://localhost:3000/chartPage to see the added KendoReact Chart component.

Activating Your License Key

Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key.

Since version 5.16.0 (26 July 2023) of KendoReact, a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section.

To experience the full potential of the KendoReact components, follow the license activation instructions and hide the invalid/not-activated license messages and attributes. You can skip this step if your application already contains a KendoReact license file.

Suggested Links

• Getting Started with KendoReact
• The React Guide on Getting Started
• Productivity Tools VS Code Template Project Wizard
• Productivity Tools VS Code for Code Snippets
• Productivity Tools VS Code Scaffolders