SlickGrid - Handling DataView with grid.onAddNewRow

Question

I am using SlickGrid to generate a data grid. The data is fetched by a jQuery AJAX call. With the advice from https://stackoverflow.com/a/11611477/2294855 I am able to handle the response data and set it to the DataView. But my problem arises when I make the Grid option "enableAddRow: true".

Here, when I try to add something in the new row, whenever I insert something in any cell and shift to other, the data is not there. For example:

My declaration for the grid:

var categories, categoryList, subjectList, data, grid;
var url = "{{ url('get_data', {'_prefix': app.request.get('_prefix')}) }}";

var dataView = new Slick.Data.DataView();

var columns = [
    {id: "serial", name: "Ordnungsnummer", field: "serial", editor: Slick.Editors.Integer, validator: requiredFieldValidator, sortable: true},
    {id: "category", name: "Kategorie", field: "category", editor: Slick.Editors.categoryDropdown, formatter: Slick.Formatters.category, validator: requiredFieldValidator, sortable: true},
    {id: "subject", name: "Themenbereich", field: "subject", editor: Slick.Editors.subjectDropdown, formatter: Slick.Formatters.subject, validator: requiredFieldValidator, sortable: true},
    {id: "week", name: "Schulwoche", field: "week", editor: Slick.Editors.Integer, validator: requiredFieldValidator, sortable: true},
    {id: "note", name: "Anmerkung", field: "note", editor: Slick.Editors.LongText, validator: requiredFieldValidator}
];

var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    asyncEditorLoading: true,
    forceFitColumns: true,
    topPanelHeight: 25
};

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

// 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();
});

grid.onAddNewRow.subscribe(function (e, args) {
    var item = args.item;
    var column = args.column;
    grid.invalidateRow(dataView.length);
    dataView.push(item);
    grid.updateRowCount();
    grid.render();
});

function fetchData() {

    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: {schoolclass: {{ schoolclass }}},
        success: function( response ) {
            createGrid(response);
        }
    });
}

function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
        return {valid: false, msg: "This is a required field"};
    }
    else {
        return {valid: true, msg: null};
    }
}

function createGrid(response) {

    data = response.data;

    categories = response.categories;
    categoryList = generateCategoryList(categories);
    subjectList = generateSubjectList(categories);



    dataView.beginUpdate();
    dataView.setItems(data);
    console.log(data);
    dataView.endUpdate();
}

function generateCategoryList(categories) {
    var categoryList = {};

    $.each(categories, function(index, item) {
        categoryList[item.id] = item.name;
    });

    return categoryList;
}

function generateSubjectList(categories) {
    var subjectList = {};

    $.each(categories, function(index, category) {
        $.each(category.subjects, function(index, subjects) {
            subjectList[subjects.id] = subjects.name;
        });
    });

    return subjectList;
}

function sendData(data) {
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: data,
        success: function( response ) {
            createGrid(response);
            alert("data successfully saved");
        },
        error: function(textStatus, errorThrown) {
            alert("sorry could not save the data");
            console.log("text Status = "+ textStatus);
            console.log("Error Thrown = "+ errorThrown);
        }
    });
}

$(function () {

    fetchData();

    $("#save").click(function() {

        var newData = JSON.stringify(grid.getData());

        sendData(newData);
    });
})

Any help is highly appreciated.

score 2 · Answer 1 · answered Jul 10 '15 at 17:04

To address the issue at hand, the reason your data isn't present is because of dataView.push(item); in the onAddNewRow handler. Use the addItem function of the dataview.

I assume your data has an id property on each item, otherwise the data wouldn't be displaying. Thus, you'll also need to address the issue of the new data element needing a unique id by adding it to the var item = args.item; in the handler.

If your data elements have an existing field, take serial for example, that is unique across all the elements, then you can configure your dataview to use that field as the required id by passing it into the setItems function. At that point, you wouldn't have to manually assign the id.

Additionally, you'll have an issue saving the data because of grid.getData(). To get the data from within the dataview use grid.getData().getItems().

SlickGrid - Handling DataView with grid.onAddNewRow

1 Answers1