Custom tool tip for columns in Vue Treegrid component

16 Mar 20232 minutes to read

You can achieve the custom tooltip(EJ2 Tooltip) for Tree Grid by using the queryCellInfo event.

Render the ToolTip component for the Tree Grid cells by using the following code in the queryCellInfo event.

  tooltip (args) {
    let tooltip = new Tooltip({
        content: args.data[args.column.field].toString();
    }, args.cell);
}
<template>
<div id="app">
      <ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='300px' :queryCellInfo='queryCellInfoEvent' childMapping="subtasks" ref="treegrid">
        <e-columns>
          <e-column field="taskID" headerText="Task ID" width="70" textAlign="Right"></e-column>
          <e-column field="taskName" headerText="Task Name" width="100"></e-column>
          <e-column field="startDate" headerText="Start Date" format="yMd" width="90" textAlign="Right"></e-column>
          <e-column field="endDate" headerText="Start Date" format="yMd" width="90" textAlign="Right"></e-column>
          <e-column field="duration" headerText="Duration" width="90" textAlign="Right"></e-column>
        </e-columns>
       </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { Tooltip } from "@syncfusion/ej2-popups";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data() {
    return {
      data: sampleData,
    };
  },
  methods: {
    queryCellInfoEvent: function (args) {
         let tooltip = new Tooltip({
          content: args.data[args.column.field].toString()
        }, args.cell);
      },
  }
}
</script>