Skip to content

Commit aee38f4

Browse files
yordan-mitevyordan-mitev
committed
GS revamp - part2
1 parent 7b6c25f commit aee38f4

File tree

1 file changed

+33
-130
lines changed

1 file changed

+33
-130
lines changed

‎docs/getting-started/index.md

Lines changed: 33 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: First Steps (Using JavaScript)
3-
page_title: Kendo UI for Vue Components Introduction - Kendo UI for Vue Docs & Demos
4-
description: "Get started with the Kendo UI for Vue Native Components using Vite and Composition API."
2+
title: First Steps (Composition API and JavaScript)
3+
page_title: Get Started with Kendo UI for Vue - Kendo UI for Vue Docs & Demos
4+
description: "Get started with the Kendo UI for Vue Native Components and build your first Data Grid by using Vite and the Composition API."
55
slug: getting_started_javascript_composition_api
66
brand: getting-started
77
heading: Get Started
@@ -10,7 +10,7 @@ position: 0
1010

1111
# Get Started with Kendo UI for Vue
1212

13-
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.
13+
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.
1414

1515
>Curious about TypeScript or the Options API? This tutorial comes in several additional variants:
1616
>* [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
6666

6767
Before you start playing with Kendo UI for Vue, clean up the sample app created by Vite:
6868

69-
1. In the `src/components` folder, delete the `HelloWorld.vue` file.
70-
1. Replace the content of the `src/App.vue` with the following:
69+
1. Delete the `HelloWorld.vue` file in the `src/components` folder.
70+
1. Remove everything in the `src/App.vue` file and leave it blank.
71+
??? 1. Delete the `import './style.css'` line in the `src/main.js` file.
7172

72-
```html
73-
<script setup>
74-
</script>
75-
76-
<template>
77-
</template>
78-
79-
<style scoped>
80-
</style>
81-
```
82-
83-
Now that the project is blank, you can start developing the sample application.
73+
Now that the project is clean, you can start developing the sample application.
8474

8575
## Add Application Data
8676

8777
Components like the Grid need some data that the can display, so, in this step, you will add two files with sample data:
8878

89-
1. In the `src` folder, create a new folder called `appdata`.
79+
1. In the `src` folder, create a new folder called `appdata` where you will place the JSON files with the data.
9080

9181
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.
9282

9383
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.
9484

95-
## 4. Import Kendo UI for Vue components
96-
97-
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`.
98-
99-
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.
100-
101-
Let’s add the mentioned components’ packages and their dependencies:
102-
```sh
103-
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
104-
```
105-
or
106-
```sh
107-
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
108-
```
109-
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.
110-
111-
To install the Window component run the following:
112-
```sh
113-
npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons
114-
```
115-
or
116-
```sh
117-
yarn add @progress/kendo-vue-dialogs @progress/kendo-licensing @progress/kendo-svg-icons
118-
```
119-
## 5. Import the Kendo UI for Vue CSS styles
85+
## Install the Data Grid Component
12086

121-
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).
87+
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:
12288

123-
Let’s take the Default theme and install it just like we did with the component packages:
12489
```sh
125-
npm install --save @progress/kendo-theme-default
90+
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
12691
```
127-
or
128-
92+
<!---
12993
```sh
130-
yarn add --save @progress/kendo-theme-default
131-
```
132-
133-
Import the CSS files from the package in the `src/App.vue` file. If needed, any additional custom styles can be added in the `<styles>` tag of the `src/App.vue` file.
134-
135-
Here is what we should add:
136-
```js
137-
import '@progress/kendo-theme-default/dist/all.css';
138-
```
139-
140-
## 6. Add a Kendo UI for Vue DropDownList
141-
Now that you have everything set up and ready to go, let’s begin using the Kendo UI for Vue components, starting with the [DropDownList](slug:overview_dropdownlist) component.
142-
Before we continue, the first thing we should do is to import the already installed DropDownList component into the `src/App.vue` file and the `appdata/categories.json` file using the following code:
143-
```js
144-
import { DropDownList } from '@progress/kendo-vue-dropdowns';
145-
import categories from './appdata/categories.json';
146-
```
147-
Add the DropDownList component with the following code:
148-
```js
149-
export default defineComponent({
150-
components: {
151-
'dropdownlist': DropDownList,
152-
},
153-
//..............
154-
```
155-
156-
After importing the component, use the code below to bind a DropDownList to a list of categories.
157-
```html
158-
<dropdownlist
159-
:data-items="categories"
160-
:data-item-key="'CategoryID'"
161-
:text-field="'CategoryName'"
162-
>
163-
</dropdownlist>
94+
yarn add @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
16495
```
165-
The data-items property of the DropDownList points to an array of objects or primitive values. In this case, you’re using an array of objects, and therefore specify both `data-item-key` and `text-field` properties.
96+
--->
16697

167-
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.
98+
## Import the Kendo UI for Vue CSS Styles
16899

169-
To show a little more of the DropDownList in action, update the `src/App.vue` file to use the below code.
170-
```html
171-
<template>
172-
<div id="app">
173-
<h1>Hello Kendo UI for Vue!</h1>
174-
<p>
175-
<dropdownlist
176-
:data-items="categories"
177-
:data-item-key="'CategoryID'"
178-
:text-field="'CategoryName'"
179-
:default-item="defaultItems"
180-
@change="handleDropDownChange"
181-
></dropdownlist>&nbsp; Selected category ID:
182-
<strong>{{ dropdownlistCategory }}</strong>
183-
</p>
184-
</div>
185-
</template>
100+
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.
186101

187-
<script>
188-
import { ref, defineComponent } from 'vue';
189-
import { categoriesData } from './appdata/categories';
190-
import { DropDownList } from '@progress/kendo-vue-dropdowns';
102+
1. Install the [Default theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/):
191103

192-
export default defineComponent({
193-
components: {
194-
dropdownlist: DropDownList,
195-
},
196-
setup() {
197-
const categories = categoriesData;
198-
const defaultItems = { CategoryID: null, CategoryName: "Product categories" };
199-
const dropdownlistCategory = ref(null);
200-
const handleDropDownChange = (e) => {
201-
dropdownlistCategory.value = e.target.value.CategoryID;
202-
};
104+
```sh
105+
npm install --save @progress/kendo-theme-default
106+
```
107+
<!---
203108

204-
return {
205-
categories, defaultItems, handleDropDownChange, dropdownlistCategory
206-
}
207-
}
109+
```sh
110+
yarn add --save @progress/kendo-theme-default
111+
```
112+
--->
208113

209-
})
210-
</script>
211-
```
212-
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.
114+
1. In the `src/App.vue` file, import the CSS files provided by the installed theme package:
213115

214-
> 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.
116+
```js
117+
import '@progress/kendo-theme-default/dist/all.css';
118+
```
215119

216-
## 7. Add a Kendo UI for Vue Data Grid
120+
You can add any additional custom styles in the `<styles>` tag of the `src/App.vue` file.
217121

218-
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.
122+
## Add a Kendo UI for Vue Data Grid
219123

220-
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.
221124
In this section you’ll try out several of these features, but let’s start by seeing a simple Grid in action.
222125

223-
Import the `Grid` component, the `process` package and the products.json file to the `src/App.vue file`.
126+
Import the `Grid` component, the `process` package and the `products.json` file to the `src/App.vue file`.
224127

225128
```js
226129
import products from './appdata/products.json';

0 commit comments

Comments
 (0)