Display group column for Asp.net MVC Grid as collapsed

[Murad Kayani]

How can I display column group for Asp.net MVC grid in collapse mode? Currently by default it expands all groups and associated rows.

In previous version 7.xx when I used to group a column by drag and drop or through code, grid used to display that group as collapsed. Also, there was an option available that you can set in order to display the group either as expanded or collapsed. I didn’t find this option anymore in latest version 8.x that I am using.

[Krishnaraj D]

Hi Murad,

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 (in Site.Master, only after invoking 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 the above solution 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(sender, args) {

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

Please let us know if you have any queries.

Regards,
Krishnaraj D

[Murad Kayani]

Thanks Krishnaraj D.

BTW latest API and features for Asp.net MVC Grid is quite impressive. Nice job!

[Krishnaraj D]

Hi Murad,

Thanks for your positive feedback.
Please let us know if you have any further queries.


Regards,
Krishnaraj D

[Murad Kayani]

We are loading partial pages using Ajax and each page partial page contains Asp.net Grid and running into following issues:

1. Excel Export Issue:
After loading partial page with sync fusion grid if you export grid in excel format it works fine for the first time. But then if you load another asp.net mvc partial page that contains syncfusion MVC grid and try to export. The JavaScript code for export is always calling the action on controller for the grid that was loaded with previous partial page. It seems like it always remembers the excel export action of controller that you load for the first time and call using javascript to export. Here is the code that we are using.
Code:
function ExportGridToExcel() {
var exportMappingAction = $({controllerName/action}).val() + "ToExport";

var gridObj = $find("grdJobs");
gridObj.set_ExcelExportMapper(exportMappingAction);
gridObj.sendExcelExportRequest();

}

2. Sync fusion is not defined:
Very often we see JavaScript that popups saying Syncfusion is not defined.
3. Displaying grid in collapse mode for grouped columns:

The solution provided to me for displaying grid in collapse mode for grouped columns using JavaScript code on client side in following post is causing us performance issues on our client machines. For larger datasets it takes forever to collapse and sometimes it hangs. Please be aware, previous version 7.3 was working fine on our client machines. I believe in older version 7.3 when you grouped columns at runtime it was by default displaying grouped columns in collapsed mode and loading the data on demand when you click on plus sign to expand. Which I think was better solution.

Here is the link for my post related to this issue
http://www.syncfusion.com/support/forums/grid-aspnet/96596/Display-group-column-for-Aspnet-MVC-Grid-as-collapsed

Currently this issue is causing us headaches and we don’t know what should be the solution.

4. How we can cache grid mvc resource file? It is loading each time you are calling partial page.
Please note we are in phase of upgrading our subscription and really love sync fusion products. We hope that these issues would be sorted out quickly.

[Krishnaraj D]

Hi Murad,

Thanks for evaluating Syncfusion Products. We have already updated the response for this query in the incident 72607.

1. Excel Export Issue:

We are not able to reproduce the reported issue. If you redirect it to the correct action and invoke the function set_ExcelExportMapper with the current grid object, it will invoke the correct action.
Please refer the below code snippets. In this below code, “SyncfusionGrid” is the parent div element of the grids which are rendered from the partial view. Using this element we are getting the id’s of the grid and then we are redirecting it to the corresponding action.


function ExportGridToExcel() {
var gridId=$($("#SyncfusionGrid").children()[0]).attr('id');
var gridObj = $find(gridId);
if(gridId == "Grid1")
gridObj.set_ExcelExportMapper("Home/ExportToExcel1");
else if(gridId == "Grid2")
gridObj.set_ExcelExportMapper("Home/ExportToExcel2");
gridObj.sendExcelExportRequest();

}


But, however we have encountered another issue with exporting based on your requirement. If we export the grid (which is rendered from another partial view) after Ajax request, it throws exception. This issue occurs only when you export the first grid and then export the grid after Ajax request. We will fix this issue and update you within three weeks.

2. Syncfusion is not defined:
We are not able to reproduce the issue. We have attached a sample in the link which is updated in your incident.
If you are able to reproduce the reported issue in this sample, please get back to us so that we could update you with more appropriate solution.

3. Displaying grid in collapse mode for grouped columns:
Currently we have don’t have support for expand/collapse mode in ClientSide only. We will implement this support in ServerSide and it will be available in our future releases. This will rectify the reported issues.

4. How we can cache grid mvc resource file? It is loading each time you are calling partial page.

Currently the mvc resources are loaded on demand. In this mode, it is necessary to reload the mvc resources while rendering a grid (with different skin) on Ajax request. For example, initially you are loading a Grid with Sandune skin and in Ajax request you are loading a grid with Almond Skin. In this case, we have to again load the necessary resources for Almond. But if you don’t need this resources to be loaded for each request, then this can be done by registering the necessary resources before rendering the grid control. We have implemented this feature using style manager. This will be available in our upcoming volume4 release.

Please let us know if you have any queries.

Regards,
Krishnaraj D