Progress in datagrid not centered

[baxter]

After upgrade to version 1.3.1 the progress layer is not centered when i load a datagrid.

[stworthy]

Please confirm if the package(including theme files) is installed properly. This message box run fine in our live demos.

[baxter]

Jepp, is correct.

The problem if exist by the first request, when i open the tab. When i push the reload function, the loader is centered correct.

[gurpal2000]

hi sorry what's the fix then? i can confirm this doesn't work with the code below with 1.3.1 (yes i am loading everything properly and cleared my browser caches).

The first time i show the dialog it's centered, then subsequent dialog displays with mask not centered...

Code:

		$('#tableRescan').datagrid({
			url: 'rescan',
			remoteSort: false,
			fit: true,
			idField: 'fmtdate',
			columns:[[{
				field: 'fmtdate',
				title: 'date',
				width: 100
			}]]
		});
		
		$('#divAdmin').dialog({
			title: 'dia',
			width: 500,
			height: 300,
			modal: true
		});
	});

html:

Code:

<div id="divAdmin">
  <table id="tableRescan"/>
</div>

[stworthy]

Please override the datagrid loading method to fix this issue:

Code:

$.extend($.fn.datagrid.methods, {
	loading: function(jq){
		return jq.each(function(){
			var opts = $.data(this, 'datagrid').options;
			$(this).datagrid('getPager').pagination('loading');
			if (opts.loadMsg){
				var panel = $(this).datagrid('getPanel');
				$('<div class="datagrid-mask" style="display:block"></div>').appendTo(panel);
				var msg = $('<div class="datagrid-mask-msg" style="display:block;left:50%"></div>').html(opts.loadMsg).appendTo(panel);
				msg.css('marginLeft', -msg.outerWidth()/2);
			}
		});
	}
});

[gurpal2000]

Hi stworthy - didn't seem to work. First invocation - centered. Subsequent  - not centered.

thanks

[gurpal2000]

I tried a different approach where i nest then dialog and grid like so

Code:

	$('#divAdmin').dialog({
		title: 'dia',
		width: 500,
		height: 300,
		closed: true,
		modal: true,
		onOpen: function() {
			$('#tableRescan').datagrid({
				url: 'rescan',
				remoteSort: false,
				fit: true,
				fitColumns: true,
				idField: 'fmtdate',
				columns:[[{
					field: 'fmtdate',
					title: 'date',
					width: 100
				}]],
				toolbar: [{
					text: 'Queue',
					handler: function() {
						console.log($('#tableRescan').datagrid('getSelections'));
					}
				}]
			});
		}
	});

and each time i invoke dialog('open') the progress is centered.

QN: is this the best practice? and is the dialog and components destroyed each time i do close? i want to be able to load new data each time i re-show the dialog.

[stworthy]

Please refer to this example http://jsfiddle.net/enNLK/.
Click the 'loading' link on the top of page to make datagrid display loading message window and then resize the dialog. The loading message window of datagrid always remain in center.

[gurpal2000]

hi thanks stworthy - if you comment out your override, it still centered. weird