Row details

Details of a row can be shown using an html template defined in <script> tags..

Data binding of detail view is done with row data of main grid in initDetail() function which is passed as callback to detailModel.init of parent grid.

Height of detail rows

There are number of ways to manage it.

Expand / Collapse Icons

The icons to expand / collpase row details can be conditionally hidden with help of column.render callback. In this example every 3rd row has hidden detail icon.

//implement render callback to hide expand / collapse icons conditionally.
    render: function (ui) {
        if ((ui.rowIndx +1) % 3 == 0) {
            return ""; //no icon.