文档建议反馈控制台
首页
学习
活动
更多
腾讯云架构师技术同盟交流圈
腾讯云数据库专区
腾讯云原生专区
腾讯混元专区
腾讯云TCE专区
腾讯云Lighthouse专区
腾讯云HAI专区
腾讯云Edgeone专区
腾讯云存储专区
腾讯云智能专区
腾讯轻联专区
腾讯云开发专区
TAPD专区
腾讯云AI代码助手
CODING DevOps
Cloud Studio
SDK中心
API中心
命令行工具
TVP
腾讯云架构师技术同盟
文章/答案/技术大牛
发布
社区首页 >问答首页 >Kendo Grid -默认情况下如何使网格显示成一列的分组数据(init)？

问Kendo Grid -默认情况下如何使网格显示成一列的分组数据(init)？
EN

Stack Overflow用户
提问于 2015-01-04 23:59:52
回答 1查看 2.8K关注 0票数 0

默认情况下，我想在网格中显示分组数据吗？

我应该在阅读方法中做吗？

非常感谢你的帮助。

编辑：

我想要用于默认分组的对象的模型文件如下：

代码语言：javascript
代码运行次数：0
复制
partner: {
                                defaultValue: {},
                                nullable: false,
                                type: "object"
                            },

列字段是：

代码语言：javascript
代码运行次数：0
复制
{
                    field :"partner.name",
                    title : $translate.instant('PARTNER'),
                    width: 250,
                    filterable: {
                        cell: {
                            operator: "contains"
                        }
                    }
                },

如果我尝试在requestEnd中进行以下操作：

代码语言：javascript
代码运行次数：0
复制
var grid = $("#locations_grid").data('kendoGrid');
                        grid._group = true;
                        grid.dataSource._group.push({
                            aggregates: [],
                            dir: "asc",
                            field: "partner.name"
                        });
                        grid.refresh();

我总能得到空格子。

分组的请求结构如下：

代码语言：javascript
代码运行次数：0
复制
{
    "entityName": "Location",
    "data": {
        "take": 10,
        "skip": 0,
        "page": 1,
        "pageSize": 10,
        "group": [
            {
                "field": "partner.name",
                "dir": "asc",
                "aggregates": []
            }
        ]
    }
}

EDIT2 -网格INIT的完整代码：

代码语言：javascript
代码运行次数：0
复制
$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"
                    }
                }
            }
        ]
    });
};
javascript
datagrid
kendo-ui
kendo-grid
EN

回答 1

Stack Overflow用户

发布于 2015-01-05 04:25:37

我应该在阅读方法中做吗？

是的，我相信这是最好的方法。下面是在“CompanyName”字段中读取数据后对数据进行分组的函数：

代码语言：javascript
代码运行次数：0
复制
$("#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示例：http://dojo.telerik.com/oRuwA

请记住，此功能不受官方支持，并且使用网格私有字段，因此在今后对Kendo进行任何更新之后，它可以停止工作。

角度示例：

代码语言：javascript
代码运行次数：0
复制
$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();
                }
            }
            ...
        }
        ...
    });
};
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27775442

