Question

锁定列时，Kendo网格存在很大问题。网格有两个静态列和一个或多个动态创建的列。没有锁定任何列，网格工作得很好，当我锁定静态列（或只是其中一个）时，网格会发疯。我知道锁定列将创建两个不同的表（具有锁定和未锁定的列）但在我的情况下，这些表（具有不同的div）在我的页面中不会对齐。

我尝试使用CSS手动对齐它们（显示：inline-block和/或float：left）但是当我调整窗口大小时，网格会返回错误的形式。

我附上了两个例子：

在第二个示例中，其余列位于页面下方的某个位置（我需要缩小以查看它们）。

插入简化代码（未应用锁定）

列代码：

       var columns = [
{
    field: "Field_Locked1",
    title: "F1",
    editor: "",
    attributes: { style: "text-align: left;" },
    sortable: false,
    footerTemplate: "T",
    width: "30px"
    },
    {
        field: "Field_locked2",
        title: "F2",
        editable: false,
        attributes: { style: "text-align: left;" },
        template: "#=test(string)#",
        footerTemplate: "<div style='text-align: right;'>1</div><hr/><div style= 'text-align: right;'>2</div>",
        width: "370px",
        sortable: false
   }
];

   for (var i = 0; i < customColumns.length; i++) {
    var itemTab = customColumns[i];
   var dinamicColumn = {
       field: itemTab.Name,
       title: itemTab.Code,
       editable: false,
       type: "number",
       attributes: { style: "text-align: right;" },
       sortable: false,
       width: "200px",
       template: "#= test(string)#",
       footerTemplate: "<div style='text-align: right;'>1</div><hr/><div style= 'text-align: right;'>2</div>"
    };

    columns.splice(columns.length, 0, dinamicColumn);
}

创建网格的代码：

function createGridGeneric(tabElement,columns) {

    var gridModel = tabElement.templateDescription.grid;
    var idGrid = gridModel.id;
    var gridToolbal = gridModel.toolbar != null ? gridModel.toolbar:null;
    var gridFooter = gridModel.footer != null ? gridModel.footer : null;
    var hasArea = tabElement.filterArea != null ? tabElement.filterArea.visible : false;

    var grid = $("#" + idGrid).data("kendoGrid");
    if (grid != null) {
        $("#" + idGrid).empty();
    } 

    $("#" + idGrid).kendoGrid({
        autoBind: false,
        columns: columns,
        editable: false,
        filterable: false,
        groupable: false,
        selectable: false,
        sortable: false,
        scrollable: true,
        resizable: true,
        save: function(e) {
        },
        saveChanges: function(e) {
        },
        columnResize: function(e) {
            gridColumnResize(e);
        },
        databound: function(e) { }
     });
     return grid;

}

Kendo网格列锁定问题

0 个答案: