Ngx-datatable: cellTemplate is not working

[bberkobien]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I'm doing everything in this plunkr but to no avail: https://embed.plnkr.co/FxZo4SxKLbCPxmNTveXr/

Expected behavior

The cellTemplate column option would actually allow me to author my own template and use it.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

I need to dynamically create hyperlinks in my table

Please tell us about your environment:

• Table version: 10.3.0
  

• Angular version: 4.2.0
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  I am using chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

Typescript / Html

[wizarrc]

(SystemJS) Error: XHR error loading https://unpkg.com/rxjs/operators/refCount.js at ZoneDelegate.prototype.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:423:13) at Zone.prototype.runTask (https://unpkg.com/[email protected]/dist/zone.js:192:21) at ZoneTask.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:499:17) at invokeTask (https://unpkg.com/[email protected]/dist/zone.js:1540:9) at globalZoneAwareCallback (https://unpkg.com/[email protected]/dist/zone.js:1566:17) Error loading https://unpkg.com/rxjs/operators/refCount.js as "./refCount" from https://unpkg.com/rxjs/operators/share.js", message: "(SystemJS) Error: XHR error loading https://unpkg.com/rxjs/operators/refCount.js at ZoneDelegate.prototype.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:423:13) at Zone.prototype.runTask (https://unpkg.com/[email protected]/dist/zone.js:192:21) at ZoneTask.invokeTask (https://unpkg.com/[email protected]/dist/zone.js:499:17) at invokeTask (https://unpkg.com/[email protected]/dist/zone.js:1540:9) at globalZoneAwareCallback (https://unpkg.com/[email protected]/dist/zone.js:1566:17) Error loading https://unpkg.com/rxjs/operators/refCount.js as "./refCount" from https://unpkg.com/rxjs/operators/share.js

@bberkobien check the dev tools console log for errors. It looks like you are having an issue with rxjs loading from unpkg.com and has nothing to do with this project. Try reproducing your problem using a proper plunker setup such as the one that comes with the issue tracker template http://plnkr.co/edit/vtAo2zzWFn8kFOGRH88r

[bberkobien]

Here is a link to the plunkr that I have made: https://plnkr.co/edit/ijDOrfN61SOvzBLLnUfc?p=preview .

If I remove [externalPaging]="true" from the ngx-datatable that the values will show for the template. I'm not sure why this is true.

[wizarrc]

@bberkobien sorry, my mistake, my uBlock origin plugin was blocking your plunker example for some reason. I can take a look at it now.

[bberkobien]

You're fine, I'm just confused as to why this isn't working. I'm leaning toward something to do with the paging. I'm not sure. Thanks for the help.

[wizarrc]

@bberkobien still a good idea to take a look at your dev tool console log. I'm getting this error now:

Cannot read property 'totalElements' of undefined
at Object.eval [as updateDirectives] (App.ngfactory.js:64)
at Object.debugUpdateDirectives [as updateDirectives] (core.umd.js:13099)
at checkAndUpdateView (core.umd.js:12283)
at callViewAction (core.umd.js:12631)
at execComponentViewsAction (core.umd.js:12563)
at checkAndUpdateView (core.umd.js:12289)
at callWithDebugContext (core.umd.js:13499)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.umd.js:13039)
at ViewRef_.detectChanges (core.umd.js:10206)
at eval (core.umd.js:4844)

Try defining page along with it's totalElements property first.

[count]="page.totalElements"

[bberkobien]

I meant to remove that before you saw it. Try it now (or just remove that
[count]="page.totalElements")

On Fri, Oct 20, 2017 at 2:04 PM, Thomas J. Crowe [e-mail]
wrote:

@bberkobien https://github.com/bberkobien still a good idea to take a
look at your dev tool console log. I'm getting this error now:

Cannot read property 'totalElements' of undefined
at Object.eval [as updateDirectives] (App.ngfactory.js:64)
at Object.debugUpdateDirectives [as updateDirectives] (core.umd.js:13099)
at checkAndUpdateView (core.umd.js:12283)
at callViewAction (core.umd.js:12631)
at execComponentViewsAction (core.umd.js:12563)
at checkAndUpdateView (core.umd.js:12289)
at callWithDebugContext (core.umd.js:13499)
at Object.debugCheckAndUpdateView [as checkAndUpdateView]
(core.umd.js:13039)
at ViewRef_.detectChanges (core.umd.js:10206)
at eval (core.umd.js:4844)

Try defining page along with it's totalElements property first.

[count]="page.totalElements"

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-datatable/issues/1066#issuecomment-338280965,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AV_hpRJ9M9pvZs1oS9n8PQqs_nkAXok7ks5suOCsgaJpZM4QAoY_
.

--
Bradley Berkobien
Web Application Developer

[bberkobien]

The only thing different is the fact that in the plunkr I defined the rows explicitly, whereas in my application i do a call to the backend for paging and it returns the result of 100 rows and sets that equal to rows.

[wizarrc]

@bberkobien You can't remove count as it's required for externalPaging. It's an all or nothing type deal.

[bberkobien]

Okay fair enough. I made another plunkr to help you better understand my issue. The template does not work here. http://plnkr.co/edit/ISu5bSHMMP0Igp9bqZfL?p=info

[wizarrc]

@bberkobien when you use @ViewChild, make sure you initialize anything that depends on it on or after the ngOnInit lifecycle callback. In your case, initialize columns in the ngOnInit lifecycle.

columns = [];

ngOnInit() {
  columns = [
    {name:"Name", cellTemplate: this.template},
    {name:"Gender"},
    {name:"Company"}
  ];
}

[bberkobien]

I have updated the plunkr and you are correct, however this still doesn't work on my personal application. Trying to figure out what I'm missing here..... If you have any ideas please let me know. I'm at a loss.

[bberkobien]

It has nothing to do with paging or setting the rows. Might be the version # of one of my packages?

[wizarrc]

@bberkobien without seeing your source code, I don't really have any idea. I haven't seen anything related to this on my end.

[bberkobien]

Thanks for your help. I will update this if/when I find a solution.

[bberkobien]

So what seems to be the issue is that the data-table and template cannot be placed within an *ngIf tag. Here is a plunkr to demonstrate the bug. https://plnkr.co/edit/UpI3v68k6zF0m3TFtCjT?p=preview . Remove the *ngIf and it will work fine.

[bberkobien]

The solution to this is removing the template itself from the *ngIf.

[wizarrc]

@bberkobien you can fix that by changing the lifecycle of the initialization from ngOnInit to ngAfterViewInit. I think it has something to do with when the @ViewChild is populated, which should always be after the view is initialized. I guess it's probably a bug that you can even access it on the ngOnInit lifecycle.

[wizarrc]

@bberkobien I filed a bug report with the angular team. IMO I think ngOnInit should never provide results for any @View... or @Content... query selector in any circumstance as it leads to inconsistent behavior.

[bberkobien]

Thank you for following up and filing that report. I do agree with your last statement and will be interested in seeing what the Angular team replies with. Thanks for your help as this problem had me confused for a couple of days.

[wizarrc]

@bberkobien I did get some feedback about some more advanced angular feature that I wasn't aware of. @ViewChild can either be a static or dynamic query. A static query is never updated and is initialized upon creation, thus causing the usability issue. So technically the behavior is correct and by design but I wouldn't say straightforward. The fact that the template reference is inside an *ngIf template makes it a dynamic query thus changing when the initialization occurs.

You can follow the reference here and add any comments.