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

Thread ID:

Created:

Updated:

Platform:

Replies:

95752 Jul 29,2010 12:45 AM UTC Aug 2,2010 01:52 PM UTC ASP.NET MVC (Classic) 4
loading
Tags: Grid
Todd
Asked On July 29, 2010 12:45 AM UTC

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.

Krishnaraj D [Syncfusion]
Replied On 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

Todd
Replied On 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.



Todd
Replied On 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.

Krishnaraj D [Syncfusion]
Replied On 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

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

;