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.

• Auto height: height of row equal to content. It's done by setting 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.
• Fix height with scrolling of detail container: Height of detail row is fixed by setting 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;
  }
  

• Fix height with scrolling of detail grid: Height of detail row is fixed by setting 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.

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