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.

column group settings in ajax call fails in Chrome

Thread ID:

Created:

Updated:

Platform:

Replies:

131114 Jun 21,2017 06:07 AM Jun 22,2017 08:23 AM ASP.NET MVC 1
loading
Tags: Grid
arun
Asked On June 21, 2017 06:07 AM

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")))



Mani Sankar Durai [Syncfusion]
Replied On June 22, 2017 08:23 AM

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. 


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.

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.

;