EasyUI Forum

i want to show an propertygrid with each column of selected row and its value, on onDblClickRow datagrid event

My datagrid Definition
I have one datagrid with 30 columns and only show 22
   Column 1   Frozzen   
   Column 2   Frozzen
   Column 3   Frozzen
   Column 4   Frozzen
   Column 5
   Column 6
   ...
   Column 22
   
My    onDblClickRow event
   onDblClickRow:
            // *************************************************************
            // Abre una window con todas las columnas mostradas en vertical.
            // *************************************************************
            function(index, row){
               var fields = $('#dgSUCURSALES').datagrid('getColumnFields',true).concat($('#dgSUCURSALES').datagrid('getColumnFields',false));
               for(var i=0; i<fields.length; i++){
                  var col = $('#dgSUCURSALES').datagrid('getColumnOption', fields);
                  $('#pgInfoDetalle').datagrid('insertRow', {   index: 1, row :{"name":col.title,"value":'',"group":"ID Settings","editor":"undefined"} });
               }   
               $('#WinInfoDetalle').window('hcenter');   
               $('#WinInfoDetalle').window('vcenter');
               $('#WinInfoDetalle').window('open'); 
            }
            
My first problem
   var fields = $('#dgSUCURSALES').datagrid('getColumnFields',true).concat($('#dgSUCURSALES').datagrid('getColumnFields',false));
   Each field of fields array, not in order of datagrid view.
   why?
   
My second problem   
   How I get de value of each field of fields arrays?
   
Regardsss and excuse me my poor english

The getColumnFields method does return the fields in order of the column definitions. Please show the code of your datagrid column definitions.

This is my datagrid definition

<table id="dgSUCURSALES" title="REPORTE DE SUCURSALES <%=UCase(f_Tipo)%>" style="width:100%;height:100%">
   <thead data-options="frozen:true">
      <tr>
      <th field="DivDesc"          width="150" align="left" data-options="sortable:true">Division</th>
      <th field="RegDesc"          width="150" align="left" data-options="sortable:true">Region</th>
      <th field="SucCod"             width="100" align="right" data-options="sortable:true,formatter:ProcesaCampoSucursal">Sucursal</th>
      <th field="SucDesc"                   align="left" data-options="sortable:true">Nombre de la Sucursal</th>      
     </tr>
   </thead>
   <thead>   
   <tr>
        <th field="UNDesc"                      align="left" data-options="sortable:true">UNDesc</th>
        <th field="Especializacion"    width="100" align="left" data-options="sortable:true">Especializacion</th>
        <th field="SubEspecializacion"    width="110" align="left" data-options="sortable:true">SubEspecializacion</th>
      <th field="TUNDesc"                   align="left" data-options="sortable:true">TUNDesc</th>
        <th field="DescUE"                      align="left" data-options="sortable:true">DescUE</th>
        <th field="AgenteFinanciero"   width="110" align="center" data-options="sortable:true">AgenteFinanciero</th>
        <th field="DescSucServ"                align="left" data-options="sortable:true">DescSucServ</th>
        <th field="Habilitada"          width="110" align="center" data-options="sortable:true">Habilitada</th>
        <th field="SucOperativa"       width="110" align="center" data-options="sortable:true">SucOperativa</th>      
        <th field="FechaApertura"       width="110" align="right" data-options="">FechaApertura</th>      
        <th field="FechaCierre"       width="110" align="right" data-options="">FechaCierre</th>         
        <th field="Provincia"          width="110" align="left" data-options="sortable:true">Provincia</th>
        <th field="Partido"          width="110" align="left" data-options="sortable:true">Partido</th>
        <th field="Localidad"          width="110" align="left" data-options="sortable:true">Localidad</th>
        <th field="Domicilio"          width="110" align="left">Domicilio</th>
        <th field="CodPostal"          width="110" align="right" >CodPostal</th>
        <th field="Horario"          width="110" align="right" >Horario</th>
        <th field="Telefono"                   align="right" >Telefono</th>
        <th field="Ddn"             width="110" align="right" data-options="">Ddn</th>
        <th field="CajaSeguridad"       width="110" align="center" data-options="sortable:true">CajaSeguridad</th>
        <th field="GerenteSuc"                   align="left" data-options="">GerenteSuc</th>
        <th field="RespOperativo"                align="left" data-options="">RespOperativo</th>      
   </tr>
    </thead>
  </table>

