Search code examples
jqueryslickgrid

slickgrid scroll jump back to top row


When I try to scroll, while scrolling, the grid resets the top row to first row. It refuses to let me scroll down at all, it just jumps back to first row. I've included the code below and sure would appreciate if someone could point out why.

function setGrid(d){
    var grid;
    var data = d;
    var columns = [
        { id : "questiontext", name: "Question", field : "QuestionText", sortable:true, behavior:"select", cssClass: "cell-selection", width:620, cannotTriggerInsert:true, formatter: formatgridInActiveDel},
        { id : "isactive", name: "Active", field : "IsActive", sortable:false, behavior:"select", cssClass: "cell-selection", width: 55, cannotTriggerInsert:true, formatter: chkboxFormatter},
        { id : "multianswer", name: "Multi Answer", field : "MultiAnswer", sortable:false, behavior:"select", cssClass: "cell-selection", width: 100, cannotTriggerInsert:true, formatter: chkboxFormatter},
        { id : "orderorq", name: "Order", field : "OrderOfQ", sortable:true, behavior:"select", cssClass: "cell-selection", width: 55, cannotTriggerInsert:true, formatter: formatgridcentercol},
        { id : "btnedit", name: "Edit", field : "Edit", sortable:false, behavior:"select", cssClass: "cell-selection", width: 55, cannotTriggerInsert:true, formatter: buttonFormatter},
        { id : "btndel", name :"Del", field: "Del", sortable:false, behavior:"select", cssClass: "cell-selection", width: 55, cannotTriggerInsert:true, formatter: buttonFormatter}
    ];
    var options = {
        enableCellNavigation: true,
        forceFitcolumns: true,
        multiSelect: false,
        syncColumnCellResize: true
    };
    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid("#questiongrid", dataView, columns, options);
    var pager = Slick.Controls.Pager(dataView, grid, $("#questionpager"));

    grid.setSelectionModel(new Slick.RowSelectionModel());
    grid.onClick.subscribe(function (e, args){
        e.stopPropagation();
        var cell = grid.getCellFromEvent(e);
        var col = grid.getColumns()[cell.cell];
        var item = dataView.getItem(args.row)

        EditDelQuestion(item, col.field)
    });
    dataView.onRowsChanged.subscribe(function(e, args){
        grid.invalidateRows(args.rows);
        grid.render();
    });
    grid.onSort.subscribe(function (e, args) {
        slickGridSort(args.sortCol.field, args.sortAsc, grid, dataView);
    });
    dataView.beginUpdate();
    dataView.setPagingOptions({ pageSize: 12 });
    dataView.setItems(data, "TestQGridid");
    dataView.endUpdate();

}

Solution

  • You are missing a subscription

    dataView.onRowCountChanged.subscribe(function (e, args) {
      grid.updateRowCount();
      grid.render();
    });