We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Expand details of selected record

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.

1 Reply

BM Balaji Marimuthu Syncfusion Team November 20, 2015 06:50 AM UTC

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


                dataSource: window.employeeView,

                allowGrouping: true,

                allowSorting: true,

                 . . .

                childGrid: {

                    dataSource: window.gridData,

                    queryString: "EmployeeID",

                    allowPaging: true,

                    . . .


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


                    //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



Balaji Marimuthu

Live Chat Icon For mobile
Up arrow icon