Add Multiple Rows to the Native Grid's Footer and Display Aggregates and Custom Data

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

js

<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

js

<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

js

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

js

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

Runnable example

Change Theme

Theme

Loading ...