We are using dhtmlx version//v.3.5 build 120822. We are facing a critical challenge with our application and it is core for us. Here is the scenario…
User clicks on the plus symbol to get the child records, first two columns contain header data and needs to be frozen. Drill down records could be more than 50+. When user drilldown(Treegrid) we are observing following issues
FYI, we are using enablePreRedering and enableSmartRendering in our application (Below pasted the snippet of code).
- It is taking a while for the DHTMLX grid absorb all rows from servers and render on the screen. If the user scrolls meanwhile and then left and right side tables are not scrolling in same manner. There is row misalignment between right and left rows.
- Users are seeing some white space(blank rows) some times. It takes a while to fill rows before user see complete grid.
- After drilldown the scroll position is going top irrespective of staying at where we clicked, so the context is lost.
All the above cases are working if we remove smart rendering and freeze columns. But we have large datasets we cannot remove smart rendering and Freeze columns is key functionality for our users. So suggest the best approach to handle in the above scenario?
Issue video captured link : https://drive.google.com/file/d/1HoVk42JValgU0wStzdliodoO1V-nFaHT/view?usp=sharing
Below is the our code snippet:
mygrid.= new dhtmlXGridObject(‘dataGrid’);
mygrid.enableAutoHeight(true,curGridHeight,false);
mygrid.setImagePath("./dhtmlX/codebaseGrid/imgs/");
mygrid.setSkin(‘light’);
mygrid.enableAlterCss(‘tblRow1’,‘tblRow2’);
mygrid.enablePreRendering(50);
mygrid.enableSmartRendering(true,50);
mygrid.enableMultiselect(true);
mygrid.enableEditEvents(false,false,false);
mygrid.enableMultiselect(true);
mygrid.enableEditEvents(false,false,false);
mygrid.kidsXmlFile=‘out_xml.jsp?csrfPreventionSalt=RGoAyr3tt0WAE9kzXU2e&action=get_data&isNextnode=true&showTrafficTrend=true&gaoParam=’;
mygrid.enableColumnAutoSize(true);
mygrid.attachEvent(‘onResizeEnd’, function(obj){
mygrid.saveSizeToCookie(‘1366_size’);});
mygrid.enableAutoSizeSaving(‘1366_size’);
mygrid.enableBlockSelection();
mygrid.attachEvent(‘onAfterCMove’, function(cInd,posInd){saveMeasureSequence(cInd, posInd);
mygrid.saveOrderToCookie(‘1366_order’);});
mygrid.enableOrderSaving(‘1366_order’);
mygrid.attachEvent(‘onRowDblClicked’, function(obj){callColorPicker(obj)});
mygrid.enableCellIds(true);
mygrid.attachEvent(‘onBeforeSorting’, function(ind,type,direction){saveMeasureSort(ind,type,direction); return true;});if(document.getElementById(‘gridFooterPaginalArea’)) document.getElementById(‘gridFooterPaginalArea’).style.display=‘none’;fzerwCntr=0;pptRecrodCnt=0;resetBool=true;var grpArr=null;var grpArrLbl=null;var grpArrSelSpan=null;grpArr=new Array();grpArrLbl=new Array();grpArrSelSpan=new Array();attachString ="";
mygrid.attachEvent(‘onXLE’,function(){if(!onDrillDownCall){for(var j=1;j<mygrid.getColumnsNum();j++){
mygrid.adjustColumnSize(j);}};isClicked = true;if(document.getElementById(‘analyzBtn’)){document.getElementById(‘analyzBtn’).style.opacity=‘100’;document.getElementById(‘analyzBtn’).removeAttribute(‘disable’);if(overlayDivClick){overlayDivClick()};}drillAcrossCallback();if(document.getElementById(‘dataGridContainer’) && document.getElementById(‘dataGrid’)){document.getElementById(‘dataGridContainer’).style.height=(document.getElementById(‘dataGrid’).offsetHeight+65)+‘px’;}try{clearTempGrid();if(document.getElementById(‘coverUpDiv_Drilldown’)){document.getElementById(‘coverUpDiv_Drilldown’).style.display=‘none’;}if(typeof (consigneLinkedKPIBool)!=‘undefined’ && consigneLinkedKPIBool)setStDateAndEndDate();if(swithButton ==‘on’&& rootId_global!=pptViewid_global && pptRecrodCnt==0){saveGAtoPPT(pptViewid_global,pptView_id_global,isGAGraph_global,GASelTreeDesc);pptRecrodCnt++}if(document.getElementById(‘coverUpDiv_GridUtil’)){document.getElementById(‘coverUpDiv_GridUtil’).style.display=‘none’}if(document.getElementById(‘winLoader’)){document.getElementById(‘winLoader’).style.display=‘none’;changeclass();}if(document.getElementById(‘gridFooterArea’)){document.getElementById(‘gridTotalMeasures’).innerHTML=‘1’;document.getElementById(‘gridVisibleMeasures’).innerHTML=‘1’;document.getElementById(‘gridRowCount’).innerHTML=
mygrid.getRowsNum();document.getElementById(‘gridColumnCount’).innerHTML=
mygrid.getColumnsNum();};;if(document.getElementById(‘thirdEyeIconcontainer’))document.getElementById(‘thirdEyeIconcontainer’).style.display=‘none’;}catch(e){}});
mygrid.loadXML(‘out_xml.jsp?csrfPreventionSalt=RGoAyr3tt0WAE9kzXU2e&action=get_data&kpiGridWidth=’+kpiGridWidthDivision+‘&showTrafficTrend=true&view_id=1366&fromReportFormatter=true&FREEZE_COLUMN_INDEX=0&gaoParam=’,function(){
PositionTopArrow();if(document.getElementById("main") && document.getElementById("main").style.display=="none"){if(document.getElementById("dockDivId"))document.getElementById("dockDivId").click();}
try{mygrid.enableHeaderMenu();}catch(e){}if(dhtmlxGridOrderPersonalize){
mygrid.loadOrderFromCookie(‘1366_order’)};if(dhtmlxGridWidthPersonalize){
mygrid.enableAutoSizeSaving(‘1366_size’);
mygrid.loadSizeFromCookie(‘1366_size’);}gridInitWidths = getGridColumnWidths(
mygrid.;
mygrid.preventIECaching(true);
mygrid.setSizes();
mygrid.attachEvent(‘onRowSelect’, function(){try{if(dhtmlx.CustomScroll)dhtmlx.CustomScroll._update_scroll(this.objBox);}catch(e){}doOnRowSelected();if(document.getElementById(‘gridFooterArea’)){document.getElementById(‘gridSelectedRange’).innerHTML=
mygrid.getLevel(
mygrid.getSelectedRowId()); document.getElementById(‘gridSelectedRowColumn’).innerHTML=
mygrid.getRowIndex(
mygrid.getSelectedRowId())+1 + ’ : ’ + parseInt(
mygrid.getSelectedCellIndex()+1)} highlightGridColumnR();highlightGridColumn(); if(document.getElementById(‘formulaBig’)&& formulaBuilderOn){document.getElementById(‘formulaBig’).value = document.getElementById(‘formulaBig’).value + ‘|’ +
mygrid.getColumnLabel(parseInt(
mygrid.getSelectedCellIndex()),0) + ‘|’;
mygrid.clearSelection();endSelection(document.getElementById(‘formulaBig’))}});});