Getting Started
    Native Components
    Wrapper Components
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog
New to Kendo UI for Vue? Start a free 30-day trial

Environment

Product Version3.0.1
ProductProgress® Kendo UI for Vue Native

Description

This Knowledge base article shows how we can implement some of the most widely used Native Grid functionalities:

  • Data Grouping
  • Detail Template for each row
  • Localization & Globalization of the component
  • Data sorting
  • Column reordering
  • Column locking
  • Excel export
  • PDF export

KB sections

Solution description

Data grouping configuration

To make the Grid data groupable:

  1. First thing that should be done is to set the groupable property to true.
  2. To have a grouped data, by default, set a value for the group property. In the below example the value of the group property is:
group: [
   { field: 'customerID' }
],

The above will initially group Grid's data by the customerID column.

Detail Template configuration

To define a detail template use the detail property. Pass a slot template to this property. Inside the slot template, you can use a custom template that formats the detail row data. The detail slot template used in the below example is defined as follows.

<template v-slot:myTemplate="{props}">
	<custom :data-item="props.dataItem" />
</template>

Localization & Globalization

The Localization & Globalization of the component are achieved with the IntlProvider, load, LocalizationProvider, loadMessages, IntlService components and methods that are part of the @progress/kendo-vue-intl package. More details you can find on Grid's Globalization page.

Data Sorting

To make the Grid data sortable:

  1. Set the sortable property to true.
  2. To have a sorted data, by default, set a value for the sort property. In the below example the value of the sort property is:
sort: [
   { field: 'orderDate', dir: 'desc' }
]

The above will initially sort Grid's data by the orderDate column, in descending order.

Column reordering

To make Grid columns reorderable, set the reorderable property to true.

Column locking

To lock a given column in the Grid, add the locked column prop to its definition and set its value to true.

Excel export

The Excel export functionality of the data Grid is based on the saveExcel method that is part of the @progress/kendo-vue-excel-export package. More about the Export excel functionality shipped with the Kendo UI for Vue suite, you can find in our Excel Export documentation.

PDF export The PDF export in the below example is implemented with the GridPdfExport component that is part of the @progress/kendo-vue-pdf package. The content that is exported to a PDF file is wrapped in the pdfexport tag inside the template section of the main.vue file. Using the below code, the content wrapped in the pdfexport tag will be exported in the PDF file. More details about the Grid PDF Export documentation.

exportPDF () {
	const tempSort = this.sort; 
	this.sort = null;
	this.$nextTick(()=>{
		(this.$refs.gridPdfExport).save(process(orders,
		{ skip: this.skip, take: this.take }));
		this.sort = tempSort;
	})
}

Runnable example

Example
View Source
Change Theme:

In this article

Not finding the help you need?