How do i use a JsonRestStore with a search form and editable DataGrid

Question

I am trying to implement a search form where the results would be displayed via a dojo 1.6 data grid. I have the rendering working, I make an ajax call on form submit and then build a Datagrid in the call back function using the ItemFileWriteStore.

 function search()
{
    var action = './search.json';
    dojo.xhrPost({url: action, form:"searchForm",
                    load: function(result) {
                                            var newStore = new dojo.data.ItemFileWriteStore({
                                                data: {
                                                    identifier: "id", 
                                                   items: JSON.parse(result),
                                                   url:'./search.json'
                                                }
                                            });
                                            var grid = dijit.byId("searchResultsGrid");

                                            if(grid == null) {
                                                var layout = [[
                                                      {'name': 'Id', 'field': 'id', 'width': '50px'},
                                                      {'name': 'Name', 'field': 'name', 'width': '50px',editable: true,},
                                                      {'name': 'Source', 'field': 'source', 'width': '50px',editable: true,},
                                                      {'name': 'Version', 'field': 'version', 'width': '50px',editable: true,}
                                                    ]];

                                                var grid = new dojox.grid.DataGrid({
                                                    id: 'searchResultsGrid',
                                                    store: newStore,
                                                    structure: layout,
                                                    autoHeight:true, autoWidth:true, editable:true, columnReordering:true,
                                                    rowSelector: '20px'
                                                });
                                                grid.placeAt("gridDiv");
                                                grid.startup();
                                            }
                                            else {
                                                grid.setStore(newStore);
                                            }
                                         }
    });
}

Now, when I try to make the grid editable and persist the changes to server, nothing happens with the ItemFileWriteStore. So I want to switch to JsonRestStore so that I can persist.

But the question is, how do I tie my form submit to the JsonRestStore or in other words is there a way to pass a dynamic query to the JsonRestStore ? I want the JsonRestStore to fetch data on submit of my search form and based on the values in the search form.

Thanks in advance!

Answer 1

I would use the dojo.store.JsonRest store. In order to use the JsonRest store with dojox.grid.DataGrid, you will need to wrap it in a dojo.data.ObjecStore like below:

var newStore = new dojo.store.JsonRest({
    target: '/search/',
    idProperty: 'id'
});
newStore = new dojo.data.ObjectStore({
    objectStore: newStore
});

Now the /search/ target should be your REST url. Your backend for /search/ should be able to support REST, which means you should be able to support GET, PUT, POST, DELETE requests. Take a look at http://dojotoolkit.org/reference-guide/1.10/quickstart/rest.html its for Dojo 1.10, but the method for implementing the backend should be similar.

Once you have the REST backend implemented to be able to retrieve and update data. You can send query parameters to the REST backend by setting the query parameter in the grid.

grid.setQuery({
   param1: 1,
   param2: 2
});

This will trigger the JsonRest store to use the url /search/?param1=1&param2=2 to load the refresh set of data in the grid.