复制
相关文章
如何正确使用const(常量),define(宏)
其他
前言 在开发中，也许我们会经常使用到宏定义，或者用const修饰一些数据类型，经常有开发者不知道怎么正确使用，导致项目中乱用宏定义与const修饰符。本篇主要介绍在开发中怎么正确使用const与define(宏定义) 当我们想定义全局共用的一些数据时，比如通知名字，动画时长等等，我们可以用宏、常量、变量： 宏： // 注意后面不需要带符号 #define ScottDidLoginSuccess @"登陆成功" 变量： // 注意后面一定要带符号 NSString *sc
Scott_Mr
2018/07/05
8860
如何正确使用const(常量),define(宏)
其他
前言 在开发中，也许我们会经常使用到宏定义，或者用const修饰一些数据类型，经常有开发者不知道怎么正确使用，导致项目中乱用宏定义与const修饰符。本篇主要介绍在开发中怎么正确使用const与define(宏定义) 当我们想定义全局共用的一些数据时，比如通知名字，动画时长等等，我们可以用宏、常量、变量： 宏： // 注意后面不需要带符号 #define ScottDidLoginSuccess @"登陆成功" 变量： // 注意后面一定要带符号 NSString *sc
Scott_Mr
2018/05/16
2.3K0
C/C++中define定义的常量与const常量
其他
常量是在程序中不能更改的量，在C/C++中有两种方式定义常量，一种是利用define宏定义的方式，一种是C++中新提出来的const型常变量，下面主要讨论它们之间的相关问题；
Masimaro
2018/08/31
1.7K0
iOS define 和 const常量区别?
打包
●define是宏定义，程序在预处理阶段将用define定义的内容进行了替换。因此程序运行时，常量表中并没有用define定义的常量，系统不为它分配内存。const定义的常量，在程序运行时在常量表中，系统为它分配内存。
赵哥窟
2020/02/13
4460
PHP中定义常量的区别，define() 与 const[通俗易懂]
phpjavahttps网络安全打包
这两种方式的根本区别在于const会在代码编译时定义一个常量，而define则是在代码运行时才定义一个常量。这就使得const会有以下几个缺点：
全栈程序员站长
2022/07/11
1.1K0
c++中constexpr_define和const定义常量的区别
打包编程算法
常量表达式是指值不会改变且在编译过程中就能够得到计算结果的表达式，能在编译时求值的表达式。
全栈程序员站长
2022/11/09
1K0
c++中constexpr_define和const定义常量的区别
JavaScript 学习-10.使用const声明常量
编程算法腾讯云测试服务python
前言 const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。 const 声明常量 const定义常量与使用let 定义的变量相似： 二者都是块级作用域 都不能和它所在作用域内的其他变量或函数拥有相同的名称 两者还有以下两点区别： const声明的常量必须初始化，而let声明的变量不用 const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。 块级作用域 const定义常量也有块级作用域 var a = 10; const x = 'worl
上海-悠悠
2022/05/20
9690
iOS学习——iOS 宏(define)与常量(const)的正确使用
c++编程算法ide打包存储
　　在iOS开发中，经常用到宏定义，或用const修饰一些数据类型，经常有开发者不知怎么正确使用，导致项目中乱用宏与const修饰。你能区分下面的吗？知道什么时候用吗？
mukekeheart
2019/09/29
1.8K0
iOS学习——iOS 宏(define)与常量(const)的正确使用
C++中Const常量机制分析
存储c++
const为C/C++常用的修饰符，表示该变量是一个常量，不可被修改等含义。那么在实际使用中会存在如下疑问：
洛杉矶
2018/06/08
2.4K0
ES6 const声明常量以及特点
前端
ES6（ECMAScript 2015）引入了const关键字，用于声明常量。在JavaScript中，常量是指其值在声明后不能被重新赋值的变量。const声明的常量具有以下特点：
堕落飞鸟
2023/05/22
5030
C++常量const建议收藏
c++ide打包存储编程算法
　　常量折叠表面上的效果和宏替换是一样的，只是“效果上是一样的”，而两者真正的区别在于，宏是字符常量，在预编译宏替换完成后，该宏名字会消失，所有对宏的引用已经全部被替换为它所对应的值，编译器当然没有必要维护这个符号，而常量折叠发生的情况是，对常量的引用情况全部替换为该常量的值，但是，常量名并不会消失，编译器会把它放入到符号表中，同时会为该变量分配空间，栈空间或全局空间。
全栈程序员站长
2022/07/14
3040
3分钟短文|PHP 定义常量，我该用define还是const？这下不迷茫了
php编程算法
我们今天说一下 PHP 编程中，定义一个常量所使用的两种方法。有哪些区别，以及哪种是最佳实践？
程序员小助手
2020/06/17
1K0
C++中const与C中的const使用对比
c++打包idec 语言编程算法
大家好晚上好，今天给大家分享的是，c++中的const的使用，在我们以前学习c语言的时候，我们已经接触了const的用法，那么在c++中，const的使用，又会有什么样的不同呢？接下来就开始我们的分享吧！每天进步一点点，日积月累你也是专家！
用户6280468
2022/03/21
6460
C++中const与C中的const使用对比
【C 语言】const 关键字用法 ( 常量指针 - const 在 * 左边 - 修饰数据类型 - 内存不变 | 指针常量 - const 在 * 右边 - 修饰变量 - 指针不变 )
变量内存数据数据类型指针
const 关键字 在 C 和 C++ 中的表现不同 , 本篇博客主要介绍 C 语言中的 const 用法 ;
韩曙亮
2023/03/29
2.4K0
ES6语法中常量声明（const）的实现原理
ecmascript编程算法
ES6 const 特点： 临时性死区 在定义的时候完成初始化 不能重新定义 不能重新赋值 语义化标识，表示声明后不可更改的不变量 原理： ES5没有块级的概念，我们只能大概模拟一下const的定义。 我们将const 声明的变量绑定在全局对象上，借助 Object.defineProperty()劫持该对象，配置相关描述符实现const的特性。 关键字和数字不能作为对象属性 var const_customer = function(param, value) { // 目前是在浏览器端测试全局对
伯爵
2019/10/13
2.2K0
ES6语法中常量声明（const）的实现原理
const 指针 常量指针 指针常量 常量指针常量
int指针
指针常量在定义时必须初始化，且不允许修改，但其指向的地址的值可以修改，即p不可改写而*p可以改写。
叶茂林
2023/07/28
1410
const与#define的区别、优点
ide打包
补充：预处理器根据以#开头的命令，修改原始的程序。比如我们常见的#include <stdio.h>命令告诉处理器读取系统头文件stdio.h的内容，并把它直接插入程序文本中。咱们的#define也是，仅仅是单纯的文本替换。
WindSun
2019/08/29
1.8K0
C++:18---const关键字（附常量指针、指针常量、常量指针常量）
编程算法其他
一、const变量的一些基本特点 ①const修饰的变量不能被修改 const int a=10;a=20;//错误 ②因为const修饰的变量不能被修改，所以必须被初始化 int a=10;const int b=a; //正确const int c=10; //正确 ③const修饰的变量可以赋值给其他值 const int a=10;int b=a;//正确 ④可以有常量引用 int a=10;const int &b=a; 二、在其他文件中使用const常量（extern） const常量默
用户3479834
2021/02/03
1.4K0
点击加载更多

相似问题

使用#define声明常量有什么好处？

34

我应该使用#define，enum还是const？

14104

在C++中，使用#define或const来避免神奇的数字更好吗？

32

#define与const声明的优先级

10

C常量字符串声明出错

40
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文