自定义kendo网格的组头

时间:2016-09-09 06:49:25

标签: javascript kendo-ui kendo-grid

有两个字段' number'和' name'在我的数据源中,1对1是相关的。

目前,我使用数字字段对数据进行分组,并且组标题显示'数字:xxx'。有没有办法在当前文本后面附加名称字段?作为'号码:xxx,名称:xxxx'?

我检查了kendo网格文档并搜索了很长时间,似乎kendo网格只支持根据分组字段的值显示组头或者聚合,无法找到组的解决方案这两个领域。

然后我有另一个解决方案来处理它。添加一个组合了两个字段的新字段,然后按此新字段进行分组,但新字段将显示在列标题中的列过滤器中。有没有办法解决这个问题?



$("#grid").kendoGrid({
    columns: [{
        field: "number",
        hidden: true
    },{
        field: "name"
    }, {
        field: "order"
    }],
    dataSource: {
        data: [{
        		number: 1,
            name: "Jane Doe",
            order: "order1"            
        },
        {
        		number: 1,
            name: "Jane Doe",
            order: "order2"            
        },
        {
        		number: 1,
            name: "Jane Doe",
            order: "order3"            
        },{
        		number: 2,
            name: "Allen",
            order: "order1"
        },{
        		number: 2,
            name: "Allen",
            order: "order2"
        }
        ],
        group: {
            field: "number"           
        }
    }
});




下面的代码可以显示组合字段,但是有两个问题: 1.标题文字始终包含'标题:'前缀,例如"标题:数字:1,名称:Jane Doe&#34 ;; 2.在列过滤器中,其中包含标题列。



$("#grid").kendoGrid({
    columns: [{
        field: "number",
        hidden: true
    },{
        field: "name",
        hidden: true
    }, {
        field: "order"
    },{
        field: "header",
        hidden: true
    }
    ],
    dataSource: {
        data: [{
        		number: 1,
            name: "Jane Doe",
            order: "order1",
            header: "number: 1, name: Jane Doe"
        },
        {
        		number: 1,
            name: "Jane Doe",
            order: "order2",
            header: "number: 1, name: Jane Doe"
        },
        {
        		number: 1,
            name: "Jane Doe",
            order: "order3",
            header: "number: 1, name: Jane Doe"
        },{
        		number: 2,
            name: "Allen",
            order: "order1",
            header: "number: 2, name: Allen"
        },{
        		number: 2,
            name: "Allen",
            order: "order2",
            header: "number: 2, name: Allen"
        }
        ],
        group: {
            field: "header"           
        }
    },
    columnMenu: true
});




由于

1 个答案:

答案 0 :(得分:0)

要隐藏组标题中的列描述,您应该使用groupHeaderTemplate:"#= data.value#"。

要隐藏ColMenu中的列,您应该在列定义中使用" menu":false。

应用这两项更改的列应如下所示:

def getSizedFrame(width, height):
"""Function to return an image with the size I want"""    
    s, img = self.cam.read()

    # Only process valid image frames
    if s:
            img = cv2.resize(img, (width, height), interpolation = cv2.INTER_AREA)
    return s, img