javascript - Kendo UI 网格标题在页面刷新时消失/移动

Question

我有一个 kendoui 网格，它是从 json 数据源填充的。

每次我的页面重新加载并刷新网格时，我都会看到标题向左移动，最右边的列没有标题!有人见过这个问题吗？我无法在 SO 上找到这种特殊情况的答案。

这是我的网格。我也会发布屏幕截图，但我没有声望点!

感谢任何帮助。

$("#rgrid").kendoGrid({
            sortable: true,
            selectable: true,
            scrollable: false,
            pageable: {
                pageSize: 10,
                refresh: true
            },
            dataSource: {
                transport: {
                    read: "./php/rd.php?action=grd&email=" + $("#tbvalue").val()
                },               
                schema: {
                    model: {
                        fields: {                            
                            c1: {editable: false},
                            c2: {editable: false},
                            c3: {editable: false ,type: "date"},
                            c4: {editable: false, type: "date"},
                            c5: {editable: true, type: "date"}, 
                            c6: {editable: true},
                            c7: {editable: false}                            
                        }
                    },                  
                    data: "data",
                    total: function(response) {
                        return response.total; // total is returned in the "total" field of the response
                    }
                }
            },
            dataBound: function(e) {
                var grid = $("#rgrid").data("kendoGrid");              
                grid.hideColumn(1); // hide the c2 column                
            },
            columns: [
                {
                    field: "c1",
                    title: "c1",
                    width: 150
                }, 
                {
                    field: "c2",
                    title: "c2"
                },
                {
                    field: "c3",
                    title: "c3",
                    format: "{0:yyyy-MM-dd}"
                }, 
                {
                    field: "c4",
                    title: "c4",
                    format: "{0:yyyy-MM-dd}"
                }, 
                {
                    field: "c5",
                    title: "c5",
                    format: "{0:yyyy-MM-dd}"                
                }, 
                {
                    field: "c6",
                    title: "c6",
                    editor: dropDownEditor
                }, 
                {
                    field: "c7",
                    title: "c7"
                },
                { 
                    command: { text: "View", click: doAction}, title: " ", width: "140px" 
                }
            ],
            editable: true
)};

Answer 1

如果您希望某列不显示，而不必手动隐藏它，您应该设置 hidden在 columns 定义中设置为 true。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    columns: [
        { hidden: true, field: "id" },
        { field: "name" }
    ],
    dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>