jQWidgets Forums
jQuery UI Widgets › Forums › Grid › setCellValue performance
This topic contains 3 replies, has 3 voices, and was last updated by joelie123 1 year, 9 months ago.
-
AuthorsetCellValue performance Posts
-
Hi,
I have a 15×15 grid, 225 cells in total.
I want to use setCellValue method for real-time updates. Unfortunately I see that cellsrenderer executes for each of 255 cells when I update only one cell.
This leads to really poor perfomance.
Let’s assume I have 20×50 grid and a portion of 10 updates came from server, in this case I will get 10000 executions of cellsrenderer.Why it is necessary to rerender each cell on single update?
How can I avoid this?Here is my code:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title id='Description'>Test.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { localdata: [ {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, {aa: '', bb: '', cc: '', dd: '', ee: '', ff: '', gg: '', hh: '', ii: '', jj: '', kk: '', ll: '', mm: '', nn: '', oo: '',}, ], datatype: 'array' }; $("#jqxgrid").jqxGrid({ width: 670, source: source, theme: 'energyblue', columnsresize: true, columns: [ { text: 'a', datafield: 'aa', width: 15, cellsrenderer: cellsRenderer() }, { text: 'b', datafield: 'bb', width: 15, cellsrenderer: cellsRenderer() }, { text: 'c', datafield: 'cc', width: 15, cellsrenderer: cellsRenderer() }, { text: 'd', datafield: 'dd', width: 15, cellsrenderer: cellsRenderer() }, { text: 'e', datafield: 'ee', width: 15, cellsrenderer: cellsRenderer() }, { text: 'f', datafield: 'ff', width: 15, cellsrenderer: cellsRenderer() }, { text: 'g', datafield: 'gg', width: 15, cellsrenderer: cellsRenderer() }, { text: 'h', datafield: 'hh', width: 15, cellsrenderer: cellsRenderer() }, { text: 'i', datafield: 'ii', width: 15, cellsrenderer: cellsRenderer() }, { text: 'g', datafield: 'jj', width: 15, cellsrenderer: cellsRenderer() }, { text: 'k', datafield: 'kk', width: 15, cellsrenderer: cellsRenderer() }, { text: 'l', datafield: 'll', width: 15, cellsrenderer: cellsRenderer() }, { text: 'm', datafield: 'mm', width: 15, cellsrenderer: cellsRenderer() }, { text: 'n', datafield: 'nn', width: 15, cellsrenderer: cellsRenderer() }, { text: 'o', datafield: 'oo', width: 15, cellsrenderer: cellsRenderer() }, ] }); function cellsRenderer() { return function(row, column, value) { console.log('cellrenderer'); return value; } } $("#jqxgrid").jqxGrid('setcellvalue', 0, 'aa', Math.floor(Math.random()*10)); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="jqxgrid"> </div> </div></body></html>
Hi Nikolay,
“setcellvalue” refreshes the visible view, not all data cells. That is how it works. For real-time updates, you can use “updatebounddata”.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThis helped, thank you!
I understand your concern regarding the performance issue when using the setCellValue method in a large grid. To avoid the excessive executions of cell renderer for each cell update, consider implementing a more efficient approach. One possible solution is to utilize a data structure that stores the updates separately and then applies them to the grid in a batch process. Doing so can minimize the number of executions and significantly improve performance. Additionally, suppose you need further assistance with implementing this optimization or any other aspect of CRM assignments. In that case, you can seek reliable CRM Assignment Help services for expert guidance and support.
-
AuthorPosts
You must be logged in to reply to this topic.