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
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> </span>
</div>
<div class="second-footer-row">
<span> </span>
</div>
<div style="padding: 2px">
<span> </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',
},
],