> 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/columns-and-editing/inline-grid-setup.md). # Grid - Inline Components Show child grids, record layouts and other components inline under each grid row, with split view. 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 [Config Wiz](/advanced-guides/grid-setup/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 👇 {% 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.
#### Use Split View 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**👇. {% 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/columns-and-editing/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](/package-reference/config-samples.md). ## Next steps
Grid - Custom Inline ComponentDisplay your own Aura or LWC component under each grid row.Grid - Custom Inline Component
Config SnippetsCopy-paste JSON configurations for inline components and more.Config Snippets
Related List GridShow related lists in an editable grid on any record page.Related List Grid
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.gridmate.io/advanced-guides/columns-and-editing/inline-grid-setup.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.