grouping and details row expand/collapse

[David]

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]

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. 

JsPlayground sample: http://jsplayground.syncfusion.com/mxhsds52 

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

Regards, 

Thavasianand S. 

[David]

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]

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. 

JsPlayground sample: http://jsplayground.syncfusion.com/lzijdi5z 

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

Regards, 

Thavasianand S. 

[David]

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]

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. 

JsPlayground Sample: http://jsplayground.syncfusion.com/0bxppzie 

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.