我想默认在网格中显示分组数据吗？
我应该在读取方法中这样做吗？
非常感谢您的帮助。
修改：
为我想要用于默认分组的对象提交的模型如下：
partner: {
defaultValue: {},
nullable: false,
type: "object"
},
列字段为：
{
field :"partner.name",
title : $translate.instant('PARTNER'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
如果我在requestEnd中尝试跟随：
var grid = $("#locations_grid").data('kendoGrid');
grid._group = true;
grid.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "partner.name"
});
grid.refresh();
我总是空格。
分组的请求结构如下：
{
"entityName": "Location",
"data": {
"take": 10,
"skip": 0,
"page": 1,
"pageSize": 10,
"group": [
{
"field": "partner.name",
"dir": "asc",
"aggregates": []
}
]
}
}
EDIT2 - 网格的全部代码：
$scope.initGrid = function() {
// set container for loading spinner
gridView = $("#locations_grid");
// set all properties for data grid
gridView.kendoGrid({
dataSource: {
transport: {
// READ REQUEST
read: function (options) {
console.log("List");
console.log(options.data);
requestParams = {
"entityName": "Location"
};
requestParams.data = options.data;
console.log(requestParams);
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "location/search",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
},
// UPDATE REQUEST
update: function (options) {
console.log("Update");
console.log(options.data);
// ADD DATA FOR UPDATE TO THE TOKEN
console.log(requestParams);
console.log(options.data);
requestParams = options.data;
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "/location/update",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
growlNotifications.add($translate.instant('UPDATED'), 'success', $rootScope.notificationLifetime);
options.success(data);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + data , 'error', $rootScope.notificationLifetime);
});
},
// DELETE FUNCTION
destroy: function (options) {
console.log("delete");
console.log(options.data);
// add data to request params
console.log("delete id: " +options.data.id);
// call the service
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "/location/delete",
requestParams)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
},
// CREATE FUNCTION
create: function (options) {
console.log("Create");
console.log(options.data);
// ADD DATA FOR UPDATE TO THE TOKEN
requestParams = options.data;
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "location/create",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data);
var dataSource = gridView.dataSource;
gridView.data('kendoGrid').dataSource.read();
growlNotifications.add($translate.instant('SUCCESSFULLY_ADDED'), 'success', $rootScope.notificationLifetime);
break;
case false:
growlNotifications.add($translate.instant('PROCESSING_ERROR'), 'error', $rootScope.notificationLifetime);
options.success(data);
break;
}
})
.error(function (data, status, headers, config) {
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
}
},
requestStart: function(e) {
console.log("Request start");
// show loading spinner
//kendo.ui.progress(gridView, true);
},
requestEnd: function(e) {
console.log("Request end");
/*
if(e.type === "read"){
var grid = $("#locations_grid").data('kendoGrid');
grid._group = true;
grid.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "code"
});
grid.refresh();
}
*/
var response = e.response;
var type = e.type;
console.log(type);
kendo.ui.progress(gridView, false);
},
requestError: function(e) {
console.log("Request error");
// hide loading spinner
kendo.ui.progress(gridView, false);
},
// SCHEMA FOR DATAGRID
schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
nullable: true,
defaultValue: null,
type: "number"
},
partner: {
defaultValue: {},
nullable: false,
type: "object"
},
accessNote: {
editable: true,
nullable: true,
type: "string"
},
address: {
defaultValue: {},
nullable: false
},
bsc: {
editable: true,
nullable: true
},
code:{
editable: true,
nullable: false,
type: "string",
validation: {
required: true,
min: 1
}
},
indoorOutdoor:{
editable: true,
nullable: false,
type: "string",
validation: {
required: {
message: $translate.instant('FIELD_IS_REQUIRED')
}
}
},
siteId:{
editable: true,
nullable: false,
type: "string",
validation: {
required: {
message: $translate.instant('FIELD_IS_REQUIRED')
}
}
},
stationType:{
defaultValue: {},
nullable: false,
validation: {
required: {
message: $translate.instant('FIELD_IS_REQUIRED')
}
}
}
}
},
data: function(response) {
console.log(response.results);
return response.results;
},
total: function(response) {
console.log(response.resultCount);
return response.resultCount;
}
},
// definition for page sorting
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
serverGrouping: true,
},
editable:{
confirmation:true //remove delete confirm message
},
scrollable:true,
//window resizing hack
height: function () {
return GlobalHelperService.getWindowSize();
},
filterable: GridHelperService.filtersTranlations(),
sortable: true,
groupable : {
messages: {
empty : $translate.instant('DRAG_SELECTED_COLUMN_HEADER_HERE_TO_GROUP')
}
},
reorderable: true,
resizable: true,
//dataBound: resizeGrid, //callback when data are loaded
columnMenu: GridHelperService.getColumnMenu(),
pageable: GridHelperService.getBottomToolbar(),
messages:GridHelperService.getToolbarButtonsTranlations(),
toolbar: [
{ name: "create" },
{ name: "save" },
{ name: "cancel" }
],
columns: [
{
field :"partner.name",
title : $translate.instant('PARTNER'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"accessNote",
title : $translate.instant('ACCESS_NOTE'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.city",
title : $translate.instant('ADDRESS_CITY'),
width: 250,
editor: GlobalHelperService.getAddressCityListForAutocomplete,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.latitude",
title : $translate.instant('ADDRESS_LAT'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.longtitude",
title : $translate.instant('ADDRESS_LON'),
width: 250,
template: function(dataItem) {
console.log("DATAITEM IS FOLLOWING:");
console.log(dataItem);
var html = "<div>"+dataItem.address.longtitude+"<a class=\"showOnMapBtn\" href=\"http://maps.google.com/maps?q="+dataItem.address.latitude+","+dataItem.address.longtitude+"&z=14&ll="+dataItem.address.latitude+","+dataItem.address.longtitude+"\" target=\"blank\">"+$translate.instant('MAP')+"</a></div>";
return html;
},
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"address.street",
title : $translate.instant('ADDRESS_STREET'),
width: 250,
editor: GlobalHelperService.getAddressStreetListForAutocomplete,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"bsc",
title : $translate.instant('BSC'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"code",
title : $translate.instant('CODE'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"indoorOutdoor",
title : $translate.instant('INDOOR_OUTDOOR'),
editor: GlobalHelperService.locationTypeDropDownEditor,
template: function(dataItem) {
switch (dataItem.indoorOutdoor)
{
case "Indoor":
return "Indoor";
case "Outdoor":
return "Outdoor";
case "IndoorOutdoor":
return "Indoor & Outdoor";
default:
return "Zvolte";
}
},
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"siteId",
title : $translate.instant('SITE_ID'),
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
},
{
field :"stationType.name",
title : $translate.instant('STATION_TYPE'),
editor: GlobalHelperService.getStationTypeListForAutocomplete,
width: 250,
filterable: {
cell: {
operator: "contains"
}
}
}
]
});
};
答案 0 :(得分：0)
我应该在读取方法中这样做吗？
是的，我相信这是最好的方式。以下是在“CompanyName”字段上读取数据后分组的功能：
$("#grid").kendoGrid({
dataSource: {
requestEnd: function(e){
if(e.type === "read"){
var grid = $("#grid").data('kendoGrid');
grid._group = true;
grid.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "CompanyName"
});
grid.refresh();
}
}
},
groupable: true,
columns: [{
field: "CompanyName"
...
}
],
...
});
Kendo dojo示例：http://dojo.telerik.com/oRuwA
请记住，此功能不受官方支持并使用网格私有字段，因此在将来更新Kendo后它可能会停止工作。
Angular示例：
$scope.initGrid = function() {
gridView = $("#locations_grid");
gridView.kendoGrid({
dataSource: {
requestEnd: function(e){
if(e.type === "read"){
gridView._group = true;
gridView.dataSource._group.push({
aggregates: [],
dir: "asc",
field: "CompanyName"
});
gridView.refresh();
}
}
...
}
...
});
};