unblock or unblockUI will not work outside of a setTimeout block
I am trying to use either block/unblock or blockUI/unblockUI to display a "In progress, please wait ..." message while columns are being reordered in a jqGrid with lots of rows (1500) and about 15 columns.
I started out using a setTimeout block like the blockUI demos use - it was easier as it showed the progress box a bit longer when I would work with small tables with only a few rows.
Got everything looking great.
Then I removed the setTimeout and even when things take quite a while for the columns to be resized I do not get the progress display.
Here's an example of one button I am using with the code stuffed into the onclick attribute just so it's easy to see. I know it's a bit hard to read, but was trying to not bring in lots of other code to show the problem:
I started out using a setTimeout block like the blockUI demos use - it was easier as it showed the progress box a bit longer when I would work with small tables with only a few rows.
Got everything looking great.
Then I removed the setTimeout and even when things take quite a while for the columns to be resized I do not get the progress display.
Here's an example of one button I am using with the code stuffed into the onclick attribute just so it's easy to see. I know it's a bit hard to read, but was trying to not bring in lots of other code to show the problem:
- $("#t_${id}_table").append($("<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class=\"ui-pg-table navtable\" style=\"float:left;table-layout:auto;\"><tbody><tr>"
- +"<td class=\"ui-pg-button ui-corner-all\" style=\"cursor: pointer;\" title=\"Expand grid columns to width of browser window.\" onclick=\"var $grid = jQuery('#${id}_table');var $gbox = $grid.closest('.ui-jqgrid'); $gbox.block({message: '<h1>Being processed...</h1>',css: { border: '3px solid #a00' }}); $('#${id}_table').setGridWidth(${gridWidth},true); $('#${id}_table').setGridWidth($('#${id}_table_container').width(),true); setTimeout(function () { $gbox.unblock();},3000);\"><div class=\"ui-pg-div\"><span class=\"ui-icon ui-icon-calculator\"></span>Expand</div></td>";
Any ideas on what I'm doing wrong?
Thank you much - Richard