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

column group settings in ajax call fails in Chrome

Hi,

I am using @(Html.EJ().Grid in my view razor and the grid is using grouping. the complete code is posted below. 
I am using the below ajax call and the setting the groupsetting on call back method on sucess, it work fine in IE browser but the the grouping breaks in Chrome while setting groupsettings in success call back...  I spent many hours and could not make it work and could not get any proper answer in googel.

Could you please help me on this. Thanks



function ajaxRequestToWebApi(startDate, endDate) {
    debugger;
    var gridObj = $("#AccountSessionSummary").ejGrid("instance");
    var sortedColumn = gridObj._cSortedColumn;
    var sortOrder = gridObj._cSortedDirection;
    var groupCaptionformat = gridObj._captionFormat;
    $.ajax({
        //url: GET with servicediscovery!Controller/Action
        url:
            'Session/GetSessionSummaryDetails',
        type: "GET",
        data: {
            accountNumber: $('#accountNumber').val(),
            casinoId: $('#casinoId').val(),
            gamingServerId: $('#gamingServerId').val(),
            filterStartDate: startDate,
            filterEndDate: endDate
        },
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {

            gridObj.setModel({
                dataSource: data,
                allowResizing: true,
                isResponsive: true,
                allowSorting: true,
                allowGrouping: true,
                showSummary: true,
                //summaryRows: [{title: "Total",summaryColumns: [{summaryType: ej.Grid.SummaryType.Sum,displayColumn: "Income",dataMember: "Income" }]   }],
                groupSettings: {
                    groupedColumns: ["Description"],
                    showGroupedColumn: true,
                    captionFormat: groupCaptionformat,
                    showDropArea: false
                }
            });
            gridObj.sortColumn(sortedColumn, sortOrder);
        },
        error: function (xhr, status, error) {
            gridObj.setModel({
                dataSource: ej.DataManager(datasource).executeLocal(ej.Query()),
                allowResizing: true,
                isResponsive: true,
                allowSorting: true,
                allowGrouping: true,
                showSummary: true,
                //summaryRows: [{title: "Total",summaryColumns: [{summaryType: ej.Grid.SummaryType.Sum,displayColumn: "Income",dataMember: "Income" }]   }],
                groupSettings: {
                    groupedColumns: ["Description"],
                    showGroupedColumn: true,
                    captionFormat: groupCaptionformat,
                    showDropArea: false
                }
            });
            gridObj.sortColumn(sortedColumn, sortOrder);


        }
    });
}

Razor view

 @(Html.EJ().Grid<Session>("AccountSessionSummary").Datasource((IEnumerable<Session>)ViewBag.dataSource).IsResponsive(false).AllowResizing(true).AllowGrouping().AllowSorting()
              .AllowTextWrap().AllowScrolling().ShowSummary().SummaryRow(row => row.Title("Total").ShowCaptionSummary().SummaryColumns(col =>
              {
                  col.SummaryType(SummaryType.Sum).DisplayColumn("Income").DataMember("Income").Prefix(@ViewBag.Currency).Format("{0:n2}").Add();
                  col.SummaryType(SummaryType.Sum).DisplayColumn("Payout").DataMember("Payout").Prefix(@ViewBag.Currency).Format("{0:n2}").Add();
                  col.SummaryType(SummaryType.Average).DisplayColumn("Margin").DataMember("Margin").Format("{0:p}").Add();
                  col.SummaryType(SummaryType.Sum).DisplayColumn("NumberOfBets").DataMember("NumberOfBets").Format("{0:n0}").Add();
                  col.SummaryType(SummaryType.Sum).DisplayColumn("NumberOfPayouts").DataMember("NumberOfPayouts").Format("{0:n0}").Add();
                  col.SummaryType(SummaryType.Average).DisplayColumn("AverageBet").DataMember("AverageBet").Prefix(@ViewBag.Currency).Format("{0:n2}").Add();
                  col.SummaryType(SummaryType.Maximum).DisplayColumn("MaxPayOut").DataMember("MaxPayOut").Prefix(@ViewBag.Currency).Format("{0:n2}").Add();
                  col.SummaryType(SummaryType.Sum).DisplayColumn("NetWinXTopUp").DataMember("NetWinXTopUp").Prefix(@ViewBag.Currency).Format("{0:n2}").Add();
                  col.SummaryType(SummaryType.Sum).DisplayColumn("Bonuses").DataMember("Bonuses").Prefix(@ViewBag.Currency).Format("{0:n2}").Add();
                  col.SummaryType(SummaryType.Sum).DisplayColumn("Deposits").DataMember("Deposits").Prefix(@ViewBag.Currency).Format("{0:n2}").Add();
              }).Add()).AllowSelection(true)
              .GroupSettings(group => group.ShowDropArea(false).ShowGroupedColumn(true).CaptionFormat("#captiontemplate").GroupedColumns(col => col.Add("Description")))
              .Columns(col =>
              {
                  col.Field(s => s.Description).TextAlign(TextAlign.Left).HeaderText("Game").HeaderTextAlign(TextAlign.Left).Template("#descriptionTemplate").
                      Width(100).Add();
                  col.Field(s => s.Income).Format("{0:C2}").Template("<span>{{:AccountCurrencySymbol}}{{:IncomeStr}}</span>").Width(60).Add();
                  col.Field(s => s.Payout).Format("{0:C2}").Template("<span>{{:AccountCurrencySymbol}}{{:PayoutStr}}</span>").Width(60).Add();
                  col.Field(s => s.Margin).Width(65).Format("{0:n2}").Add();
                  col.Field(s => s.NumberOfBets).HeaderText("Number of Bets").Format("{0:n0}").Width(60).Add();
                  col.Field(s => s.NumberOfPayouts).HeaderText("Number of Payouts").Format("{0:n0}").Width(60).Add();
                  col.Field(s => s.AverageBet).HeaderText("Average Bet").Format("{0:C2}").Template("<span>{{:AccountCurrencySymbol}}{{:AverageBetStr}}</span>").Width(50).Add();
                  col.Field(s => s.MaxPayOut).HeaderText("Max Payout").Format("{0:C2}").Template("<span>{{:AccountCurrencySymbol}}{{:MaxPayOutStr}}</span>").Width(50).Add();
                  col.Field(s => s.NetWinXTopUp).HeaderText("Net Win").Format("{0:C2}").Template("<span>{{:AccountCurrencySymbol}}{{:NetWinXTopUptStr}}</span>").Width(60).Add();
                  col.Field(s => s.Deposits).HeaderText("Deposits").Format("{0:n2}").Template("<span>{{:AccountCurrencySymbol}}{{:DepositsStr}}</span>").Width(60).Add();
                  col.Field(s => s.Bonuses).HeaderText("Bonuses").Format("{0:n2}").Template("<span>{{:AccountCurrencySymbol}}{{:BonusesStr}}</span>").Width(60).Add();
                  col.HeaderText("").Width(30).Add();
              }).ClientSideEvents(evt => evt.Create("onGridCreate").ActionComplete("onActionComplete")))



1 Reply

MS Mani Sankar Durai Syncfusion Team June 22, 2017 12:23 PM UTC

Hi Arun, 

Thanks for contacting Syncfusion support. 
                                                                  
We have analyzed your query and we are able to reproduce the reported issue. As the dataSource and properties are browser dependent while defining them through setmodel, so we suggest you to pass the groupSettings property in another setModel after the dataSource get bound for grid. 
Refer the code example 
$.ajax({ 
            type: "POST", 
            contentType: "application/json; charset=utf-8", 
            url: "/Home/Data", 
            datatype: "json", 
            success: function (result) { 
                ... 
                gridobj.setModel({ 
                    dataSource: result, 
                    allowResizing: true, 
                    isResponsive: true, 
                    allowSorting: true, 
                    allowGrouping: true, 
                    showSummary: true, 
            }); 
                gridobj.setModel({ 
                    groupSettings: { 
                        groupedColumns: ["CustomerID"], 
                        showGroupedColumn: true, 
                        captionFormat: groupCaptionformat, 
                        showDropArea: true 
                    }, 
                }); 
                gridobj.sortColumn(sortedColumn, sortOrder); 
 
            }, 
        }); 
 

We have also prepared a sample that can be downloaded from the below link 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Up arrow icon