jQWidgets Forums

This topic contains 3 replies, has 3 voices, and was last updated by joelie123 1 year, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

setCellValue performance Posts

October 30, 2013 at 7:05 am setCellValue performance #31586

Participant

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>

October 30, 2013 at 8:16 am setCellValue performance #31595

Peter Stoev

Keymaster

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 Stoev

jQWidgets Team
http://www.jqwidgets.com

October 30, 2013 at 9:49 am setCellValue performance #31608

Nikolay

Participant

This helped, thank you!

May 27, 2023 at 10:35 am setCellValue performance #133099

joelie123

Participant

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.

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.