How to access to grid instance of child component from parent?

[Roman Buhtiyarov]

Hi, Is it possible to access grid instance of child component from parent?

[Farveen Sulthana Thameeztheen Basha]

Hi Roman, 

Thanks for contacting Syncfusion Support. 

Query#:- Is it possible to access grid instance of child component from parent? 

 

We have checked your query and childGrid has been rendered while on clicking on the expand icon of the parentGrid. So that we can access the grid instance of the childGrid using dataBound or actionComplete event of the childGrid. 

 

Before proceeding this we need some more additional details about this requirement. Share us the following details. 

 

1. Complete code example(Have you used detail Template or HierarchyGrid).
2. Purpose of getting child grid Instance from parent.
3. Detailed Explanation of your requirement.

Regards, 

Farveen sulthana T 

[Roman Buhtiyarov]

My purpose of accessing grid instance of child component is to create a reusable component. I want to write some wrapper component including custom styles and generic custom features of grid. So when I use wrapper component in other component, I can't access gridInstance created inside the wrapper component. Especially, I wanted to call gridInstance.addRecord() outside the wrapper component. 

[Farveen Sulthana Thameeztheen Basha]

  

Hi Roman, 

Query#:-To get childGrid Instance from parent. 

 

We have achieved this requirement using (get childGridInstance) on external button click. In the button click, we have traverse from the parent Instance and get the .e-detailrow class(class which is bind for childGrid). From that we have get the childGrid instance. 

Refer to the code example:- 

<button type="button" onclick="refreshData()">ChildGrid instance</button> 

      

              <script type="text/babel"> 

               

                    $(function(){ 

                                

                             .          .          . 

                             var child = { 

                               dataSource: window.gridData, 

                               queryString: "EmployeeID", 

                                

          

                             }; 

                                                          

                             

                            ReactDOM.render(  

                                            

                                           <EJ.Grid id="Grid1" dataSource = {window.employeeView} editSettings={editSettings} toolbarSettings={toolbarSettings} allowPaging = {true} allowSelection ={true} pageSettings={pageSettings} allowGrouping={true}  childGrid ={child} > 

                                                            .      .      .                                         

                                                                                                      

                                         </EJ.Grid> 

                              

          document.getElementById('Grid1') 

                  ); 

                              

              }); 

                 

                   

               </script> 

              <script> 

                   function refreshData(){ 

                                   var gridObj = $("#Grid1").ejGrid("instance"); 

                                   var childID = gridObj.element.find('.e-detailrow').find('.e-grid'); 

                                   var gridInstance = childID.ejGrid("instance"); 

                       } 

              </script> 

 

Refer to the sample Link:- 

https://www.syncfusion.com/downloads/support/forum/151909/ze/ReactJS_(3)-240971783.zip 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T