Row height in Vue Treegrid component
11 Jun 20248 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’.
<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 setup>
import { TreeGridComponent as EjsTreegrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const data = sampleData;
</script>
<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 { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
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.
<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 setup>
import { TreeGridComponent as EjsTreegrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const data = sampleData;
const rowDataBound = function (args) {
if((args.data).taskID === 3){
args.rowHeight = 90;
}
};
</script>
<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 { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data () {
return {
data: sampleData,
};
},
methods: {
rowDataBound: function (args) {
if((args.data).taskID === 3){
args.rowHeight = 90;
}
}
}
}
</script>