Blazor Master-Detail Grid
The IgbGrid
component supports specifying a detail template that displays additional details for a particular row by expanding/collapsing its content. When specified each record acts as a master, which upon expansion shows a customizable details template with contextual data for the current record.
This mode is useful when you need to display master-detail style data in a hierarchical structure.
Blazor Grid Master-Detail Example
Configuration
To configure the IgbGrid
to display in master-detail mode you need to specify a template for the grid:
<IgbGrid DetailTemplateScript="DetailTemplate" AutoGenerate=true Data=northwindEmployees></IgbGrid>
Context of the template is the master record data, so that values from the master record can be displayed in the detail template. For example:
// In JavaScript
igRegisterScript("DetailTemplate", (ctx) => {
var html = window.igTemplating.html;
var data = ctx.implicit;
return html` <div class="contact-container">
<span><strong>Name:</strong> ${data.ContactName}</span> <br/>
<span><strong>Title:</strong> ${data.ContactTitle}</span> <br/>
<span><strong>Company:</strong> ${data.CompanyName}</span> <br/>
</div>`;
}, false);
API
Additional API methods for controlling the expansion states are also exposed:
Keyboard navigation
When focus is on a detail row:
- 🡑 - navigates one row up, focusing a cell from the previous row.
- 🡓 - navigates one row down, focusing a cell from the next row.
- Tab - Allows focus to move to the next focusable element inside the template if there are focusable elements, otherwise moves to the next grid row.
- Shift + Tab - moves the focus to the previous row.
When focus is on a data row with expander:
- Alt + 🡒 or Alt + 🡓 - expands the row.
- Alt + 🡐 or Alt + 🡑 - collapses the row.
Known Issues and Limitations
Known Limitations | Description |
---|---|
Tab navigation inside the custom detail template may not update the master grid scroll position in case the next focused element is outside the visible view port. | Tab navigation inside the custom detail template is left up to the browser. |
When templating a grid inside the details view that has a <igc-column> definitions, the parent grid will also render those columns. |
This can be avoided using autoGenerate=true for the nested grid. In case some aspect of those columns need to be modified the ColumnInit event can be used. |
Details template will not be exported to Excel. | As the details template can contain any type of content we cannot export it to excel out of the box. |
The search feature will not highlight elements from the details template. |