From 641b36da7a654b2a296c4b7340653ef52ac6e86e Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Tue, 6 Aug 2024 19:56:19 +0300
Subject: [PATCH] modify steps and code snippets

---
 docs/getting-started/get-started-nuxt-3.md    |  83 ++++++++--
 .../typescript-composition-api.md             | 101 ++++++++++---
 .../getting-started/typescript-options-api.md | 143 +++++++++++-------
 3 files changed, 239 insertions(+), 88 deletions(-)

diff --git a/docs/getting-started/get-started-nuxt-3.md b/docs/getting-started/get-started-nuxt-3.md
index cb21a48..d70b1e3 100644
--- a/docs/getting-started/get-started-nuxt-3.md
+++ b/docs/getting-started/get-started-nuxt-3.md
@@ -72,6 +72,7 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
       import '@progress/kendo-theme-default/dist/all.css';
     ```
 
+To add any custom styles to your app, insert a `<styles>` tag in the `src/App.vue` file and place your styles there.
 
 ## Add a Vue Data Grid Component
 
@@ -81,7 +82,7 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
     npx nuxi add page KendoGrid
     ```
 
-1. In the `pages/KendoGrid.vue` file, add a `<script>` block and import the Grid and its data:
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to apply data operations like sorting, paging, and filtering.
 
     ```js
     import { productsData } from '../appdata/products';
@@ -101,7 +102,10 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
     </template>
     ```
 
-1. Add the Data Grid's data and columns in the `setup` section of the `KendoGrid.vue` file:
+1. In the `script` section of the `KendoGrid.vue` file:
+
+   * Load the `products` file.
+   * Define user friendly column names.
 
     ```js
     const products = productsData;
@@ -113,12 +117,40 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
     ] as GridColumnProps[];
     ```
 
-These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
+After completing all the steps above, your `App.vue` will look like this:
+
+    ```js
+    import { productsData } from '../appdata/products';
+    import { process, DataResult, State, SortDescriptor } from '@progress/kendo-data-query';
+    import { Grid as grid } from '@progress/kendo-vue-grid';
+
+    <script>
+    const products = productsData;
+    const columns = [
+      { field: 'ProductName', title: 'Product Name' },
+      { field: 'UnitPrice', title: 'Price' },
+      { field: 'UnitsInStock', title: 'Units in Stock' },
+      { field: 'Discontinued' }
+    ] as GridColumnProps[];
+    </script>
+    
+    <template>
+     <h1>Hello Kendo UI for Vue with Nuxt 3!</h1>
+     <grid :data-items="products" :columns="columns"></grid>
+    </template>
+    ```
+
+This sample code lets you run an application with a very basic Grid:
+
+1. Execute the `npm run dev` command.
+1. Navigate to the local URL displayed in the terminal.
 
 > 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).
 
     ```html
@@ -173,7 +205,7 @@ These steps let you render a very basic Grid by running `npm run dev` and naviga
     </template>
     ```
 
-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
     <script lang="ts" setup>
@@ -185,6 +217,16 @@ These steps let you render a very basic Grid by running `npm run dev` and naviga
       };
       dataResult.value = process(products, dataState);
     });
+    ```
+
+1. Inside the `script` tag 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
+    <script lang="ts" setup>
 
     const createAppState = (dataState: State) => {
       take.value = dataState.take;
@@ -201,14 +243,29 @@ These steps let you render a very basic Grid by running `npm run dev` and naviga
       });
     };
 
-    const pageable = ref(true);
-    const sortable = ref(true);
-    const skip = ref<number | undefined>(0);
-    const take = ref<number | undefined>(10);
-    const sort = ref<SortDescriptor[] | undefined>([
-      { field: 'ProductName', dir: 'asc' },
-    ]);
-    </script>
+   </script>
+    <template>
+      <grid
+        :data-items="dataResult"
+        :pageable="pageable"
+        :sortable="sortable"
+        :columns="columns"
+        :skip="skip"
+        :take="take"
+        :sort="sort"
+        @datastatechange="dataStateChange"
+      ></grid>
+    </template>
+    ```
+
+1. Re-define the Grid declaration to allow paging and sorting:
+
+    * Set Grid data to `data-items="dataResult"`&mdash;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
     <template>
       <grid
         :data-items="dataResult"