and this is my javascript datagrid definition

   function(){  $('#dgSUCURSALES').datagrid( {
            autoRowHeight:false,
            autoSizeColumn:true,
            collapsible:false,
            fitColumns:false,
            loadMsg: 'Procesando: Aguarde un momento.',
            multiSort:false,               // habilita o sehabilita el multisort del grid
            toolbar: '#tb',               // Establece cual es el toolbar del grid
            nowrap:true,               // SIEMPRE EN TRUE. Todos el contenido de una columna se muestra en una solo fila
            onDblClickRow:
                     // *************************************************************
                     // Abre una window con todas las columnas mostradas en vertical.
                     // *************************************************************
                     function(index, row){
var fields = $('#dgSUCURSALES').datagrid('getColumnFields',true).concat($('#dgSUCURSALES').datagrid('getColumnFields',false));

                        $('#pgInfoDetalle').propertygrid({data: []});
                        
                        for(var i=0; i<fields.length; i++){
                           var col = $('#dgSUCURSALES').datagrid('getColumnOption', fields);
                           $('#pgInfoDetalle').propertygrid('insertRow', {   index: 1, row :{"name":col.title,"value":'',"group":"ID Settings","editor":"undefined"} });
                        }   
                        $('#WinInfoDetalle').window('hcenter');   
                        $('#WinInfoDetalle').window('vcenter');
                        $('#WinInfoDetalle').window('open');  
                     },         
            onHeaderContextMenu:
                     // *****************************************************************************************************************
                     // Habilita el menu para mostros u ocultar columnas con el boton derecho en la cabecera
                     // Se le pasa como parametro el grid y la cantidad de columnas a la izquierda que no se habilitan para ser ocultadas
                     // Las columnas freezadas no se habilitan para se ocultadas
                     // *****************************************************************************************************************
                     function(e, field){
                        e.preventDefault();
                        if (!cmenu){
                           createColumnMenu('#dgSUCURSALES',0);
                        }
                        cmenu.menu('show', {
                           left:e.pageX,
                           top:e.pageY
                        });
                     },
            pageSize:2000,               // Si la vista es bufferview establece el valor de buffer de consulta
            sortable:false,               // Si se habilita el SORT del grid
            //sortName: 'AE_CodSucursal',      // Establece la columna inicial del ordenado del grid
            remoteSort:false,            // siempre false
            remoteFilter:false,            // Siempre flase
            rownumbers:true,            // Si muestra o no el numero de fila del grid
            showFooter:false,            // Siempre false
            singleSelect:true,            // Si premite o no seleccionar mas de una fila
            striped:true               // Pinta una fila en gris y la otra en blanco
         });


when I do double click, the order of the columns of this command is

var fields = $('#dgSUCURSALES').datagrid('getColumnFields',true).concat($('#dgSUCURSALES').datagrid('getColumnFields',false));

Division
RespOperativo
GerenteSuc
CajaDeSeguridad
DDN
telefono
horario
codigopostal
.......
......


thankssss

Please refer to this example http://jsfiddle.net/nu6ryq43/. When double click on a row, the displaying fields are:

DivDesc,RegDesc,SucCod,SucDesc,UNDesc,Especializacion,SubEspecializacion,TUNDesc,DescUE,...

jarry.

Before all, i want to thank you for your time.

its as you say.

and when i check that you say, I see my error. I neneverrr change de index number

$('#pgInfoDetalle').propertygrid('insertRow', {   index: 1, row :{"name":col.title,"value":'',"group":"ID Settings","editor":"undefined"} });

apologies and anew,  thank you for your time.
best regards