javascript - Slickgrid - how to modify id value -

i'm getting grips slickgrid (with asp.net mvc end) simple start want editing grid key/value pair of systems settings. have working ok add, update works ok unless edit key.

because have changed key value looks new key/value pair rather modifying existing item. question is, how let backend know item modifying ?

i figure add field (holding original id) dataview, kind of wondering if missing functionality makes 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 grid allows users able perform basic crud functions on database table. going in right direction or should doing different.

so, guess hadn't quite grasped how data view disconnected grid. decided store key field twice in there once (non editable) id field , once editable name field.

once realised detect old & new versions of 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();         });     });