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.
Unfortunately, activation email could not send to your email. Please try again.

Expand details of selected record

Thread ID:

Created:

Updated:

Platform:

Replies:

121226 Nov 19,2015 12:26 PM Nov 20,2015 01:50 AM JavaScript 1
loading
Tags: ejGrid
Lory
Asked On November 19, 2015 12:26 PM

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 [Syncfusion]
Replied On November 20, 2015 01:50 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;