Thx for the suggestions,
seems that upgrading to 1.4.2 with the jquery 1.11, the problem has gone away, or at least I could not get the problem from 20-30 clicks (before at least once out of 10 tab openings I got at least once).

The server access is indeed slow, but I can't improve that. How can I use the modal on tabs? I couldn't find it in the documentation.

thank you again.

Hello,

I am using version 1.4.1 for quite some time now, and working on a complex system. I have a tab system with at least 3 tabs, each containing a grid. There seems to be a problem with the grid init, when it loads most of the times it gives this error:

Code:

TypeError: $.data(...) is undefined
var _6f8=$.data(jq[0],"datagrid").options;          jquery.easyui.min.js (line 9607, col 9)

TypeError: $.data(...) is undefined
return $.data(jq[0],"datagrid").panel; 	               jquery.....min.js (line 9618, col 7)

I interpret this as the DOM elements are not fully rendered by the browser but the init code of the grid is called (to early) or it may be related to the tabs, but it also happens on pages with a single tab and a single grid (just less often) If I add some setTimeout delay, then 90% of the time the bug disappears, but the slower the PC is, the more often this issue occurs. Or the more grids you open the same time, the more often this happens.
This doesn't crash the whole framework, if you close the tab and open it again most often it works, but it's pretty annoying/problematic.

I can reproduce this as: click on a link that opens the tab, and while the browser stalls a bit (rendering the elements) - meaning the tab appears, but it's content is not yet rendered, if I click on this tab, 99% I get this error (that the grid inside this tab won't initialize but give the above error). This doesn't mean that if you don't click on the tab, it won't happen, it will still happen but with less regularity.

any ideas/solutions?
Thank you.

Hi,

I don't use the datagrid edit extension, so I have a special column with a delete icon on it, and I am able to use a custom function to get the selected row and pass arbitrary parameters to the server.
For the grid column:

Code:

 
{field: 'dummy_action', title: 'Manage', align:'center', width: '8%',
formatter:function(value,row,index)
{
    return '<a style="margin: 0 5px;" href="javascript:void(0)" onclick="deleteRowFunction(this, '+row.id+');"><img src="..." alt="" class="icon_del" /></a> '
}

and basics of the deleteRowFunction function

Code:

function deleteRowFunction(el, rowid)
{
    // If you need the grid, then you can query from the current element up
    var grid = jQuery(el).closest('.datagrid-wrap').find('.datagrid-f:first');
    
    // If you need you can get the row index (not row id !!) starting from where the icon is
    var tr = $(el).closest('tr.datagrid-row');
    var rowIndex = parseInt(tr.attr('datagrid-row-index'));
    
    // I use the destroyUrl (without the edatagrid.js) which you can get from the grid by
    var opts = jQuery(grid).datagrid('options');
    // and opts.destroyUrl is the param you specified at the grid init
    
    // Now get the full row from the grid
    var row = jQuery(grid).datagrid('getSelected');

    // And finally you can either append to the destroyUrl any param since you have the full row 
    // Or if you have a database id in the dataset, then you don't need to query the full row, just use the rowid parameter to append it
    // to the destroyUrl, eg. 
   var destroyUrl = opts.destroyUrl + '?id=' + rowid;
}

Hope this helps.

That works, thank you, but I can have the same form opened on multiple tabs, so I can't have the same id (and I don't want to use an automatic id generator), so is there any way around this? So far all other components (like grids, etc) worked fine with a jquery object, instead of an id.
Thx.

Edit: solved it,
instead of input[name="price_online"] I search for a .price_online class (so I add an extra class), like:

Code:

<input type="text" name="price_online" value="..."class="easyui-numberbox price_online" data-options="width:'20%', precision:2, min:0, required: true" checked="checked" />

that way it works, thank you again.

Hello,

I am trying to get a numberbox tied to a checkbox, when the checkbox is unchecked I want to remove the required: true and disable the numberbox, but I can't get it to work.

Code:

<input type="checkbox" name="type_online" <?php if($type_online) echo 'checked="checked"'; ?> onchange="handleOnlineInput(this)" />

<input type="text" name="price_online" value="<?php echo $price_online; ?>" class="easyui-numberbox" data-options="width:'20%', precision:2, min:0, required: true" checked="checked" />

JS function:
function handleOnlineInput(el)
{
	var form = jQuery(el).closest('form');
	var price_online = jQuery(form).find('input[name="price_online"]:first');
	if( jQuery(el).is(':checked') )
		jQuery(price_online).numberbox({required: true, disabled: false});
	else
		jQuery(price_online).numberbox({required: false, disabled: true});
}

The jQuery(price_online).numberbox({required: true, disabled: false}); doesn't "eat" the attributes at all ... any ideas?

Thanks.

Ok, I  found the problem,
I have the tab system executing a certain event from the tab content that loads via ajax.
The problem is that the tabs('add',{ href = .. , ... onLoad: function(panel) { console.log('onload called') }, ... }.
what's inside the onLoad it called twice, so I have my init function called twice, so the filter on the grid is applied twice...
I don't know if this is a bug or it is supposed to work like this. I have my init as follows:

Code:

var mtabs = jQuery('#main_tabs').tabs('add',{
				title: title,
				href: url,
				iconCls: icon,
				closable: closable,
				cache: true,
				onLoad: function(panel) { initTabContent(this); /* this is called twice */ },
				onLoadError: function(XMLHttpRequest, textStatus, errorThrown) { .... }
			});

Hello,

I am using a datagrid with the filter extension inside nested tabs, and I have the following issue:
when I enter any value to any field, I get the following error (datagrid-filter.js):

Code:

too much recursion
var d = opts.oldLoadFilter.call(this, data, parentId);

I have the grid set up as:

Code:

jQuery(grid).datagrid({
        width: '100%',
        height: 450,
        singleSelect: true,
        idField: 'id',
        
        fitColumns: true,
        multiSort: true,
        
        url: '.....',
        remoteSort: true,
        pagination: true,
        remoteFilter: true,
        
        /* Columns */
        columns:[[
                 {field: 'date', title:'{{lang:grid_col_actdate}}', width: '20%', sortable:true, required:true, formatter:fn_datebox_formatter,
                    editor: { type: 'datebox', options: { required:true, formatter: fn_datebox_formatter, parser: fn_datebox_parser } }
                 },
                 {field: 'time', title:'{{lang:grid_col_acthour}}', width: '20%', sortable:true,
                    editor: {type:'textbox', options: {validType:'time',required:true} }
                 },
                 {field: 'max_persons', title: '{{lang:grid_col_max_persons}}', width: '10%', sortable:true, 
                    editor: {type:'numberbox', options: {min:0, precision:0, required:true} }
                 },
                 {field: 'booked', title: '{{lang:grid_col_booked}}', width: '10%', sortable:true},
                 {field: 'canceled', title: '{{lang:grid_col_canceled}}', width: '8%', align:'center', sortable:true, formatter: fn_datagrid_cancelCell,
                    editor:
                    {
                        type:'checkbox',
                        options: { on: '1', off: '' }
                    }
                 }
                ]]
    });
    setTimeout(function(){
        jQuery(grid).datagrid('enableFilter');
    }, 1000);
}

* the settimeout is needed (as I noticed) for the delayed load inside nested tabs, when the grid is on a tab that is not visible at load.

thank you.