Slickgrid grouping expand/collapse strange behaviour

问题

I am using SlickGrid with grouping features and got some strange behaviour.

Please, check the jsFiddle.

var ReportData = {
"cols":{
    "date":"Date",
    "status":"Status",
    "dataField":"Data field"
},
"data":[
    {"id":0,"date":"First","status":"Accepted","dataField":"1000"},
    {"id":1,"date":"Second","status":"Accepted","dataField":"2000"},
    {"id":2,"date":"Third","status":"Accepted","dataField":"3000"},
    {"id":3,"date":"Fourth","status":"Accepted","dataField":"4000"},
    {"id":4,"date":"Fifth","status":"Accepted","dataField":"5000"},
    {"id":5,"date":"Sixth","status":"Canceled","dataField":"6000"},
    {"id":6,"date":"Seventh","status":"Canceled","dataField":"7000"},
    {"id":7,"date":"Eight","status":"Canceled","dataField":"8000"},
    {"id":8,"date":"Ninth","status":"Canceled","dataField":"9000"},
    {"id":9,"date":"Tenth","status":"Rejected","dataField":"1000"},
    {"id":10,"date":"Eleventh","status":"Rejected","dataField":"2000"},
    {"id":11,"date":"Twelfth","status":"Rejected","dataField":"3000"}
]
};

var options = {
    enableCellNavigation: true,
    editable: true,
    autoHeight:true,
    forceFitColumns: true,
};

function groupBy() {
dataView.setGrouping([{
    getter: "status",
    aggregators: [
        new Slick.Data.Aggregators.Sum("dataField"),
    ],
    collapsed: true,
    aggregateCollapsed: true,
    lazyTotalsCalculation: true
},{
    getter: "date",
    aggregators: [
        new Slick.Data.Aggregators.Sum("dataField"),
    ],
    collapsed:true,
    aggregateCollapsed: true,
    lazyTotalsCalculation: true
},]);
}
function sumTotalsFormatter (totals, columnDef) {
var rowData = '';

// Get sum
var val = totals.sum && totals.sum[columnDef.field];
if (val != null) {
    rowData += "<b>" + (Math.round(parseFloat(val) * 100 ) / 100) + "</b>";
}

return rowData;
}

function makeGridColumns(data){
var that = this;
var columns = [];
var id = 0;

// Parse given result for SlickGrid
jQuery.each(data, function(label, name) {
    var item = {
        id:         id++,
        field:      label,
        name:       name,
        focusable:  false,
        groupTotalsFormatter: sumTotalsFormatter,
    }

    columns.push(item);
});

return columns;
}


$(function () {

var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();

dataView = new Slick.Data.DataView({
     groupItemMetadataProvider: groupItemMetadataProvider,
     inlineFilters: true
});

var columns = makeGridColumns(ReportData.cols);

grid = new Slick.Grid("#myGrid", dataView, columns, options);

// register the group item metadata provider to add expand/collapse group handlers
grid.registerPlugin(groupItemMetadataProvider);

// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});


// initialize the model after all the events have been hooked up
dataView.beginUpdate();

dataView.setItems(ReportData.data);

groupBy();

dataView.endUpdate();

})

When click on "Accepted" group and expand, you will see all options, except "Third", but total will be seen for this option (in strange place). When you will click after that on, for example, option "Second", you will see the "Third".

I tried to create this from scratch, using original SlickGrid examples, but got the same problem.

Can you give some advice/solution, please?

Thank you!

回答1:

The problem was in the SlickGrid itself. I found solution in Github: https://github.com/mleibman/SlickGrid/issues/926

来源：https://stackoverflow.com/questions/23007265/slickgrid-grouping-expand-collapse-strange-behaviour

标签

jquery

slickgrid