@progress/kendo-cli v1.3.1

Kendo CLI

To install:

npm install --global @progress/kendo-cli

KendoReact Project Generator

Kendo ♥ Next.js

To use KendoReact and create a new React project using Next.js:

# JavaScript with routing
npx kendo react create nextjs MyKendoApp --theme
# JavaScript without routing
npx kendo react create nextjs MyKendoApp --no-app
# TypeScript with routing
npx kendo react create nextjs MyKendoApp --ts
# TypeScript without routing
npx kendo react create nextjs MyKendoApp --ts --no-app

Options

Language options:

• --js - Use JavaScript (default)
• --ts - Use TypeScript

Theme options:

• --theme=default
• --theme=bootstrap
• --theme=material

Other:

• --eslint - Initialize with eslint config.
• --no-app - Initialize as no App Router project.
• --no-src-dir - Initialize without a src/ directory.
• --import-alias="@/*" - Specify import alias to use.

Build and Run

After the project is generated, navigate into the new directory, install packages, build and run:

cd MyKendoApp
npm install
npm run dev

KendoReact Project Generator Synopsis

kendo react create nextjs [name]

Create KendoReact app based on NextJS

Positionals:
  name  Name of the generated application.   [string] [default: "KendoReactApp"]

Options:
      --help              Show help                                    [boolean]
      --version           Show version number                          [boolean]
  -v, --verbose           Set verbosity level, e.g. -vvv sets verbosity to level
                          3. max 5.                         [count] [default: 1]
  -q, --quiet             Silence output as much as possible. Sets verbosity to
                          level 0.                    [boolean] [default: false]
      --javascript, --js  Initialize as a JavaScript project.
                                                      [boolean] [default: false]
      --typescript, --ts  Initialize as a TypeScript project.
                                                      [boolean] [default: false]
      --eslint            Initialize with eslint config.
                                                      [boolean] [default: false]
      --app               Initialize as an App Router project.
                                                       [boolean] [default: true]
      --src-dir           Initialize inside a `src/` directory.
                                                       [boolean] [default: true]
      --import-alias      Specify import alias to use (default "@/*").
                                                       [string] [default: "@/*"]
      --theme             Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material"] [default: "default"]

Kendo ♥ Vite

To use KendoReact and create a new React project using Vite:

# Create KendoReact app with Vite with theme option 
npx kendo react create nextjs MyKendoApp --theme=bootstrap

# Create KendoReact app with Vite with styling option
npx kendo react create nextjs MyKendoApp --styling=Sass

Options

Styling options:

• --styling=CSS - Use CSS styling (default)
• --styling=Sass - Use Sass styling

Theme options:

• --theme=default
• --theme=bootstrap
• --theme=material

kendo react create vite [name]

Create KendoReact app with Vite.

Positionals:
  name  Name of the generated application.   [string] [default: "KendoReactApp"]

Options:
      --help              Show help                                    [boolean]
      --version           Show version number                          [boolean]
  -v, --verbose           Set verbosity level, e.g. -vvv sets verbosity to level
                          3. max 5.                         [count] [default: 1]
  -q, --quiet             Silence output as much as possible. Sets verbosity to
                          level 0.                    [boolean] [default: false]
      --typescript, --ts  Initialize as a TypeScript project.
                                                      [boolean] [default: false]
      --styling           Styling language
                              [string] [choices: "CSS", "Sass"] [default: "CSS"]
      --theme             Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material"] [default: "default"]

Kendo ♥ Astro

To use KendoReact and create a new React project using Astro:

# Create KendoReact app with Astro with theme option 
npx kendo react create astro MyKendoApp --theme=bootstrap

# Create KendoReact app with Astro with styling option
npx kendo react create astro MyKendoApp --styling=Sass

Options

Styling options:

• --styling=CSS - Use CSS styling (default)
• --styling=Sass - Use Sass styling

Theme options:

