lundi 29 juin 2015

Slickgrid - how to modify id value

I'm just getting to grips with Slickgrid (with an asp.net MVC back end) as a simple start I want to us it as an editing grid for a Key/Value pair of systems settings. I have it working OK for Add, but update works OK unless we edit the key.

Because we have changed the key value it always looks like a new Key/Value pair rather than modifying the existing item. So my question is, how do I let the backend know what item I am modifying ?

I figure I could add an extra field (holding the original id) to the dataview, but I am kind of wondering if I a missing some functionality that makes this easier.

$(function() {
    var grid;
    var columns = [{
        id: "id",
        name: "Name",
        field: "id",
        editor: Slick.Editors.Text
    }, {
        id: "Value",
        name: "Value",
        field: "Value",
        editor: Slick.Editors.Text
    }, ];

    var options = {
        enableColumnReorder: false,
        editable: true,
        enableAddRow: true,
        enableCellNavigation: true,
        autoEdit: false
    };

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

    grid.setSelectionModel(new Slick.CellSelectionModel());

    grid.onCellChange.subscribe(function(e, args) {
        var row = dataView.getItem(args.row);
        var value = row[grid.getColumns()[args.cell].field];
        var id = row[grid.getColumns()[0].field];

        var data = {
            value: value,
            id: id
        };
        var url = "@Url.Action("Update", "SystemSettings")";

        $.ajax({
            type: "POST",
            url: url,
            data: data,
            dataType: "json",
            success: function(a) {
                if (a.status != "ok") {
                    alert(a.msg);
                    undo();
                } else {
                    alert(a.msg);
                }
                return false;
            }
        });
    });

    grid.onAddNewRow.subscribe(function(e, args) {
        var item = {
            "id": dataView.length,
            "value": "New value"
        };
        $.extend(item, args.item);
        dataView.addItem(item);
    });

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

    dataView.onRowsChanged.subscribe(function(e, args) {
        grid.invalidateRows(args.rows);
        grid.render();
    });

    $.getJSON('@Url.Action("GetAll", "SystemSettings")', function(data) {
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.endUpdate();
    });
});

My requirement is for a grid that allows users to be able to perform all the basic CRUD functions on a database table. So am I going in the right direction with this or should I be doing something different.

Aucun commentaire:

Enregistrer un commentaire