I had a quick question.
I have been looking at Kendo for a couple of days now, and am really impressed. Everything is smooth and works quite well.
My question is: To support remote grouping on a datasource, what gets sent to the server when someone changes the grouping (Meaning query parameters), and how is the data expected to come back to the data source (JSON in my case)?
14 Answers, 1 is accepted
By default, params which will be will be the dataSource's sort/filter/group descriptors and paging information if such set. you may use transport's dialect to pass a custom function which can to serialize those descriptors to a custom format.
new
kendo.data.DataSource({
type:
"json"
,
transport: {
read:
"Products/Select"
,
dialect:
function
(params) {
return
erializeParamsFunction(params); //return an object containing the new name/value params to be send to the server
}
}
});
The format which DataSource requires the grouped items to be in is similar to the following:
{
field:
"ProductID"
,
//name of the field on which data is grouped
value:
"Product1"
,
// value of the current group
items: [item1, item2, item3]
// items
hasSubgroups:
false
,
// there are multiple nested groups and items collection contains groups instead of the actual items
aggregates: []
}
In case your server returns data in a different format, schema object's group function can be to transform the data.
new
kendo.data.DataSource({
transport: {
read:
"Products/Select"
},
schema: {
groups:
function
(data) {
return
myMapGroupsFunction(data);
// return array of object in the following format:
//{
// field: "ProductID", //name of the field on which data is grouped
// value: "Product1", // value of the current group
// items: [item1, item2, item3] // items
// hasSubgroups: false, // there are multiple nested groups and items collection contains groups instead of the actual items
// aggregates: []
//}
}
}
}).read();
Rosen
the Telerik team
var
dataSource =
new
kendo.data.DataSource({
serverPaging:
true
,
serverSorting:
true
,
serverFiltering:
true
,
serverGrouping:
true
,
pageSize: 20,
transport: {
read: {
type:
'get'
,
dataType:
'json'
,
url: url
}
},
schema: {
group:
'group'
,
data:
'data'
,
total:
'total'
,
model: {
id:
'EmployeeId'
,
fields: {
FirstName: { type:
'string'
},
LastName: { type:
'string'
},
Email: { type:
'string'
}
}
}
}
});
My group object contains aggregates, field, hasSubgroups, and items is a list of Employees (Email, EmployeeId, FirstName, and LastName). Where might I be going wrong? I can't seem to find a good example of remote grouping anywhere. Thanks.
Could you please provide a bit more information about the exact issue you are facing with the remote grouping? Also you could show the data format return from the server.
All the best,Rosen
the Telerik team
Could you change the schema to be groups instead of group and see if this makes any difference in the observed behavior.
Regards,Rosen
the Telerik team
If I have this:
group:
'asdfasdf'
no error is thrown. If I have this:
groups:
'asdfasdf'
I receive a javascript error. With this:
groups:
'group'
I don't get an error when grouping by first name. Just an empty grid. I'm not sure if it will help, but this is the way I'm building my json object in C#.
Controller:
public
ActionResult List(KendoRequest request)
{
var employees = _repository.GetAllEmployees(request);
employees.group.field =
"FirstName"
;
employees.group.aggregates =
new
string
[] { };
employees.group.hasSubgroups =
false
;
employees.group.items = employees.data;
employees.group.value =
"First Name"
;
return
Json(employees, JsonRequestBehavior.AllowGet);
}
Model:
public
class
KendoGrid<T>
{
private
KendoGroup<T> _group;
public
T[] data {
get
;
set
; }
public
int
total {
get
;
set
; }
public
KendoGroup<T> group
{
get
{
return
_group ?? (_group =
new
KendoGroup<T>());
}
set
{
_group = value;
}
}
}
public
class
KendoGroup<T>
{
public
string
field {
get
;
set
; }
public
string
value {
get
;
set
; }
public
T[] items {
get
;
set
; }
public
bool
hasSubgroups {
get
;
set
; }
public
string
[] aggregates {
get
;
set
; }
}
The group property of the response should be an array. It should contain the grouped data, thus a separate entry for each unique value should be present. For example:
{
groups: [
{
field =
"FirstName"
,
aggregates = {},
hasSubgroups =
false
,
items = [ { FirstName =
"First Name"
, LastName =
"Last Name 1"
},
{ FirstName =
"First Name"
, LastName =
"Last Name 2"
}],
value =
"First Name"
},
{
field =
"FirstName"
,
aggregates = {},
hasSubgroups =
false
,
items = [ { FirstName =
"First Name 2"
, LastName =
"Last Name 3"
},
{ FirstName =
"First Name 2"
, LastName =
"Last Name 4"
}],
value =
"First Name 2"
}]
}
Regards,
Rosen
the Telerik team
When doing server side grouping, the JSON data should be returned to client as you describe, correct ? The Grid on the client will not do any processing of the data ?
2)
What should be the content for the aggregates field ?
For example I've defined this on the datasource:
group: {
field: "First",
aggregates: [
{
field: "NumberOfEmployees",
aggregate: "count"
}
]
}
And the post request is posted to the server as:
take 4
skip 0
page 1
pageSize 4
group[0][field] First
group[0][dir] asc
group[0][aggregates][0][field] NumberOfEmployees
group[0][aggregates][0][aggregate] count
should the JSON result contain text below?
"aggregates": { "NumberOfEmployees": { "count": 2 } }
Please advice.
- Indeed, if server operation are enabled the DataSource will not process the data itself but will expect the already processed data from the server.
- Information of the required format of the grouped result can be found here.
- The format in which the operation descriptors are send to the server can be customized using the transport's parameterMap function.
Rosen
the Telerik team
I am new and also very impressed with the Grid. It was a lot of work...but I created a JSFiddle here showing the GRID I created to assist with this question.
https://jsfiddle.net/x11joex11/zz3jfp20/15/
How do I get this to work with server grouping, server filtering, server sorting and server aggregates?
For example what is a sample JSON I can give to the 'read' datasource on the jsfiddle I have so that it will load the table with all the features I mentioned above. For example...
I have a database called Company, it has 4fields, id, company name, phone, and email
Many companies might share the same email, so an example of grouping by email and using the aggregate count would be nice to see how that looks as a JSON response.
Any help is much appreciated!
I also created a stack overflow showing the issue in more detail.
http://stackoverflow.com/questions/35006484/kendo-ui-json-response-for-grid-using-remote-data-source-w-server-grouping
Hello Joseph,
The format of the response expected by the DataSource when remote grouping is set is described in the documentation here. A simple implementation of server operations are demonstrated in Kendo UI PHP wrappers sample application which is accompanying the distribution. You could take a look and use it as a base for your own implementation.
Regards,
Rosen
Telerik
Hi,
I'm doing whatever you said in the above post.
I have about 50,000 records, when grouped, the the count of grouped items is 1945.
But, the problem with my grid when the grouping is done, the number of rows showing in the grid is only 1945. the rest is not scrolling down.
I can assume that maybe there is an issue with the response format.
Please check the following example using the expected formated where all of the items are shown:
http://jsfiddle.net/knWcJ/74/
If the issue still occurs, please provide a runnable example and I will gladly inspect what may be caused the issue.
Regards,
Stefan
Progress Telerik