Hi,

Exist possibility to add event to datagrid, then grid alreday created ? Dynamically ? I can't to find how to do that ? I'm trying to create page structure and as from conditions it can be some related datagrids. Want then to add 'onSelect' event to add own function of relation ...

Find the solution, after reviewing samples ...

Simply format needfull html tags ...

Code:

         if ( ptbs.length > 1 )
         {
            $( 'body' ).append( '<div id="pTab">' );
            $( "#pTab" ).addClass( 'easyui-tabs' );
            
            for ( var p in ptbs )
            {
               var nm = "tab" + p.toString();
               var nd = "dg"  + p.toString();
               $( "<div id='" + nm + "' title='" + ptbs[ p ][ "pav_" + $app_lng ] + "'></div>").appendTo( "#pTab" );
               $( "<table id='" + nd + "'></table>").appendTo( "#" + nm );
               $( '#' + nd ).addClass( 'easyui-datagrid' );
            }
            
            $( '#pTab' ).tabs( 
            {
               border  : true,
               fit     : true,
               plain   : true,
               onSelect: function( title, index )
               {

then that works :

Code:

         for ( var p in ptbs )
         {
            dobj[ p ] = $( '#dg' + p.toString() ).datagrid( grd_cfg[ p ].create_grid() ); // 
            dobj[ p ].datagrid( 'enableCellEditing' );
            dobj[ p ].datagrid( 'enableFilter'      );
            //dobj[ p ].datagrid( 'columnMoving' );
         }

Thanks !

Hi,

Can't find how to add ( rend ) dinamically datagrids to tabs ...

I'm creating tabs from structure :

Code:

            for ( var p in ptbs )
            {
               var str = "<table id='dg'" + p.toString() + " class='easyui-datagrid' style='width:600px;height:500px'></table>";
               $( '#pTab').tabs( 'add',
               {
                  id      : 'tab' + p.toString(),
                  title   : ptbs[ p ][ "pav_" + $app_lng ],
                  closable: false,
                  fit     : true,
                  selected: ( p == 0 ? true : false ),
                  content : str
               });
            }   

And then want to add datagrids from structures :

Code:

         for ( var p in ptbs )
         {
            debugger;
            //var page = $( '#pTab' ).tabs( 'getTab', p );
            dobj[ p ] = $( '#dg' + p.toString() ).datagrid( grd_cfg[ p ].create_grid() );
         }

Structures of datagrids are goods - I checked them in a single page, each datagrid appears and works fine ...

Simply I don't know how it to add to tabs ...

Thanks in advance ...

Hi,

Problem with cell editing, datagrid-cellediting plugin. After editing cell, cell background became blue . Trying to put chars in filter box, in open again editor in just edited cell and chars goes here ...

I'm trying with remote database and datagrid is with 3 plugins :

Code:

  <script src="jeasy/jquery.min.js"></script>
   <script src="jeasy/jquery.easyui.min.js"></script>
   <script src="jeasy/datagrid-filter.js"></script>
   <script src="jeasy/datagrid-scrollview.js"></script>
   <script src="jeasy/datagrid-cellediting.js"></scrip>
   <script id="script-lang" src="jeasy/locale/easyui-lang-lt.js"></script>
	<script src="jsf/func.js"></script>
   <script src="jsf/grd.js"></script>

I'm using only 'onAfterEditing' event :

Code:

      this.create_grid = function() // "this" here - created own object storing info about grid columns and own parameters ...
      {
         var obj = this;
         var ret = 
         {   
            fit        : true,
            idField    : this.pagr_rakt,
            columns    : [ this.grid_stulp ],
            toolbar    : [
            {
               id     : 'naujas',
               text   : 'Naujas',
               iconCls: "icon-add",
               plain  : true, 
               handler: function(){ $.messager.alert( "naujas" ); } //$( '#dg' ).datagrid( 'addRow' ) }
            },
            {
               id     : 'salint',
               text   : 'Šalinti',
               iconCls: "icon-remove",
               plain  : true,
               handler: function(){ $.messager.alert( "salinti" ); }
            },
            {
               id     : 'saugot',
               text   : 'Išsaugoti',
               iconCls: "icon-save",
               plain  : true,
               handler: function(){ $.messager.alert( "issaugoti" ); }
            },
            {
               id     : 'atmesti',
               text   : 'Atmesti',
               iconCls: "icon-undo",
               plain  : true,
               handler: function(){ $.messager.alert( "atmesti" ); }
            }],
            view          : scrollview,
            striped       : true,
            pagination    : false,
            pageSize      : this.pusl_dyd,
            singleSelect  : false,
            autoRowHeight : false,
            remoteFilter  : true,
            remoteSort    : true,
            multiSort     : true,
            clickToEdit   : false,
            dblclickToEdit: true ,
            url           : format_url( this, "get" ),
            onAfterEdit   : function( index, row, changes )
            {
                cell_update( index, row, changes, obj, this );
            }
         }   
         return ret;
      }

function cell_update:

Code:

function cell_update( index, row, changes, obj, dg )
{
   var laukai = Object.keys( changes );
   var laukas = laukai[ 0 ];
   var reiksm = changes[ laukas ];
   var snd    = "phpf/" + obj.grid_url + "?tbl=" + obj.pagr_lent + "&idf=" + obj.pagr_rakt + "&idk=" + row[ obj.pagr_rakt ] + "&cmd=upd&lks=" + laukas + "&var=" + reiksm + 
   "&fld=" + obj.lauku_eil + ( obj.rysio_eil ? "&jon=" + obj.rysio_eil : "" ); // update query to php ...
   
   var ret = ajax_get( snd );
   if ( ret.status != 'success' )
      alert( ret.message );
   else
   {
      var upd = 0; // check if other related field updated or not 
      var rec = ret.rows;
      for ( var u in obj.grid_stulp )
      {
         var lks = obj.grid_stulp[ u ].field;
         if ( rec[ 0 ][ lks ] != row[ lks ] )
         {
            row[ lks ] = rec[ 0 ][ lks ];
            upd ++;
         }
      }
      if ( upd > 0 ) // if returned record differs from existing row - update 
         dg.datagrid( 'updateRow', { index: index, row: row } );
   }
} 

At first I thinked that this cell update is related to typing for filters ..., but disabling "onAfterEdit" nothing changed, the same problem ...

How to solve that conflict between filter and cells editors ?


Many thanks in advance ...

Hi,

Searching about column move featue I found that : http://www.jeasyui.com/forum/index.php?topic=279.0 .

It's working fine . Also I want to know - exist possibility to catch event then column is dropped ? I want to do some mine other stufs ( reordering own parameters too ) .... Or can I know programatically which field ID was dropped and which new column index ?

Thanks in advance !

Another problem with filter .

I'm trying with remote database and datagrid is with 3 plugins :

Code:

  <script src="jeasy/jquery.min.js"></script>
   <script src="jeasy/jquery.easyui.min.js"></script>
   <script src="jeasy/datagrid-filter.js"></script>
   <script src="jeasy/datagrid-scrollview.js"></script>
   <script src="jeasy/datagrid-cellediting.js"></scrip>
   <script id="script-lang" src="jeasy/locale/easyui-lang-lt.js"></script>
	<script src="jsf/func.js"></script>
   <script src="jsf/grd.js"></script>

I alreday asked , how to disable cellediting in one click. It's working OK. But now I'm trying to do filtering with text field withouts operations after cell editing ( also tried and with other filters - the same ) ... Begining typing I'm seeing that again open editor on just edited cell and mine keyword is going here , not in filter text ...
It seems that mine update solution isn't fully functional .. Please , correct me , what I must to do. I'm using only 'onAfterEditing' event :

Code:

      this.create_grid = function() // "this" here - created own object storing info about grid columns and own parameters ...
      {
         var obj = this;
         var ret = 
         {   
            fit        : true,
            idField    : this.pagr_rakt,
            columns    : [ this.grid_stulp ],
            toolbar    : [
            {
               id     : 'naujas',
               text   : 'Naujas',
               iconCls: "icon-add",
               plain  : true, 
               handler: function(){ $.messager.alert( "naujas" ); } //$( '#dg' ).datagrid( 'addRow' ) }
            },
            {
               id     : 'salint',
               text   : 'Šalinti',
               iconCls: "icon-remove",
               plain  : true,
               handler: function(){ $.messager.alert( "salinti" ); }
            },
            {
               id     : 'saugot',
               text   : 'Išsaugoti',
               iconCls: "icon-save",
               plain  : true,
               handler: function(){ $.messager.alert( "issaugoti" ); }
            },
            {
               id     : 'atmesti',
               text   : 'Atmesti',
               iconCls: "icon-undo",
               plain  : true,
               handler: function(){ $.messager.alert( "atmesti" ); }
            }],
            view          : scrollview,
            striped       : true,
            pagination    : false,
            pageSize      : this.pusl_dyd,
            singleSelect  : false,
            autoRowHeight : false,
            remoteFilter  : true,
            remoteSort    : true,
            multiSort     : true,
            clickToEdit   : false,
            dblclickToEdit: true ,
            url           : format_url( this, "get" ),
            onAfterEdit   : function( index, row, changes )
            {
                //row.editing = false;
                cell_update( index, row, changes, obj, this );
            }
         }   
         return ret;
      }

function cell_update:

Code:

function cell_update( index, row, changes, obj, dg )
{
   var laukai = Object.keys( changes );
   var laukas = laukai[ 0 ];
   var reiksm = changes[ laukas ];
   var snd    = "phpf/" + obj.grid_url + "?tbl=" + obj.pagr_lent + "&idf=" + obj.pagr_rakt + "&idk=" + row[ obj.pagr_rakt ] + "&cmd=upd&lks=" + laukas + "&var=" + reiksm + 
   "&fld=" + obj.lauku_eil + ( obj.rysio_eil ? "&jon=" + obj.rysio_eil : "" ); // update query to php ...
   
   var ret = ajax_get( snd );
   if ( ret.status != 'success' )
      alert( ret.message );
   else
   {
      var upd = 0; // check if other related field updated or not 
      var rec = ret.rows;
      for ( var u in obj.grid_stulp )
      {
         var lks = obj.grid_stulp[ u ].field;
         if ( rec[ 0 ][ lks ] != row[ lks ] )
         {
            row[ lks ] = rec[ 0 ][ lks ];
            upd ++;
         }
      }
      if ( upd > 0 ) // if returned record differs from existing row - update 
         dg.datagrid( 'updateRow', { index: index, row: row } );
   }
} 

It seems that this cell update is related to typing for filters ...

Another question - exist possibility to translate filter menu operations ? ( equal, contains ... )

Many thanks in advance ...

Thank you, found the reason of problem ... I rendered datagrid to 'body' and that was while filter wasn't not working ... Added to body table element  - works fine ... 

Hi,

trying to do filtering on the grid. If to let only 'enableFilter', without fields array parameters - all is working OK . But it to try add field array - filter operator button isn't working ( no menu show clicking on filter image ) and filtering on this fields isn't working too ( no command of filtering to remote url ) . What that can be wrong ?

Code:

    dg.datagrid( 'enableFilter', 
         [
            {
               field: 'uzs_kiekis',
               type : 'numberbox',
               options: { precision: 0 },
               op   : ['equal','notequal','less','greater']
            }
         ])

Filtering with remote server , datagrid options :

            view         : scrollview,
            striped      : true,
            pagination   : false,
            pageSize     : this.pusl_dyd,
            singleSelect : false,
            autoRowHeight: false,
            remoteFilter : true,
            remoteSort   : true,
            multiSort    : true,

Also datagrid is with datagrid-cellediting.js plugin ...

Thanks in advance ...

Woww ...  . Very fine ! Thanks you !

[SOLVED]

Hi,

I'm trying datagrid-cellediting . It works fine . But I want to do that editing of cell opens after duoble click or Enter. Can this be done ?

Thanks in advance ...

OK, found that ... 

Code:

		 $( '#mTab' ).tabs(
		 {
			onBeforeClose: function( title, index )
			{
			   var tabs   = $( '#mTab' ).tabs( 'tabs' );
                           var tab_id = tabs[ index ].panel( 'options' ).id;
                           .. do some stuf ..
			}
                  });

At first I didn't noticed that 'onBeforeClose' is receiving index. Works fine ! 

Hi,

I'm trying this excelent library. In tabs panels I'm loading html pages with ajax . All is working OK. Don't know how to recognize which tabs I'm closing in 'onClose' event then tab isn't active. Let say that I created 3 closable tabs and the last is active . And then I'm clicking on the first, not active, tab's close button. Don't know how to recognize that this is the first tab in 'onClose' event ...

Thanks in advance !