Print Page - Progress in datagrid not centered

Title: Progress in datagrid not centered
Post by: baxter on September 10, 2012, 01:58:18 AM

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

Title: Re: Progress in datagrid not centered
Post by: stworthy on September 10, 2012, 02:36:55 AM

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

Title: Re: Progress in datagrid not centered
Post by: baxter on September 10, 2012, 07:04:05 AM

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.

Title: Re: Progress in datagrid not centered
Post by: gurpal2000 on September 12, 2012, 05:10:15 PM

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>

Title: Re: Progress in datagrid not centered
Post by: stworthy on September 12, 2012, 05:45:13 PM

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);
			}
		});
	}
});

Title: Re: Progress in datagrid not centered
Post by: gurpal2000 on September 13, 2012, 06:14:19 AM

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

thanks

Title: Re: Progress in datagrid not centered
Post by: gurpal2000 on September 14, 2012, 04:27:45 PM

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.

Title: Re: Progress in datagrid not centered
Post by: stworthy on September 14, 2012, 05:47:32 PM

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.

Title: Re: Progress in datagrid not centered
Post by: gurpal2000 on September 15, 2012, 01:07:22 AM

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

EasyUI Forum

General Category => Bug Report => Topic started by: baxter on September 10, 2012, 01:58:18 AM