Having trouble getting help?
Contact Support
Contact Support
Display null values at bottom in Vue Treegrid component
11 Jun 20247 minutes to read
By default the null values are displayed at bottom of the Tree Grid row while perform sorting in ascending order. As well as this values are displayed at top of the Tree Grid row while perform sorting with descending order. But you can customize this default order to display the null values at always bottom row of the Tree Grid by using column.sortComparer
method.
In the below demo we have displayed the null date values at bottom of the Grid row while sorting the StartDate column in both ways.
<template>
<div id="app">
<ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='300px' :allowSorting='true' :actionBegin='actionBegin' idMapping='TaskID' parentIdMapping='parentID' ref="treegrid">
<e-columns>
<e-column field="TaskID" headerText="Task ID" :isPrimaryKey='true' width="70" textAlign="Right"></e-column>
<e-column field="TaskName" headerText="Task Name" width="70" ></e-column>
<e-column field="StartDate" headerText="Start Date" format="yMd" width="70" :sortComparer='sortComparer' 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="Priority" headerText="Priority" width="90" textAlign="Right"></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { TreeGridComponent as EjsTreegrid, Page, Sort, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { Data } from "./datasource.js";
let action;
const data = Data;
const sortComparer = function(reference, comparer) {
let sortAsc = action === "Ascending" ? true : false;
if (sortAsc && reference === null) {
return 1;
}
else if (sortAsc && comparer === null) {
return -1;
}
else if (!sortAsc && reference === null) {
return -1;
}
else if (!sortAsc && comparer === null) {
return 1;
} else {
return reference - comparer;
}
};
const actionBegin = function(args) {
if (args.requestType === "sorting") {
action = args.direction;
}
};
provide('treegrid', [Page, Sort]);
</script>
<template>
<div id="app">
<ejs-treegrid :dataSource="data" :treeColumnIndex="1" height='300px' :allowSorting='true' :actionBegin='actionBegin' idMapping='TaskID' parentIdMapping='parentID' ref="treegrid">
<e-columns>
<e-column field="TaskID" headerText="Task ID" :isPrimaryKey='true' width="70" textAlign="Right"></e-column>
<e-column field="TaskName" headerText="Task Name" width="70" ></e-column>
<e-column field="StartDate" headerText="Start Date" format="yMd" width="70" :sortComparer='sortComparer' 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="Priority" headerText="Priority" width="90" textAlign="Right"></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Page, Sort, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { Data } from "./datasource.js";
let action;
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data() {
return {
data: Data,
};
},
methods: {
sortComparer: function(reference, comparer) {
let sortAsc = action === "Ascending" ? true : false;
if (sortAsc && reference === null) {
return 1;
}
else if (sortAsc && comparer === null) {
return -1;
}
else if (!sortAsc && reference === null) {
return -1;
}
else if (!sortAsc && comparer === null) {
return 1;
} else {
return reference - comparer;
}
},
actionBegin: function(args) {
if (args.requestType === "sorting") {
action = args.direction;
}
}
},
provide: {
treegrid: [Page, Sort]
}
}
</script>