• --theme=default
• --theme=bootstrap
• --theme=material

kendo react create astro [name]

Create KendoReact app with Astro.

Positionals:
  name  Name of the generated application.   [string] [default: "KendoReactApp"]

Options:
      --help              Show help                                    [boolean]
      --version           Show version number                          [boolean]
  -v, --verbose           Set verbosity level, e.g. -vvv sets verbosity to level
                          3. max 5.                         [count] [default: 1]
  -q, --quiet             Silence output as much as possible. Sets verbosity to
                          level 0.                    [boolean] [default: false]
      --typescript, --ts  Initialize as a TypeScript project.
                                                      [boolean] [default: false]
      --styling           Styling language
                              [string] [choices: "CSS", "Sass"] [default: "CSS"]
      --theme             Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material"] [default: "default"]

Kendo jQuery Project Generator

To use Kendo UI for jQuery and create a new jQuery project using our new project templates:

1. Blank Template - A simple ASP.NET MVC project with no pages with included Kendo UI for jQuery scripts and stylesheets.

# Create Kendo UI for jQuery app with Blank Template
npx kendo jquery create jba MyjQueryBlankApp 

2. Admin Template - A complex ASP.NET MVC application with multiple views which include a Task Dashboard, Products and Performance statistics as well as an Account Settings page (back-end is not included). The project showcases many Kendo UI for jQuery components, including Grid, Charts, and many navigational components.

# Create Kendo UI for jQuery app with Admin Template 
npx kendo jquery create jqa MyjQueryAdminApp

3. *Dashboard Template - An ASP.NET MVC project which mocks a Team Efficiency report, with a ListView component that contains team members, and a Scheduler and Chart components that represent task and performance information.

# Create Kendo UI for jQuery app with Dashboard Template
npx kendo jquery create jda MyjQueryDashboardApp

4. *Dashboard Layout Template - An ASP.NET MVC project that represents various data displayed through multiple Chart components, which are placed in a TileLayout.

# Create Kendo UI for jQuery app with Dashboard Layout Template
npx kendo jquery create jdla MyjQueryDashboardLayoutApp

5. Grid Template - An ASP.NET MVC project that demonstrates a simple Grid configuration.

# Create Kendo UI for jQuery app with Grid Template
npx kendo jquery create jga MyjQueryGridApp

6. Standard Template - An ASP.NET MVC project that showcases some of the navigational components in the Kendo UI for jQuery suite, such as PanelBar, Menu, TabStrip, and TreeView.

# Create Kendo UI for jQuery app with Standard Template
npx kendo jquery create jsa MyjQueryStandardApp

Options

Theme options:

• --theme=default
• --theme=bootstrap
• --theme=material
• --theme=fluent

Build and Run

After the project is generated, navigate into the new directory, install packages, build and run:

cd MyKendojQueryApp
npm install
npm start

Kendo UI for jQuery Project Generator Synopsis

kendo jquery create [template] [name] 

Create a new jQuery app.

Commands:
  kendo jquery create jqa [name]   Create jQuery Admin app
  kendo jquery create jba [name]   Create jQuery Blank app
  kendo jquery create jda [name]   Create jQuery Dashboard app
  kendo jquery create jdla [name]  Create jQuery Dashboard Layout app
  kendo jquery create jga [name]   Create jQuery Grid app
  kendo jquery create jsa [name]   Create jQuery Standard app

Options:
      --help     Show help                                             [boolean]
      --version  Show version number                                   [boolean]
  -v, --verbose  Set verbosity level, e.g. -vvv sets verbosity to level 3. max
                 5.                                         [count] [default: 1]
  -q, --quiet    Silence output as much as possible. Sets verbosity to level 0.
                                                      [boolean] [default: false]
      --theme    Kendo theme to apply.
     [string] [choices: "default", "bootstrap", "material", "fluent"] [default: "default"]                                                  

Copyright © 2023 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.