Paging Tips
I've developed a data base display tool using the ActiveWidgets Grid. The tool displays a page of data at a time from a MySQL DB and also allows for searching for a string in any cell on the displayed page. It also sets the width of the columns and impements context menus on the header or row selectors. I had a number of issues because of things that I was doing each time I displayed a new page. All the issues went away when I made the attached function execute only once. It took several days to find out the solution to these problems so I am listing the function here to help the user community.
var init_aw_grid = false;
// -----------------------------------------------------------------------------
// initialize the grid
// -----------------------------------------------------------------------------
function init_grid() {
if (!init_aw_grid){
obj.setId("myGrid"); // necessary for CSS rules
obj.setSelectionMode("multi-row");
obj.setSelectorVisible(true);
obj.setSelectorWidth(26); // wide enough to show 999
obj.onHeaderMouseOver = function(event, index) {
//window.status = "Header " + index + " mouse over";
onGrid = true;
actionColumn = index;
document.oncontextmenu = ItemSelMenu;
};
obj.onCellMouseOver = function(event, column, row) {
//window.status = "Cell " + column + "." + row + " mouse over";
onGrid = false;
hidePopupMenus();
};
obj.onCellDoubleClicked = function(event, column, row) {
//window.status = "Cell " + column + "." + row + " double clicked"
};
obj.onCellClicked = function(event, column, row) {
//window.status = "Cell " + column + "." + row + " mouse clicked";
var cellvalue = obj.getCellValue(column, row);
document.getElementById('tbFindText').value = cellvalue; // put contents of cell into find textfield
// Set Simple Filter values
document.getElementById('simpValue').value = cellvalue; // put contents of cell into simple filter textfield
// turn on find and find all toolbar buttons
tbFindNext.setStatus(1);
tbFindAll.setStatus(1);
lastrFoundIndex = row; // reset row for find function
lastcFoundIndex = column; // reset column for find function
};
obj.onSelectorMouseOver = function(event, index) {
//window.status = "Selector " + index + " mouse over";
onGrid = true;
document.oncontextmenu = RowSelMenu;
actionRow = index;
};
obj.onHeaderClicked = function(event,index) {
columnSelector(index);
return 'disabled';
};
// assign grid event handler
obj.onHeaderContextMenu = function(event, col) {
//alert("context menu event - col:" + col);
actionColumn = col;
eventColumn = event;
mouseGridSelect(event, col);
}
obj.defineCellProperty("color", false);
obj.getCellTemplate().setStyle("background", function(){
return this.getCellProperty("color") ? "red" : "white";
});
// assign html event handler to header template
obj.getHeaderTemplate().setEvent("oncontextmenu", oncontextmenu);
// Set the column widths
var stylesheet = document.styleSheets[document.styleSheets.length-1];
for (var i=0; i < myWidths.length; i++) {
stylesheet.addRule("#myGrid .aw-column-"+i, "width:"+myWidths[i]+"px");
}
init_aw_grid = true;
}
}
var init_aw_grid = false;
// -----------------------------------------------------------------------------
// initialize the grid
// -----------------------------------------------------------------------------
function init_grid() {
if (!init_aw_grid){
obj.setId("myGrid"); // necessary for CSS rules
obj.setSelectionMode("multi-row");
obj.setSelectorVisible(true);
obj.setSelectorWidth(26); // wide enough to show 999
obj.onHeaderMouseOver = function(event, index) {
//window.status = "Header " + index + " mouse over";
onGrid = true;
actionColumn = index;
document.oncontextmenu = ItemSelMenu;
};
obj.onCellMouseOver = function(event, column, row) {
//window.status = "Cell " + column + "." + row + " mouse over";
onGrid = false;
hidePopupMenus();
};
obj.onCellDoubleClicked = function(event, column, row) {
//window.status = "Cell " + column + "." + row + " double clicked"
};
obj.onCellClicked = function(event, column, row) {
//window.status = "Cell " + column + "." + row + " mouse clicked";
var cellvalue = obj.getCellValue(column, row);
document.getElementById('tbFindText').value = cellvalue; // put contents of cell into find textfield
// Set Simple Filter values
document.getElementById('simpValue').value = cellvalue; // put contents of cell into simple filter textfield
// turn on find and find all toolbar buttons
tbFindNext.setStatus(1);
tbFindAll.setStatus(1);
lastrFoundIndex = row; // reset row for find function
lastcFoundIndex = column; // reset column for find function
};
obj.onSelectorMouseOver = function(event, index) {
//window.status = "Selector " + index + " mouse over";
onGrid = true;
document.oncontextmenu = RowSelMenu;
actionRow = index;
};
obj.onHeaderClicked = function(event,index) {
columnSelector(index);
return 'disabled';
};
// assign grid event handler
obj.onHeaderContextMenu = function(event, col) {
//alert("context menu event - col:" + col);
actionColumn = col;
eventColumn = event;
mouseGridSelect(event, col);
}
obj.defineCellProperty("color", false);
obj.getCellTemplate().setStyle("background", function(){
return this.getCellProperty("color") ? "red" : "white";
});
// assign html event handler to header template
obj.getHeaderTemplate().setEvent("oncontextmenu", oncontextmenu);
// Set the column widths
var stylesheet = document.styleSheets[document.styleSheets.length-1];
for (var i=0; i < myWidths.length; i++) {
stylesheet.addRule("#myGrid .aw-column-"+i, "width:"+myWidths[i]+"px");
}
init_aw_grid = true;
}
}
ShepherdOwner
April 13,