> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/advanced-guides/inline-grid-setup.md). # Grid - Inline Components All GridMate grids (**GM - RelatedList Grid, GM - FieldSet Grid, GM - ListView Grid...**) can be configured to display inline grids. Multiple grids could be displayed under each record to show child objects in a grid way. We can have a hierarchy of grids like **Accounts** => **Opportunities** => **Opportunity Products** ## Master Grid Setup Edit the Account Lightning page and configure the opportunities grid using the component **GM - RelatedList Grid.** With the Lightning App builder and the [configuration wizard](/advanced-guides/grid-configuration.md), we can configure every aspect of the grid. ![Opportunities on Account page](https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEsSbGy_U_OhthKUpxu%2F-MGEXALESGWJTtsAwqCY%2F-MGE_RWl4lwqg9bNPqPW%2FScreenshot%202020-09-02%20at%2018.09.27.png?alt=media\&token=d77aa74a-02d5-46ab-92fa-1208049ca26d) ## **Child Grid Setup** Edit the Opportunity page and configure the opportunity products grid using the Lightning App Builder. ![Opportunity Products on Opportunity page](https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MEsSbGy_U_OhthKUpxu%2F-MGEXALESGWJTtsAwqCY%2F-MGEaAzZgkXcCZQpC02x%2FScreenshot%202020-09-02%20at%2018.13.38.png?alt=media\&token=0ed05ca1-7af5-4cb0-b8c1-b0a6b7ee09f3) ## Inline Grid Setup Copy the configuration from the child grid (Opportunity Products) and paste it to the master grid (Opportunities) in **Record Related Components** property. See the video below :point\_down: {% embed url="" %} Grid - Inline Components {% endembed %} {% hint style="info" %} The child grid can be deleted if it's not needed on the child object once the configuration is done. {% endhint %} ## Split View Setup Split View feature significantly improves productivity by enabling simultaneous work on multiple tasks without the need to switch between different windows, enhancing efficiency and streamlining the work process. #### Enable split view Enabling the Split View feature allows you to apply the split view on your grid.
#### Split View Setup Once you enable the Split View option, you can apply the split view on your grid. The video below is a step-by-step tutorial to learn how to use the **Split View**:point\_down:. {% embed url="" %} Split View {% endembed %} ## Multi Inline Components **Setup** The inline grid component provides the ability to configure multiple components. Here's a configuration: ```json [ { "component": "gmpkg:RecordLayoutComponent", "attributes": { "targetObjName": "Contact", "recordIdField": "Sponsor__c", "showBorder": true, "recordLayout": "{\"sections\":[{\"name\":\"SponsorInformation\",\"label\":\"Sponsor Information\",\"active\":true,\"cols\":3,\"rows\":[[{\"apiName\":\"ReportsToId\"},{\"apiName\":\"MailingStreet\"},{\"apiName\":\"MailingCountry\",\"coloring\":[{\"color\":\"#a6f79e\",\"exp\":{\"MailingCountry\":{\"operator\":\"=\",\"value\":\"USA\"}}}]}],[{\"apiName\":\"MailingCity\",\"autocomplete\":[\"Paris\",\"New York\",\"London\",\"Rome\"],\"noWhitespace\":true}],[{\"apiName\":\"CreatedById\",\"noWhitespace\":true}],[{\"apiName\":\"LastModifiedById\",\"noWhitespace\":true}],[{\"apiName\":\"Notes__c\",\"noWhitespace\":true}],[{\"apiName\":\"RecordTypeId\",\"noWhitespace\":true}]]}]}" } }, { "component": "gmpkg:RelatedListDataGridComponent", "attributes": { "relatedListLabel": "Contact Roles", "rowLimit": 100, "pageSize": 10, "customIcon": "standard:contact", "filter": "{}", "order": "", "canUpdate": true, "canMassUpdate": true, "canDelete": true, "canCreate": true, "showBorder": true, "showColumnBorder": true, "recordDetail": true, "canFilter": true, "canClone": true, "canExport": true, "canImport": false, "canFreeze": true, "canExplore": false, "fullRecordCreation": true, "defaultValues": "{}", "jsonActions": "[]", "buttonActions": false, "visibleActions": 0, "jsonRecordActions": "[]", "frozenColumns": 0, "TotalColor": "#FFFFFF", "TotalBgColor": "#0176D2", "recordRelated": "[]", "density": "comfy" } }, { "component": "gmpkg:RelatedListDataGridComponent", "attributes": { "relatedListLabel": "Opportunity Team", "rowLimit": 100, "pageSize": 10, "customIcon": "standard:contact", "filter": "{}", "order": "", "canUpdate": true, "canMassUpdate": true, "canDelete": true, "canCreate": true, "canFilter": true, "canClone": true, "canExport": true, "canImport": false, "canFreeze": true, "canExplore": false, "fullRecordCreation": true, "showBorder": true, "showColumnBorder": true, "recordDetail": true, "defaultValues": "{}", "jsonActions": "[]", "buttonActions": false, "visibleActions": 0, "jsonRecordActions": "[]", "frozenColumns": 0, "TotalColor": "#FFFFFF", "TotalBgColor": "#0176D2", "recordRelated": "[]", "density": "comfy" } }, { "component": "gmpkg:RelatedListDataGridComponent", "attributes": { "relatedListLabel": "Products", "rowLimit": 100, "pageSize": 10, "customIcon": "standard:contact", "filter": "{}", "order": "", "canUpdate": true, "canMassUpdate": true, "canDelete": true, "canCreate": true, "canFilter": true, "canClone": true, "canExport": true, "canImport": false, "canFreeze": true, "canExplore": false, "fullRecordCreation": true, "defaultValues": "{}", "jsonActions": "[]", "buttonActions": false, "visibleActions": 0, "showBorder": true, "showColumnBorder": true, "recordDetail": true, "jsonRecordActions": "[]", "frozenColumns": 0, "TotalColor": "#FFFFFF", "TotalBgColor": "#0176D2", "recordRelated": "[]", "density": "comfy" } } ] ``` ## Configuration Inline components are read from the **Record Related Components** property of the grid; **Extra Record Related Components** is appended to it for large configurations. Supported grids: GM - RelatedList Grid, FieldSet Grid, ListView Grid, Parent RelatedList Grid, Dynamic FieldSet Grid, ListView Kanban, FieldSet Kanban, Flow View Grid, RelatedList Cards, Accordion and Tabs. For GM - User Grid, the list is built from **Config. Wiz → Inline Components** and laid out as Stacked, Accordion or Tabs. Each entry is a component name and its App Builder attributes: ```json [ { "component": "gmpkg:RecordPageLayoutComponent", "attributes": { "sObjectName": "Contact" } } ] ``` * `component` — any GridMate component, a standard component (`forceChatter:feed`) or your own exposed Aura/LWC component (see [Grid - Custom Inline Component](/advanced-guides/grid-custom-inline-component.md)). * `attributes` — the component properties, named as in the App Builder. `recordId`, `sObjectName` and `inline` are set by the grid from the current row. `$recordId` in any attribute is replaced by the row Id; `"recordId": "$AccountId"` targets a lookup of the row instead. The **Inline Config** toolbar action of a grid or a Record Layout copies its current configuration as a ready-to-paste entry. More samples: [Config Snippets](/troubleshooting/config-samples.md).