On text cells that have editable: true I have no issue's writing to the store - the cell writes to the store by itself automatically, but none of my cellWidgets write to the store.
here is a snippet of my code (the top lines 2-5 that are commented out is something else I tried without luck):
{ id: 'identColumnId', field: 'identColumn', name: 'Ident', width: '77px',
// editable: true,
// editor: 'dijit/form/ComboButton',
// editorArgs:{
// props:'store: identMemStore'
// },
widgetsInCell: true,
navigable: true,
setCellValue: function(one,two,cellWidget){
var rowIndex = cellWidget.cell.row.id;
var toggle = identMemStore.get(rowIndex).identColumn;
if (toggle)
{
this.identColumn.set('label', "Override");
this.identColumn.set("checked",false);
}else
{
this.identColumn.set('label', "Use Input");
this.identColumn.set("checked",true);
}
},
getCellWidgetConnects: function(cellWidget, cell){
// return an array of connection arguments
return [
[cellWidget.identColumn, 'onClick', function(e){
var rowIndex = cellWidget.cell.row.id;
var curValue = identMemStore.get(rowIndex).identColumn;
if (curValue === true){
cellWidget.identColumn.set('label', "Use Input");
cellWidget.identColumn.set("checked",true);
// Write to store manually...
// identMemStore.data[rowIndex-1].identColumn = false;
} else if (curValue === false){
cellWidget.identColumn.set('label', "Override");
cellWidget.identColumn.set("checked",false);
// Write to store manually...
// identMemStore.data[rowIndex-1].identColumn = true;
} else {
console.log("ERROR");
}
}]
];
},
decorator: function(){
return "<button data-dojo-type='dijit/form/ToggleButton' data-dojo-attach-point='identColumn' ></button>";
}
},
Also I have setup the code to catch the changes on a cell edit after data has been written to the store. Again, my text cells work just fine and the following code is executed, but my other dojo widgets don't write to the store and therefore don't set off the following code which is executed after an edit is completed and the store has been written to.
identGridx.edit.connect(identGridx.edit, "onApply", function(cell, success) {
var item = cell.row.data();
var id = cell.row.id;
console.log('Row with ID ' + id + ' is modified. New value: ' + item);
});
How do I get my dojo widgets within the cellWidgets to write to the gridx store??
You can have any cellWidget save to the store automatically by having the Edit module setup correct. See this documentation: Dojo Edit Module
When a grid includes the Edit module, this does not mean that all the cells are immediately editable. Instead, we must tell the grid which columns contain editable fields. We do this by setting the column property called editable to true. The default is false which means that cells in that column are not editable.
When a cell is to be edited, a new instance of Dojo widget (Dijit) is created at the location of the cell on the screen. This widget is responsible for showing the current value and allowing the user to change that value. By default, the widget used is an instance of dijit.form.TextBox however different widget types can be used. The property called editor should be set to the String name of the Dijit class to be used. Remember to define an AMD include of this class type if it is used. Another column property called editorArgs can be used to supply properties to the widget named in editor. The editorArgs property is an object which the following properties:
props (String) - Set of properties defined on the Dijit Widget
fromEditor (function(storeData, gridData))
toEditor (function(storeData, gridData, cell, editor)) - Function is called to populate the editor widget. The editor parameter is a reference to the Dijit widget used to edit the cell.
constraints (Object) - Additional properties passed to the editor.
useGridData (Boolean) - Should the editor be fed with data from the Store or from the Grid? The default is false which means to use the store data. This property is not used if toEditor is supplied.
valueField (String) - The property of the editor that holds the value. This is normally value which is the default.
When the edit of the cell has finished, the data entered is written back into the store. We can change how this is achieved by providing a function to be called to apply the change using our own logic. The property for this is customApplyEdit which is a function with the signature function(cell, value). It is the responsibility of the code to set the value of the cell to be the value passed in as a parameter.
See this jsfiddle: Working example