Kendo Grid with Count of Hierarchical Grid Rows

[Jesse]

 have a grid of Employees and Notes attached to the Employee records by the EnteredBy column on the notes that links to the EmpID of the Employee. Simply enough, I want the count of the Note records attached to each Employee and be able to place it in a "Note Count" column attached to the parent. Here is my code:

$(document).ready(function () {
$.when(getLocationsAsync(), getLocationsFilteredAsync()).done(function (locations, filteredLocations) {
var filteredLocationDataSource = new kendo.data.DataSource({
data: filteredLocations,
schema: {
model: {
fields: {
Value: { type: "number" },
Text: { type: "string" },
}
}
}
});

$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: "http://localhost/EmployeeDataService.svc/Employees"
},
create: {
url: "http://localhost/EmployeeDataService.svc/Employees",
type: "POST",
dataType: "json"
},
update: {
url: function (data) {
return "http://localhost/EmployeeDataService.svc/Employees(" + data.EmpID + ")";
},
type: "PUT",
dataType: "json"
},
destroy: {
url: function (data) {
return "http://localhost/EmployeeDataService.svc/Employees(" + data.EmpID + ")";
},
type: "DELETE",
dataType: "json"
}
},
model: empModel,
schema:
{
model: empModel
}
},
editable: {
confirmation: true,
mode: "popup",
template: templateHTML
},
filterable: true,
pageable: true,
sortable: true,
height: 365,
toolbar: ["create"],
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns:
[
{
field: "EmpID",
filterable: false
},
{
field: "LastName",
title: "Last Name"
},
{
field: "FirstName",
title: "First Name",
attributes: { style: "text-align:left;" }
},
{
field: "LocID",
title: "Location Name",
attributes: { style: "text-align:left;" },
values: locations
},
{
field: "NoteID", title: "Note Count", attributes: { style: "text-align:center;" }, editable: false, template: function (dataItem) {
return kendo.htmlEncode(noteCount(dataItem));
}
},
{
field: "DOB", title: "DOB", attributes: { style: "text-align:right;" }, template: '#= kendo.toString(DOB,"MM/dd/yyyy") #
},
{
field: "Phone",
hidden: true
},
{
field: "Modified",
hidden: true
},
{
field: "ModifiedBy",
hidden: true
},
{
command: [{
name: "edit",
text: "Edit"
}, {
name: "destroy",
text: "Delete"
}]
}
]
}

);
});
});

var empModel = {
id: "EmpID",
fields:
{
EmpID:
{
type: "number",
defaultValue: 0
},
FirstName:
{
type: "string"
},
LastName:
{
type: "string"
},
LocID:
{
type: "number"
},
NoteID:
{
type: "number",
editable: false,
hidden: true
},
DOB:
{
type: "date"
},
Phone:
{
defaultValue: "0",
type: "string"
},
Modified:
{
type: "date"
},
ModifiedBy:
{
type: "number",
defaultValue: 0
}
}
};

function noteCount(e) {
var noteTotal = 0;
var noteSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "http://localhost/EmployeeDataService.svc/Notes"
}
},
serverFiltering: true,
filter: { field: "EnteredBy", operator: "eq", value: e.EmpID },
schema:
{
total: function (data) {
return data.length;
}
}
});
noteSource.read();
var data = noteSource.data();
noteTotal = data.length;
return noteTotal;
}

function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://localhost/EmployeeDataService.svc/Notes"
}
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EnteredBy", operator: "eq", value: e.data.EmpID }
},
scrollable: false,
sortable: true,
pageable: true,
filterable: true,
columns: [
{ field: "NoteID", title: "NoteID", style: "text-align: right;" },
{
field: "Details", title: "Details", attributes: { style: "text-align:left;" }, template: function (dataItem) {
return kendo.htmlEncode(dataItem.Details.substring(0, 50));
}
},
{
field: "Entered", title: "Entered", attributes: { style: "text-align: right;" }, template: function (dataItem) {
return kendo.htmlEncode(kendo.format("{0:MM/dd/yyyy hh:mm tt}", new Date(parseInt(dataItem.Entered.substring(6, 19)))));
}
},
{
command: [{ "name": "ViewDetails", "buttonType": "ImageAndText", "text": "View Details", "click": showDetails }]
}
]
});
alert(e.detailCell.content.dataSource.total());
}

[Nikolay Rusev]

Hello Jesse,

The best way to achieve this would be if the related field, i.e Notes is part of the data item for Employee. This way you will not be required to trigger server request for every row in the Grid.

The following demo illustrates how to retrieve Orders count per Employee: http://trykendoui.telerik.com/@rusev/OVuP.

Regards,
Nikolay Rusev
Telerik

 

 

[Jesse]

It now tells me: undefined.  I have had this problem when accessing the total of datasources before.  Thanks.

[Jesse]

Check that: I figured out I was missing one small thing from the example you gave me.  Thanks for all of your help.  :) 

[Jesse]

Thanks for the help.  The last help I would need is how do I put that value into a specific column?  In your example, it places it into the same column where I have my Edit/Delete buttons using the .last() javascript function.  How do I find the correct column(Note Count) and place the value there?  Thanks for all of your help so far.

[Atanas Korchev]

Hello Jesse,

Instead of last you should use the eq jQuery method and the index of the required column:

$("#grid").find("[data-uid=" + uid + "]").children().eq(2).html(this.total());

Regards,
Atanas Korchev
Telerik

 

 

[Alex Gyoshev]

Hello Jesse,

You can use the eq jQuery method to specify exactly which column you need to address.

Regards,
Alex Gyoshev
Telerik