Question

是否可以自定义kendo网格标题？

比如说：下面的原始标题应该被定制为第二个标题。

原始标题

Name | Sex | Range | Stan. | Range | Stan.

预期输出（自定义标题）

       |     | General Reasoning | Verbal Reasoning 
 Name  | Sex |   Range | Stan.   |   Range | Stan.

这可能吗？

以下是完整的剑道代码：

var grid = $("#grid").kendoGrid({
        dataSource: {
            data: viewModel.SampleData,
            schema: {
                model: {
                    fields: {
                        Name: { type: "string" },
                        Sex: { type: "string" },
                        GenReasoningRange: { type: "string" },
                        GenReasoningStan: { type: "number" },
                        VerbalReasoningRange: { type: "string" },
                        VerbalReasoningStan: { type: "number" }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: false,
        columns: [
            { field: "Name", title: "Name", width: "20px"},
            { field: "Sex", title: "Sex", width: "4px" },
            { field: "GenReasoningRange", title: "Range", width: "5px" },
            { field: "GenReasoningStan", title: "Stan.", width: "4px" },
            { field: "VerbalReasoningRange", title: "Range", width: "5px" },
            { field: "VerbalReasoningStan", title: "Stan.", width: "4px" }
        ]
    });

由于

Answer 1

您可以随时通过thead字段访问网格的标题元素，并执行您想要的任何操作。

在您的情况下，您希望在现有标题行上方插入另一个标题行：

grid.thead.prepend(
    "<tr>" +
        "<th colspan='2'></th>" + 
        "<th colspan='2'>General Reasoning</th>" +
        "<th colspan='2'>Verbal Reasoning</th>" + 
    "</tr>");

Kendo自定义标题列

1 个答案: