kendo 网格中的 columnHide() 问题，Firefox 呈现错误

Question

我使用Kendo版本v2014.2.716。

我有一个大约有 10 列的网格。并具有根据复选框列表在页面加载时隐藏列的功能。我的网格有一个行模板，在 chrome 和 IE 上运行时一切正常，但在 Firefox 中（我使用 firefox 35.0）header 和列不对齐。

这是我的行模板：

<script id="rowTemplate" type="text/x-kendo-tmpl">
    # var columns = $("\#grid").data("kendoGrid").columns; #
       <tr data-uid="#: uid #">
                <td >
                #var resultFlagReply=GetTypeReply(IssuesID)#
                #var resultIconAttach=HaveIssueAttach(IssuesID,CreatedDate)#
                <p><span style="float:left;">#=resultIconAttach#</span> <span style="float:right;">#=resultFlagReply#</span></p>
       </td>
       <td class="IssuesID" #:columns[1].hidden ? 'style=display:none ' : '' #>
                    #: IssuesID #
       </td>
       <td title="#: Title #" class="ShortTitle" #:columns[2].hidden ? 'style=display:none' : '' #>
       #: ShortTitle #
       </td>
                <td class="CustomerName" #:columns[3].hidden ? 'style=display:none' : '' #>
       #: CustomerName #
       </td>
       <td class="SKU" #:columns[4].hidden ? 'style=display:none' : '' #>
          #: SKU #
       </td>
                <td class="SupportOptionName" #:columns[5].hidden ? 'style=display:none' : '' #>
          #: SupportOptionName #
       </td>
                <td class="CaseReasonName" #:columns[6].hidden ? 'style=display:none' : '' #>
          #: CaseReasonName==null?"":CaseReasonName #
       </td>
                <td class="TicketStatusName" #:columns[7].hidden ? 'style=display:none' : '' #>
          #: TicketStatusName #
       </td>
                <td class="CreatedDate"  #:columns[8].hidden ? 'style=display:none' : '' #>
           #=kendo.format("{0:MM-dd-yyyy}", CreatedDate)#
       </td>
                <td class="DueDate" #:columns[9].hidden ? 'style=display:none' : '' #>
          #=kendo.format("{0:MM-dd-yyyy}", DueDate)#
       </td>
                <td class="AssignedToSupport" #:columns[10].hidden ? 'style=display:none' : '' #>
          #: AssignedToSupport #
       </td>
                <td class="Command">
                    #var resultAlert=GetStatusAlert(IssuesID)#
          <a href="\#" onclick="onBugClick(#: IssuesID #)" Title="Post Bug"><img src="Images/iconBug.png" /></a>
                   <a href="\#" onclick="onAlert(#: IssuesID #)" Title="Alert Me"><img id="img#: IssuesID #" src="#=resultAlert#" /></a>
                   <a href="\#" onclick="onDiscussClick(#: IssuesID #)" Title="Discuss"><img src="Images/iconDiscuss.png" /></a>
       </td>
      </tr>
</script>

这是我隐藏列的函数：

function GetVisibleColumn() {
        var cbList = document.getElementById("<%=cblSelectFields.ClientID%>");
        var grid = $('#grid').data('kendoGrid');
        var checkbox = cbList.getElementsByTagName("input");
        var label = cbList.getElementsByTagName("label");
        for (var i = 0; i < checkbox.length; i++) {
            if (!checkbox[i].checked) {
                var field = GetFieldName(label[i].innerHTML);
                grid.hideColumn(field);
            }
        }
    };

这个问题只发生在第一次页面加载时，在排序或分页后运行很好。

Answer 1

我问过他们，这似乎是他们会调查的 Firefox 故障。您可以通过执行此操作来解决它 $( "#gridId" ).data( "kendoGrid" ).refresh();

kendo 网格中的 columnHide() 问题，Firefox 呈现错误

Problems with columnHide() in kendo grid, Firefox render wrong

javascript

kendo-ui

kendo-grid