Row height in Vue Treegrid component

24 Mar 20234 minutes to read

You can customize the row height of treegrid rows through the rowHeight property. The rowHeight property is used to change the row height of entire treegrid rows.

In the below example, the rowHeight is set as ‘60px’.

app.vue

<template>
<div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex='1' childMapping='subtasks' :enableHover='false' :allowSelection='false' height='275' rowHeight=60>
            <e-columns>
                <e-column field='taskID' headerText='Task ID' textAlign='Right'  width='90'></e-column>
                <e-column field='taskName' headerText='Task Name' width='180'></e-column>
                <e-column field='startDate' headerText=' Start Date' textAlign='Right'  format='yMd' type='date' width='90'></e-column>
                <e-column field='duration' headerText='Duration' textAlign='Right'  width='80'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data () {
    return {
      data: sampleData,
    };
  },
}
</script>

Customize row height for particular row

Grid row height for particular row can be customized using the rowDataBound
event by setting the rowHeight in arguments for each row based on the requirement.

In the below example, the row height for the row with Task ID as ‘3’ is set as ‘90px’ using the rowDataBound event.

app.vue

<template>
<div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex='1' childMapping='subtasks' :rowDataBound='rowDataBound' height='275' >
            <e-columns>
                <e-column field='taskID' headerText='Task ID' textAlign='Right'  width='90'></e-column>
                <e-column field='taskName' headerText='Task Name' width='180'></e-column>
                <e-column field='startDate' headerText=' Start Date' textAlign='Right'  format='yMd' type='date' width='90'></e-column>
                <e-column field='duration' headerText='Duration' textAlign='Right'  width='80'></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data () {
    return {
      data: sampleData,
    };
  },
  methods: {
   rowDataBound: function (args) {
     if((args.data as TasKDetails).taskID === 3){
        args.rowHeight = 90;
      }
    }
}
}
</script>