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.
There are number of ways to manage it.
detailModel.height to auto which is anyway the default value.
Old browsers like IE require addition or import of javascript-detect-element-resize from ParamQuery SDK or npm.
This example is based on auto height.
detailModel.height option to a numeric value.
Scroll of overflowing content is taken care of by adding css rule.
[id^='pq-detail']{
overflow: auto !important;
max-height:120px;
}
detailModel.height option to a numeric value.
Scroll of overflowing content in detail grid is achieved by setting fix height height or maximum height maxHeight option of detail grid.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.
}
}