# 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](/files/-MGE_RWl4lwqg9bNPqPW) ## **Child Grid Setup** Edit the Opportunity page and configure the opportunity products grid using the Lightning App Builder. ![Opportunity Products on Opportunity page](/files/-MGEaAzZgkXcCZQpC02x) ## 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: ```coffeescript [ { "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" } } ] ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.gridmate.io/advanced-guides/inline-grid-setup.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.