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.
Syncfusion Feedback

grouping and details row expand/collapse

Thread ID:

Created:

Updated:

Platform:

Replies:

130932 Jun 12,2017 11:56 AM UTC Jun 19,2017 08:48 AM UTC JavaScript 5
loading
Tags: ejGrid
David
Asked On June 12, 2017 11:56 AM UTC

Hello,
I have a Grid where grouping is allowed, I also have a detailRow with a template.
The problem is that I want that when the grid is loaded all the groups are collapsed and I made it whit this.collapseAll(); in dataBound but then I'd like that when the user expands a group all its items expand so that detail rows are visible. I'va found a detailsExpand event but can't find a "groupExpand" event or something similar. How can I obtain a similar result? 

Thanks, best regards.

David

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 13, 2017 12:02 PM UTC

Hi David, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to need a groupExpand event while clicking on the expand icon in Grid. By, default we don’t have the support for the groupExpand event when the grouped columns get expand. So, we suggest you to bind the mouseDown event for the expand icon in grid. 

Refer the below code example. 


$(function () { 
        $("#Grid").ejGrid({ 
            // the datasource "window.gridData" is referred from jsondata.min.js 
            dataSource: window.gridData, 
            allowPaging: true, 
            allowGrouping: true, 
            groupSettings: { groupedColumns: ["ShipCountry", "ShipCity"] }, 
            columns: [ 
                     -------- 
            ], 
 
            dataBound: function (args) { 
 
                this.collapseAll(); 
            } 
        }); 
 
        $("#Grid .e-gnextforward").mousedown(function (e) { // bind mouse down event for expand icon 
 
            //DO your operations here 
 
        }); 
 
    }); 



We have prepared a JsPlayground sample in the following link. 


If we misunderstood your query then please get back to us. 

Regards, 
Thavasianand S. 


David
Replied On June 14, 2017 03:01 PM UTC

Thanks for your answer,
I also found that solution but now comes my problem. i'd like that on this "mouseup" event obviously the group I clicked on expands but also ALL his detailrows.
On your example when you click on "#Grid .e-gnextforward" this group (ship Country) should expand but ALSO automatically expand his "ship City" 's.
I don't know if I should use something like .expandAll() or if I should toggle a class and more important which object/element should I target.

Best regards.

David

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 15, 2017 02:59 PM UTC

Hi David, 

In this query we suspect that you want to expand the nested grouped columns, while click on expand icon in Grid. So, we suggest you to expand the nested grouped columns using the expandCollapse() method. 

Refer the below code example. 


$(".e-recordpluscollapse[ej-mappingname = '" + gridObj.model.groupSettings.groupedColumns[0] + "']").mousedown(function (e) { // bind mouse down event for expand icon 
                var gridObj = $("#Grid").ejGrid('instance'); 
                for (var i = 1 ; i < gridObj.model.groupSettings.groupedColumns.length ; i++) { 
                    var target = $(".e-recordpluscollapse[ej-mappingname = '" + gridObj.model.groupSettings.groupedColumns[i] + "']") //target of expand icons   
                    for (var count = 0 ; count < target.children().length; count++) 
                        gridObj.expandCollapse(target.children().eq(count)); 
                } 
 
            }); 



We have modified the JsPlayground sample in the following link. 


If we misunderstood your query then please get back to us. 

Regards, 
Thavasianand S. 


David
Replied On June 16, 2017 06:20 AM UTC

Hello,
Actually your method works well but not for my purpose ... that's caused by the different structure of my grid and your example grid (I didn't explained myself).
In your grid there's a first grouping (ship country) and then a second grouping (ship city)and then the data while in mine there is a first grouping then the data and for each data there's a detail row. I'd like to expand automatically these detail rows.  
I've modified your example  so  maybe is clearer. 
http://jsplayground.syncfusion.com/0eol1pom
As you can see I've created a detail roe containing the "Customer ID" and the "Employee ID".
What I want to do is: when I click to expand a "Ship Country" all his nested elements should have their detail row expanded so that Customer ID and Employee Id are visible.

Hope I've explained myself better, waiting for help.

Best regards.
David

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 19, 2017 08:48 AM UTC

Hi David, 

As per your requirement we have prepared a JsPlayGround sample with while click the expand icon in the groupcaption row, also expand that detail row inside the groupcaption row and it can be downloadable from the below location. 


Refer the below code example. 


$(".e-recordpluscollapse[ej-mappingname = '" + gridObj.model.groupSettings.groupedColumns[0] + "']").mousedown(function (e) { // bind mouse down event for expand icon 
 
                var gridObj = $("#Grid").ejGrid('instance'); 
                var target = $(e.currentTarget).parent(); 
                if (!target.next().hasClass("e-groupcaptionrow")) { 
                    var rows = target.next().find('.e-table.e-recordtable tr'); 
                    for (var i = 0 ; i < rows.length ; i++ ) 
                        gridObj.expandCollapse($(rows).eq(i).find("td.e-detailrowcollapse")); // expand the detail row  
                } 
                    
 
            }); 



Regards, 
Thavasianand S. 


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.

Warning Icon 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.Close Icon

;