CODEWITHSUNDEEP
angularjstypescriptclusterize
klmuralimohan
klmuralimohan

Reputation: 951

Clusterize scroll errors in angular js Typescript

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)

Upvotes: 0

Views: 198

Answers (1)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

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'
        });

Upvotes: 0

Related Questions