Making our RESTful grid editable

In my last post, I showed you how to hook up the new dojo grid component to a RESTful resource in Rails. Now we're ready to make it editable. I promise this will be a shorter post than last time. The key piece is making a new model object to handle our edits. The dojo grid already provides the key pieces to make editing happen; we just need to provide a way to pass the edited values into our Jester-made object to send them along to our application. The way we do this is by creating our own model class which extends dojox.grid.data.Objects. Then we create an instance of this class. This is what the code looks like:

    dojo.declare("MyModel", dojox.grid.data.Objects, {
      beginModifyRow : function() {},
      endModifyRow : function() {} ,
      setDatum: function(inDatum, inRowIndex, inColIndex)
      {
        this.data[inRowIndex][this.fields.get(inColIndex).key] = inDatum;
        this.data[inRowIndex].save();
        this.datumChange(inDatum, inRowIndex, inColIndex);
      }
    });

    var model = new MyModel([{key: "make"}, {key: "year"}], cars);  

I'm definitely doing some hackery to make it simpler for myself here. The beginModifyRow and endModifyRow are dojo methods that get called at the beginning and end of editing a cell. In the normal dojo implementation these methods make a copy of the object being edited so it can be restored if a user cancels the edit. In a final version of this code we would want to clone our Car object when we start an edit, but we're just not worrying about it yet.

The code which actually handles the edit is in the setDatum method. It get's called with 3 arguments, the new value to set, the row index, and the column index. We have an array of cars to which makes it easy to lookup the right row, but how do we know which field is in which column? Well, dojo holds that information for us in the fields property of our model. The fields property provides a method to get a field object by index, and this field object has a key property which is the name of the property of car that lives in this column. This allows us to set the right property of car. Saving our changes back is a snap thanks to Jester. We call save on our car object and we are done.

Finally, we need to make some changes to our structure object to tell it which cells we want to be editable. We'll use dojo's simplest built in editor and make both cells editable. Here's how we do it:

 var structure = [ {
    rows: [[
         {name: 'Make', editor: dojox.grid.editors.Input},
         {name: 'Year', editor: dojox.grid.editors.Input}
    ]]
 } ];

So this is it. We now have an editable dojo grid saving changes by making REST calls into our Rails app.

Using a JS component framework like Dojo (or ext, mootools, etc, etc) in combination with Jester seems like it opens up a new way to approach web application development. I might expound on this in another post.