EasyUI Forum

Hi.

I have some questions for them .

In datagrids with many columns , I have programmed the onDblClickRow event , showing all columns in the selected row , as rows in a PropertyGrid .

Enquiries:

I) Only the first time the propertygrid window opens , showing the horizontal scroll bar . should never show .

II) Can I get datagrid column formatter method for use as a formatter in the PropertyGrid ?

III) if the heigth of number of rows that show in the PropertyGrid , is less than the vertical height of the window, can  I reduce the height of the window?



onDblClickRow: function(index, row){
// *************************************************************
// Abre una window con todas las columnas mostradas en vertical.
// *************************************************************
       MostrarRegistroCompleto( index, row,  'Datos de la Sucursal', 'dgINCIDENTES' );
},



function MostrarRegistroCompleto( index, row, pWinTitulo, pIdDG ){
// *************************************************************************************************
// si es la primera vez que se solicita esta informacion agrego el div del Window y el propertygrid al BODY
// *************************************************************************************************
      if( typeof WinDiv == 'undefined' ) {
         var idWin = pIdDG + '_WinInfoDetalle';
         var idPg  = pIdDG + '_PgInfoDetalle';
         var WinDiv = $('<div id="'+idWin+'"></div>').appendTo('body');
         var pgTable=$('<table id="'+idPg+'" data-options="fit:true"></table>').appendTo(WinDiv);
         idWin = '#' + idWin;
         idPg  = '#' + idPg;
      }   
      
      // **************
      // Creo la window
      // **************
      $(idWin).window({
         closed:true,
         modal:true,
         title:pWinTitulo,
         collapsible:false,
         minimizable:false,
         maximizable:false,
         width:'50%',
         height:'80%'
      });
      
      // *****************************
      // Obtengo las columnas del Grid
      // *****************************
      pIdDG = '#' + pIdDG;
      var fields = $(pIdDG).datagrid('getColumnFields',true).concat($(pIdDG).datagrid('getColumnFields',false));

      // ***************************************
      // Elimino los elementos del property grid
      // ***************************************
      $(idPg).propertygrid({
         data: [],         // Elimino los elementos del property grid
         showGroup:false,   // No muestro los grupos
         fitColumns:true,   // hago que las columnas abarquen todo el ancho del panel
         fit:true,         // hago que el propertygrid encaje en toda la window
         columns: [[         // Determino los anchos de las dos columnas
            {field:'name',title:'',width:'35%',align:'right',resizable:false,styler:function(value,row,index){ return 'background-color:#F4F4F4;color:black;font-weight: bold;'; } },
            {field:'value',title:'',width:'65%',resizable:false}
         ]]
      });
      
      // ******************************************************
      // cargo los nuevos valores de la nueva fila seleccionada                        
      // ******************************************************
      var RowFieldValue="";
      for(var i=0; i<fields.length; i++){
         var col = $(pIdDG).datagrid('getColumnOption', fields);
         RowFieldValue='row.'+fields;
         $(idPg).propertygrid('insertRow', {   index: i, row :{"name":col.title+': ',"value":eval(RowFieldValue),"group":"ID Settings","editor":"undefined"} });
      }   
      // *****************
      // muestro la window
      // *****************
      $(idWin).window('hcenter');   
      $(idWin).window('vcenter');
      $(idWin).window('open'); 
}