3.2.0

Loading Message inside ScrollTemplate? .......

While I was testing, I notice that the ScrollTemplate is a full container for the grid (except panels??) , so it can help us in some situations.

But is it the right place to store a Loading msg <span> ?? (could be)

I made a paging & sorting sample based on Sudhaker post:
http://www.activewidgets.com/javascript.forum.19163.6/record-level-editing-using-popup.html
Also splash by sorting in different color :-)
<html>
<head>
<title>ActiveWidgets Examples</title>
<style>body {font: 12px Tahoma}</style>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
<script> 
var obj = new AW.UI.Grid; 
obj.setCellData(function(col, row){return col + "." + row}); 
obj.setHeaderText(function(col){return 'header - ' + col }); 
obj.setColumnCount(10); 
 
obj.setRowCount(400); //real rows 
var totalrows = obj.getRowCount(); 

obj.setRowCount(10); //paged rows 
var pagerows = obj.getRowCount();  // paging # rows ( in this case 10) 

document.write(obj); 
   
document.write("<br>");  

var button = new AW.UI.Button;  
button.setControlText("Next Page");  
document.write(button);  

button.onControlClicked = function(){ 
var x = obj.getRowOffset();  
if ( x < totalrows ){ 
this.setControlDisabled(true); 
obj.LoadingMessage( true, "- Loading Page # "+ (1+(x+pagerows)/pagerows), 'lightblue');
obj.refresh();
this.setTimeout( function(){  ///--------------/// START TIMEOUT 
obj.setRowOffset(x+pagerows); 
obj.LoadingMessage(false);
obj.refresh(); 
this.setControlDisabled(false);
},700);  //---------------// END TIMEOUT
}  
} 

obj.LoadingMessage = function( bool, msg, color ){
if (bool){
this.defineControlProperty('SavedScroll', ''); //// new property to store default scroll-template
this.setControlSavedScroll(this.getScrollTemplate().getContent('box'));
var LoadSpan = new AW.HTML.SPAN;
LoadSpan.setId('LoadingSpn')
LoadSpan.setStyle('height', '100%');
LoadSpan.setStyle('width', '100%');
LoadSpan.setStyle('background-color', color );
LoadSpan.setStyle('background-repeat', 'no-repeat');
LoadSpan.setStyle('z-index', '10000');
LoadSpan.setStyle('position', 'absolute');
LoadSpan.setStyle('opacity', '0.8');
LoadSpan.setStyle('-moz-opacity', '0.8');
LoadSpan.setStyle('filter', 'alpha(opacity=80)');
LoadSpan.setStyle('font-size', '20');
LoadSpan.setContent('html', msg + '</br>');
LoadSpan.setContent('html', LoadSpan.getContent('html')+ ', Please wait' + '</br>');
LoadSpan.setContent('html', LoadSpan.getContent('html')+'<img src=' +  "../../runtime/styles/xp/combo.png" + '></img>');

this.getScrollTemplate().setContent('box',LoadSpan);
}

if (!bool){ 
 this.getScrollTemplate().setContent('box', this.getControlSavedScroll() );
}
}
    
obj.onHeaderClicked = function(event, index){ 
var i = obj.getSortColumn();                         // get previous sorted-Column  
var idir = obj.getSortDirection(i);                   // get previous sort-Direction 
if (obj.getSortDirection(i)) { obj.setSortDirection("", i); }         //    clean previous sort indicator 
this.setSortDirection( i == index && idir=="ascending" ? "descending" : "ascending" ,index); // draw sort indicator
this.setRowCount(totalrows);           // temporaly set rowcount to all rows 
this.setRowOffset(0);                  // restores Offset to normal 
this.LoadingMessage( true, (i == index && idir=="ascending" ? '- Sorting on ' + this.getHeaderText(index) + ' ' + "descending" : '- Sorting on ' + this.getHeaderText(index) + ' ' + "ascending") , 'seashell');
this.refresh();
setTimeout( function(){  ///--------------/// START TIMEOUT   
obj.sort(index, i == index && idir=="ascending" ? "descending" : "ascending" ); // sort
obj.LoadingMessage(false); 
obj.setRowCount(  pagerows );   // set rowcount to paged-rows again 
obj.refresh();
},100);  //---------------// END TIMEOUT 
 return true; // cancel default handler  
}
</script> 
</body>
</html>


Carlos
December 19,
Hi carlos...
ive working on a solution for you and i think i found an nice way to do.
Maybe alex can help us to create a perfect solution for this.
Here my example:

http://aw.pimpas.net/components/tests/grid_loading_msg.html

However, the solution works only in firefox, in IE7 the message dont appear, dunno why.

Well, that is, hope this help you Carlos.

Cya. Happy New Year.
Paulo Cesar (PC from Brazil)
January 1,

This topic is archived.

See also:


Back to support forum