Grouping doesn't work in Grid when settings columns in controller code

Title:

    @Html.Awe().Grid("LeaveDetails").Columns(
        new Column { Name = "EmpNo", PercentWidth = 8, Header = "Roll No." },
        new Column { Name = "Name", PercentWidth = 16, Header = "Name" },
        new Column { Name = "Month", PercentWidth = 12, Header="Month"},
        new Column { Name = "NoOfEntries", PercentWidth = 17, Header = "No. of Entries" },
        new Column { Name = "LeaveTaken", PercentWidth = 17, Header = "Leave Taken" },
        new Column { ClientFormat = leaveEditFormat }
    ).PageSize(15)

Grouping in the above grid(it's from .cshtml file) works fine. But when I add the columns for the grid through the .cs file i.e. in the controller(like shown below), the grid doesn't allow me to drag columns and group by that column.

    g.Columns = new[]
    {
     new Column { Name = "EmpNo", PercentWidth = 8, Header = "Roll No." },
     new Column { Name = "Name", PercentWidth = 16, Header = "Name" },
     new Column { Name = "Month", PercentWidth = 12, Header="Year"},                                         
     new Column { Name = "NoOfEntries", PercentWidth = 17, Header = "No. of Entries" },
     new Column { Name = "LeaveTaken", PercentWidth = 17, Header = "Leave Taken" },
     new Column { ClientFormat = leaveeditFormat }
    };

What should I do to make grouping work in the grid? Please help!

After editing the code as in the example you provided:

    g.Columns = new[]
                    {
                         new Column { Name = "EmpNo", PercentWidth = 8, Header = "Emp No.", Sortable = true, Groupable = true, GroupRemovable = true , Order = 1},
                         new Column { Name = "Name", PercentWidth = 16, Header = "Name", Sortable = true, Groupable = true, GroupRemovable = true, Order = 2 },
                         new Column { Name = "Month", PercentWidth = 12, Header="Month", Sortable = true, Groupable = true, GroupRemovable = true , Order = 3},                                         
                         new Column { Name = "NoOfEntries", PercentWidth = 17, Header = "No. of Entries" , Sortable = true, Groupable = true, GroupRemovable = true, Order = 4 },
                         new Column { Name = "LeaveTaken", PercentWidth = 17, Header = "Leave Taken", Sortable = true, Groupable = true, GroupRemovable = true , Order = 5},
                         new Column { Name = "", ClientFormat = leaveeditFormat, Sortable = true, Groupable = true, GroupRemovable = true, Order = 6 }
                    };

Error from Google Chrome's Console:

POST http://localhost:11408/EmpLeaveDetails/EmpLeaveDetailItems 500 (Internal Server Error) jquery.js:8724

Amar Duplantier

asked at 15 Jan 2014

Answers

when you set the columns from controller code you don't get some of the defaults. you need to set Sortable = true, Groupable = true, GroupRemovable = true on each column like here http://demo.aspnetawesome.com/GridChooseColumnsDemo/Index (click show code)
Omu

answered at 15 Jan 2014
- Yeah, I did that. Now it allows me to drag the column headers into the GroupBar but the column disappears from the GroupBar as soon as I drop it and the grid is not grouping. I tried Groupable(true) but that didn't help either. Any other things I should set in the code?
  
  at 16 Jan 2014 Amar Duplantier
- make sure they have Name and give them order as well (like in the example from the link provided above)
  
  at 16 Jan 2014 Omu
- Still not working. I even set those properties to the column that has a ClientFormat, but no luck whatsoever. Updated code is in the question.
  
  at 16 Jan 2014 Amar Duplantier
- when you drag the column above the groupbar another request is sent to the server, that request will have the new modified columns definition (with Grouped = true for that column) if you have .SendColumns(true), my guess is you override the new modified definition on the server; this is why in the example provided in the link above we have this line (we set the g.Columns only on the first load): //first load if (g.Columns.Length == 0){g.Columns = columns;}
  
  at 16 Jan 2014 Omu
- @Html.Awe().Grid("EmpLeaveDetailsLst").ShowGroupBar(true).SendColumns(true).PageSize(15).Url(Url.Action("EmpLeaveDetailItems", "EmpLeaveDetails")) is my grid from cshtml page. Yes I was overriding the grid so I added the SendColumns(true) and I checked for g.Columns.Length, it works on the first load but it throws some error in jquery.js file when I drag a column to the group bar. No request is sent to the server. I attached the error to the question that Google Chrome's console gave me.
  
  at 16 Jan 2014 Amar Duplantier
- 500 (Internal Server Error)is a server that you can debug and find out the problem,put a breakpoint in EmpLeaveDetailItems action
  
  at 16 Jan 2014 Omu

please Sign In to leave an answer