Row Details

The row details feature allows you to easily add expandable rows to your grid.

Inside the expandable section, you can add ZingGrid inside to have nested grids.

This guide explains the different ways to enable row details.

Row-Details-Renderer

You can setup a function that returns the innerHTML of the row details section.

To enable row details, use the row-details-renderer attribute and set it to the name of your renderer function.

Note that we define which columns to display in the parent grid. Then in the renderer, we specify the index of the data we want to display in child grid.

<zing-grid row-details-renderer="rowDetailsRenderer" data='[
    { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
    { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
    { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
  ]'>
  <zg-colgroup>
    <zg-column index="first"></zg-column>
    <zg-column index="last"></zg-column>
  </zg-colgroup>
</zing-grid>

let rowDetailsRenderer = (record, oDOMRowDetails) => {
  const nestedGrid = document.createElement('zing-grid');
  nestedGrid.data = record.tests;
  return nestedGrid;
};

ZingGrid.registerMethod(rowDetailsRenderer);

Row-Details-Renderer Grid

Here is a complete grid with row-details using a renderer function:

Row-Details-Template

An alternative way to set the contents of the row details section is by using the <template> tag.

Then enable row details with row-details-template by setting it to the id of your <template>.

<zing-grid row-details-template="rowDetailsTemplate" data='[
  { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
  { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
  { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
]'>
  <zg-colgroup>
    <zg-column index="first"></zg-column>
    <zg-column index="last"></zg-column>
  </zg-colgroup>
</zing-grid>

<template id="rowDetailsTemplate">
  <zing-grid data='[[record.tests]]'>
    <zg-colgroup>
      <zg-column index="test1"></zg-column>
      <zg-column index="test2"></zg-column>
      <zg-column index="test3"></zg-column>
    </zg-colgroup>
  </zing-grid>
</template>

Row-Details-Template Grid

Here is a complete grid with row-details using a template:

ZGRowDetails Component

Instead of using the <zing-grid> attributes above to enable row details, you can also do it through the <zg-row-details> component.

Note that <zg-row-details> must contain a <template> of what you want in the row details section.

<zing-grid data='[
  { "first": "Maria", "last": "John", "tests": [{"test1": 0.92, "test2": 0.97 ,"test3": 0.84}] },
  { "first": "David", "last": "Smith", "tests":  [{"test1": 0.86, "test2": 0.79, "test3": 0.86}] },
  { "first": "Felicity", "last": "Snow", "tests": [{"test1": 0.84, "test2": 0.66, "test3": 0.76}] }
]'>
  <zg-colgroup>
    <zg-column index="first"></zg-column>
    <zg-column index="last"></zg-column>
  </zg-colgroup>
  <zg-row-details>
    <template>
      <zing-grid data='[[record.tests]]'>
        <zg-colgroup>
          <zg-column index="test1"></zg-column>
          <zg-column index="test2"></zg-column>
          <zg-column index="test3"></zg-column>
        </zg-colgroup>
      </zing-grid>
    </template>
  </zg-row-details>
</zing-grid>

ZGRowDetails Grid

Here is a complete grid with row-details using <zg-row-details>:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• getRowDetailsRenderer() API Method
• API Events List