javascript - 在剑道 UI 中加载页面时隐藏详细信息表（k-detail-cell）

Question

我想在页面加载时隐藏详细信息表

但是当单击主行上的三角形时，它会显示

http://demos.kendoui.c​​om/web/grid/detailtemplate.html

那是我在萤火虫上检测到的元素。

Answer 1

我怀疑您可以将 a 添加style="display: none;"到 的主容器中detailTemplate，但这可能会抛出 Master Row 三角形的行为。

<div class="tabstrip" style="display: none;">
    <ul>
        <li class="k-state-active">
           Orders
        </li>
        <li>
            Contact Information
        </li>
    </ul>
    <div>
        <div class="orders"></div>
    </div>
    <div>
        <div class='employee-details'>
            <ul>
                <li><label>Country:</label>#= Country #</li>
                <li><label>City:</label>#= City #</li>
                <li><label>Address:</label>#= Address #</li>
                <li><label>Home Phone:</label>#= HomePhone #</li>
            </ul>
        </div>
    </div>
</div>

您可以改为在页面加载时隐藏它：

$('tr.k-master-row + tr.k-detail-row').hide();                  

或者，只是在数据绑定发生时使用隐藏的详细信息行初始化网格（可能是最好的解决方案）：

//...
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataBound: function() {
    this.collapseRow(this.tbody.find(">tr.k-master-row"));
},
//...

Answer 2

                            dataBound: function (e) {
                                var grid = e.sender;

                                items.each(function (e) {
                                    var dataItem = grid.dataItem(this);

                                    if (dataItem.SubGroups.length == 0)
                                        grid.tbody.find("tr[data-uid=" + dataItem.uid + "].k-master-row>.k-hierarchy-cell>a").hide();
                                });