@@ -223,6 +280,8 @@ These steps let you render a very basic Grid by running `npm run dev` and naviga
     </template>
     ```
 
+That's it. You now have a Data Grid configured for paging and sorting.
+
 > 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 197d977..0d23521 100644
--- a/docs/getting-started/typescript-composition-api.md
+++ b/docs/getting-started/typescript-composition-api.md
@@ -104,7 +104,7 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
       import '@progress/kendo-theme-default/dist/all.css';
     ```
 
-You can add any additional custom styles in the `<styles>` tag of the `src/App.vue` file.
+To add any custom styles to your app, insert a `<styles>` tag in the `src/App.vue` file and place your styles there.
 
 
 
@@ -112,7 +112,7 @@ You can add any additional custom styles in the `<styles>` tag of the `src/App.v
 
 Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
 
-1. In the `src/App.vue` file, add a `<script>` block and import the Grid and its data:
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to apply data operations like sorting, paging, and filtering.
 
     ```js
       <script>
@@ -146,7 +146,10 @@ Now that you've installed all required packages, you are ready to add the Kendo
     })
     ```
 
-1. In the `setup` function, add the following lines:
+1. In the `setup` function of the Grid:
+
+   * Load the data from the `categories` and `products` files.
+   * Define user friendly column names.
 
 
     ```js
@@ -166,28 +169,55 @@ Now that you've installed all required packages, you are ready to add the Kendo
     }
     ```
 
-These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
+After completing all the steps above, your `App.vue` will look like this:
 
-> 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.
+```js
+<script>
+  import { ref, onMounted, defineComponent } from 'vue';
+  import { productsData } from './appdata/products';
+  import categories from "./appdata/categories.json";
+  import { categoriesData } from './appdata/categories';
+  import { process } from '@progress/kendo-data-query';
+  import { Grid, GridDataStateChangeEvent, GridColumnProps } from '@progress/kendo-vue-grid';
 
