Question

I want to hide the detail table when page loaded

but when click on the triangle on master row, it displays

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

that’s from the element I detect on firebug.

Answer 1

I suspect you could add a style="display: none;" to the main container for the detailTemplate, but that will probably throw the behavior of the Master Row triangle.

<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>

You could instead, just hide it on page load with:

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

or, just initialize the grid with the detail rows hidden when databinding occurs (probably the best solution):

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