CODEWITHSUNDEEP
angularkendo-ui-angular2
Delta
Delta

Reputation: 851

Unable to show a popup using kendo PopupService

We are currently unable to show any kendo ui control that require the popup service, the two we are trying to get working currently are the kendo-combobox and kendo-datepicker.

We have tried writing the kendo examples in our code but continue to get the same errors.

the error is:

View Container not found! Inject the POPUP_CONTAINER or define a specific ViewContainerRef via the appendTo option. See http://www.telerik.com/kendo-angular-ui/components/popup/api/POPUP_CONTAINER for more details.

This is the error we get when we try to expand a combo box, or if we manually try to call: 

this.popupService.open({ content: this.dialog })

The link above is not very helpful, but we tried to implement it the best we could.

providers: [{
        provide: POPUP_CONTAINER,
        useFactory: () =>
        {
            return document.body.appendChild(document.createElement("kendo-popup"));
            //return the container ElementRef, where the popup will be injected
        }
    }]

This is done in the boostrap module of our application. First off, it seems like this shouldn't be necessary. None of the Kendo plunkers we looked at had this or any other form of special popup injection logic.

But, even after attempting to create a kendo popup element, we now get this error when trying to see a popup:

ERROR TypeError: Cannot read property 'appendChild' of undefined
    at PopupService.appendPopup (:2295/node_modules/@progress/kendo-angular-popup/dist/npm/popup.service.js:163)
    at PopupService.open (:2295/node_modules/@progress/kendo-angular-popup/dist/npm/popup.service.js:130)
    at PropertySelectorComponent.togglePopup (:2295/app/Upgrade/common/property-selector/property-selector.component.js:41)
    at Object.eval [as handleEvent] (ng:///my_Company_CommonModule/PropertySelectorComponent.ngfactory.js:24)
    at handleEvent (:2295/node_modules/@angular/core/bundles/core.umd.js:12029)
    at callWithDebugContext (:2295/node_modules/@angular/core/bundles/core.umd.js:13490)
    at Object.debugHandleEvent [as handleEvent] (:2295/node_modules/@angular/core/bundles/core.umd.js:13078)
    at dispatchEvent (:2295/node_modules/@angular/core/bundles/core.umd.js:8633)
    at eval (:2295/node_modules/@angular/core/bundles/core.umd.js:9244)
    at HTMLButtonElement.eval (:2295/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js:2685)

The only thing at this point that I can think of is that fact that we are using the angular upgrade module to support both Angular 1.5 and Angular 4. and possibly the popup container doesn't get generated properly or cannot be found.

Any suggestions on what to try next in order to just get a combo box showing with kendo.

Upvotes: 0

Views: 3610

Answers (1)

George K
George K

Reputation: 1763

The mentioned documentation states that a valid ElementRef instance should be returned. In other words, you need to return an element that will be used as a Popup container, nothing more. With that in mind the code should be as simple as:

useFactory: () => ({ nativeElement: document.body } as ElementRef)

Here is a runnable demo that demonstrates this approach:

http://plnkr.co/edit/GOa7SjoWiKiYXvZTMTtL?p=preview

Notice how the document.body element is returned as Popup container.

Upvotes: 1

Related Questions