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 thenode -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 Extensions tab in Visual Studio Code:
- Search for Kendo UI Productivity Tools.
- Select the extension from the results list.
- 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:
- Open the VS Code
Command Palette
(Ctrl + Shift + P
for Windows andCommand + Shift + P
for Mac) and type Kendo UI Template Wizard in the command input. - In the loaded Template Wizard, set the project name and the path to it.
- Set the type to KendoReact
- In the Programming Language button group, select the
JavaScript
option. - Add a Grid template from the Select pages for your application section.
- 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. - Click the Create Project button button to finish the setup.
- Install the NPM dependencies by typing
npm install
in the terminal. - Run the application by typing
npm start
in the terminal. - 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:
- Open the
src/components/Grid.jsx
file in the created project and click just after the<div className="container-fluid">
tag. - Type the
kr-
snippet prefix to show the available KendoReact snippets - Navigate to the
kr-dropdownlist
snippet and pressEnter
- Make sure that the
DropDownList
component is imported on the page:jsximport { DropDownList } from '@progress/kendo-react-dropdowns';
- Use the
data
prop to bind the inserted DropDownList to the already defineddata
object set itstextField
prop toProductName
:
<DropDownList data={data} textField="ProductName" />
- 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:
-
Open the created
MyTemplateProject
project in VS Code and right-click on a thesrc/components
folder on the project tree. -
Select the New KendoReact Project Item option which will open the KendoReact Scaffolding tab.
-
In the loaded Item Generator set the Project Item Type to
Chart
, choose a name of the page and selectbar
for Chart Type.4. Click the Create button to generate the
Bar Chart
component.
The result will be similar to:
import * 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;
- 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.