How to expand rows on grid programatically without clicking on a button

[Shalini]

I have a grid which has child grid for each record and onclick of add the child grid will have one more record and the parent grid has to expand.

on the add button

I'm adding a new record and i want the child grid to automatically expand without clicking on any button.

Attachment: syncfusion_17fd8acc.rar

[Thavasianand Sankaranarayanan]

Hi Shalini, 

According to your query we suspect that you want to expand the parent Grid when you added a new record in Parent Grid. To achieve your requirement we suggest you to use actionComplete event and expandCollapse method of ejGrid.   

Refer the below code example. 

<div class="content-container-fluid"> 

        <div class="row"> 

            <div class="cols-sample-area"> 

                <div id="Grid"></div> 

            </div> 

        </div> 

    </div> 

    <script id="tabGridContents" type="text/x-jsrender"> 

        <div class="tabcontrol" id="Test"> 

            <ul> 

                <li><a rel='nofollow' href="#gridTab{{:EmployeeID}}">Stock Grid</a></li> 

            </ul> 

            

            <div id="gridTab{{:EmployeeID}}"> 

                <div id="detailGrid"> 

                </div> 

            </div> 

             

        </div> 

    </script> 

    <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.employeeView" is referred from jsondata.min.js 

                dataSource: ej.DataManager(window.employeeView), 

                detailsTemplate: "#tabGridContents", 

                detailsDataBound: "detailGridData", 

                            

                  --- 

 

               columns: [ 

 

                           ---- 

 

                ], 

       actionComplete: function(args){ // actionComplete event of parent grid. 

           if(args.requestType == "save"){ 

 

              var trElement = this.getRowByIndex(args.selectedRow); 

 

              this.expandCollapse($(trElement).find('td.e-detailrowcollapse > div')); // expand the newly added row in parent Grid 

           } 

       } 

   }); 

 

}); 

        function detailGridData(e) { 

            var filteredData = e.data["EmployeeID"]; 

            // the datasource "window.ordersView" is referred from jsondata.min.js 

            var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

            e.detailsElement.find("#detailGrid").ejGrid({ 

                dataSource: data, 

                 

                 -- 

 

               columns: [ 

 

                      --- 

 

                ] 

            }); 

 

            

            e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 1 }); 

        } 

    </script> 

We have prepared a simple JsPlayground sample in the following link. 

JsPlayground link: https://jsplayground.syncfusion.com/s5bb0n25 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:expandcollapse 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:getrowbyindex 

Link: https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

Regards, 

Thavasianand S.