Support Article
JavaScript error on using grid inside tabbed repeat layout
SA-11021
Summary
Referring to a repeat grid with details shown using the "embedded elsewhere-In place of a section" option in a tabbed layout prevents user from adding multiple tabs. Once a new tab is added, the screen freezes. On click of a new tab a javascript error is displayed.
Error Messages
Uncaught TypeError: Cannot read property 'id' of null
pega.ui.initGrids @ pzpega_ui_grid_1394839166.js!pzpega_ui_grid_dragdrop_13547640236.js!pega_yui_resize_1754469339.js!!.js:1docLifecycle.initializeGrids @ pega_ui_harness_11180311311!!.js:7docLifecycle.processOnloads @ pega_ui_harness_11180311311!!.js:7ajaxengine.loadHTMLEleCallback @ pega_ui_harness_deferred_13126745870!!.js:1pega.tools.EvalDomUtils_globals.scriptLoaded @ pega_ui_harness_deferred_13126745870!!.js:1587pega.tools.EvalDOMScripts.processInlineScripts @ pega_ui_harness_deferred_13126745870!!.js:1587pega.tools.EvalDOMScripts.loadHTMLElement @ pega_ui_harness_deferred_13126745870!!.js:1587ajaxengine.loadDOMObject @ pega_ui_harness_deferred_13126745870!!.js:1ajaxengine.handleSuccess @ pega_ui_harness_deferred_13126745870!!.js:1ajaxengine.handleReloadRepeatSuccess @ pega_ui_harness_deferred_13126745870!!.js:1H.success @ pega_ui_harness_deferred_13126745870!!.js:1pega.util.Connect.handleTransactionResponse @ pega_desktop_domainsuffix_1819019784.js!clientlogbase_11632504602.js!pega_y…2!developerwrapperapi_12187829019.js!pzautomationscripts_1854328436!!.js:6(anonymous function) @ pega_desktop_domainsuffix_1819019784.js!clientlogbase_11632504602.js!pega_y…2!developerwrapperapi_12187829019.js!pzautomationscripts_1854328436!!.js:6
Steps to Reproduce
Add a new tab to a proposal work object to observe the issue.
Resolution
This issue is resolved by HFix-22589 for Pega 7.1.8. This can also be addressed by adding the below code in UserWorkForm. This change would need to be removed before upgrading to Pega 7.1.9.
<script>
function gridFix(){
if(pega && pega.u){
pega.u.initGrids = function(grid) {
if(pega.util.Dom.hasClass(document.body,"forPrinting"))
{
window.printWin = true;
var gridarray= window.opener.Grids.map;
for(var instance in gridarray) {
var gridEle = document.getElementById(instance);
if(gridEle)
Grids.addGrid(gridEle.id , new pega.ui.grid(gridEle));
}
}else{
if(grid && typeof grid!="undefined") {
var gridElements = pega.util.Dom.getElementsById("PEGA_GRID",grid.gridDiv);
}
else {
var gridElements = pega.util.Dom.getElementsById("PEGA_GRID");
}
if(!gridElements) {
return;
}
var len = gridElements.length;
var gridEle = null;
var iAttribute = "";
for(var i = 0; i < len; i++) {
/* add index to the id's so that these grids don't get reinitialized when some other section is refreshed */
gridEle = gridElements[i];
var newGridId = gridEle.id + pega.ui.gridCounter;
gridEle.id = newGridId;
var gridObj = new pega.ui.grid(gridEle);
Grids.addGrid(newGridId , gridObj);
pega.ui.gridCounter++;
/*BUG-83172 START: If grid is present in tab, register a listener onTabActive to call onTabActiveFixGrid */
if(pega.u.d.tabViewMap) {
var temp = gridEle.parentNode;
while(!temp.getAttribute("tabgroupid")) {
temp = temp.parentNode;
if(!temp || temp.id.toUpperCase() == "HARNESS_CONTENT" || temp.nodeName.toUpperCase() == "BODY") { // for tabs || for panelset
temp = null;
break;
}
}
if(temp) {
var tabgrp = pega.u.d.tabViewMap[temp.id];
if(tabgrp) {
var activeTab = tabgrp._configs.tabs.value[tabgrp.get("activeIndex")];
var activeTabContent = activeTab._configs.contentEl.value;
if(!pega.util.Dom.isAncestor(activeTabContent, gridObj.gridDiv)) {
tabgrp.on("activeTabChange", gridObj.onTabActiveFixGrid, null, gridObj);
}
}
}
}
/*BUG-83172 END */
}
}
};
}
}
pega.u.d.attachOnload(gridFix, true);
gridFix();
</script>
Published June 23, 2015 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.