ComboBox on an editable grid

[gordon]

Jack,

It's not clear to me how pass both the value and the text from a combo box back to the grid.

Assuming the record has one field for the value and another for the text, following a change through a combobox which is bound to the value field, the value field on the record will be automatically changed. All fine so far.

The renderer for the value displays the text field but how do you get the new text into the text field?

Thanks,

Gordon

[alainmoran]

I had the same problem, I have found A solution here:

http://www.yui-ext.com/forum/viewtopic.php?t=3674

Jack may have a better one in time though.

[jack.slocum]

Here's how I would recommend to do it.

This code assumes you have an editable field for an employee. You want users to be able to find an employee by name in a combobox in an edit grid but you want the value to be the employee's id.

In your Store/Record def, you have two fields defined :


....
new Ext.data.JsonReader({
...
}, [
...
'employeeId', // for simplicity, these use basic mapping
'employeeName',
...
]);

The employeeId is the selected (or default) employeeId and the name is the name of that selected employee.

In your column model, you will need to set up a renderer and your editor. Before that, we can set up the combo.



// create the combo
var empCb = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: someStoreYouCreatedForTheCombo,
displayField:'field in your combo store with the name',
valueField: 'field in your combo store with the employee id'
});

If you are using a "tranformed" select, you can leave off the last 3 config options since it sets that up automatically.

You will map your grid column to 'employeeId' (not employeeName) and then use a renderer to make it render the name instead of the id. By mapping it to the id, we are able to use standard grid editing and no have to override anything.


...
,{
header: "Employee",
dataIndex: 'employeeId',
width: 130,
editor: new Ext.grid.GridEditor(empCb),
renderer:function(value, p, record){
return record.data['employeeName'];
}
}

Last, you need to update the employeeName after an edit. This code assumes empCb is in the same scope and is closured in.

We can use validateedit and raw record.data[] access (instead of record.set(name, value)) to make sure we don't trigger and extra render of the row:


grid.on('validateedit', function(e){
if(e.field == 'employeeId'){
e.record.data['employeeName'] = empCb.getRawValue();
}
});


Let me know how this works for you.

[alainmoran]

Hrm OK ... yeah that works :D

[jack.slocum]

You code look a bit involved, but it might have been because you were including other code. Is this easier for you?

[alainmoran]

Unfortunatley not ... the record.data in the new renderer is pointing me towards the data for the row in the grid, what I need is the data for the field in the select/combo box.

My combo boxes are transformed from a server-side generated dynamic list (the available items in the list are changed elsewhere), what I'm trying to display is the text from the option in the select list. The only place I could see of getting that data was from the editor, or rather the combo box ... spliting out the combo box and two renderers should work though.

The other code that I included was the DWRProxy and ObjectReader which allow me to integrate the grid with DWR rather than AJAX.

[alainmoran]

Whoop .. got it to work.

Yes .. using the references to the combo-boxes in place of passing through the editor is much cleaner.

Thank you very much .. you're a star :D

[ap]

I was able to easily make the column with ID and use validateedit and renderer to set and display name. But if you click on the combobox cell to edit it again, the displayed text immediately gets replaced with the id. What would be a recommended way to work around this ?

Thanks

[FuryVII]

I was able to easily make the column with ID and use validateedit and renderer to set and display name. But if you click on the combobox cell to edit it again, the displayed text immediately gets replaced with the id. What would be a recommended way to work around this ?

Thanks

I am having the same problem. Has anybody else experienced this and know of a solution?

[ap]

Turns out it really isn't a problem. For all the records the combobox has loaded before, when editing the correct text value will show. But if your data from the grid is loaded from the datastroe for the grid, that record (key, value pair) is not in the datastore for the combobox. When editing those combobox, only the id will show up. So for combobox in editor grid, you can add this to your code and it will take care of the problem.


grid.on(beforeedit, function(e){
if(e.field == 'employeeId'){
if(empCbDataStore.getById(e.value)==undefined){
empCbDataStore.add(new empCbDataStore.reader.recordType({
employeeId:e.record.get('employeeId'),
employeeName:e.record.get('employeeName')
}));
}
}
});

this code will only add the record you are editing to the datastroe for the combobox, before the cell becomes an editable comobox.

I'm sure there are better ways to do this. But this way at least address the problem I had.

Hope it helps.

[PFM]

Unfortunatley not ... the record.data in the new renderer is pointing me towards the data for the row in the grid, what I need is the data for the field in the select/combo box.

I am having this same issue... does anyone know how to solve this?

[PFM]

I have made a little progress but still cannot get the Editor Grid to work with a Combowith a separate data store. The grid data store record contains a "feedTreeSorterId" field and the combo data store contains the "feedTreeSorterId" and "name" fields. When I load the grid the renderer for the column is displaying the "name" from the combo data store record correctly, but I can't get the edit part to work when I select a different value from the combo. The validateedit for the grid does not contain anything in the "value" field, and the field turns to blank. Attached is a complete working example... Just unzip and place in the Examples folder. Any help would be greatly appreciated.

Editable Grid Column


header: "feedTreeSorterId",
dataIndex: 'feedTreeSorterId',
width: 120,
editor: new Ext.grid.GridEditor(feedTreeSorterCombo),
renderer: function(value, p, record) {
var recordTemp = feedTreeSorterDataStore.getById(value);
if (recordTemp != undefined) {
return recordTemp.data['name'];
}
}

[Wolfgang]

Hello,

I walked through your code, you have been pretty close.
At ~ line 246 see: valueField:'feedTreeSorterid' should be valueField:'feedTreeSorterId'
After this change, it works.



/*
* defineFeedTreeSorterCombo
*/
function defineFeedTreeSorterCombo() {

feedTreeSorterCombo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
// editable: false,
store: feedTreeSorterDataStore,
displayField:'name',
//Wolfgang
valueField:'feedTreeSorterId'
//valueField:'feedTreeSorterid'
});
// feedTreeSorterCombo.applyTo('feedTreeCssClassCombo');

}


Regards

Wolfgang