Having trouble getting help?
Contact Support
Contact Support
Clip mode in Vue Treegrid component
11 Jun 20244 minutes to read
The clip mode provides options to display its overflow cell content and it can be defined by the columns.clipMode
property.
There are three types of clipMode
. They are:
-
Clip
: Truncates the cell content when it overflows its area. -
Ellipsis
: Displays ellipsis when the cell content overflows its area. -
EllipsisWithTooltip
: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px' gridLines='Both'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width=90 textAlign='Right' ></e-column>
<e-column field='taskName' headerText='Task Name' width=90 clipMode='Clip'></e-column>
<e-column field='assignee.firstName' headerText='Assignee' clipMode='EllipsisWithTooltip' width=40 textAlign='Right'></e-column>
<e-column field='priority' headerText='Priority' clipMode='Ellipsis' width=40 textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width=80 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 { complexData } from "./datasource.js";
const data = complexData;
</script>
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px' gridLines='Both'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width=90 textAlign='Right' ></e-column>
<e-column field='taskName' headerText='Task Name' width=90 clipMode='Clip'></e-column>
<e-column field='assignee.firstName' headerText='Assignee' clipMode='EllipsisWithTooltip' width=40 textAlign='Right'></e-column>
<e-column field='priority' headerText='Priority' clipMode='Ellipsis' width=40 textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { complexData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: complexData,
};
}
}
</script>
By default,
columns.clipMode
value isEllipsis
.