在kendo ui中加载页面时隐藏详细信息表（k-detail-cell）

Question

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

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

http://demos.kendoui.com/web/grid/detailtemplate.html

来自我在firebug上检测到的元素。

Answer 1

我怀疑你可以为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();
                                });