Angular Telerik Report Viewer - kendoPanelBar is not a function

[Chris]

When I'm trying to use the kendo panel bar, i'm getting an error:

I have the module loaded, 

TypeError: $root.children(...).kendoPanelBar is not a function

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: $root.children(...).kendoPanelBar is not a function
TypeError: $root.children(...).kendoPanelBar is not a function
    at init (telerikReportViewer.js:6368)
    at new SideMenu (telerikReportViewer.js:6364)
    at HTMLDivElement.<anonymous> (telerikReportViewer.js:6571)
    at Object.each (telerikReportViewer.js:279)
    at jQuery.fn.init.push.9qfu.$.fn.<computed> [as telerik_ReportViewer_SideMenu] (telerikReportViewer.js:6569)
    at HTMLDivElement.<anonymous> (telerikReportViewer.js:6591)
    at Object.each (telerikReportViewer.js:279)
    at Object.bind (telerikReportViewer.js:6588)
    at init (telerikReportViewer.js:8100)
    at start (telerikReportViewer.js:8261)
    at resolvePromise (zone-evergreen.js:798)
    at zone-evergreen.js:864
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28564)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)
    at HTMLLinkElement.globalZoneAwareCallback (zone-evergreen.js:1647)
defaultErrorLogger @ core.js:6210
handleError @ core.js:6258
next @ core.js:29184
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25926
(anonymous) @ core.js:28603
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:28506
onHandleError @ core.js:28603
handleError @ zone-evergreen.js:368
runGuarded @ zone-evergreen.js:136
api.microtaskDrainDone @ zone-evergreen.js:670
drainMicroTaskQueue @ zone-evergreen.js:576
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
add @ jquery.js:5282
(anonymous) @ jquery.js:5182
each @ jquery.js:385
each @ jquery.js:207
on @ jquery.js:5181
on @ jquery.js:5906
(anonymous) @ telerikReportViewer.js:8314
ZoneAwarePromise @ zone-evergreen.js:960
(anonymous) @ telerikReportViewer.js:8312
each @ telerikReportViewer.js:279
loadStyleSheets @ telerikReportViewer.js:8310
(anonymous) @ telerikReportViewer.js:8351
invoke @ zone-evergreen.js:364
onInvoke @ core.js:28577
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28564
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1658
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
desc.set @ zone-evergreen.js:1279
send @ jquery-3.4.1.min.js:5082
ajax @ jquery-3.4.1.min.js:4822
(anonymous) @ telerikReportViewer.js:383
ZoneAwarePromise @ zone-evergreen.js:960
$ajax @ telerikReportViewer.js:382
get @ telerikReportViewer.js:2054
load @ telerikReportViewer.js:7691
(anonymous) @ telerikReportViewer.js:8345
invoke @ zone-evergreen.js:364
onInvoke @ core.js:28577
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28564
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1658
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
desc.set @ zone-evergreen.js:1279
send @ jquery-3.4.1.min.js:5082
ajax @ jquery-3.4.1.min.js:4822
(anonymous) @ telerikReportViewer.js:383
ZoneAwarePromise @ zone-evergreen.js:960
$ajax @ telerikReportViewer.js:382
(anonymous) @ telerikReportViewer.js:2074
invoke @ zone-evergreen.js:364
onInvoke @ core.js:28577
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28564
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1658
load (async)
customScheduleGlobal @ zone-evergreen.js:1773
scheduleTask @ zone-evergreen.js:385
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:378
scheduleTask @ zone-evergreen.js:210
scheduleEventTask @ zone-evergreen.js:236
(anonymous) @ zone-evergreen.js:1928
(anonymous) @ http.js:1805
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
innerSubscribe @ innerSubscribe.js:67
_innerSub @ mergeMap.js:57
_tryNext @ mergeMap.js:51
_next @ mergeMap.js:34
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:19
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
(anonymous) @ Observable.js:91
ZoneAwarePromise @ zone-evergreen.js:960
toPromise @ Observable.js:89
createPDFViewNew @ tasks-v2.component.ts:1978
TaskListV2Component_div_18_Template_span_click_2_listener @ tasks-v2.component.html:124
executeListenerWithErrorHandling @ core.js:15265
wrapListenerIn_markDirtyAndPreventDefault @ core.js:15303
(anonymous) @ platform-browser.js:582
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:28564
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 64 more frames

[Plamen Mitrev]

Hello Chris,

I am sorry to hear that you are experiencing such an issue.

Based on the error message, it seems that some Kendo UI functionalities cannot work properly. The issue might be caused by different reasons. For example, if the Kendo UI script is missing. Also, please, make sure that the JavaScript file of the viewer is loaded and the application loads jQuery only once. Multiple loading of jQuery could explain "kendoPanelBar is not a function" error you see in the browser's console as well.

I hope the above information will be helpful to you. If you need further assistance, please install the Fiddler Jam extension, then generate a network log and share it with us. You may also send us a runnable project demonstrating the issue and we will investigate it locally.

Thank you for your cooperation in this discussion.

Regards,
Plamen Mitrev
Progress Telerik