reposition EOL note, remove VR classroom note #593
Conversation
|
I added a review of Getting Started with JS and Options API as a PR: #601. |
Edit Getting Started with JS and Options API
|
|
||
| ## Add Application Data | ||
|
|
||
| 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 `appdata/categories.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/categories.ts) and paste it into the `categories.ts` file. | ||
|
|
||
| 1. Create a new `appdata/products.ts` file. Copy the content of [this GitHub file](https://github.com/telerik/kendo-vue/tree/master/getting-started-nuxt3/appdata/products.ts) and paste it into the `products.ts` file. |
There was a problem hiding this comment.
As this is a single step where you add a single file, adjust the text so that it addresses this change:
Add the dummy data needed by the components:
- In the
srcfolder, create a new folder calledappdata. - In the
appdatafolder, create a new file calledproducts.ts. - Copy the content of this GitHub file and paste it into the
products.tsfile.
|
|
||
| 1. Add a `<script>` block to the `pages/KendoGrid.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. |
There was a problem hiding this comment.
There is an existing script tag in my version of the app. Maybe we need to add the new content inside the existing tags?
| import { process, type DataResult, type State, type SortDescriptor } from '@progress/kendo-data-query'; | ||
| import { Grid as grid } from '@progress/kendo-vue-grid'; | ||
| </script> | ||
| ``` | ||
|
|
||
| 1. Add a `<template>` block with a simple heading and create a Data Grid. Bind it to the `products` data: |
There was a problem hiding this comment.
In my version of the app, the template block exists and has some content. Should we add the new content in the existing block?
<template>
<div>
Page: KendoGrid
</div>
</template>
| ] as GridColumnProps[]; | ||
| ``` | ||
|
|
||
| After completing all the steps above, your `KendoGrid.vue` will look like this: |
There was a problem hiding this comment.
- The first three imports should probably be in the
<script>block. - The content of the code snippet must be indented because it isn't rendered as a code block.
| 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. |
There was a problem hiding this comment.
The app doesn't run with this code, multiple errors are thrown about KendoGrid.vue.
| ]); | ||
| ``` | ||
| ```js | ||
| <script lang="ts"> |
There was a problem hiding this comment.
The script tag changes its lang here. It is not consistent with the previous code snippets.
I am removing the VR classroom note and moving the Vue EOL one to the bottom of the article for better readability.