-## Configure the Vue Data Grid
+  export default defineComponent({
+    components: {
+      grid: Grid,
+    },
 
-Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:
+    setup() {
+      const products = productsData;
+      const categories = categoriesData;
+      const columns = [
+        { field: 'ProductName', title: 'Product Name' },
+        { field: 'UnitPrice', title: 'Price' },
+        { field: 'UnitsInStock', title: 'Units in Stock' },
+        { field: 'Discontinued' }
+      ] as GridColumnProps[];
 
-1. In the Grid declaration, add paging, sorting, and a height style that activates scrolling.
+      return {
+        columns, categories
+      }
+    }
+  };
+</script>
 
-    ```html
-    <template>
-        <h1>Hello Kendo UI for Vue!</h1>
-        <grid
-          :data-items="products"
-          :columns="columns"
-          :pageable="pageable"
-          :sortable="sortable"
-          :style="{ height: '400px' }"
-        ></grid>
-    </template>
-    ```
+<template>
+  <h1>Hello Kendo UI for Vue!</h1>
+  <grid :data-items="products" :columns="columns"></grid>
+</template>
+```
+
+This sample code lets you run an application with a very basic Grid:
+
+1. Execute the `npm run dev` command.
+1. Navigate to the local URL displayed in the terminal.
+
+> 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. Implement the paging and sorting functionality in the `setup` function:
 
@@ -234,15 +264,11 @@ Now that you have a running Grid, you are ready to use some of its basic feature
     </template>
     ```
 
-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
     <script lang="ts">
     setup() {
-      const skip = ref(0);
-      const take = ref(10);
-      const sort = ref([]);
-      const dataResult = ref({ data: [], total: 0 });
 
       onMounted(() => {
         const dataState = {
@@ -252,7 +278,20 @@ Now that you have a running Grid, you are ready to use some of its basic feature
         };
         dataResult.value = process(products, dataState);
       });
+    }
+    </script>
+    ```
+
+
+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
+    <script lang="ts">
+    setup() {
       const createAppState = (dataState) => {
         take.value = dataState.take;
         skip.value = dataState.skip;
@@ -280,7 +319,18 @@ Now that you have a running Grid, you are ready to use some of its basic feature
       };
     },
     </script>
+    ```
+  
+1. Re-define the Grid declaration to allow paging and sorting:
+
+    * Set Grid data to `data-items="dataResult"`&mdash;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
     <template>
+      <h1>Hello Kendo UI for Vue!</h1>
       <grid
         :data-items="dataResult"
         :pageable="pageable"
@@ -294,6 +344,7 @@ Now that you have a running Grid, you are ready to use some of its basic feature
     </template>
     ```
 
+That's it. You now have a Data Grid configured for paging and sorting.
 
 > 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/typescript-options-api.md b/docs/getting-started/typescript-options-api.md
index e33d106..3c13dd3 100644
--- a/docs/getting-started/typescript-options-api.md
+++ b/docs/getting-started/typescript-options-api.md
@@ -106,8 +106,7 @@ Kendo UI for Vue includes [four artfully designed themes](slug:themesandstyles)
       import '@progress/kendo-theme-default/dist/all.css';
     ```
 
-You can add any additional custom styles in the `<styles>` tag of the `src/App.vue` file.
-
+To add any custom styles to your app, insert a `<styles>` tag in the `src/App.vue` file and place your styles there.
 
 
 ## Add a Vue Data Grid Component
@@ -115,7 +114,7 @@ You can add any additional custom styles in the `<styles>` tag of the `src/App.v
 Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
 
 
-1. In the `src/App.vue` file, add a `<script>` block and import the Grid and its data:
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to apply data operations like sorting, paging, and filtering.
 
 
     ```js
@@ -148,7 +147,10 @@ Now that you've installed all required packages, you are ready to add the Kendo
     }
     ```
     
-1. In the data options add the following lines:
+1. In the `data` options of the Grid:
+
+   * Load the data from the `categories` and `products` files.
+   * Define user friendly column names.
 
     ```js
     data: function() {
@@ -174,7 +176,7 @@ These steps let you render a very basic Grid by running `npm run dev` and naviga
 
 Now that you've installed all required packages, you are ready to add the Kendo UI for Vue Data Grid to the application:
 
-1. In the `src/App.vue` file, add a `<script>` block and import the Grid and its data:
+1. In the `<script>` block of the `src/App.vue` file, import the Grid and its data. In addition, the `process` function from the [Data Query](https://www.telerik.com/kendo-vue-ui/components/dataquery/) package will allow you to use data operations like sorting, paging, and filtering.
 
     ```js
     import { products } from './appdata/products';
@@ -205,7 +207,10 @@ Now that you've installed all required packages, you are ready to add the Kendo
     }
     ```
 
-1. In the data options, add the following lines:
+1. In the `data` options of the Grid:
+
+   * Load the data from the `categories` and `products` files.
+   * Define user friendly column names.
 
     ```js
     data: function() {
@@ -222,37 +227,60 @@ Now that you've installed all required packages, you are ready to add the Kendo
     }
     ```
 
-These steps let you render a very basic Grid by running `npm run dev` and navigating to the local URL displayed in the terminal.
-
-> 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
+After completing all the steps above, your `App.vue` will look like this:
 
-Now that you have a running Grid, you are ready to use some of its basic features like sorting and paging:
+    ```js
+    <script>
+    import { products } from './appdata/products';
+    import { process } from '@progress/kendo-data-query';
+    import { Grid } from '@progress/kendo-vue-grid';
 
-1. In the Grid declaration, add paging, sorting, and a height style that activates scrolling.
+    export default {
+      name: 'App',
+      components: {
+        grid: Grid,
+      },
+    },
+    data: function() {
+      return {
+        categories: categories,
+        products: products,
+        columns: [
+          { field: 'ProductName', title: 'Product Name' },
+          { field: 'UnitPrice', title: 'Price' },
+          { field: 'UnitsInStock', title: 'Units in Stock' },
+          { field: 'Discontinued' }
+        ]
+      }
+    }
+    </script>
 
-    ```html
     <template>
-      <h1>Hello Kendo UI for Vue!</h1>
-      <grid
-        :data-items="products"
-        :columns="columns"
-        :pageable="pageable"
-        :sortable="sortable"
-        :style="{ height: '400px' }"
-      ></grid>
+    <h1>Hello Kendo UI for Vue!</h1>
+     <grid :data-items="products" :columns="columns"></grid>
     </template>
     ```
 
+This sample code lets you run an application with a very basic Grid:
+
+1. Execute the `npm run dev` command.
+1. Navigate to the local URL displayed in the terminal.
+
+> 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. Implement the paging and sorting functionality in the `data` option:
 
-    - Set the [page size (`take`)](slug:api_grid_gridprops#toc-take) to 10.
-    - Set the initial [`skip`](slug:api_grid_gridprops#toc-skip) for the paging.
-    - Set the initial [sorting](slug:api_grid_gridprops#toc-sort) by Product name.
-    - Set [`sortable`](slug:api_grid_gridprops#toc-sortable) to `true`.
-    - Set [`pageable`](slug:api_grid_gridprops#toc-pageable) to `true`.
-    - Initialize the `dataResult` empty array.
+    - Set `sortable` to `true`.
+    - Set `pageable` to `true`.
+    - Set the page size (`take`) to `10` to define how many items are rendered on each page.
+    - Set the initial `skip` value, which allows the Grid to calculate how many items to skip when paging.
+    - Set the initial sorting by product name.
+    - Initialize the `dataResult` empty array, which holds the results from the sorting and paging.
 
     ```js
     <script lang="ts">
@@ -275,20 +303,9 @@ Now that you have a running Grid, you are ready to use some of its basic feature
       }
     }
     </script>
