SlickGrid not rendering columns properly

Question

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

Digging through the source code, I found that the following lines are causing the issue. If I comment out the break, then the entire grid renders without any issues.

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 lines are trying to skip rendering of the columns that are outside the viewport. However, I do not understand why they think that columns 2-6 in my first two rows are outside the viewport (when they are clearly inside).

Unfortunately, I am not able to reproduce this issue in a small example. So I am hoping that someone can spot the issue from the description of the symptom. Please help.

The problem probably rely in your code and so it would be best to see some of your code instead of the SlickGrid source code... — ghiscoding, Jul 04 '13 at 01:00
slickgrid(normally any grid) always renders columns which are in viewport to increase performance...please upload some sample of your code. maybe there is some dimensions issue while initializing or you might be scrolling the grid while loading.. — Premshankar Tiwari, Jul 05 '13 at 07:26

score 0 · Answer 1 · answered Jun 15 '14 at 11:12

It might be that there are some special characters (i.e. <, > etc) in the values you were rendering, you could use a custom formatter to escape 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;");
    }
 }

SlickGrid not rendering columns properly

1 Answers1