Group Grid Columns Which Are Bound to Objects
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | 2017.2.621 |
Description
How can I group columns which are bound to objects?
Solution
When the
group
event fires, check for a group by the column which is bound to an object.If such a group exists, use the
group
method of the dataSource to add a group by one of the properties of the object.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
"id",
{ field: "person", template:"#=person.name#, #=person.age#" }
],
dataBound(e){
setTimeout(function(){
$('.k-group-indicator a.k-link').each(function(_,x){
x= $(x);
if(x.text().includes(".")){
x.text(x.text().split(".")[0]);
}
})
$('.k-grouping-row p').each(function(_,x){
x= $(x);
if(x.text().includes(".")){
var splitted = x.text().split(":");
x.text(splitted[0].split(".")[0] +":"+ splitted[splitted.length-1]);
}
})
})
},
dataSource: {
data: [
{ id: 1, person:{ name: "Jane Doe", age: 30 }},
{ id: 2, person:{ name: "John Doe", age: 33 }},
{ id: 3, person:{ name: "John Doe", age: 23 }}
],
schema: {
model: { id: "id" }
}
},
groupable: true,
group: function(e) {
if (e.groups.length) {
var isNestedGrouped;
e.groups.map(function(x){
if(x.field == "person"){
isNestedGrouped = true;
}
})
if(isNestedGrouped){
e.preventDefault()
var newGroups = [];
this.dataSource.group().forEach(function(x){
if(x.field != "person"){
newGroups.push(x)
}
})
newGroups.push({field:"person.name"})
this.dataSource.group(newGroups)
}
}
}
});
</script>