Implement Multifunctional Native Grid with Grouping, Detail Template, Localization, Sorting, PDF and Excel Export

Environment

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
• Runnable example

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:

Copy Codegroup: [
   { 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.

Copy Code<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:

Copy Codesort: [
   { 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.

Copy CodeexportPDF () {
	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