Stateful Grids

[bchic869]

First off, I'd like to complement the quality of the libraries. Truly excellent work.

Ok, I'd like to persist the selected row and selected sort order in a cookie. If that cookie exists, reset the grid to saved state.

Preserving the selected row was easy enough. The following snippet works great for me:


var stateMgr = YAHOO.ext.state.Manager;

function handleRowClick(aThis, aIndex, aObj)
{
stateMgr.set("UserTableRow", aIndex);
}

grid.addListener("rowclick", handleRowClick);

if (stateMgr.get("UserTableRow"))
{
grid.fireEvent("rowclick", grid, stateMgr.get("UserTableRow"), YAHOO.ext.EventObject);
}

I'd also like to do the sort order in a similar way. While it calls the headerclick event (the alert fires) the order of the rows does not change:


function handleHeaderClick(aThis, aIndex, aObj)
{
alert("handling header click");

stateMgr.set("UserTableSortCol", aIndex);
}

grid.addListener("headerclick", handleHeaderClick);

if (stateMgr.get("UserTableSortDir"))
{
grid.fireEvent("headerclick", grid, stateMgr.get("UserTableSortCol"), YAHOO.ext.EventObject);
}

Any help would be appreciated. Thanks!

[tryanDLS]

Why are you re-firing the grid events in your handler? These occur after the process, you can't trigger the process by firing the event.

Rather thnan listening to grid click, listen to selectionModel's rowselect. That way you only write a cookie when a row is really selected.

To do the sort, call the dataModel.sort fn, rather than firing the event.

[bchic869]

Thanks for the help. With your suggestions I was able to get exactly what I wanted. Here's a snippit of what I ended up doing:


// place sort data in cookie
function handleHeaderClick(aThis, aIndex, aObj)
{
stateMgr.set("GridSortDir", aThis.getDataModel().getSortState().direction);
stateMgr.set("GridSortCol", aIndex);
}

// fill in edit form, set selected row in cookie
function handleRowClick(aThis, aIndex, aObj)
{
// make ajax call
setEditorUrl("edit.rails?", "uniqueId=" + myData[aIndex][0]);
stateMgr.set("GridRow", myData[aIndex][0]);
}

var MyGrid =
{
init : function()
{
/*
General Grid (DataModel, ColumnModel) setup
*/

// add event handlers
grid.addListener("headerclick", handleHeaderClick);
grid.addListener("rowclick", handleRowClick);

// if table sort info is in cookie, reset it
if (stateMgr.get("GridSortDir"))
{
dataModel.sort(null, stateMgr.get("GridSortCol"), stateMgr.get("GridSortDir"));
}

// if the selected row is in the cookie, reset it
if (stateMgr.get("GridRow"))
{
grid.getSelectionModel().selectRowsById(stateMgr.get("GridRow"), false);
grid.fireEvent("rowclick", grid, grid.getSelectedRowIndexes(), YAHOO.ext.EventObject);
grid.scrollTo(grid.getSelectedRowIndexes());
}
}
}
YAHOO.ext.EventManager.onDocumentReady(MyGrid.init, MyGrid, true);

I wasn't able to add the listener to the SelectionModel because that event gets fired at different times as the columns in the grid are sorted. By attaching the event to the grid's rowclick event, I knew the action was user initiated. My ajax call to bring back the row's editor only happens when the user selects a row.

Thanks again!