This is a migrated thread and some comments may be shown as answers.

Kendo Grid with Count of Hierarchical Grid Rows

6 Answers 312 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Jesse asked on 28 Apr 2014, 05:59 PM
 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());
}

6 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 30 Apr 2014, 08:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jesse
Top achievements
Rank 1
answered on 30 Apr 2014, 04:13 PM
It now tells me: undefined.  I have had this problem when accessing the total of datasources before.  Thanks.
0
Jesse
Top achievements
Rank 1
answered on 30 Apr 2014, 04:27 PM
Check that: I figured out I was missing one small thing from the example you gave me.  Thanks for all of your help.  :) 
0
Jesse
Top achievements
Rank 1
answered on 01 May 2014, 07:04 AM
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.
0
Atanas Korchev
Telerik team
answered on 02 May 2014, 10:48 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alex Gyoshev
Telerik team
answered on 02 May 2014, 10:52 AM
Hello Jesse,

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

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Jesse
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Jesse
Top achievements
Rank 1
Atanas Korchev
Telerik team
Alex Gyoshev
Telerik team
Share this question
or