-    <template>
-      <grid
-        :data-items="dataResult"
-        :pageable="pageable"
-        :sortable="sortable"
-        :columns="columns"
-        :skip="skip"
-        :take="take"
-        :sort="sort"
-      ></grid>
-    </template>
     ```
 
-1. Set the initial `dataState` in the `created` hook, inside the `methods` option. Handle the `dataStateChange` event and implement a `createAppState` helper method that will update the component's state based on the grid's current data state (`skip`, `take`, `sort`):
+1. Add the `created` hook. Inside, set the initial `dataState`. This allows the Grid to have the processed data ready for displaying when rendered for the first time.
 
     ```js
     <script lang="ts">
@@ -301,6 +318,17 @@ Now that you have a running Grid, you are ready to use some of its basic feature
 
       this.dataResult = process(this.products, dataState);
     },
+    </script>
+    ```
+
+1. Add the `methods` option. Inside 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
+    <script lang="ts">
     methods: {
       createAppState: function (dataState: State) {
         this.take = dataState.take;
@@ -312,20 +340,33 @@ Now that you have a running Grid, you are ready to use some of its basic feature
       },
     }
     </script>
-    <template>
-      <grid
-        :data-items="dataResult"
-        :pageable="pageable"
-        :sortable="sortable"
-        :columns="columns"
-        :skip="skip"
-        :take="take"
-        :sort="sort"
-        @datastatechange="dataStateChange"
-      ></grid>
-    </template>
     ```
 
+1. Re-define the Grid declaration to allow paging and sorting:
+
+    * Set Grid data to `data-items="dataResult"`&mdash;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
+      <template>
+        <h1>Hello Kendo UI for Vue!</h1>
+        <grid
+          :data-items="dataResult"
+          :pageable="pageable"
+          :sortable="sortable"
+          :columns="columns"
+          :skip="skip"
+          :take="take"
+          :sort="sort"
+          @datastatechange="dataStateChange"
+        ></grid>
+      </template>
+    ```
+
+That's it. You now have a Data Grid configured for paging and sorting.
+
 > 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