How to show context-menu in a ChildGrid

Question

I need to show context-menu in records of a ChildGrid, how can I achieve this?CordialmenteBenjamim Bessa

Aishwarya Rameshbabu · Answer

Hi Benjamim Bessa,Greetings from Syncfusion support.After reviewing your query, we have noticed
that you need to display the context menu in the childGrid records of the
Syncfusion Grid. In order to achieve this, it is necessary to inject the ContextMenuService.
To enable the context menu within the grid, you can configure the grid's contextMenuItems
property. We have prepared a sample that aligns with your requirements. For
more detailed information, please refer to the provided sample, code example,
and documentation link.

App.component.ts
   
      public childGrid: GridModel = {
          dataSource: data,
          allowSorting: true,
          allowPaging: true,
          allowGrouping:true,
          editSettings: {allowEditing: true, allowDeleting: true },
          allowPdfExport: true,
          allowExcelExport: true,
          contextMenuItems: ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending', 'Copy', 'Edit', 'Delete', 'Save', 'Cancel', 'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage', 'LastPage', 'NextPage', 'Group', 'Ungroup'],
          queryString: 'EmployeeID',
          columns: [
              { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 90 },
              { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
              { field: 'ShipCity', headerText: 'Ship City', width: 100 },
              { field: 'ShipName', headerText: 'Ship Name', width: 120 }
          ],
      };

Sample: https://stackblitz.com/edit/github-tokh86?file=src%2Fapp.component.tsDocumentation Link: Context-menuAPI Reference: contextMenuItemsScreenshot:If
you need any further assistance or have additional questions, please feel free
to contact us.RegardsAishwarya
R

Benjamim Goulart Bessa · Answer

Hi

Aishwarya R,Thanks a lot, works like a charm!!!One more question, how can I get all children of a parent selected record?RegardsBenjamim Bessa

Aishwarya Rameshbabu · Answer

Hi Benjamim
Bessa,We
glad to hear that the solution provided met your requirements. Before
proceeding with the solution for the second query, we kindly request additional
information that will aid us in gaining a better understanding of the query.
Please provide the following details:
 In your query, you mentioned, "how can I get all
     children of a parent selected record?" Could you please confirm if
     you require the childGrid instance of the selected parent record?
     If so, please explain the purpose and use case of obtaining the childGrid
     instance.

Additionally, please provide details on the number of
     childGrid levels utilized in the Grid, as well as the type of data binding
     employed (Remote or Local data). If Remote data binding is utilized,
     kindly share the adaptor details.

Furthermore, please share the complete Grid rendering
     code, the childGrid definition, and any customized functions that are
     being utilized.

Please inform us of the Syncfusion package version you
     are using currently

If possible, please share simple sample illustrating
     the use case of your requirement along with a video demonstration.
RegardsAishwarya
R

Benjamim Goulart Bessa · Answer

Hi Aishwarya RI managed to work around the previous request, but now I need to get the list of selected rows in the child grid, how do I achieve this? I'm using ({ mode: 'Row', type: 'Multiple' } as a selection parameter.RegardsBenjamim Bessa

Aishwarya Rameshbabu · Answer

Hi Benjamim
Bessa,After
reviewing your inquiry, we have observed that you are looking to retrieve the
selected rows from the childGrid within the Syncfusion Grid. To achieve this,
you can utilize the method getSelectedRows() to obtain the selected
rows. We have
developed a sample demonstration where a button is displayed in the toolbar. By
selecting records and clicking this button, the selected rows of the childGrid
will be displayed in the console through the toolbarClick event of the
Grid. Please
refer to the provided sample and video demonstration for further clarification.
If this solution does not align with your requirements, kindly provide
additional details regarding your specific scenario and use case. This will
enable us to offer a more tailored solution.Sample: https://stackblitz.com/edit/github-tokh86-fenjcq?file=src%2Fapp.component.tsAPI
References:getSelectedRowstoolbarClickRegardsAishwarya
R