Difficulty with CellsRenderer…

[BradfordParticipant]

I am trying to use the CellsRenderer in one column to determine what to display in another column. What I’m finding is that the call to setcellvalue causes the grid to call the cesllrenderer of the first column again. To avoid the infinite loop that results in I’ve added a check on the value of the second column to deteremine if it is already set to the desired value and if it is avoid calling the setcellvalue. This prevents the infinite loop but for some reason the grid rendering code is still walking off the end of the table and attempting to render cells in a row that doesn’t exist. I hijacked another example for this – the interesting bit for this post is the firstnamerenderer and it’s behavior

http://jsfiddle.net/WSpcw/63/

This fiddle shows the issue but fiddle won’t let you debug to see it. Please try this in chrome to see the issue. By calling setcellvalue on another column from within the cellrenderer of a different column there is a whole bunch of extra execution. It seems to be re-rendering the entire table for each call to setcellvalue. If you have a table with 4 rows you will end up re-rendering the entire table a minimum of 4 times due the the fact that you will call setcellvalue once for each row. If you don’t have some guard code in there to prevent calling setcellvalue unnecessarily then you will be in an infinite loop where the call to setcellvalue from within the cellrenderer of a cell will cause the table to re-render -> causing the cell to re-render -> causing the setcellvalue to be called again -> causing the table to re-render……

Is there another way?

[BradfordParticipant]

A better fiddle which displays the performance impacting recursion of this approach at least:
http://jsfiddle.net/WSpcw/64/

[Peter StoevKeymaster]

Hi Bradford,

Problem found in the code: Cell values are updated within your rendering function which causes the Grid to re-render itself because the cell value is updated.
Solution is: Set the cell values outside of rendering functions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[BradfordParticipant]

I need to be able to set the content of the second column based upon the data in the first column. My need is more complex than the example ‘cuz I couldn’t get the simple case to work. Perhaps you can direct me to how to do this….

First column will be datatype dropdown or combo-box with a list containing [‘string’,’date’,’double’,’integer’,’array’]. If user selects anything other than ‘array’ then second column needs to display with blank. If user selects ‘array’ then second column needs to display dropdown or combo box with a similar array of type information to allow typing of the array selected in the first column. The pre-selected value in the first column will be comming from the input data (serverside json) so the renderer of the first column will set default selection on the first column dropdown or combobox. If this default selection is ‘array’ then the second column needs to display the arraytype dropdown / combobox. I don’t know how to get this first display decision done except to attach it to the renderer. Is there another way?

[Peter StoevKeymaster]

Hi Bradford,

This can’t and shouldn’t happen inside the cells renderer. I would suggest you to look at the Grid’s editing demos. There’s a demo with Cascading DropDowns, too which you might find useful.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts