Here is an example of how to create a follwing associated gird on a entity form. The idea here is to put two embedded grids on the form and relate one to the other. An embedded grid is an associated grid embedded in an iFrame. This is great is a great way to see associated records without having to navigate to the associated view. To learn about embedded grids see Customer Effective Blog. The next step is to capture the “onselectionchange” event of the first grid and pass this id and type to the second grid. To learn about “onselectionchange” event see More CRM Grid Goodies: Detecting Click Event by Customer Effective Blog.
Here is how it is done.
First add a parent iFrame and a child iFrame to the form. These will hold the embedded grids, set the src to “about:blank”. Now will start adding code to the On_Load event of the form.
function GetFrameSource(tabSet)
{
if (crmForm.ObjectId != null)
{
var oId = crmForm.ObjectId;
var oType = crmForm.ObjectTypeCode;
var security = crmFormSubmit.crmFormSubmitSecurity.value;
return “areas.aspx?oId=” + oId + “&oType=” + oType + “&security=” + security + “&tabSet=” + tabSet;
}
else
return “about:blank”;
}
}
crmForm.all.IFRAME_parent.src = GetFrameSource(”new_new_maxexchangeserver_new_remoteaddressbo”);
The GetFrameSource function get the url for the current form for the set tabSet.
function GetFrameSourceID(oId, oType, tabSet)
{
if (crmForm.ObjectId != null)
{
var security = crmFormSubmit.crmFormSubmitSecurity.value;
return “areas.aspx?oId=” + oId + “&oType=” + oType + “&security=” + security + “&tabSet=” + tabSet;
}
else
{
return “about:blank”;
}
}
The GetFrameSourceID get the url for the parent grid row. You need to pass the id of the current entity in the grid as well as the typeid of the entity.
var bFired = false;
GridClick = function()
{
// check to see if this event has been fired already
if(bFired == false)
{
var frameDoc = document.getElementById(”IFRAME_parent”).contentWindow.document;
var crmGrid = frameDoc.all['crmGrid'];
var a = crmGrid.InnerGrid.SelectedRecords;
if (a.length > 0)
{
//Get the url to set for the child grid. Note we are always using the first selected value if more than one is selected.
crmForm.all.IFRAME_child.src = GetFrameSourceID(a[0][0],a[0][1],”new_new_remoteaddressbook_new_maxexchangepack”);
}
bFired = true;
}
else
{
// toggle our fired flag back
bFired = false;
}
}
The GridClick function will be called each time a row is selected.
AttachGridEvent = function()
{
if(crmForm.all.IFRAME_parent.readyState == “complete”)
{
var frameDoc = document.getElementById(”IFRAME_parent”).contentWindow.document;
frameDoc.all['crmGrid'].InnerGrid.attachEvent(”onselectionchange”, GridClick);
GridClick();
}
}
crmForm.all.IFRAME_parent.onreadystatechange = AttachGridEvent;
The AttachGridEvent attaches the GridClick event to the grid onselectionchange event. The challange here is we can not attach to the grid in the iFrame until the grid is loaded (readyState == “complete”). To do this we attach the GridClick event on the change of ready state and only add it if the readyState == “complete”.
