kendo-vue/knowledge-base/grid-add-multi-row-footer.md

title	description	type	page_title	slug	tags	res_type	category
Add Multiple Rows to the Native Grid's Footer and Display Aggregates and Custom Data	An example demonstrating how to display multiple footer rows in the Kendo UI for Vue Native Grid and display different custom data-like aggregates.	how-to	Add a Multi-Row Footer with Custom Data in the Native Grid - Kendo UI for Vue Native Grid	grid-add-multi-row-footer	grid, footer, custom footer, multirow, multiple, rows, aggregates,custom data, kendovue, native	kb	knowledge-base

Environment

Product Version	3.3.2
Product	Progress® Kendo UI for Vue Native

Description

This Knowledge base article shows how you can add a multi-row footer to the Native Grid and display custom data(like aggregates or other) in each of the rows.

KB sections

• Solution description
• Runnable example

Solution description

The below solution uses the footerCell property of the Native Grid's column. By passing custom slot templates with similar structures to the footerCell props of each column, we can create a multi-row footer for the whole Grid component.

To achieve the targeted functionality we have the following templates for the footers of each of the three columns in our Grid:

Footer template of the Product ID column

<template v-slot:footerTemplate1="{ props }">
	<div>
	<div class="first-footer-row">
		<span>&nbsp;</span>
	</div>
	<div class="second-footer-row">
		<span>&nbsp;</span>
	</div>
	<div style="padding: 2px">
		<span>&nbsp;</span>
	</div>
	</div>
</template>

Footer template of the Product Name column

<template v-slot:footerTemplate2="{ props }">
	<div>
	<div class="first-footer-row">
		<span>Custom Footer Row 1</span>
	</div>
	<div class="second-footer-row">
		<span @click="customHandler">Custom Footer Row 2</span>
	</div>
	<div style="padding: 2px">
		<span @click="customHandler">Column field: {{ props.field }}</span>
	</div>
	</div>
</template>

Footer template of the Unit Price column

<template v-slot:footerTemplate3="{ props }">
	<div>
	<div class="first-footer-row">
		<span>The sum</span>
	</div>
	<div class="second-footer-row">
		<span>of the above rows is:</span>
	</div>
	<div style="padding: 2px">
		<span @click="customHandler"> {{ unitPriceSum }} </span>
	</div>
	</div>
</template>

Each of the above templates are passed to the columns configuration of the Grid though the following object:

columns: [
  { field: 'ProductID', footerCell: 'footerTemplate1' },
  {
    field: 'ProductName',
    title: 'Product Name',
    footerCell: 'footerTemplate2',
  },
  {
    field: 'UnitPrice',
    title: 'Unit Price',
    footerCell: 'footerTemplate3',
  },
],

Runnable example

{% meta id:index height:400 %} {% embed_file grid-add-multi-row-footer/main.vue preview %} {% embed_file grid-add-multi-row-footer/main.js %} {% endmeta %}