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

时间:2013-12-17 16:10:36

标签: javascript kendo-ui kendo-grid

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

每当我的页面重新加载并刷新网格时,我看到标题向左移动,最右边的列没有标题!有没有人见过这个问题?我无法在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
)};

1 个答案:

答案 0 :(得分:0)

如果您希望不显示列,而不是必须手动隐藏它,则应在columns定义中将hidden设置为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>