Show Relationships in a Grid Control on the Form

You want to show the relationships for the context Item in a Grid control on the Item Form.

Technique

Add an HTML Field (positioned at Point (300,10) in the code sample below) and insert an HTML code than defines the <div>tag to hold the dynamically populated grid and the JavaScript to get the populating grid relationships.

HTML Field code

<div id="gridTD” style="width: 400px; height: 500px;"></div>
<script type="text/javascript">
var myCount = 0;
var gridControl;
clientControlsFactory.createControl(“Aras.Client.Controls.Public.GridContainer”, {id: “grid”, connectId: “gridTD”, canEdit_Experimental: function () { return false; }}, function(control){
gridControl = control;
clientControlsFactory.on(gridControl, {
“gridClick": function (rowID, column) {
alert(“rowId:" + rowID + ", col:" + column);
}
});
fillGrid();
});
function fillGrid() {
var item = document.thisItem;
// Get the relationships
var qry = item.newItem(“Part BOM”, “get”);
qry.setAttribute(“select”, “quantity,related_id(item_number,name,cost)”);
qry.setProperty(“source_id”, item.getID());
var results = qry.apply();
if (results.getItemCount() < 0) {
top.aras.AlertError(results.getErrorDetail());
return;
}
// Populate the grid with the results.
populateGrid(item, results);
}
function populateGrid(item, results) {
var propNameArr = new Array(“item_number”, “name”, “cost”);
var gridXml =
"<table editable='false’ draw_grid='true'>" +
"<columns>" +
"<column width='30%' order='0' align='left’ />" +
"<column width='40%' order='1' align='left’ />" +
"<column width='15%' order='2' align='right’ />" +
"<column width='15%' order='3' align='right’ />" +
"</columns>" +
"<thead>" +
"<th>Part Number</th>" +
"<th>Name</th>" +
"<th>Cost</th>" +
"<th>Quantity</th>" +
"</thead>" +
"</table>";
var inn = item.getInnovator();
var gridDom = inn.newXMLDocument();
gridDom.loadXML(gridXml);
var tableNd = gridDom.selectSingleNode("/table”);
var c = results.getItemCount();
for (var i=0; i<c; ++i) {
var bom = results.getItemByIndex(i);
var part = bom.getRelatedItem();
var trNd = gridDom.createElement(“tr”);
trNd.setAttribute(“id”, bom.getID());
var tdNd;
for (var j=0; j<propNameArr.length; j++) {
tdNd = gridDom.createElement(“td”);
tdNd.text = part.getProperty(propNameArr[j]);+
trNd.appendChild(tdNd);
}
tdNd = gridDom.createElement(“td”);
tdNd.text = bom.getProperty(“quantity”);
trNd.appendChild(tdNd);
tableNd.appendChild(trNd);
}
gridControl.InitXML(gridDom.xml);
} </script>