Gird slowness with using cellclassname & cellsrenderer

[hurricaneParticipant]

Hi,

I am having a grid with selectionmode:’multiplecellsadvanced’. I have used grid addrow feature to add multiple rows at a time. When I tried adding 500+ rows grid having performance impact and observed slowness . When I tried adding 1000+ rows then got the browser wait/ignore prompt twice and able to render rows after 1:34 mins.

I wanted to primarily use this grid to support more than 1000 rows addition in a single go. I am having 16+ columns to add in a row (hope this is not having any additional impact on time being taken). Event which were used :

1. cellclassname : This is to highlight cells based on the certain dependent values. This event is applied to 2 of the columns
2. cellsrenderer : This is applied to 3 columns in grid.

I tried removing these event and timing reduced up to 60s and It came upto 30s. Also, I am having a tough time scrolling grid having a large number of rows.

Please suggests if we have some attribute to set while dealing with huge data.

Regards.

[Peter StoevKeymaster]

Hi hurricane,

Depending on your custom implementation of these functions, the performance will depend on your code, because you override a built-in logic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hurricaneParticipant]

Hi Peter,

Thanks for the reply. I agree on your comments that custom logic might have affected the performance. But that too a one liner logic applying css to columns based on the value defined . Here is the code for cellclassname : highlightFirstName ,

var highlightFirstName =  function (row, column, value, data) {
	if(data[column]!=null && column == 'firstname' && data[column] == 'Peter')
	{
                return "highlightClass";
	}
} 

cellsrenderer : checkvalidValues 
var _checkvalidValues = function (index, datafield, value, defaultvalue, column, rowdata) {
	if(rowdata[datafield]!=null && datafield == 'zip')
	{
		if(jQuery.inArray(rowdata[datafield],validziplist) ==-1)
		{
			return "<div style='margin: 6px; color:red; font-weight: bold;'/>"+rowdata[datafield] +"</div>";
		}
	}
}

I also would like to highlight my observation for different browser I have used to see this performance diff.

chrome : Version 56.0.2924.87
firefox :51.0.1 (32-bit)

stats for row addition :

No of rows 23 | 46 | 92 | 184 | 368 | 736 | 1472 | 2944
chrome (ms) 191.827 | 182.914 | 211.945 | 300.316 | 629.13 | 1950.169 | 7434.451 | 25042.355

firefox (ms) 335.13 | 338.44 | 433.95 | 952.71 | 3219.47 | 11945.91 | 46510.31 | 190485.82

I hope this information is helpful for you to check the performance with 1000+ rows .

[Peter StoevKeymaster]

Hi hurricane,

We are happy with the Grid’s performance and do not think changes are needed there from our side. 210ms for 30 000 rows in our online demo with Chrome: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/largedataset.htm?light. I also hope that you don’t call addrow 500 times to add a row, but seeing your perf. data I guess that is the case. Well, you should have only 1 method call.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[hurricaneParticipant]

Hi Peter,

I looked at the example given above. I am also having the similar implementation for the grid in addition to it I have used the 2 events as described in my previous post. Also, My data binding is of type JSON not Array (hope this is not making any diff). To confirm, yes, I have used a single call to addrow to add all of the rows in one go.

My json object is consist of 19 properties.

var commit = $("#jqxGrid").jqxGrid('addrow', null, datarows); //datarows - will have the list of rows to add

By commenting out the code for 2 events ( cellclassname & cellsrenderer) , I could see some improvements in performance. But, As stated by you, It is no where coming to 210ms for 1000+ rows.

I would like to know your thoughts on this.

Regards.

[Peter StoevKeymaster]

Hi hurricane,

From this information i cannot tell what you’re doing wrong to get poor performance like minutes. Never seen such thing. My suggestion is to share a jsfiddle.net sample or look at our examples to see how we do the things.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts