Example of inserting a new row into the grid

[devol]

Could you give an example of how to have a user click a link and insert a new row into the grid? I assume you would just insert a row into the DataModel, which would then fire the rowupdated event, however I'm not sure how this will play into the editor and validation hooks, since the row will be "empty" until filled out.

[jack.slocum]

I would recommend providing dummy data on new rows. To use my plant example on the editor page, I have a function defined like this on a test page I use:

      addRow : function(){
            addIndex++;
            var rowIndex = dataModel.insertRow(0, null, [
                'New Plant ' + addIndex,
                'Nueva Plantus Maximus ' + addIndex,
                'Sun or Shade',
                0,
                new Date(),
                false                
            ]);
            grid.startEditing(rowIndex, 0);
        }

addIndex is just a counter variable that makes it New Plant 1, New Plant 2, etc.

I am inserting a new row at index 0 (first row), with an id of null (null means auto-generate), with the array of column data. This method is on the XMLDataModel. The DefaultDataModel also has insertRow(), but it doesn't have an id argument. The XMLDataModel will also keep the document in sync by adding a new node in the XMLDocument matching the newly created row. It does this by cloning the first row's node. If you have a complex XML document and the clone node doesn't work for you, the XMLDataModel has a method createNode() that can be overridden to create your own node.

Then I call startEditing() to activate editing for the newly inserted row on the first cell (0).

Hope that helps,

Jack