Different Kendo grid Datasource when grouping applied

Question

I have a Kendo grid, with the following decleration:

 @(Html.Kendo().Grid<AgencyAutomation.DomainLayer.ViewModels.InvoiceDetailViewModel>()
              .Name("invoiceDetailGrid")
             .BindTo((IEnumerable<AgencyAutomation.DomainLayer.ViewModels.InvoiceDetailViewModel>)@ViewBag.InvoiceDetails)
              .Columns(columns =>
              {
                  //
                  columns.Bound(p => p.AccountId).Hidden();
                  columns.Bound(p => p.StakeHolderId).Hidden();
                  columns.Bound(p => p.CommissionTypeId).Hidden();
                  columns.Bound(p => p.BillDescription).Hidden();
                  columns.Bound(p => p.GroupNo).Hidden().ClientGroupHeaderTemplate("<span  style='float:right'><button id='btnGroupEdit' onclick='ShowGroupEdit(#=value#)'  class='btn btn-primary round_blue'><i class='fa fa-edit'></i>&nbsp;Edit</button></span>");
                  columns.Bound(p => p.StakeHolderDesc).Filterable(true).Sortable(true).Title("Stakeholder").Groupable(true);
                  columns.Bound(p => p.StakeholderName).Filterable(true).Sortable(true).Title("Stakeholder Name");
                  columns.Bound(p => p.AmountType).Filterable(true).Sortable(true).Title("Amount Type");
                  columns.Bound(p => p.CommissionTypeDescription).Filterable(true).Sortable(true).Title("Commission Type");
                  columns.Bound(p => p.CommissionValue).Filterable(true).Sortable(true).Title("Commission Value").ClientTemplate("#if (CommissionValue > 0){#<div>#=CommissionValue#</div>#} else {#<div></div>#}#");
                  columns.Bound(p => p.PlanCode).Filterable(true).Sortable(true).Title("Plan Code");
                  columns.Bound(p => p.Amount).Filterable(true).Sortable(true).Title("Amount").Format("{0:c2}").ClientFooterTemplate("").ClientGroupFooterTemplate("<div> $#=sum#</div>").Format("{0:c2}");
                  columns.Bound(p => p.GroupNo).Hidden();

                 // columns.Bound(p => p.InvoiceDetailId).ClientTemplate(gridRowIcons).Title("").Filterable(false).Width(90);

              })
             .Pageable(pageable => pageable.ButtonCount(5).PageSizes(true))
              .Filterable()

              .Selectable(selectable => selectable
              .Mode(GridSelectionMode.Single))
              .Navigatable()
              .Groupable(p => p.Enabled(false))
              .DataSource(dataSource => dataSource


              .Ajax()
              .Aggregates(aggregates =>
            {
                aggregates.Add(p => p.Amount).Sum();
            })
                     .Group(groups => groups.Add(p => p.GroupNo))
                  .Model(model =>
                  {
                      model.Id(p => p.InvoiceDetailId);
                  }))
              .Sortable()
              .Filterable()
        )

Based on grouping, which is based on 'GroupNo', i want to modify that particular section on popup, remove existing rows for that group and replace it with new Lineitems. Without grouping applied, i can access the datasource with ease and manipulate the data. But when i access the grid with grouping applied, its datasource length only returns the number of groups available with member property containing the field on which grouping is applied.

I tried removing the grouping with following command: grid.dataSource.group([]) Or grid.dataSource.group("") but it does not change the datasource.

Any advice? I'm little oblivious dealing with grouping on Kendo grid and apparently it seems a hard nut to crack

Answer 1

I ran into the same problem and eventually figured out a solution which works for me. I hope this helps someone. I just ended up enumerating the groups and pushing the items into an array which ends up looking like the ungrouped data.

var grid = $("#gridAdminConfig").data("kendoGrid");
var groupedData = grid.dataSource.data();
var data = [];

//enumerate the groups and grab the actual items
for (var i = 0; i < groupedData.length; i++) {
 for (var j = 0; j < groupedData[i].items.length; j++) {
    data.push(groupedData[i].items[j]);
 }
}