Showing 'value' instead 'id' in field of combobox type on edatagrid

[marceloparra]

Hi ,
I have a problem with edatagrid.

I need an editable datagrid with comboboxes columns.
I have used for this, the edatagrid.
I could successfully insert, update an delete records.  I could select the records too, but, the combobox fields (on the grid) doesnt show the text values (it shows nothing) during the grid load. It only shows the text values when selecting or editing the row.

I dont know what am I doing wrong, can you help me pleaseee?

This is mi grid declaration in javascript

      $(function(){
         $('#dg').edatagrid({
            url: 'get.php',
            saveUrl: 'save.php',
            updateUrl: 'update.php',
            destroyUrl: 'destroy.php'
         });
      });


this is the html part

   <table id="dg" title="Edicion de Limites" style="width:900px;height:550px"
         toolbar="#toolbar" pagination="true" idField="id"
         rownumbers="false" fitColumns="true" singleSelect="true">
      <thead>
         <tr>
            <th field="id" width="50">id</th>
            <th data-options="field:'producto_id',width:100,
                  formatter:function(value,row){
                                return row.nombre;
                  },
                  editor:{
                     type:'combobox',
                     options:{
                        valueField:'id',
                        textField:'nombre',
                        url:'get_combo_data.php?tabla=productos',
                        required:true
                     }
                  }">Producto</th>            
<th field="orden" width="50" editor="{type:'validatebox',options:{required:true}}">orden</th>
            <th field="comentario" width="50" editor="{type:'validatebox',options:{required:true}}">comentario</th>
            <th field="valor" width="50" editor="{type:'validatebox',options:{validType:'number',required:true}}">valor</th>
         </tr>
      </thead>
   </table>
The combo url returns data like this
[{"id":"2","nombre":"Bovinos","abreviatura":"BOB"},{"id":"3","nombre":"Animal de Caza","abreviatura":""}]
and the grid php returns
[{"id":"72","producto_id":"2"},{"id":"73","producto_id":"41"}]

The combobox part of the grid must show the field nombre, but it doesnt.

I 'll appreciate any help on it!!!
Thanks!
Marcelo

[retroip]

Hey mate,
Same thing I'm trying to solve too. ComboBox editor type in datagrid have to parse data during the datagrid. But If you show 20 rows, there should be 20 sql requests for each combobox id column, to retreive its text, which is insane.

1.Attempt
I'm thinking about parsing this combobox data into 2d array( id,value) variable during page load, "eval" it , and then you use it as just simple variable reference 2darray[<id>], which will return "nombre" text.

2.Attempt (handling on sql site + big workaround in datagrid) - I'm testing the effort right now
In your grid php, sql query, make select from second table (for combobox) too. I mean:
select <columns>concat(id,' ',nombre), as producto_id2<columns> from mainTable grid,productos p where mainTable.producto_id=productos.id
In datagrid 1 column will be hidden, producto_id2 will be editable, and you have to read column producto_id..... not clear right now

I'm not sure too

[stworthy]

All the things need to do is to set the 'nombre' field value when the combobox value is changed. The 'onBeforeSave' event can be used to do this, it is triggered before ending and saving a row.

Code:

$(function(){
$('#dg').edatagrid({
url: 'get.php',
saveUrl: 'save.php',
updateUrl: 'update.php',
destroyUrl: 'destroy.php',
onBeforeSave: function(index){
var ed = $(this).edatagrid('getEditor', {
index: index,
field: 'producto_id'
});
var row = $(this).edatagrid('getRows')[index];
row.nombre = $(ed.target).combobox('getText');
}
});
});

[retroip]

Exactly,
Thank you

[retroip]

I have come back to this topic for my project and I figured out that maybe this is not the right solution. There was mentioned onBeforeSave event, but maybe marceloparra want something that I understood as my problem too.
I'll try to explain.

I have simple datagrid with some columns and 1 "id" of school column. List of schools is in other table through second request:

Datagrid request: ***php?operation=getPersons (simple select form 1 table)
return name, surname and id_scholl

Combobox editor (school selector) request: ***php?operation=getRequest&type=graduation (simple select from 1 table)
returns id and scholl_name {1,basic scholl,2, college,etc...)

This shows following id_school in datagrid column as on picture no.1

I changed sql query for Datagrid request, and I'v combined select form table persons (datagrid) and table of schools (combobox editor for field in datagrid), at put it to "virtual" column.
Then at datagrid :
 

Code:

     formatter:function(value,row,index){
            return row.school; //Instead of value which is id_school by default in select query of datagrid url
            }

And everything works properly for me as on picture no.2
After editing row, combobox works properly as on picture 3.

With this, I just show school name instead of school ID in datagrid in NON editing row.

I could not solved it directly in datagrid column configuration, Editor of column was not returned (either with edatagrid):

Code:

datagrid{columns[[......
field: colName.....,editor{combobox},
formatter:function(value,row,index){
var ed = $(this).edatagrid('getEditor',{index: index,field: 'colName'}); <------- Nothing returned
            }
...]]...}