How to make setItems working properly in SlickGrid?

Question

I have this simple code:

var columnsTest = [ 
    {id: "testId", name: "ID", field: "id", width: 50},
    {id: "field1", name: "field1", field: "field1", width: 200},
    {id: "field2", name: "field2", field: "field2", width: 200}
]

function saveTest() {
    var itemFields = [];
    itemFields = dataViewTest.getItemById( dataViewTest.getItem(gridTest.getSelectedRows()).id );

    itemFields['field1'] =  $('#field1').val();
    itemFields['field2'] =  $('#field2').val(); 

    var data = JSON.stringify(itemFields);
    console.log("data: " + data);
    dataViewTest.beginUpdate();
    dataViewTest.setItems(itemFields, "id");
    dataViewTest.endUpdate();   
    dataViewTest.refresh(); 
}

$(function() {
    dialogTest = $( "#test_form" ).dialog({
        autoOpen: false,
        height: 480,
        width: 600,
        modal: true,
        buttons: {
            "Save": function() { saveTest(); },
            "Cancel": function() { dialogCustomer.dialog( "close" ); }
        }
    });

    dataViewTest = new Slick.Data.DataView({ inlineFilters: true });

    gridTest = new Slick.Grid($("#test_grid"), dataViewTest, columnsTest, optionsTest);
    gridTest.setSelectionModel(new Slick.RowSelectionModel());
    gridTest.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
    pagerTest = new Slick.Controls.Pager(dataViewTest, gridTest, $("#test_pager"));

    dataViewTest.onRowsChanged.subscribe(function (e, args) {
      gridTest.invalidateRows(args.rows);
      gridTest.render();
    });         

    $( "#add_test" ).button().on('click', function() {
        dialogTest.dialog("option", "title", "Create New");
        dialogTest.dialog( "open" );
    }); 
});

where in console.log I have:

data: {"id":"187","field1":"aaaaaaa","field2":"bbbbbbb"}

but when I try to save console keeps saying: "Uncaught Each data element must implement a unique 'id' property"... shall I have missed something? Though i HAVE that id property and even passed to that objectIdProperty optional parameter of setItems...

thanks in advance! Cheers! Luigi

Answer 1

I'm not sure how your function was even partially working before, because gridTest.getSelectedRows() returns an array and therefore dataViewTest.getItem(selectedRows) should error out. Also, since it appears as though you only want to update a single item, you would not be calling dataViewTest.setItems() because that is for updating multiple items at the same time and takes an array of objects/rows/items, not just one. This is probably what you want:

function saveTest() {
    var rows = gridTest.getSelectedRows(); // array of row indices: [5,8,21,42]
    var item = gridTest.getDataItem(rows[0]); // get the actual data item for the first selected row

    // update the properties for the item
    item.field1 = $('#field1').val();
    item.field2 = $('#field2').val(); 

    console.log("data:", item);

    // tell your dataview to update the item
    dataViewTest.updateItem(item.id, item);
}