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

Question

我想在页面加载时隐藏明细表

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

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

那是我在 Firebug 上检测到的元素。

Answer 1

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

<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();                  

或者，仅在数据绑定(bind)发生时使用隐藏的详细信息行初始化网格(可能是最佳解决方案):

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