Detail link with id, from grid

[brondsem]

If you want one column in your grid to contain a link to a detail page for that entry, you can do something like this:


var me = this; // 'this' is a special variable, so we use 'me' to maintain a reference to it
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Student", width: 125, renderer: function(value, row, column, node) {
// me.grids[divId] is how I reference my grid from my GridManager class, yours will probably vary
return '' + value + ' (detail.php?id=' + me.grids[divId].dataModel.getRowId(row) + ')';
} },
{header: "First Choice", width: 100},
{header: "Second Choice", width: 100},
...


This uses the ID from your datamodel. My JSON dataModel declares the ID like this:

var dataModel = new YAHOO.ext.grid.JSONDataModel({
root: 'Results',
id: 'form_id',
fields: ['name', 'requestedBuilding1', 'requestedBuilding2', ...]
});


You'll probably want this in your CSS, too:

.ygrid-row-selected a:link, .ygrid-row-selected a:visited {
color: white;
}

[Animal]

It would be better usability to have a click handler on the grid which loaded the url "detail.php?id=[id of the row clicked]" into a ContentPanel in another layout Region, or another Tab.

The way you have it, unless they right clicked and did "Open in new tab", the detail page would replace the grid, and to get back to the grid, they'd have to build it all over again! Best to keep the grid in place, and load details through Ajax.

Try that next!

[gkassyou]

Animal, is there a way to click on an element of a grid and have it open a dialog box with the details. The details would need to be loaded from another url and it would be nice to view that detail in the dialog in a grid.

any ideas?

[Animal]

Add a handler to the Grid's SelectionModel's selectionchange event. Perform your dialog update in your handler function.

[kubens]

grid = new Ext.grid.Grid ('htmlPanelGrid', ds: ds, cm: cm);
grid.addListener(
'click',
function () {
alert(this.getRecordId());
}
);