Summary Rows don't show

[Bruce Van Horn]

I'm really stuck on this one.

I have a jquery function like this:

$.getJSON("/enterprise_summary/" + currentUser.token + "/" + periodId,
    {
        format: "json"
    })
    .fail(function (data) {
        console.log("Failed!  Make sure the response contained properly formatted JSON data.")
    })
    .done(function (data) {

$("#entperprisesummarytable").ejGrid({
    dataSource: data.data,
    allowPaging: true,
    allowSorting: true,
    allowReordering: true,
    allowResizing: true,
    allowFiltering: true,
    allowScrolling: true,
    allowGrouping: true,
    enableHeaderHover: true,
    showSummary: true,
    summaryRows: [
        {
            title: "Totals",
            summaryColumns: [
                {
                    dataMember: "raw_disk_gb",
                    displayColumn: "raw_disk_gb",
                    format: "{0:N0}",
                    summaryType: ej.Grid.SummaryType.Sum
                }, ... lots more columns ...
],
filterSettings: {filterType: "Excel"},
recordDoubleClick: function (args) {
    deviceDrillDown(args.data.upload_id);
},
columns: [
    {field: "device_name", headerText: "Device Name", width: 150},
    {
        field: "device_type",
        headerText: "Device Type",
        textAlign: ej.TextAlign.Center,
        headerTextAlign: ej.TextAlign.Left
    }, ... lots more columns ...
]
});

When the user changes the value in a drop down, it changes the selected data (period id) and it runs this function again.  So AFAIK, the grid 
gets overwritten each time, which is fine.  When you group on the initial load, the summary rows appear as they should.  But as soon as I change
the date, the function runs again, jquery pulls a new URL with different data, the grid (should) re-render (i.e. be overwritten by a new grid object).
All that seems to happen but after that the summary rows don't appear.  The grouping works as expected; there's just a thick gray line where the
group total should be.  No error messages appear in the google dev tool console.

[Farveen Sulthana Thameeztheen Basha]

Hi Bruce, 

Thanks for contacting syncfusion support. 

We have checked your query but we are unable to reproduce your reported problem “summary rows doesn’t appear when re-rendering the Grid”  at our end. Please refer to the sample:- 

Sample Link:- http://jsplayground.syncfusion.com/fqhdic2d 

In the sample, we have rendered the Grid with dataSource method of the Grid on change event of the dropdownList. Please refer to the code example:- 

<div id="value"> 

            <ul> 

                <li>data1</li> 

                <li>data2</li> 

 

            </ul> 

        </div> 

        <script type="text/javascript"> 

            $(function () { 

                $("#Grid").ejGrid({ 

                    /// the datasource "window.gridData" is referred from jsondata.min.js 

                    dataSource: window.gridData, 

                    allowPaging: true, 

                    allowGrouping: true, 

                    showSummary: true, 

                    pageSettings: { pageSize: 10 }, 

                    summaryRows: [ 

                       { summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}", prefix: "Sum = " }], showTotalSummary: true } 

                    ], 

                    groupSettings: { groupedColumns: ["EmployeeID"] }, 

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] }, 

                    columns: [ 

                             { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 }, 

                             .  .  .  

                    ] 

                }); 

            }); 

            $(function () { 

                 

                $('#dropdown1').ejDropDownList({ 

                    change: "change", 

                    targetID: "value" 

                }); 

            }); 

            function change(args) { 

                var gridObj = $("#Grid").ejGrid("instance"); 

                var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders"); 

                gridObj.dataSource(dataManager); 

 

            } 

        </script> 

If we misunderstood your query, please share us additional information to find the cause of the issue. 

1. Share your Grid code example ( how you re-render the Grid with same or different dataSource) 

2. Video/Screenshot to replicate the issue. 

3. An issue reproducing sample if possible or sample hosted link or replicate the issue on the above sample. 

 

5. Essential studio version and browser details. 

The provided information will help us to analyze and provide you the solution as early as possible. 

 

Regards, 

 

Farveen sulthana T