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

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product Version</td>
	    	<td>3.0.1</td>
	    </tr>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Vue</td>
	    </tr>
    </tbody>
</table>

## Description

This Knowledge base article shows how we can implement some of the most widely used 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](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-grouping-detail-template-localization-sortable-reorderable#solution-description)
* [Runnable example](https://www.telerik.com/kendo-vue-ui-develop/components/knowledge-base/grid-grouping-detail-template-localization-sortable-reorderable#runnable-example)

## Solution description

**Data grouping configuration**

To make the Grid data groupable:

1. You must first set the [groupable property](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#groupable) to `true`.
2. To have a grouped data, by default, set a value for the [group property](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#group). In the below example the value of the `group` property is:

```js
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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#detail). 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.

```js
<template #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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/globalization).

**Data Sorting**

To make the Grid data sortable:

1. Set the [sortable property](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#sortable) to `true`.
2. To have a sorted data, by default, set a value for the [sort property](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#sort). In the below example the value of the `sort` property is:

```js
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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#reorderable) to true.

**Column locking**

To lock a given column in the Grid, add the [locked column prop](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#locked) 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](https://www.telerik.com/kendo-vue-ui-develop/components/excel-export).

**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](https://www.telerik.com/kendo-vue-ui-develop/components/grid/pdf).

```js
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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/knowledge-base/grid-grouping-detail-template-localization-sortable-reorderable/source.txt)