Row Detail

Row Detail

Index > AJAX and DHTML > Row Detail Iframe

Report Row With Detail (IFRAME)

Title	Random Data	Random Data2	Click For Detail
Vivian Rutledge	mi. Duis risus odio, auctor vitae, aliquet nec,	parturient montes, nascetur ridiculus mus. Proin vel	show_detail
Robert Hurst	non dui nec urna suscipit nonummy.	dolor dolor,	show_detail
Mollie Contreras	volutpat. Nulla dignissim. Maecenas ornare egestas ligula. Nullam	Nunc mauris sapien, cursus in, hendrerit consectetuer, cursus et,	show_detail
Clio Baldwin	leo elementum sem, vitae	Cum sociis natoque penatibus et	show_detail
Merrill Harvey	risus, at fringilla	Suspendisse non leo. Vivamus nibh dolor, nonummy ac, feugiat non,	show_detail
Yeo Carver	mattis	mi tempor	show_detail
Zane Duran	magnis dis parturient montes, nascetur ridiculus mus. Aenean eget magna.	non, egestas	show_detail
Rhea Estes	lacinia at, iaculis quis, pede. Praesent eu dui. Cum sociis	erat.	show_detail
-	-	-	show_detail
-	-	-	show_detail

1 - 10

Report Code

An Application Item has been created named DETAIL_ID

<script language="JavaScript" type="text/javascript">
<!--

var g_LastRowOpened = false;
var g_LastDetailLabel = false;
var g_ShowOnlyOne = false;
var g_LastNewRowOpened = false;

function showdetail(t,i){
	var l_TR = html_CascadeUpTill(t,'TR');
	var l_ThisTable = html_CascadeUpTill(t,'TABLE');
	if(t.innerHTML == 'hide_detail'){
		html_GetElement(g_LastNewRowOpened).parentNode.removeChild(html_GetElement(g_LastNewRowOpened))
		SetDetailLabel(g_LastDetailLabel);
		g_LastDetailLabel = false;
	  g_LastRowOpened = false;
	  g_LastNewRowOpened = false;
  }else{
	  if(html_GetElement(g_LastNewRowOpened)){
				html_GetElement(g_LastNewRowOpened).parentNode.removeChild(html_GetElement(g_LastNewRowOpened))
  			SetDetailLabel(g_LastDetailLabel);
  			l_ThisTable.normalize();
	}
	ShowHideDetailRow(t,l_ThisTable,l_TR,i);	
	g_LastDetailLabel = t; // set the last show/hide_detail clicked
	g_LastRowOpened = l_TR; // set the last row clicked	
}
}

function ShowHideDetailRow(pThis,pTable,pTR,pID){
	var l_Detail = 'detail'+pID;
	var l_NumCells = pTR.cells.length
	if(pTR.rowIndex == pTable.rows.length-1 || pTable.rows[pTR.rowIndex+1].className != "detail"){
		var myNewRow = pTable.insertRow(pTR.rowIndex+1);
		g_LastNewRowOpened = myNewRow;
		myNewRow.className = "detail";
		var myNewCell = myNewRow.insertCell(0);
		myNewCell.className = "t4data";
		myNewCell.style.padding = 0;
		myNewCell.colSpan=l_NumCells;
		gURL = 'f?p=23279:23:'+html_GetElement('pInstance').value+'::NO:RP:P23_ID:'+ pID;
		gReturn = '<iframe src="'+gURL+'" style="border:none;width:100%;height:250px;" frameborder="0" framespacing="0" marginheight="0" marginwidth="0"></iframe>';
		myNewCell.innerHTML = gReturn;
		html_ShowElement(l_Detail);
	}else{
		html_ToggleElement(pTable.rows[pTR.rowIndex+1]);
	}
	SetDetailLabel(pThis);
}

function SetDetailLabel(pThis){
	if(pThis.innerHTML == 'show_detail'){
		pThis.innerHTML = 'hide_detail'
	}else{
		pThis.innerHTML = 'show_detail'
	}
}

//-->
</script>

Notes

Because this is opening an iframe that 'could' have editable fields you can only have one iframe open at a time so that variables do not get crossed. You could create logic that allows for multiple iframes open at a time but it seems like overkill to me so I won't build it.

The Report will not automatically update but you can set the holder page to refresh on successful update of iframe or use javascript to update the table cells, since I do not allow for updating of form i will not build that in but it can be done.