Slickgrid - how to modify id value

Question

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.

Answer 1

So, I guess I hadn't quite grasped how the data view is disconnected from the grid. So I decided to store the key field twice in there once as a (non editable) Id field and once as an editable name field.

Once I realised that I could detect the old & new versions of the key field:

    $(function () {
        var grid;
        var columns = [
            { id: "name", name: "Name", field: "name", 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 id = row["id"];
            var value = row["value"];
            var name = row["name"];

            var data = { value: value, id: id, name: name };
            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": args["name"], "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();
        });
    });