Detail template in Vue Grid component

16 Mar 20239 minutes to read

The detailTemplate provides an additional information about a data row which can show or hide by clicking on expand or collapse button. The detailTemplate property accepts the template for the detail row.

The detailTemplate property should be a function which returns an object. The object should contain a Vue component which should be assigned to the template property. The grid will look for the template property and render it as new Vue instance.

To use detailTemplate, inject the DetailRow in the provide section.

app.vue

<template>
    <div id="app">
        <ejs-grid :dataSource="data" :detailTemplate ='detailTemplate' >
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column>
                <e-column field='FirstName' headerText='Name' width='120'></e-column>
                <e-column field='Title' headerText='Title' width='170'></e-column>
                <e-column field='HireDate' headerText='Hire Date' width='135' textAlign='Right' format='yMd'></e-column>
                <e-column field='ReportsTo' headerText='Reports To' width='120' textAlign='Right'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
import { Internationalization } from '@syncfusion/ej2-base';

let instance = new Internationalization();

Vue.use(GridPlugin);

export default {
  data: () => {
    return {
      data: employeeData,
      detailTemplate: function () {
        return { template : Vue.component('detailTemplate',{
        template: `
       <table class="detailtable" width="100%">
        <colgroup>
            <col width="35%">
            <col width="35%">
            <col width="30%">
        </colgroup>
        <tbody>
            <tr>
                <td rowspan="4" style="text-align: center;">
                    <img class='photo' :src="image" :alt="altImage" />
                </td>
                <td>
                    <span style="font-weight: 500;">First Name: </span> 
                </td>
                <td>
                    <span style="font-weight: 500;">Postal Code: </span> 
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Last Name: </span> 
                </td>
                <td>
                    <span style="font-weight: 500;">City: </span> 
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Title: </span> 
                </td>
                <td>
                    <span style="font-weight: 500;">Phone: </span> 
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-weight: 500;">Address: </span> 
                </td>
                <td>
                    <span style="font-weight: 500;">HireDate: </span> 
                </td>
            </tr>
        </tbody>
    </table>`,
        data: function() {
            return {
              data: {}
            }
          },
        methods: {
            format: function(value) {
                return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
            }
          },
        computed: {
            image: function() {
              return './' + this.data.EmployeeID + '.png';
            },
            altImage: function() {
              return this.data.EmployeeID;
            }
          }
        })}
      }
    };
  },
  provide: {
      grid:[DetailRow]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
 .detailtable td {
        font-size: 13px;
        padding: 4px;
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .photo {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
    }

    @media screen and (max-width: 800px) and (min-width: 320px) {
        .photo {
            width: 70px;
            height: 70px;
        }
    }
</style>

Limitations for detail template

Detail template is not supported with the following features:

• Frozen rows and columns
• Immutable mode
• Infinite scrolling
• Virtual scrolling
• Pdf export
• Excel export
• Print
• Row template
• Row spanning
• Column spanning
• Lazy load grouping
• State persistence
• Hierarchy Grid