New to Kendo UI for Vue? Start a free 30-day trial

Get Started with Kendo UI for Vue Native Components

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.

1. Set up the Vue project

  • The easiest way to start with Vue is to use its CLI. To install the Vue CLI use the below commands.

Install commands:

npm install -g @vue/cli

or

yarn global add @vue/cli
  • Once the Vue CLI is installed, use the below commands to create a project.

Create a project commands:

vue create my-app

or

vue ui

The new project can be run with the npm run serve command.

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
    import HelloWorld from './components/HelloWorld.vue'
    • Remove the HelloWorld component from the components’ definition
    • Remove the following code from the template definition:
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

2. Add JSON data

Add dummy data needed by the components. Create folder appdata in the src folder. Add the following files to the appdata folder.

  • Add a src/appdata/categories.json file and copy the content from this GitHub file.
  • Add a src/appdata/products.json file and copy the content from this GitHub file.

3. 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:

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

or

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

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:

npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing

or

yarn add @progress/kendo-vue-dialogs @progress/kendo-licensing

4. Import the Kendo UI for Vue CSS styles

Kendo UI for Vue includes three gorgeous themes, which are all available as separate NPM packages. The available theme packages are @progress/kendo-theme-default, @progress/kendo-theme-bootstrap and @progress/kendo-theme-material.

Let’s take the Default theme and install it just like we did with the component packages:

npm install --save @progress/kendo-theme-default

or

yarn add --save @progress/kendo-theme-default

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.

Here is what we should add:

import '@progress/kendo-theme-default/dist/all.css';

5. Add a Kendo UI for Vue DropDownList

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 component. 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:

import { DropDownList } from '@progress/kendo-vue-dropdowns';
import categories from './appdata/categories.json';

Add the DropDownList component with the following code:

export default {
  name: 'App',
  components: {
    'dropdownlist': DropDownList,
  },
//..............

After importing the component, use the code below to bind a DropDownList to a list of categories.

<dropdownlist
    :data-items="categories"
    :data-item-key="'CategoryID'"
    :text-field="'CategoryName'"
    >
</dropdownlist>

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.

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.

To show a little more of the DropDownList in action, update the src/App.vue file to use the below code.

<template>
  <div id="app">
    <h1>Hello Kendo UI for Vue!</h1>
    <p>
      <dropdownlist
        :data-items="categories"
        :data-item-key="'CategoryID'"
        :text-field="'CategoryName'"
        :default-item="defaultItems"
        @change="handleDropDownChange"
        >
      </dropdownlist>
      &nbsp; Selected category ID: <strong>{{this.dropdownlistCategory}}</strong>
    </p>
  </div>
</template>

<script>
import categories from './appdata/categories.json';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import '@progress/kendo-theme-default/dist/all.css';

export default {
  name: 'App',
  components: {
    'dropdownlist': DropDownList,
  },
  data: function() {
    return {
      categories: categories,
      defaultItems: {CategoryID: null, CategoryName: "Product categories"},
      dropdownlistCategory: null
     }
  },
  methods: {
      handleDropDownChange (e) {
          this.dropdownlistCategory = e.target.value.CategoryID;
      }
  }
}
</script>

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 handler to set it.

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 Grid.

6. Add a Kendo UI for Vue Data Grid

The Kendo UI for Vue 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 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 <p> that contains the DropDownList in the template inside the src/App.vue file.

<grid
  :data-items="products"
  :columns="columns"
></grid>

Define the Grid component with the following code:

export default {
  name: 'App',
  components: {
    'dropdownlist': DropDownList,
    'grid': Grid,
  },
//..............

In the data options add the following lines:

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'}
      ]
    //..............
  }
}

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.

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.
data: function() {
  return {
      //..............
      pageable: true,
      sortable: true, 
      //..............  
  }
}
  • Configure data operation settings and the initial state of the Grid data. For example:
    • The initial skip will be the first one.
    • The page size (take) will be 10.
    • The Grid will be initially sorted by Product Name.
    • We will save all these settings in data properties and add them to the Grid using the below code:
data: function() {
  return {
    //..............
    skip: 0,
    take: 10,
    sort: [
      { field: "ProductName", dir: "asc" }
    ]
    //..............
  }
}
  • 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. 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
<template v-slot:discontinuedTemplate="{ props }">
	<td colspan="1">      
		<input type="checkbox" :checked = props.dataItem.Discontinued disabled="disabled" />
	</td>
</template>

Edit the columns data property by adding the cell property for the Discontinued cell

columns: [
    { field: 'ProductName', title: 'Product Name'},
    { field: 'UnitPrice', title: 'Price' },
    { field: 'UnitsInStock', title: 'Units in Stock' },
    { field: 'Discontinued', cell: 'discontinuedTemplate' }
]
  • Finally, we will add Grid filtering via the DropDownList. To do that, we will use the existing handleDropDownChange function and add a filter descriptor to gridDataState. We also need to reset the page index (skip) to zero, as the number of data items and pages will decrease.

To try all discussed above features, copy the below code and paste it in the App.vue file of your project.

<template>
  <div id="app">
    <h1>Hello Kendo UI for Vue!</h1>
    <p>
      <dropdownlist
        :data-items="categories"
        :data-item-key="'CategoryID'"
        :text-field="'CategoryName'"
        :default-item="defaultItems"
        @change="handleDropDownChange"
        >
      </dropdownlist>
      &nbsp; Selected category ID: <strong>{{this.dropdownlistCategory}}</strong>
    </p>

    <grid
      :data-items="dataResult"
      :pageable="pageable"
      :sortable="sortable"
      :sort="sort"
      :skip="skip" 
      :take="take"
      :columns="columns"
      @datastatechange="dataStateChange"
      :style="{ height: '400px' }"
    >

      <template v-slot:discontinuedTemplate="{ props }">
              <td colspan="1">      
                    <input type="checkbox" :checked = props.dataItem.Discontinued disabled="disabled" />
              </td>
      </template> 
    </grid>

  </div>
