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

Grouping

Hello. I am evaluating SyncFusion's EssentialStudio 8.3.0.21 Essential Grid in an ASP.NET MVC 2 scenario.

I adapted the Grouping demo to my application data.

How does one make the initial grid returned be in "collapsed" mode.

What do I mean? For example, in the Grouping demo, suppose I group by CustomerID first and ShipCountry second. The grid comes back looking like:

CustomerID ALFKI - 6 items
ShipCountry Germany 6 items
ALFKI
ALFKI
ALFKI
ALFKI
ALFKI
ALFKI
CustomerID ANATR - 4 items
ShipCountry Mexico - 4 items
ANATR
ANATR
ANATR
ANATR

.
.
.

What do I do so that when I run the query in the web page the grid comes back "collapsed", i.e., the first two displayed items would be:

CustomerID ALFKI - 6 items
CustomerID ANATR - 4 items

.
.
.


I have been looking at code and docs for a while and don't see how to do this.

4 Replies

KD Krishnaraj D Syncfusion Team July 30, 2010 11:57 AM UTC


Hi Todd,
Thanks for your interest in Syncfusion products.
Your requirement can be achieved using the client side method “expandcollapse”.

Please refer the below code snippets.

var gridobj = $find("Grouping_Grid");
$.each($("#Grouping_Grid").find(".RecordPlusExpand"), function() {
gridobj.expandcollapse(this);
});

You need to use this code in Sys.Application.Load event or in $(document).ready() function.

Please let me know, if you have any queries.


Regards,
Krishnaraj D


TO Todd July 30, 2010 07:56 PM UTC

Thank you for the answer. I guess I am asking pretty naive questions, so thank you for your patience.

I added the following to the ServerGroupingPartialView.ascx file in my Views/Grouping folder:



When I tested that, the rendering of the grid was ruined (the skin settings lost, entire rows formatted as a string instead of items in grid cells, etc.), the drag-and-drop of column headers into the top margin to specify group-by nesting feature was broken, and the group data was not collapsed.

Perhaps I didn't code the $(document).ready() function correctly, or maybe I put it in the wrong place. But from looking at other web apps which use it, that was my best guess.




TO Todd July 30, 2010 09:40 PM UTC

I installed Firebug in Firefox and found that within the javascript function gridobj is null after:

var gridobj = $find("Grouping_Grid");

Also it is null if I try "#Grouping_Grid" as in:

var gridobj = $find("#Grouping_Grid");

According to Firebug the class name is in fact "Grouping_Grid" so I don't know why gridobj is null. I tried putting the code block at the end of my AgentGrouping.aspx page instead of in the AgentGroupingPartialView.ascx page, thinking that the "Grouping_Grid" object had not been constructed yet when the javascript assignment to gridobj was attempted.

None of that worked: I still get the rendering and behavior problems I mentioned before.


KD Krishnaraj D Syncfusion Team August 2, 2010 01:52 PM UTC

Hi Todd,

You need to use the document.ready function in Site.Master after calling the function Html.RegisterStaticResources(), as the grid object is created only after registering the script resources. But if you prefer Sys.Application.Load event, you can put it anywhere. So it’s better to use Sys.Application.Load() event. But it will apply for initial grouping only. To achieve this collapse mode in every grouping action, you need to perform the below steps.

Add the ClientSideEvents as below for grid action.

<% =Html.Grid("Grouping_Grid")
.Datasource(Model)
.Caption("Orders")
.EnablePaging()
. . . . . .
. . . . . .
.ClientSideEvents(events =>
{
events.OnActionSuccess("Collapse");

})
%>

Refer the below codes for collapsing in every grid grouping action.

Sys.Application.add_load(function() {

var gridobj = $find("Grouping_Grid");
$.each($("#Grouping_Grid").find(".RecordPlusExpand"), function() {
gridobj.expandcollapse(this);
});
});


function Collapse() {

var gridobj = $find("Grouping_Grid");
$.each($("#Grouping_Grid").find(".RecordPlusExpand"), function() {
gridobj.expandcollapse(this);
});
}


Regards,
Krishnaraj D

Loader.
Live Chat Icon For mobile
Up arrow icon