From a6373bd51975b4a382f1fea83d48f79ebc77e529 Mon Sep 17 00:00:00 2001 From: filipKovachev Date: Thu, 4 Jul 2024 12:19:23 +0300 Subject: [PATCH 01/13] reposition EOL note, remove VR classroom note --- docs/getting-started/javascript-options-api.md | 6 ++---- docs/getting-started/typescript-composition-api.md | 7 ++----- docs/getting-started/typescript-options-api.md | 9 +++------ 3 files changed, 7 insertions(+), 15 deletions(-) diff --git a/docs/getting-started/javascript-options-api.md b/docs/getting-started/javascript-options-api.md index 5d163352..d48dd8a1 100644 --- a/docs/getting-started/javascript-options-api.md +++ b/docs/getting-started/javascript-options-api.md @@ -10,8 +10,6 @@ position: 10 # Get Started with Kendo UI for Vue -> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn). - 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 Options API](https://vuejs.org/guide/typescript/options-api) paired with JavaScript. @@ -20,8 +18,6 @@ This tutorial will help you develop a simple app that includes a native Vue Data >* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api) >* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3) -> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). - ## Create the Vue Project The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). @@ -241,6 +237,8 @@ Now that you have a running Grid, you are ready to use some of its basic feature > ``` + +> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). ## Get the Complete Source Code diff --git a/docs/getting-started/typescript-composition-api.md b/docs/getting-started/typescript-composition-api.md index 49f99030..91c7adf5 100644 --- a/docs/getting-started/typescript-composition-api.md +++ b/docs/getting-started/typescript-composition-api.md @@ -10,8 +10,6 @@ position: 20 # Get Started with Kendo UI for Vue -> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn). - 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 TypeScript. @@ -20,9 +18,6 @@ This tutorial will help you develop a simple app that includes a native Vue Data >* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api) >* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3) -> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). - - ## Create the Vue Project The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). @@ -245,6 +240,8 @@ setup() { } ``` +> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). + ## Get the Complete Source Code Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from the [kendo-vue GitHub repository](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-composition-api). Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/vite-qpxlff?file=src%2Fmain.ts). diff --git a/docs/getting-started/typescript-options-api.md b/docs/getting-started/typescript-options-api.md index 56ffca2a..5c7f5bef 100644 --- a/docs/getting-started/typescript-options-api.md +++ b/docs/getting-started/typescript-options-api.md @@ -11,9 +11,6 @@ position: 30 # Get Started with Kendo UI for Vue -> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn). - - 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://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api) paired with TypeScript. >Curious about JavaScript or the Composition API? This tutorial comes in several additional variants: @@ -21,9 +18,6 @@ This tutorial will help you develop a simple app that includes a native Vue Data >* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api) >* [Kendo UI for Vue with the Composition API and Nuxt 3](slug:getting_started_nuxt_3) - -> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). - ## Create the Vue Project The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). @@ -224,6 +218,9 @@ data: function() { } } ``` + +> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). + ## Get the Complete Source Code Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from the [kendo-vue GitHub repository](https://github.com/telerik/kendo-vue/tree/master/getting-started-typescript-options-api). Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/vite-jco3ua?file=src%2FApp.vue). From 3b9a58ceeb6c9fad89c8d18cb05ffc26cf376ff1 Mon Sep 17 00:00:00 2001 From: filipKovachev Date: Sun, 7 Jul 2024 19:35:37 +0300 Subject: [PATCH 02/13] remove yarn snipets to fix rendering --- docs/getting-started/get-started-nuxt-3.md | 10 ---------- .../getting-started/javascript-options-api.md | 17 ----------------- .../typescript-composition-api.md | 19 +++---------------- .../getting-started/typescript-options-api.md | 15 --------------- 4 files changed, 3 insertions(+), 58 deletions(-) diff --git a/docs/getting-started/get-started-nuxt-3.md b/docs/getting-started/get-started-nuxt-3.md index b93cefbb..f309e1cf 100644 --- a/docs/getting-started/get-started-nuxt-3.md +++ b/docs/getting-started/get-started-nuxt-3.md @@ -59,11 +59,6 @@ Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. ```sh 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 CSS Styles @@ -74,11 +69,6 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) ```sh npm install --save @progress/kendo-theme-default ``` - 1. In the `nuxt.config.ts` file, import the CSS files provided by the installed theme package: diff --git a/docs/getting-started/javascript-options-api.md b/docs/getting-started/javascript-options-api.md index d48dd8a1..53c66174 100644 --- a/docs/getting-started/javascript-options-api.md +++ b/docs/getting-started/javascript-options-api.md @@ -30,11 +30,6 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o ```sh npm create vite@latest ``` - 1. Enter the project name, for example, `my-app`. @@ -101,11 +96,6 @@ Kendo UI for Vue is a rich suite of many modular components. For our dashboard e ```sh 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 CSS Styles @@ -117,11 +107,6 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) ```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: @@ -131,8 +116,6 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) You can add any additional custom styles in the `` tag of the `src/App.vue` file. - - ## Add a Vue Data Grid Component Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application: diff --git a/docs/getting-started/typescript-composition-api.md b/docs/getting-started/typescript-composition-api.md index 91c7adf5..448bb292 100644 --- a/docs/getting-started/typescript-composition-api.md +++ b/docs/getting-started/typescript-composition-api.md @@ -29,12 +29,7 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o ```sh npm create vite@latest ``` - - + 1. Enter the project name, for example, `my-app`. 1. Select the Vue framework by using the arrow keys. @@ -90,11 +85,7 @@ Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. ```sh 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 CSS Styles @@ -105,11 +96,7 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) ```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: diff --git a/docs/getting-started/typescript-options-api.md b/docs/getting-started/typescript-options-api.md index 5c7f5bef..e6907e51 100644 --- a/docs/getting-started/typescript-options-api.md +++ b/docs/getting-started/typescript-options-api.md @@ -30,11 +30,6 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o ```sh npm create vite@latest ``` - 1. Enter the project name, for example, `my-app`. @@ -94,11 +89,6 @@ Kendo UI for Vue is distributed as multiple NPM packages, scoped to `@progress`. ```sh 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 CSS Styles @@ -109,11 +99,6 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) ```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: From 2e89b60eced6e81f55afe9393a44d6e411d0a9f4 Mon Sep 17 00:00:00 2001 From: filipKovachev Date: Tue, 23 Jul 2024 18:38:30 +0300 Subject: [PATCH 03/13] address feedback --- docs/getting-started/get-started-nuxt-3.md | 7 +++---- .../getting-started/javascript-options-api.md | 19 +++++++------------ .../typescript-composition-api.md | 6 ++++-- .../getting-started/typescript-options-api.md | 6 ++++-- 4 files changed, 18 insertions(+), 20 deletions(-) diff --git a/docs/getting-started/get-started-nuxt-3.md b/docs/getting-started/get-started-nuxt-3.md index f309e1cf..f079ecc1 100644 --- a/docs/getting-started/get-started-nuxt-3.md +++ b/docs/getting-started/get-started-nuxt-3.md @@ -10,8 +10,6 @@ position: 100 # Get Started with Kendo UI for Vue -> Prefer video tutorials? How about a free Telerik UI onboarding course? Check out the [Kendo UI for Vue with TypeScript](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) training in [Telerik Virtual Classroom](https://learn.telerik.com/learn). - 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 [Nuxt 3](https://nuxt.com/docs/getting-started/introduction) @@ -20,8 +18,6 @@ This tutorial will help you develop a simple app that includes a native Vue Data >* [Kendo UI for Vue with JavaScript and the Options API](slug:getting_started_javascript_options_api) >* [Kendo UI for Vue with TypeScript and the Options API](slug:getting_started_typescript_options_api) -> Historically, all Kendo UI for Vue Native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). - ## Create the Vue Project 1. Create a Nuxt project named `my-app`: @@ -120,6 +116,8 @@ These steps let you render a very basic Grid by running `npm run dev` and naviga > Notice the `No valid license found` message and the watermark in the Grid. They are informational and encourage you to activate your trial or commercial license and to [add a license file to your application](slug:my_license_vue). Once you complete these licensing steps, the license message and the watermark will disappear. +## Configure the Vue Data Grid + Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging: 1. In the Grid declaration, add [paging](slug:paging_grid), [sorting](slug:sorting_grid), and a height style that activates [scrolling](slug:scrollmmodes_grid). @@ -152,6 +150,7 @@ const sort = ref([ ]); ``` +> Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). ## Get the Complete Source Code diff --git a/docs/getting-started/javascript-options-api.md b/docs/getting-started/javascript-options-api.md index 53c66174..c78b4606 100644 --- a/docs/getting-started/javascript-options-api.md +++ b/docs/getting-started/javascript-options-api.md @@ -66,25 +66,18 @@ 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. Clear the script tag in `src/App.vue` for Options API configuration: - ```html-no-run - - ``` Now that the project is clean, you can start developing the sample application. - ## Add Application Data Components like the Grid need some data that they 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 file with the 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-options-api/src/appdata/categories.json).json) and paste it into the `products.json` file. +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-options-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-options-api/src/appdata/products.json). -json) and paste it into the `products.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-options-api/src/appdata/products.json) and paste it into the `products.json` file. ## Install the Data Grid Component @@ -108,7 +101,7 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles) npm install --save @progress/kendo-theme-default ``` -1. In the `src/App.vue` file, import the CSS files provided by the installed theme package: +1. In the `src/App.vue` file, add a ` + + ``` + +1. Set the initial `dataState` in the `onMounted` hook and handle the `dataStateChange` event. Implement a `createAppState` helper method that will update the component's state based on the grid's current data state (`skip`, `take`, `sort`): + + ```js + + + ``` > Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). diff --git a/docs/getting-started/javascript-options-api.md b/docs/getting-started/javascript-options-api.md index c78b4606..e8fdc228 100644 --- a/docs/getting-started/javascript-options-api.md +++ b/docs/getting-started/javascript-options-api.md @@ -7,34 +7,34 @@ brand: getting-started heading: Get Started position: 10 --- - + # Get Started with Kendo UI for Vue - + 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 Options API](https://vuejs.org/guide/typescript/options-api) paired with JavaScript. - - + + >Curious about TypeScript or the Composition 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 the Composition API and Nuxt 3](slug:getting_started_nuxt_3) - + ## Create the Vue Project - + The recommended way to scaffold your Vue project is using [Vite](https://vuejs.org/guide/scaling-up/tooling.html#vite). - - + + > You can use both NPM and Yarn to create the project and import the Kendo UI for Vue components. This tutorial demonstrates only the NPM approach. - + 1. Create the Vue project: - + ```sh npm create vite@latest ``` - + 1. Enter the project name, for example, `my-app`. - + 1. Select the Vue framework by using the arrow keys. - + ```sh ? Select a framework: » - Use arrow-keys. Return to submit. Vanilla @@ -42,9 +42,9 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o React ... ``` - + 1. Select the JavaScript framework variant. - + ```sh ? Select a variant: » - Use arrow-keys. Return to submit. TypeScript @@ -52,180 +52,235 @@ The recommended way to scaffold your Vue project is using [Vite](https://vuejs.o ... ``` 1. Run the newly created project by executing the following commands: - + ```sh cd my-app npm install npm run dev ``` - + ## Clean Up the Generated Project - + Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite: - + 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. - + Now that the project is clean, you can start developing the sample application. - + ## Add Application Data - + Components like the Grid need some data that they 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-options-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-options-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](https://www.telerik.com/kendo-vue-ui/components/grid/#toc-dependencies): - + 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. - + ```sh 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 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 ``` - -1. In the `src/App.vue` file, add a ` - ``` - -> Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). +1. Set the initial `dataState` in the `created` hook, inside the `methods` option handle the `dataStateChange` event. Implement a `createAppState` helper method that will update the component's state based on the grid's current data state (`skip`, `take`, `sort`): + ```js + + + ``` + +> Historically, all Kendo UI for Vue native components have supported both **Vue 2** and **Vue 3**. However, Kendo UI for Vue versions released after **November 2024** will no longer support Vue 2. For more information, see [Vue 2 End of Life](https://www.telerik.com/kendo-vue-ui/components/vue2-deprecation/). + + ## Get the Complete Source Code - + Your Kendo UI for Vue Getting Started application is complete! You can download and run the complete sample application from the [kendo-vue GitHub repository](https://github.com/telerik/kendo-vue/tree/master/getting-started-javascript-options-api). Alternatively, run, fork and [experiment with the application directly in StackBlitz](https://stackblitz.com/edit/vue3-vite-starter-75eowq?file=src%2FApp.vue). - - + + ## Next Steps - + * [Activate Your Kendo UI for Vue License](slug:my_license_vue) * [Create Projects Faster with the Kendo UI for Vue VS Code Extension](slug:getting_started_vscode) * [Take a Free Entry-Level Kendo UI for Vue (with TypeScript) Course](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript) \ No newline at end of file diff --git a/docs/getting-started/typescript-composition-api.md b/docs/getting-started/typescript-composition-api.md index 0a173547..197d977d 100644 --- a/docs/getting-started/typescript-composition-api.md +++ b/docs/getting-started/typescript-composition-api.md @@ -117,52 +117,55 @@ Now that you've installed all required packages, you are ready to add the Kendo ```js ``` 1. Add a ` ``` -1. Set the initial `dataState` in the `onMounted` hook and handle the `dataStateChange` event. Implement a `createAppState` helper method that will update the component's state based on the grid's current data state (`skip`, `take`, `sort`): +1. Inside the `onMounted` set the initial `dataState`. This allows the Grid to have the processed data ready for displaying when rendered for the first time. ```js + + + ``` + +1. Re-define the Grid declaration to allow paging and sorting: + + * Set Grid data to `data-items="dataResult"`—With paging enabled, the `data` option must contain only the items for the current page. + * Set the `pageable` and `sortable` props. + * Set the `skip`, `take`, and `sort` props that configure paging and sorting. + * Bind the `@datastatechange` event of the Grid to the `dataStateChange` method to handle the user interactions. + + ```html ``` -1. Set the initial `dataState` in the `setup` function and handle the `dataStateChange` event. Implement a `createAppState` helper method that will update the component's state based on the grid's current data state (`skip`, `take`, `sort`): +1. Set the initial `dataState` in the `onMounted` hook. This allows the Grid to have the processed data ready for displaying when rendered for the first time. ```js + ``` + + +1. Inside the `setup` method handle the `dataStateChange` event and implement a `createAppState` helper method: + * The `dataStateChange` event is triggered when the user interacts with the Grid and calls the `createAppState` helper method. + * The `createAppState` helper method will update the component's state based on the Grid's current data state (`skip`, `take`, `sort`). + * The `dataResult` is updated with the newly processed data and causes the Grid to re-render and display the data according to the new state. + + ```js + + ``` + +1. Re-define the Grid declaration to allow paging and sorting: + + * Set Grid data to `data-items="dataResult"`—With paging enabled, the `data` option must contain only the items for the current page. + * Set the `pageable` and `sortable` props. + * Set the `skip`, `take`, and `sort` props that configure paging and sorting. + * Bind the `@datastatechange` event of the Grid to the `dataStateChange` method to handle the user interactions. + + ```html