</template>

<script>
import categories from './appdata/categories.json';
import products from './appdata/products.json';
import { process } from '@progress/kendo-data-query';
import { Grid } from '@progress/kendo-vue-grid';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import '@progress/kendo-theme-default/dist/all.css';

export default {
  name: 'App',
  components: {
    'dropdownlist': DropDownList,
    'grid': Grid
  },
  data: function() {
    return {
      categories: categories,
      products: products,
      defaultItems: {CategoryID: null, CategoryName: "Product categories"},
      dropdownlistCategory: null,
      pageable: true,
      sortable: true,
      skip: 0,
      take: 10,
      sort: [
          { field: "ProductName", dir: "asc" }
      ],
      filter: null,
      columns: [
          { field: 'ProductName', title: 'Product Name'},
          { field: 'UnitPrice', title: 'Price' },
          { field: 'UnitsInStock', title: 'Units in Stock' },
          { field: 'Discontinued', cell: 'discontinuedTemplate' }
      ],
      dataResult:[]
      }
  },
  created() {
      const dataState = {
          skip: this.skip,
          take: this.take,
          sort: this.sort,
      };

      this.dataResult = process(products, dataState);
  },
  methods: {
      handleDropDownChange (e) {
          this.dropdownlistCategory = e.target.value.CategoryID;

          if (e.target.value.CategoryID !== null) {
            this.filter = {
              logic: 'and',
              filters: [{ field: 'CategoryID', operator: 'eq', value: e.target.value.CategoryID }]
            }
            this.skip = 0
          } else {
            this.filter = []
            this.skip = 0
          }
          let event = {data:{
              skip: this.skip,
              take: this.take,
              sort: this.sort,
              filter: this.filter
          }};
          this.dataStateChange(event);
      },
      createAppState: function(dataState) {
          this.take = dataState.take;
          this.skip = dataState.skip;
          this.sort = dataState.sort;
      },
      dataStateChange (event) {
          this.createAppState(event.data);
          this.dataResult = process(products, {
              skip: this.skip,
              take: this.take,
              sort: this.sort,
              filter: this.filter
          });
      }
  }
}
</script>

In this section you were able to add a robust grid to your application—complete with paging, filtering, and sorting. Not a bad accomplishment for a few minutes' worth of work! Feel free to explore the Kendo UI for Vue Grid documentation page to get a sense of just how many things the Grid can do.

7. Add a Kendo UI for Vue Window

The products array contains some fields which are not displayed in the Grid. In this section, you’ll use the Kendo UI for Vue Window to display those additional product details when users select a Grid row.

Here are the required steps. First import the Window component:

import { Window } from '@progress/kendo-vue-dialogs';

export default {
  name: 'App',
  components: {
    //..............
    'window': Window
  },
  //..............

Next, define new windowVisible and gridClickedRow data properties.

data: function() {
  return {
    //..............
    gridClickedRow:{},
    windowVisible: false
    }
}

Next, add a row click handler to the Grid.

<grid @rowclick="rowClick">
    //..............
</grid>

After that, add the rowClick function below, which will set the windowVisible flag to true, and assign the data item of the clicked row to the gridClickedRow property. You’ll use the data item values to render the Window's content.

methods: {
    //..............
    rowClick (event){
      this.windowVisible=true;
      this.gridClickedRow=event.dataItem;
    }
    //..............
}

Next, add the following Window declaration. (Add it immediately after the Grid's definition in the template.) Notice how the Window will be rendered only if the windowVisible flag value is true.

<window v-if="windowVisible" :title="'Product Details'" @close="closeWindow" :height="250">
  <dl style="{textAlign:left}">
    <dt>Product Name</dt>
    <dd>{{gridClickedRow.ProductName}}</dd>
    <dt>Product ID</dt>
    <dd>{{gridClickedRow.ProductID}}</dd>
    <dt>Quantity per Unit</dt>
    <dd>{{gridClickedRow.QuantityPerUnit}}</dd>
  </dl>
</window>

Finally, add the following Window close handler, which will set the windowVisible flag to false when the user closes the Window.

methods: {
    //..............
    closeWindow (){
      this.windowVisible=false;
    }
}

With this code in place, try tapping on a row in the Grid. You should see a custom Window appear with additional product information.

Once again, note how simple this functionality was to implement. With Kendo UI for Vue, you get a collection of Vue components that are easy to drop in and solve hard problems—in this case, building a customizable cross-browser-friendly Window. That’s the power of Kendo UI for Vue!

You can learn more about the Window component and what it can do on the Kendo UI for Vue Window documentation page.

8. Activate Your Trial or Commercial License

Kendo UI for Vue is a professionally developed library distributed under a commercial license. Starting from version 2.0.0, using any of the UI components from the Kendo UI for Vue library requires either a commercial license key or an active trial license key.

Follow the instructions on the Kendo UI for Vue My License page to activate your license.

9. 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-examples GitHub repository. Alternatively, run, fork and experiment with the application directly in StackBlitz.

This article shows just a glimpse of what you can create with Kendo UI for Vue. We hope we’ve managed to get you excited about becoming more a productive Vue developer and building complex UI in a short time through our professional UI library. We’re in it for the long run, so dive in!"

10. VSCode Extension

To help you create projects even faster we have introduced the Kendo UI VS Code Template Wizard. To learn more about this awesome extension please check Introducing the Kendo UI Template Wizard for Visual Studio Code.