Start Building Professional
Web Apps Today

DHTMLX Grid -Time taken for displaying 3000 rows.

Hi,

I am trying to display DHTMLX grid with 25 Columns and 3000 rows of data. While displaying the grid i do get a JavaScript warning message saying that "There is a script contuniously running, it may slow down your browser. Do you want to stop or continue it.
If i click continue it displays the grid properly.

Here, my questions are as given below.

1. Is there any to stop not to display the JavaScript warning message.
2.And the Grid is taking almost 1.5 to 2 min of to display/sorting all records at a time. Is there anyway to improve the performance of the Grid for the given scenario.

My Grid intialization code is given below.

mygrid = new dhtmlXGridObject('SCH_GRID');
         
        mygrid.setImagePath("images/dhtmlx/");
        mygrid.setHeader("Owner, Sched #, Descr,Status,Auto Approve,Validate Constrained,Enforce WH Rel,Include Qty Limits, Incl Inv Min, Incl Inv Max, Start Date, End Date,Review Cycle, Mon,Tue,Wed,Thu,Fri,Sat,Sun,SKU Count, Updated By, Updated Date, Pending Purge Date");
        mygrid.setInitWidths("220,100,250,200,150,150,150,150,150,150,200,200,220,150,150,150,150,150,150,150,100,100,100,100");
        mygrid.attachHeader("#select_filter,#select_filter,#text_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter,#select_filter");
        
        mygrid.attachHeader("<%=setAllUserCombo.toString()%>,<div> </div>,<div> </div>,<%=setAllStatusCombo%>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='autoApprove'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllAutoApprove();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'> <select NAME='validateConstrained'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllValidateConstrained();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'> <select NAME='whRel'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllEnforceWhRel();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'> <select NAME='incQtyLts'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllIncQtyLts();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'> <select NAME='incInvMin'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllIncInvMin();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'> <select NAME='incInvMax'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllIncInvMax();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><input type='text' name='startDate' size='10'/><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllStartDate();' /></div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><input type='text' name='endDate' size='10'/><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllEndDate();' /></div>,<%=setAllReviewCycleCombo%>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='mon'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllMon();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='tue'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllTue();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='wed'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllWed();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='thu'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllThu();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='fri'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllFri();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='sat'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllSat();' /> </div>,<div onclick='(arguments[0]||window.event).cancelBubble=true;'><select NAME='sun'><option VALUE='Y'>Y</option><option VALUE='N'>N</option></select><input type='button' value='Set All' onclick='(arguments[0]||window.event).cancelBubble=true;setAllSun();' /> </div>,<div> </div>,<div> </div>,<div> </div>,<div> </div>");
        
        mygrid.setColAlign("left,right,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,left,right,left,left,left");
        
        mygrid.setColTypes("co,ro,ed,co,co,co,co,co,co,co,dhxCalendar,dhxCalendar,co,co,co,co,co,co,co,co,ro,ro,ro,ro");
        
        mygrid.setColSorting("str,int,str,str,str,str,str,str,str,str,date,date,str,str,str,str,str,str,str,str,str,str,date,date");
        mygrid.enableMultiselect(true);
        mygrid.setDateFormat("d/m/y");

        var usersCombo = mygrid.getCombo(0);
        var statusCombo = mygrid.getCombo(3);
        
        statusCombo.put("D", "Deleted");
        statusCombo.put("I", "Inactive");
        statusCombo.put("W", "Worksheet");
        
        var autoApproveCombo = mygrid.getCombo(4);
        autoApproveCombo.put("Y", "Y");
        autoApproveCombo.put("N", "N");
        
        var valConstrCombo = mygrid.getCombo(5);
        valConstrCombo.put("Y", "Y");
        valConstrCombo.put("N", "N");
        
        var enforceWhRelCombo = mygrid.getCombo(6);
        enforceWhRelCombo.put("Y", "Y");
        enforceWhRelCombo.put("N", "N");
        
        var inclQtyLtsCombo = mygrid.getCombo(7);
        inclQtyLtsCombo.put("Y", "Y");
        inclQtyLtsCombo.put("N", "N");
        
        var incInvMinCombo = mygrid.getCombo(8);
        incInvMinCombo.put("Y", "Y");
        incInvMinCombo.put("N", "N");
        
        var incInvMaxCombo = mygrid.getCombo(9);
        incInvMaxCombo.put("Y", "Y");
        incInvMaxCombo.put("N", "N");
        
        
        var reviewCycleCombo = mygrid.getCombo(12);
    
        var monCombo = mygrid.getCombo(13);
        monCombo.put("Y", "Y");
        monCombo.put("N", "N");

        var tueCombo = mygrid.getCombo(14);
        tueCombo.put("Y", "Y");
        tueCombo.put("N", "N");

        var wedCombo = mygrid.getCombo(15);
        wedCombo.put("Y", "Y");
        wedCombo.put("N", "N");

        var thuCombo = mygrid.getCombo(16);
        thuCombo.put("Y", "Y");
        thuCombo.put("N", "N");

        var friCombo = mygrid.getCombo(17);
        friCombo.put("Y", "Y");
        friCombo.put("N", "N");

        var satCombo = mygrid.getCombo(18);
        satCombo.put("Y", "Y");
        satCombo.put("N", "N");
        
        var sunCombo = mygrid.getCombo(19);
        sunCombo.put("Y", "Y");
        sunCombo.put("N", "N");
    
        mygrid.setActive();
        mygrid.setSkin("light");
        mygrid.init();
        mygrid.loadXML("ws_schedules_grid_data.jsp");
        
        myDataProcessor.init(mygrid);

You use professional version, don't you ?
In this case you can try to use Smart Rendering functionality to decrease rendering time:

    mygrid.enableSmartRendering(true);

    mygrid.loadXML("ws_schedules_grid_data.jsp");

The sample is presented here: http://www.dhtmlx.com/docs/products/dhtmlxGrid/samples/loading_big_datasets/pro_srnd_static.html

For more details, please, see the article "Smart Rendering" in the documentation http://www.dhtmlx.com/docs/products/dhtmlxGrid/doc/guide.html