Clusterize scroll errors in angular js Typescript

190 views Asked by At

Trying to implement the lazy loading using the Clusterize js in Angular js Typescript. Unfortunately getting the errors.

Any expert advice please?

HTML VIEW

<div id="scrollArea" class="clusterize-scroll">
    <ul id="contentArea" class="clusterize-content"></ul>
</div>

Angular JS

namespace Cis2.VC.OrderCreate {

angular.module("cis2")
    .directive("cis2VCOrderCreate", directiveDefinition);

templateUrl = "sections/vc/columns/vcOrderCreate/view.html";

function directiveDefinition () {
         directive = {
        "bindToController": true,
        "controller": cis2VCOrderCreateController,           
        "templateUrl": templateUrl
    };
 }

class cis2VCOrderCreateController implements Cis2.Finder.Column.IEntityCreator {    

        constructor() {    

        activate () {            
            let rows   = [];
            for(var i = 1; i < 50000; i++) {
                rows.push(i);
            }
            console.log(rows);
            var clusterize = new Clusterize({
                rows: rows,
                scrollId: 'scrollArea',
                contentId: 'contentArea'
            });
    }
}

}

Console errors

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at Clusterize.html (http://localhost:63342/cis-ui-src/public/lib/clusterize/clusterize.js:341:26)      
1

There are 1 answers

2
Pop-A-Stash On

You are supposed to supply markup to the rows option. Numbers won't work. From the documentation:

rows
If you render rows by yourself - pass array of tags in String. This way is preferable. If you need to use existing markup - do not specify this option at all.

    activate () {            
        let rows   = [];
        for(var i = 1; i < 50000; i++) {
            rows.push("<li>" + i + "</li>");  //this must be a string of markup
        }
        console.log(rows);
        var clusterize = new Clusterize({
            rows: rows,
            scrollId: 'scrollArea',
            contentId: 'contentArea'
        });