Receive data by the method that is called by a button on a grid with "Hierarchical Binding". Both on the parent and child grid

Question

Hello, I'm applying the "Hierarchical Binding" to a grid.

In this same grid, I need to have command buttons on the lines, both on the parent grid and the child grid.

I know how to apply the command button on the parent grid and everything works fine, for everything to work I set the index to #grid and then do it according to the documentation.

However in the child grid I don't know how to create this index # grid-child and then use it in the method called by the button, since this grid is created at run time. Is there a way I can dynamically identify this group?

Rajapandi Ravi · Accepted Answer

Hi Fabiano, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to use the command columns in childGrid. Based on your query we have prepared a sample and we suggest you to follow the below way to achieve your requirement. Please refer the below code example and sample for more information. 





this.childGrid = { 
      pageSettings: { pageSize: 6, pageCount: 5 }, 
      columns: [ 
          .  .  .  .  .  .  
        { field: "Freight", headerText: "Freight", width: 120 }, 
        { field: "ShipName", headerText: "Ship Name", width: 150 }, 
        { 
          headerText: "Commands", 
          width: 120, 
          commands: [ 
            { 
              type: "Edit", 
              buttonOption: { cssClass: "e-flat", iconCss: "e-edit e-icons" } 
            }, 
            { 
              type: "Delete", 
              buttonOption: { cssClass: "e-flat", iconCss: "e-delete e-icons" } 
            }, 
            { 
              type: "Save", 
              buttonOption: { cssClass: "e-flat", iconCss: "e-update e-icons" } 
            }, 
            { 
              type: "Cancel", 
              buttonOption: { 
                cssClass: "e-flat", 
                iconCss: "e-cancel-icon e-icons" 
              } 
            } 
          ] 
        } 
      ] 

Sample: https://stackblitz.com/edit/angular-ctos22-sqra7s?file=app.component.ts 

Screenshot: 

  


And in your query you have mentioned that “I don't know how to create this index # grid-child”. We need more information for our clarifications. Please share the below details that will be helpful for us to provide better solution. 

1)        Please share us your exact requirement scenario with detailed description on this query. And share the complete Grid rendering code. 

2)        If possible explain your requirement scenario with pictorial representation or video demonstration. 
Regards,Rajapandi R

Fabiano Melo · Answer

Thanks, working

Rajapandi Ravi · Answer

Hi Fabiano, 

We are happy to hear that our suggested solution was worked fine at your end. 

Please get back to us if you need further assistance.  

Regards,  
Rajapandi R