From 7b6c25ff12c718294faf2652ddf99c9f689aecbd Mon Sep 17 00:00:00 2001 From: Yordan Date: Mon, 15 Apr 2024 08:35:12 +0300 Subject: [PATCH 1/8] gs-article-revamp-part1 --- docs/getting-started/index.md | 136 +++++++++++++++++----------------- 1 file changed, 67 insertions(+), 69 deletions(-) diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index fe4148b..c54dd29 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -1,5 +1,5 @@ --- -title: First Steps with JavaScript +title: First Steps (Using JavaScript) page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos description: "Get started with the Kendo UI for Vue Native Components using Vite and Composition API." slug: getting_started_javascript_composition_api @@ -8,95 +8,93 @@ heading: Get Started position: 0 --- -# Get Started with Kendo UI for Vue Native Components with JavaScript and Composition API +# Get Started with Kendo UI for Vue -In this article you’ll learn how to use Kendo UI for Vue components by building a small app that includes a Grid, a DropDownList, a Window and a design theme. +This tutorial will help you develop a simple app that includes a few native Vue components: *[Grid]*, *[Component2]*, and *[Component3]*. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api) paired with JavaScript. -The current example uses the recommended by Vue [Vite build tool](https://vitejs.dev/) + [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api). If you need Getting started information that uses `Vue Options API`, you can check [this link](slug:getting_started_javascript_options_api). +>Curious about TypeScript or the Options API? This tutorial comes in several additional variants: +>* [Kendo UI for Vue with TypeScript and the Composition API](slug:getting_started_typescript_composition_api) +>* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api) +>* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api) -## 1. Set up the Vue project -* The recommended way to start with Vue is to scaffold a project using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). To create a new Vite project use one of the following commands for NPM or Yarn. +## Create the Vue Project -Create project commands: +The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). -```sh -npm create vite@latest -``` -or -```sh -yarn create vite -``` +> You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. However, for the purposes of this tutorial, we demonstrate only NPM. -When one of the above commands is executed, the interface will ask you to apply additional configurations to your project: -1. Set the project name: -Here we can define the name of our new project. For the needs of the current article, set the name of the application as `my-app` +1. Create the Vue project: -2. Select the framework - Choose `Vue` here: -Vite Select Framework + ```sh + npm create vite@latest + ``` + -3. Select the framework variant - Choose `Javascript` to build a Vite project with Vue and Javascript. -Vite Select Framework Variant +1. Enter the project name, for example, `my-app`. -When you are ready with the above steps, to run the newly created project do the following commands: -``` - cd my-app - npm install - npm run dev -``` +1. Select the Vue framework by using the arrow keys. -## 2. Prepare the Generated Project + ```sh + ? Select a framework: » - Use arrow-keys. Return to submit. + Vanilla + > Vue + React + ... + ``` -> By default, the Vite scaffolding generates a template for Vue project that uses the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) available in the framework. If you use the [Vue Options API](https://vuejs.org/guide/introduction.html#options-api),a getting started article with it can be found on [this link](slug:getting_started_javascript_options_api). +1. Select the JavaScript framework variant -Before you start playing with Kendo UI for Vue, let’s clean up the sample app a bit. Here is a list of suggested edits: -* In the `src/components` folder, delete the `HelloWorld.vue` file -* In the src/App.vue file: - * Remove the import of the HelloWorld component + ```sh + ? Select a variant: » - Use arrow-keys. Return to submit. + TypeScript + > JavaScript + ... + ``` +1. Run the newly created project by executing the following commands: - ```js - import HelloWorld from './components/HelloWorld.vue' - ``` - * Remove the following code from the template definition: + ```sh + cd my-app + npm install + npm run dev + ``` - ```html -
- - - - - - -
- - ``` - - * Remove the following CSS styles - ```css - .logo { - height: 6em; - padding: 1.5em; - will-change: filter; - } - .logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); - } - .logo.vue:hover { - filter: drop-shadow(0 0 2em #42b883aa); - } - ``` +## Clean Up the Generated Project + +Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite: + +1. In the `src/components` folder, delete the `HelloWorld.vue` file. +1. Replace the content of the `src/App.vue` with the following: + +```html + + + + + +``` + +Now that the project is blank, you can start developing the sample application. + +## Add Application Data -Now, when we are ready with the blank Vue project, we can continue the development of our sample application. +Components like the Grid need some data that the can display, so, in this step, you will add two files with sample data: -## 3. Add Application Data +1. In the `src` folder, create a new folder called `appdata`. -Add dummy data needed by the components. Create folder `appdata` in the `src` folder. Add the following files to the `appdata` folder. +1. Create a new `src/appdata/categories.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/categories.json) and paste it into the `categories.json` file. -* Add a `src/appdata/categories.json` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/categories.json). -* Add a `src/appdata/products.json` file and copy the content from [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/products.json). +1. Create a new `src/appdata/products.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/products.json) and paste it into the `products.json` file. ## 4. Import Kendo UI for Vue components -Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the `Grid` package is `@progress/kendo-vue-grid`. +Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window. From aee38f4c68bda4738e87edfe261e1a0630af6d67 Mon Sep 17 00:00:00 2001 From: Yordan Mitev Date: Mon, 15 Apr 2024 11:54:48 +0300 Subject: [PATCH 2/8] GS revamp - part2 --- docs/getting-started/index.md | 163 +++++++--------------------------- 1 file changed, 33 insertions(+), 130 deletions(-) diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index c54dd29..90db3d3 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -1,7 +1,7 @@ --- -title: First Steps (Using JavaScript) -page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos -description: "Get started with the Kendo UI for Vue Native Components using Vite and Composition API." +title: First Steps (Composition API and JavaScript) +page_title: Get Started with Kendo UI for Vue - Kendo UI for Vue Docs & Demos +description: "Get started with the Kendo UI for Vue Native Components and build your first Data Grid by using Vite and the Composition API." slug: getting_started_javascript_composition_api brand: getting-started heading: Get Started @@ -10,7 +10,7 @@ position: 0 # Get Started with Kendo UI for Vue -This tutorial will help you develop a simple app that includes a few native Vue components: *[Grid]*, *[Component2]*, and *[Component3]*. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api) paired with JavaScript. +This tutorial will help you develop a simple app that includes a native Vue Data Grid component. To achieve this, you will build a project using [Vite](https://vitejs.dev/) and the [Vue Composition API](https://vuejs.org/guide/introduction.html#composition-api) paired with JavaScript. >Curious about TypeScript or the Options API? This tutorial comes in several additional variants: >* [Kendo UI for Vue with TypeScript and the Composition API](slug:getting_started_typescript_composition_api) @@ -66,161 +66,64 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite: -1. In the `src/components` folder, delete the `HelloWorld.vue` file. -1. Replace the content of the `src/App.vue` with the following: +1. Delete the `HelloWorld.vue` file in the `src/components` folder. +1. Remove everything in the `src/App.vue` file and leave it blank. +??? 1. Delete the `import './style.css'` line in the `src/main.js` file. -```html - - - - - -``` - -Now that the project is blank, you can start developing the sample application. +Now that the project is clean, you can start developing the sample application. ## Add Application Data Components like the Grid need some data that the can display, so, in this step, you will add two files with sample data: -1. In the `src` folder, create a new folder called `appdata`. +1. In the `src` folder, create a new folder called `appdata` where you will place the JSON files with the data. 1. Create a new `src/appdata/categories.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/categories.json) and paste it into the `categories.json` file. 1. Create a new `src/appdata/products.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/products.json) and paste it into the `products.json` file. -## 4. Import Kendo UI for Vue components - -Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. - -Kendo UI for Vue is a rich suite of many modular components. For our dashboard example, we’ll use three of these components: The Grid, the DropDownList and the Window. - -Let’s add the mentioned components’ packages and their dependencies: -```sh -npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing @progress/kendo-svg-icons @progress/kendo-vue-indicators -``` -or -```sh -yarn add @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing @progress/kendo-svg-icons @progress/kendo-vue-indicators -``` -With the above, we not only add the packages of the `Grid` and `DropDownList` but also add another important package – `kendo-data-query`. It contains useful functions for client-side data operations. - -To install the Window component run the following: -```sh -npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons -``` -or -```sh -yarn add @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons -``` -## 5. Import the Kendo UI for Vue CSS styles +## Install the Data Grid Component -Kendo UI for Vue includes four gorgeous themes, which are all available as separate NPM packages. The available theme packages are [@progress/kendo-theme-default](https://www.npmjs.com/package/@progress/kendo-theme-default), [@progress/kendo-theme-bootstrap](https://www.npmjs.com/package/@progress/kendo-theme-bootstrap), [@progress/kendo-theme-material](https://www.npmjs.com/package/@progress/kendo-theme-material) and [@progress/kendo-theme-fluent](https://www.npmjs.com/package/@progress/kendo-theme-fluent). +Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. To use the Grid in your app, add the component and its dependencies: -Let’s take the Default theme and install it just like we did with the component packages: ```sh -npm install --save @progress/kendo-theme-default +npm install --save @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup ``` -or - + -You can also use the `default-item` property to display a hint for the users when no item is selected. The default item should have a field that matches the `text-field` name. +## Import the Kendo UI for Vue CSS Styles -To show a little more of the DropDownList in action, update the `src/App.vue` file to use the below code. -```html - +Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) available as separate NPM packages. To style the components, you can use each theme as is or [customize](slug:customizingthemes) it to your liking. - -``` -The above code additionally renders the ID of the selected category next to the `DropDownList`. You do this by defining a `dropdownlistCategory` field in the data options and implementing an [onChange](slug:api_dropdowns_dropdownlistchangeevent) handler to set it. +1. In the `src/App.vue` file, import the CSS files provided by the installed theme package: -> With the things added above, you can already test the Native DropDownList component. If you need a basic test of the `Kendo UI for Vue Native` suite, you can stop here or continue further with the more complex scenario where the [Grid](slug:overview_grid) and [Window](slug:overview_window) components are used. + ```js + import '@progress/kendo-theme-default/dist/all.css'; + ``` -## 7. Add a Kendo UI for Vue Data Grid +You can add any additional custom styles in the `` tag of the `src/App.vue` file. -Now that you’ve seen what a basic Kendo UI for Vue component looks like, let’s next implement something more complex with the Kendo UI for Vue Data Grid. +## Add a Kendo UI for Vue Data Grid -The [Kendo UI for Vue Data Grid](slug:overview_grid) provides 100+ ready-to-use features, covering everything from paging, sorting, filtering, editing and grouping, to row and column virtualization and Excel export. In this section you’ll try out several of these features, but let’s start by seeing a simple Grid in action. -Import the `Grid` component, the `process` package and the products.json file to the `src/App.vue file`. +Import the `Grid` component, the `process` package and the `products.json` file to the `src/App.vue file`. ```js import products from './appdata/products.json'; From e8932c2a58a6c3294b4cdef4c855772e0ae81bdd Mon Sep 17 00:00:00 2001 From: Yordan Mitev Date: Mon, 15 Apr 2024 16:57:50 +0300 Subject: [PATCH 3/8] Revamp GS part3 --- docs/getting-started/index.md | 510 ++++++++-------------------------- 1 file changed, 123 insertions(+), 387 deletions(-) diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index 90db3d3..3c3211e 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -68,437 +68,173 @@ Before you start playing with Kendo UI for Vue, clean up the sample app created 1. Delete the `HelloWorld.vue` file in the `src/components` folder. 1. Remove everything in the `src/App.vue` file and leave it blank. -??? 1. Delete the `import './style.css'` line in the `src/main.js` file. +1. Delete the `import './style.css'` line in the `src/main.js` file. Now that the project is clean, you can start developing the sample application. ## Add Application Data -Components like the Grid need some data that the can display, so, in this step, you will add two files with sample data: +Components like the Grid need some data that the can display, so, in this step, you will add a file with sample data: -1. In the `src` folder, create a new folder called `appdata` where you will place the JSON files with the data. - -1. Create a new `src/appdata/categories.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/categories.json) and paste it into the `categories.json` file. +1. In the `src` folder, create a new folder called `appdata` where you will place the JSON file with the data. 1. Create a new `src/appdata/products.json` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-composition-api/src/appdata/products.json) and paste it into the `products.json` file. ## Install the Data Grid Component -Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. To use the Grid in your app, add the component and its dependencies: +Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. For example, the name of the Grid package is `@progress/kendo-vue-grid`. To use the Grid in your app, add the component and its [dependencies](https://www.telerik.com/kendo-vue-ui/components/grid/#toc-dependencies): ```sh -npm install --save @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup +npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-licensing @progress/kendo-vue-animation @progress/kendo-vue-data-tools @progress/kendo-vue-dateinputs @progress/kendo-vue-dropdowns @progress/kendo-vue-inputs @progress/kendo-vue-indicators @progress/kendo-vue-intl @progress/kendo-vue-popup ``` -## Import the Kendo UI for Vue CSS Styles +## Import the CSS Styles Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) available as separate NPM packages. To style the components, you can use each theme as is or [customize](slug:customizingthemes) it to your liking. 1. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/): - ```sh - npm install --save @progress/kendo-theme-default - ``` - + ```sh + npm install --save @progress/kendo-theme-default + ``` + 1. In the `src/App.vue` file, import the CSS files provided by the installed theme package: - ```js - import '@progress/kendo-theme-default/dist/all.css'; - ``` + ```js + import '@progress/kendo-theme-default/dist/all.css'; + ``` You can add any additional custom styles in the `` tag of the `src/App.vue` file. -## Add a Kendo UI for Vue Data Grid - -In this section you’ll try out several of these features, but let’s start by seeing a simple Grid in action. - -Import the `Grid` component, the `process` package and the `products.json` file to the `src/App.vue file`. - -```js -import products from './appdata/products.json'; -import { process } from '@progress/kendo-data-query'; -import { Grid } from '@progress/kendo-vue-grid'; -``` - -Add the code below to create a Grid bound to your list of products. Add it right after the `

` that contains the DropDownList in the template inside the `src/App.vue` file. - -```html - -``` - -Define the Grid component with the following code: -```js -import { defineComponent } from 'vue'; - components: { - 'dropdownlist': DropDownList, - 'grid': Grid, - }, -//.............. -``` +## Add a Vue Data Grid Component -In the data options add the following lines: - -```js -setup() { - //.............. - const products = productsData; - const columns = [ - { field: 'ProductName', title: 'Product Name' }, - { field: 'UnitPrice', title: 'Price' }, - { field: 'UnitsInStock', title: 'Units in Stock' }, - { field: 'Discontinued' } - ]; - - return { - products, columns, ........ - } -} -``` +Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application: -When your browser refreshes, you’ll see your first Grid! Pretty simple, but not quite real-world yet. - -To fill out this example, let’s use the Grid APIs to add the list of features below. Read through the features, and then grab the updated App.vue code (below) to try the updated Grid for yourself. -* Add a height style to the Grid to activate [scrolling](slug:scrollmmodes_grid). -* Add user-friendly [column titles](slug:api_grid_gridcolumnprops#toc-title). -* [Format](slug:api_grid_gridcolumnprops#toc-format) the numbers in the Price column. -* Enable [paging](slug:paging_grid) and [sorting](slug:sorting_grid). This will require a few additions to the application code, explained below. -* Display the boolean values in the Discontinued column as checkboxes. For this purpose, we will [customize the table cell rendering](slug:custom_cells_grid) via the [cell property](slug:api_grid_gridcolumnprops#toc-cell) and a custom component. - -Here is how we can implement the above functionality: -* Enable each data operation separately in the Grid declaration ( `:pageable="pageable"` and `:sortable="sortable"`). Add the following properties in the data option. - -```js -setup() { - //.............. - const pageable = ref(true); - const sortable = ref(true); - //.............. - - return { - pageable, sortable, ........ - } -} -``` -* Configure data operation settings and the initial state of the Grid data. For example: - * The initial [skip](slug:api_grid_gridprops#toc-skip) will be the first one. - * The page [size (take)](slug:api_grid_gridprops#toc-take) will be 10. - * The Grid will be [initially sorted](slug:api_grid_gridprops#toc-sort) by Product Name. - * We will save all these settings in data properties and add them to the Grid using the below code: -```js -setup() { - //.............. - const skip = ref(0); - const take = ref(10); - const sort = ref([ - { field: "ProductName", dir: "asc" } - ]); - //.............. - - return { - skip, take, sort, ........ - } -} -``` -* To display the correct Grid data, we will bind the Grid to the output of a function, rather than the `products` array directly. We will use the imported `process` function, which is part of the [kendo-data-query package](https://www.npmjs.com/package/@progress/kendo-data-query). The result of the function will be stored in the `dataResult` data property. -* Define a `dataStateChange` handler. It does two things: - * Update the state of the `take`, `skip`, `filter` and `sort` data properties after each user interaction via the `createAppState` function. - * After the data properties are updated, the second thing that the function does is to get a result from the `process` function and set it to the `dataResult` property. This will cause the Grid to refresh and display the expected data. To display the applied data changes, we have to change the `data-items` property of the Grid to `:data-items="dataResult"`. -* Define a template for the Discontinued field of the Grid. Add the following inside the grid tag in the template section of the `src/App.vue` file - -```html - -``` +1. In the `src/App.vue` file, add a ` + ``` -```js -const columns = [ - { field: 'ProductName', title: 'Product Name' }, - { field: 'UnitPrice', title: 'Price' }, - { field: 'UnitsInStock', title: 'Units in Stock' }, - { field: 'Discontinued', cell: 'discontinuedTemplate' } -]; -``` +1. Add a `