Popup screen with details

Hi All,

I am trying to create a poup screen with details when one clicks on a row/column. I only seem to be able to get a combo working. Is it not possible to create a popup which contains custom html? I have searched the message boards but to no avail.

The best way in my opinion is to great a floating DIV when you double click on a row.

Hook up a function to the gridobj.onCellDoubleClicked which shows the div.

The div should have a css class which goes something like this:

.host_detail
{
    position:absolute;
    left: 0px;
    top: 250px;
    width: 35em;
    margin: 0 0.2em 0 0;
    border: 1px solid #666;
    padding: 0px 4px 4px 4px;
    background: #def;
    color: #333;
    z-index: 100;
}

Create the floating div and it's control at the same time as the grid:

document.write('<div id="divContext" class="host_detail" style="width: 18em;">');

// Here you would show the detail information

// A single button in the div
var theButtonClose = new AW.UI.Button;
theButtonClose .setControlText("Close");
theButtonClose .onClick = doCancelWithConfirm;
document.write("<div style=\"float:right;\">"+theButtonClose +"</div></div>");

And then as I said show and hide the div based on the users grid selection:

// Hides a div by the name of inName in the current document
function hideDiv(inName)
{
    document.getElementById(inName).style.display="none";
}


//	Show a div by the name of inName in the current document
function showDiv(inName)
{
    document.getElementById(inName).style.display="block";
}

Thanks for that Karl. This works fine with a few minor tweaks. Any ideas on how to get the popped div positioned relative to the cell clicked? Actually taking a lazy shortcut by asking you. But will go back and spend some time with it now!

For the vertical position. Haven't had use for finding the horizontal placing but this should get you started (Based on pointers from Alex if I remember correctly):

var ypos = 0;
var gridrow = gridobj.getRowTemplate(rowindex).element();
while (gridrow != null)
{
  ypos += gridrow.offsetTop;
  gridrow = gridrow.offsetParent;
}

getDiv("divContext").style.top = ypos + gridobj.getRowHeight();

And the support function :

function getDiv(inName)
{
    return document.getElementById(inName);
}

Hi Karl,

Thanks for your prompt reply. I have read the post where Alex pointed you in this direction but regardless can't get this to work properly.

I have:

function showDiv(row){
           var mrow = obj.getRowTemplate(row).element();
           alert(mrow);
}

This always returns 'undefined'. The row id is correct and if I remove the element method I get the data for the row alerted. Any ideas?

Sorry Karl!!! My bad...

For the extended grid you have to use:

var mrow = obj.getRowTemplate(row, 0).element();

Thanks for the help!