# Kendo CLI

To install:

``` bash
npm install --global @progress/kendo-cli
```

## KendoReact Project Generator

> Kendo ♥ Next.js

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

``` bash
# 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:

``` bash
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***:

``` bash
# 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***:

``` bash
# 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.

``` bash
# 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.

```bash
# 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.

```bash
# 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.

```bash
# 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.

```bash
# 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.

```bash
# 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:

```bash
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.*
