[CLOSED] [1.0] Grid column with databinding

[edigital]

Hi,

It possible add a grid column which values are bind from store or datasource? If it possible, could you send me a example?


I need a combocolumn which values come from a database table.


Thanks

[edigital]

Hi,

I`ve already resolved this dude. But how can I bound the valueField to other column different the column owner the editor?


My need is, for example, a column "Country Name" with a combobox editor filled with countries from a store and other column with the "Country Id". The text that appear in combobox is the country name, when select a country, change the name of country in column "Country Name" and put the Id in the column "Country Id".


Is there anything as Databound Field?


Thanks

[Vladimir]

Hi,

You have to use AfterEdit event of the grid

<AfterEdit Handler="if(e.field == 'CountryNameField'){e.record.set('CountryIdFieldName', 'CountryIdValue');}"/>

afteredit : ( <code style="font-style: normal; font-weight: normal; font-family: 'Lucida Console', 'Courier New', Courier, monospace; font-size: 12px; ">Object e</code> )<div class="mdesc" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: rgb(68, 68, 68); "><div class="long" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; display: block; line-height: 18px; ">Fires after a cell is edited. The edit event object has the following properties
<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 16px; list-style-type: none; list-style-position: initial; list-style-image: initial; "><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">grid - This grid<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">record - The record being edited<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">field - The field name being edited<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">value - The value being set<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">originalValue - The original value for the field, before the edit.<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">row - The grid row index<li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">column - The grid column index[/list]<code style="font-style: normal; font-weight: normal; font-size: 12px; color: rgb(0, 0, 0); line-height: 16px !important; font-family: 'Lucida Console', 'Courier New', Courier, monospace; ">grid.on(<em style="font-style: normal; font-weight: normal; color: rgb(0, 128, 128); background-color: rgb(238, 238, 238); ">'afteredit'[/i], afterEdit, this );

<b style="font-weight: normal; color: rgb(128, 0, 128); ">function[/b] afterEdit(e) {
<i style="font-weight: normal; font-style: normal; color: rgb(153, 153, 153); ">// execute an XHR to send/commit data to the server, <b style="font-weight: normal; color: rgb(153, 153, 153); font-style: normal; ">in[/b] callback <b style="font-weight: normal; color: rgb(153, 153, 153); font-style: normal; ">do[/b] (<b style="font-weight: normal; color: rgb(153, 153, 153); font-style: normal; ">if[/b] successful):[/i]
e.record.commit();
};</code><div class="mdetail-params" style="margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 12px; font-size: 12px; "><strong style="font-style: normal; font-weight: normal; display: block; margin-bottom: 3px; font-size: 11px; color: rgb(85, 85, 85); ">Listeners will be called with the following arguments:[/b]<ul style="margin-top: 12px; margin-right: 12px; margin-bottom: 12px; margin-left: 12px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-type: circle; list-style-position: inside; list-style-image: initial; "><li style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; list-style-position: inside; list-style-type: circle; list-style-image: initial; "><code style="font-style: normal; font-weight: normal; font-family: 'Lucida Console', 'Courier New', Courier, monospace; font-size: 12px; ">e</code> : Object<div class="sub-desc" style="margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 16px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">An edit event (see above for description)[/list]

[edigital]

Hi Vlad,Thanks for the references.


But in your example, you dont know the "CountryIdValue" because is the valuefield of the comboBox.


You know only the new "CountryNameValue" because is "e.value". I hope that I didn't explained good my needs.


I need after edit take the comboBox valueField and put this value in other column.

<AfterEdit Handler="if(e.field == 'CountryNameField'){e.record.set('CountryIdFieldName',??? );}"/>

Thanks


Rafa

[Vladimir]

Hi,

Well, Combo always returns own valueField as own value therefore you can read it from 'e.value'
If it doesn't help then please post source which demonstrates how all are configured