Change header text dynamically in Vue Treegrid component

11 Jun 20245 minutes to read

You can change the column headerText dynamically through an external button.

Follow the given steps to change the header text dynamically:

Step 1:

Get the column object corresponding to the field name by using the getColumnByField method.
Then change the header Text value.

      /** get the JSON object of the column corresponding to the field name */
      let column =  this.$refs.treegrid.getColumnByField("duration");
      /** assign a new header text to the column */
      column.headerText = "Changed Text";

Step 2:

To reflect the changes in the Tree Grid header, invoke the refreshColumns method.

     this.$refs.treegrid.refreshColumns();
<template>
<div id="app">
        <ejs-button @click='changeHeader'>Change HeaderText</ejs-button>
        <ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='280px' 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="End Date" width="100" format="yMd" textAlign="Right"></e-column>
          <e-column field="duration" headerText="Duration" width="90" textAlign="Right" ></e-column>
          <e-column field="progress" headerText="Progress" width="90" textAlign="Right" ></e-column>
        </e-columns>
       </ejs-treegrid>
</div>
</template>
<script setup>

import { TreeGridComponent as EjsTreegrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { sampleData } from "./datasource.js";
import { ref } from "vue";

const treegrid = ref(null);

const data = sampleData;

const changeHeader = function() {
  let column =  treegrid.value.getColumnByField("duration");
  column.headerText = "Changed Text";
  treegrid.value.refreshColumns();
};

</script>
<template>
<div id="app">
        <ejs-button @click='changeHeader'>Change HeaderText</ejs-button>
        <ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='280px' 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="End Date" width="100" format="yMd" textAlign="Right"></e-column>
          <e-column field="duration" headerText="Duration" width="90" textAlign="Right" ></e-column>
          <e-column field="progress" headerText="Progress" width="90" textAlign="Right" ></e-column>
        </e-columns>
       </ejs-treegrid>
</div>
</template>
<script>

import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { sampleData } from "./datasource.js";

export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,

},

  data() {
    return {
      data: sampleData,
    };
  },
  methods: {
    changeHeader: function() {
      let column =  this.$refs.treegrid.getColumnByField("duration");
      column.headerText = "Changed Text";
      this.$refs.treegrid.refreshColumns();
    },
  }
}
</script>