Expand details of selected record

[Lory]

Hi Team,

How do I expand the details of the selected record? If I understand it right, the expandCollapse method would handle this but I'm confused on how to get the target object I needed to pass as parameter.

I tried $("#Grid").ejGrid("expandCollapse", $("tr td.recordplusexpand > div").first()); but it didn't work for me.

I hoe you could provide me some guidance on this matter. Thanks.

[Balaji Marimuthu]

Hi Lory,

Thanks for contacting Syncfusion support.

Your requirement is achieved using the rowSelected event in Grid and you can get the target of the selected row using args.row. Refer to the sample and code example as below.
Jsplaygroundsample: http://jsplayground.syncfusion.com/t04qydpu

            $("#Grid").ejGrid({

                dataSource: window.employeeView,

                allowGrouping: true,

                allowSorting: true,

                 . . .

                childGrid: {

                    dataSource: window.gridData,

                    queryString: "EmployeeID",

                    allowPaging: true,

                    . . .

                },

                rowSelected: function (args) { //event triggered for parent grid

                    this.expandCollapse(args.row.find('.e-detailrowcollapse'));

                    //other way

                    //$("#Grid").ejGrid("expandCollapse", args.row.find('.e-detailrowcollapse'));                },

            });

Help Document: http://help.syncfusion.com/js/api/ejgrid#events:rowselected

In above code example we have passed the selected records e-detailrowcollapse target, to expand the details of selected record in DetailTemplate and Hierarchy Grid.

To perform both expand and collapse when select the records, you can use the below code example:

                rowSelected: function (args) { //event triggered for parent grid

                    this.expandCollapse(args.row.find('td:first'));

                   
                },

Regards,
Balaji Marimuthu