CODEWITHSUNDEEP
angularjsangular-ui-grid
user3034151
user3034151

Reputation: 115

UI Grid Poor Vertical Scroll Performance

I'm using the new Angular UI Grid v3.0.7 and have an issue regarding vertical scrolling when using a custom cell template. My grid had 15 columns with 83 rows so it's not a large data set. My cell template is simply a span that has a class which adds either a checkmark or a cross (e.g. IcoMoon) based on a boolean. The cell template is fine when applied to a single column but rapidly deteriorates when adding more than 3. I have to apply it to 13 columns. Here is the cell template function:

function checkCrossCellTemplate() {
        return '<span ng-class="{\'icon-checkmark\': row.entity[col.field]===true, \'icon-cross\': row.entity[col.field]===false}"></span>'
    }

I think the issue relates to the condition being applied as it's killing the smooth scrolling, I've also tried a different approach using ng-if but the performance issue still stands. To prove my theory I've come up with another function:

    function checkCrossCellTemplate() {
        if(Math.random() <= 0.5 ) {
            return "<span class='icon-checkmark'></span>"
        } else {
            return "<span class='icon-cross'></span>"
        }
    }

This is obviously a contrived example but solves the vertical scrolling issue. Has anyone encountered this problem? Are there any workarounds?

Upvotes: 0

Views: 1861

Answers (1)

user3034151
user3034151

Reputation: 115

I got around this performance issue by providing a cell class instead of a cell template. To be honest the first approach should of worked, it rendered the fonts correctly but you couldn't smoothly scroll.

        function myCellClass(grid, row, col, rowRenderIndex, colRenderIndex) {

            var value = grid.getCellValue(row, col),
                cellClasses = [];

            if(typeof value === 'boolean') {
                if(value) {
                    cellClasses.push('icon-checkmark');
                } else {
                    cellClasses.push('icon-cross');
                }
            }

            if(rowRenderIndex % 2 !== 0) {
                cellClasses.push('table-row');
            }

            return cellClasses.join(' ');
        }

Upvotes: 0

Related Questions