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.

Grid Collapsed on DataBound

Thread ID:

Created:

Updated:

Platform:

Replies:

127007 Oct 20,2016 01:18 PM Nov 15,2016 07:40 AM ASP.NET MVC 5
loading
Tags: Grid
Dayne
Asked On October 20, 2016 01:18 PM

Hi,

I have a grid, in which the desire default behavior is that it apears collapsed and not expanded.

I tried to do this

.ClientSideEvents(eve => { eve.DataBound("Collapse"); })

function Collapse(args) { var tbarObj = $(args.target), grid = this; grid.collapseAll(); //collapse Grid using grid instance, `this` is grid instance }

But when I edit a row, or make some actions, the entire grid expands, and the expected result is that the grid keep the state, so, if everything is collapse and just one row is expanded, when I do some action, all the other rows, keep their state.

Thanks in advance



Prasanna Kumar Viswanathan [Syncfusion]
Replied On October 21, 2016 08:41 AM

Hi Dayne, 

Thanks for contacting Syncfusion support. 

Query : “If I then edit a row and press save, all the groups expand.” 
 
We created a sample according to your code example and we able to face the mentioned behavior. To achieve your requirement, we suggest you to use the beginEdit and endEdit events of ejGrid. In the beginEdit event we get the expanded group columns. 

In the endEdit event we collapse all the rows by using collapseAll() method and expand the particular column by using expandCollapse method. 

Please find the code example and sample: 


@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource((IEnumerable<object>)ViewBag.datasource) 
    ------------------------------------- 
   .AllowPaging() 
    .AllowGrouping() 
    .GroupSettings(group => { group.GroupedColumns(col => { col.Add("Freight"); }); }) 
        .ClientSideEvents(eve => { eve.DataBound("dataBound").BeginEdit("edit").EndEdit("endEdit"); }) 
    .Columns(col => 
     { 
       ---------------------------- 
    }) 
    ) 
 
<script> 
    function dataBound(args) { 
        var tbarObj = $(args.target), 
        grid = this; 
        grid.collapseAll(); //collapse Grid using grid instance, `this` is grid instance                 
    } 
 
    function edit(args) { 
        detailRows = this.element.find(".e-recordplusexpand"); 
    } 
    function endEdit(args) { 
        this.collapseAll(); 
        var collapse = this.element.find(".e-recordpluscollapse"); 
        for (var i = 0 ; i < detailRows.length ; i++) { 
            for (var j = 0 ; j < collapse.length ; j++) { 
                if ($(collapse[j]).siblings().text() == $(detailRows[i]).siblings().text()) 
                    this.expandCollapse($(collapse[j]).children()); 
            } 
        } 
    } 
 
</script> 

 
Refer to the Help document for the beginEdit and endEdit event.  
 
 
 

Regards, 
Prasanna Kumar N.S.V 


Dayne
Replied On November 2, 2016 02:21 PM

Excellent!! This solution works just fine!! Thanks!!

Prasanna Kumar Viswanathan [Syncfusion]
Replied On November 3, 2016 12:08 AM

Hi Dayne, 

We are happy to hear that the provided solution has been working fine at your end. 

Please let us know if you need any further assistance. 

Regards, 
Prasanna Kumar N.S.V 


Laura Jordan
Replied On November 14, 2016 10:31 AM

Hi,

I am using code example for Grid collapse and it works fine most of the time, but sometimes when I expand one group and start to edit some rows, it collapse (the group that I am editing).

Can you please have any solution to avoid that behavior? What I want is that the current editing group doesn't collapse. 

Appreciate the support,

Thanks

Prasanna Kumar Viswanathan [Syncfusion]
Replied On November 15, 2016 07:40 AM

Hi Dayne, 

We checked in our sample and rows does not get collapse when we edit the rows. For your convenience we attached a video and download the video from the following link 


When grouping is applied, grouped records are organized into a hierarchical structure based on the value of Grouping column. When we change the particular value by editing, the particular row will be moved to another page/group based on the value. So, it seems the rows gets to be collapsed. We suspect that this is the issue that you will be facing in your sample.  
 
 
If still you face the same issue, share the following details  
 
1. Code example of a Grid. 
 
2. If possible, replicate the issue in the attached sample.  
 
3. Essential Studio Version. 
 
Regards, 
Prasanna Kumar N.S.V 
 


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.

;