3.2.0

Dynamically set row and column on grid

I have a grid control with 23 columns (only 10-12 of which can be seen without scrolling) and countless numbers (within reason) of rows. When a value in a cell is updated, I do an AJAX call to a controller file that validates the value, performs the dependent functions on other values (if necessary) and returns the values to the grid with a table.request(); call. This caused the grid to reset to the upper left cell (shift back to the extreme left and top). I know the column and row number that were being worked with...is there any way to scroll to that column and row after reloading the data in the grid using the table.request(); function?

Thanks,

Paul M
July 25,
You can scroll the grid to the desired position with setScrollTop() and setScrollLeft() methods.
Alex (ActiveWidgets)
July 31,
Alex:

I have tried putting the suggested functions in several places as you can see in the code below (using a constant to try to get it to work)

var dataStorageType = ["flat","hang"];

var listStorageType = new AW.UI.List;
listStorageType.setItemText(dataStorageType);
listStorageType.setItemCount(dataStorageType.length);

var dataNewReorder = ["New","Reorder"];

var listNewReorder = new AW.UI.List;
listNewReorder.setItemText(dataNewReorder);
listNewReorder.setItemCount(dataNewReorder.length);

var table = new AW.XML.Table;
var d = new Date();
table.setURL("/xmlFiles/<? echo $_REQUEST['xmlFile']; ?>?"+d.getTime());
table.request();
//table.setURL("/xmlFiles/<? echo $_REQUEST['xmlFile']; ?>");
//table.request();


// create ActiveWidgets Grid javascript object
var obj = new AW.UI.Grid;
obj.setId("grid")
obj.setStyle('width', '800px');
obj.setStyle('height', '255px');

// provide cells and headers text
obj.setHeaderText(myColumns);

// set number of rows/columns
obj.setColumnCount(23);
obj.setCellModel(table);

// set row selection
obj.setSelectorVisible(true);
obj.setSelectorText(function(i){return this.getRowPosition(i)+1});

obj.setCellEditable(true);

// set click action handler
obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};

// set cell level update saves
obj.onCellValidated = function(text, column, row){

var r = new AW.HTTP.Request;
r.setURL("/controller/cellManager.php");
r.setRequestMethod("POST");
r.setParameter("column", column);
r.setParameter("row", row);
r.setParameter("text", text);
r.setParameter("ajaxMode", 'cellUpdate');
r.setParameter("xmlFile", '<? echo $_REQUEST[xmlFile]; ?>');
r.request();

r.response = function(data){

if (data.indexOf('NOTICE') !=-1){
alert(data);
}

obj.clearCellModel();
obj.setCellModel(table);
obj.setCellEditable(true);
obj.setScrollTop(100);
obj.setScrollLeft(100);

var d = new Date();
table.setURL("/xmlFiles/<? echo $_REQUEST['xmlFile']; ?>?"+d.getTime());
table.request();
table.setScrollTop(100);
table.raiseEvent("onScrollTopChanged");

}
}

obj.setScrollLeft(200);
obj.setScrollTop(200);



obj.setCellTemplate(new AW.Templates.Combo, 1);
obj.setPopupTemplate(listNewReorder, 1);

obj.setCellTemplate(new AW.Templates.Combo, 20);
obj.setPopupTemplate(listStorageType, 20);



// write grid html to the page----------------------------------------------------------------
document.write(obj);

I can see where the left scroll tries to move, but when the page grid finishes loading, everything is focused on the top left ...can you tell me where I am going wrong.

Thanks
Paul M
August 14,
Alex:

I really need to get this issue solved, any help or insight you can provide is appreciated
Paul M
August 18,
You need to call setScrollTop after the data is received.

table.response1 = table.response;
table.response = function(data){
this.response1(data);
obj.setScrollTop(200);
}
Alex (ActiveWidgets)
August 19,
Thanks Alex...looks like it is working, now to dial it in and finalize it
Paul M
August 20,

This topic is archived.

See also:


Back to support forum