SlickGrid does not handle columns properly

Question

I recently started using SlickGrid for one of my projects. In my grid I have about 4,000 rows and 6 columns. The problem is that columns 2 through 6 are not displayed for the first two rows. For the rest of the rows, all columns are displayed just fine. Also, if I scroll down and again, the missing columns for these rows become visible. In other words, I only see the problem with the first page generated.

Digging in the source code, I found that the following lines are the cause of this problem. If I comment on the break, then the entire grid will be displayed without any problems.

1407 // Do not render cells outside of the viewport. 1408 if (columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) { 1409 if (columnPosLeft[i] > range.rightPx) { 1410 // All columns to the right are outside the range. 1411 break; 1412 } 

It appears that these rows are trying to skip rendering of columns outside the viewport. However, I don’t understand why they think that columns 2-6 in my first two rows are outside the viewport (when they are clearly inside).

Unfortunately, I cannot reproduce this problem in a small example. Therefore, I hope that someone can identify the problem from the description of the symptom. Please, help.

Answer 1

Perhaps the values ​​you displayed have special characters (e.g. <,>, etc.), you can use your own formatter to avoid these characters:

 function escapeHTMLFormatter(row, cell, value, columnDef, dataContext) { if (value == null) { return ""; } else { return (value + "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); } }