blank screen is visible while scrolling down to see the tree . I have used smart rendering.
Kindly refer to the Screen shot attached.
The code being used -
var scopeTreeXml = '<%= scopeTreeXML %>'; var scopeTreeid= '<%= scopeChain %>'; var scopeExpandClick = 'N'; var flag = 'Y'; scopeTree=new dhtmlXTreeObject("scope","100%","100%","0"); scopeTree.setSkin('dhx_skyblue'); scopeTree.setImagePath("/PrISMv17Theme/themes/html/PrISMv17Theme/dhtmlx/tree/"); scopeTree.setDataMode("json"); scopeTree.enableKeyboardNavigation(true); scopeTree.enableKeySearch(true); scopeTree.setXMLAutoLoadingBehaviour("function"); scopeTree.setXMLAutoLoading(loadMore); scopeTree.enableSmartRendering(true); scopeTree.enableAutoTooltips(1); <%if (scopeChain != null) {%> //alert('I am good'); scopeTree.deleteChildItems('0'); if (typeof keepPSAlive === "function") { keepPSAlive(); } //loading scope tree using json after double click of scope node scopeTree.loadJSONObject(JSON.parse(scopeTreeXml)); //scopeTree.loadXMLString(scopeTreeXml); scopeIdArray = scopeTreeid.split("|"); <% //renderRequest.getPortletSession().setAttribute("scopeTreeString",null); //renderRequest.getPortletSession().setAttribute("ScopeSelectedTreeId",null); } else {%> //alert('I am bad'); <%}%> scopeTree.attachEvent("onClick", function(id){ } ); scopeTree.attachEvent("onXLE", function(tree, id) { document.getElementById('loadingDiv').style.display = 'none'; if(scopeIdArray.length >0){ //alert('KK scopeIdArray.length : ' + scopeIdArray.length + ' scopeIdArray ' + scopeIdArray + ' scopeTree.getItemIdByIndex(scopeIdArray[scopeIdArray.length-1],0) : ' + scopeTree.getItemIdByIndex(scopeIdArray[scopeIdArray.length-1],-1)); //alert('KK 1 ' + scopeTree.getItemText(scopeTree.getItemIdByIndex(scopeIdArray[scopeIdArray.length-1]))); //scopeTree.focusItem(scopeTree.getItemIdByIndex(scopeIdArray[scopeIdArray.length-1],0)); //scopeTree.selectItem(scopeTree.getItemIdByIndex(scopeIdArray[scopeIdArray.length-1],0)); if(scopeExpandClick != 'Y'){ scopeTree.focusItem(scopeIdArray[scopeIdArray.length-1]); scopeTree.selectItem(scopeIdArray[scopeIdArray.length-1]); //scopeTree.focusItem(id); //alert(scopeIdArray); //alert(scopeIdArray[scopeIdArray.length-1]); } else { scopeTree.focusItem(id); scopeTree.selectItem(id); // alert('KK 663 '); } //scopeTree.selectItem(scopeIdArray[scopeIdArray.length-1],0); //scopeTree.selectItem(id); } else{ //alert('KK 2 ' + scopeTree.getItemText(scopeTree.getItemIdByIndex(scopeIdArray[scopeIdArray.length-1]))); //scopeTree.focusItem(scopeTree.getItemIdByIndex(id,0)); //scopeTree.selectItem(scopeTree.getItemIdByIndex(id,0)); scopeTree.focusItem(id); scopeTree.selectItem(id); } } ); scopeTree.attachEvent("onDblClick",function(id) { //alert('KK d click . . .id : ' + id); cacheDataOnSubmit(); } ); function loadMore(id){ if(id!=undefined && flag!='N'){ //scopeTreeIdChain+=id+'|'; //alert("portfolioText : " + portfolioText + ", id : " + id); document.getElementById('loadingDiv').style.display = 'block'; //for Rest Browser if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { // For New IE. req = new ActiveXObject("MSXML2.XMLHTTP.3.0"); } if (typeof keepPSAlive === "function") { keepPSAlive(); } req.open("GET","<%= request.getContextPath() + "/ScopeServlet?portfolioText="%>"+portfolioText+"<%="&scopeId="%>"+id,false); req.send(); //var output = req.responseText; //if(output.match("/>$")=="/>"){ // scopeTree.showItemSign(id,0); // } //alert("output of loadmore : " + output); //loading scope child json tree into parent json tree scopeTree.loadJSONObject(JSON.parse(req.responseText)); // scopeTree.loadXMLString(output); document.getElementById('loadingDiv').style.display = 'none'; scopeExpandClick = 'Y'; scopeTree.focusItem(id); scopeTree.selectItem(id); } };