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>

Forum search