Questions on Kendo UI for Angular Forum

1 answer

39 views

Close snackbar upon navigating to another page?

Hi there,

Is there any built-in way to close a snackbar/notification bar if the user navigates to another page?

Or, if this isn't the right use case for the notification bar, could someone point me to a better one?

Thank you!

Notification

answered on 26 Jan 2024

1 answer

39 views

Is it possible to use a specific theme using Typescript code, like Bootstrap, specific for the NotificationService (used in an Angular NgRx effect)

I know I need to define a specific style in package.json using:

"@progress/kendo-theme-default": "^6.3.0"

But I like to know if it is possible to target a specific style for a component. So (I realize this is maybe a weird question), component X uses the material theme and component Y the Bootstrap theme.

I am using your NotificationService in an NgRx effect by the way. So I would also be curious if this would be possible.

Notification

answered on 16 Jun 2023

1 answer

61 views

Kendo UI Angular NotificationService gives weird stacked flickering when hiding previous and showing new one.

I am investigating other product lines, currently I am using PrimeNG, and because of some problems I am testing your Kendo UI Notification component. First my code:

    toast$ = createEffect(() =>
        this.actions$.pipe(
            ofType(CoreActions.Toast),
            filter(({message}) => !!message),
            tap(({message, messageType}) => {
                this.currentNotification?.hide();
                this.currentNotification = this.notificationService.show({
                    content: message,
                    hideAfter: 5000,
                    position: {horizontal: 'right', vertical: 'top'},
                    //animation: {type: 'fade', duration: 400}, //NOTE: Adding an animation unfortunately causes the toast to stack very shortly when using the 'hide()' function..
                    type: {style: messageType, icon: true},
                    closable: false //NOTE: If true the 'hideAfter' property is ignored
                });
            })
        ),
    {dispatch: false} // Because only an action is done, we should not redispatch (that would cause an infinite dispatch loop of toasts)
    );

As you can see, my use case is not having stacked notifications but hiding the previous one if a new one arrives. Imagine the scenario, something is saving, and you want to show 'Saving...' and when saving has finished you present 'Saved!'. Having stacked notifications is weird from this perspective.

Now the problem is when having an animation, the hiding and showing gives weird behaviour: for a very short time, the previous message shows up below the current and is hidden (flickering). If I disable the animation it works as expected.

Notification

answered on 16 Jun 2023

0 answers

75 views

How to integrate kendo-dialog and the Notification service?

I need an integration between kendo-dialog and the Notification service.
Context:
I'm opening the kendo-dialog containing a FileSelect component, and a couple of buttons, one for persisting the uploaded file to the backend and the other for cancel the operation. When a user click the Save button without having selected the file to upload I'm showing up a error message with the Notification service.
The problem is that when the Error Notification is shown, the Dialog is, I don't know if dismissed, hidden, or closed. The UI experience I want to provide to the user is that he/she is able to see the error notification without closing the dialog.

Can you please help me with this?

Check the attached zipped video

Dialog

Notification

asked on 13 Apr 2023

1 answer

447 views

Display Notification with 100% Width

Hi,

Is there a way to set the width of a notification to 100% of the available space?

The API documentation suggests I can achieve this using the cssClass property (https://www.telerik.com/kendo-angular-ui/components/notification/api/NotificationSettings/#toc-cssclass). I've tried adding width: 100% to the button-notification class in this fork of one of your examples: https://angular-btu63g.stackblitz.io but the notification width remains the same.

The width does change when I set an absolute value (e.g. width: 600px;).

But I can't predict what the available width will be and when the available space is less than the absolute value I set I get the following:

I want the notification to fill the entire available width (see below example from the Kendo website).

If I'm missing anything in the API documentation kindly point me in the right direction.

Notification

answered on 08 Sep 2021

1 answer

77 views

notification Type

Hi

In your sample https://www.telerik.com/kendo-angular-ui/components/notification/types/ and https://6yuvdu--run.stackblitz.io on notification type, when i try to running sample Type is undefined ?

Error: src/app/app.component.ts:20:18 - error TS2304: Cannot find name 'Typе'.

Why

Regards

Notification

answered on 30 Jun 2021

1 answer

73 views

Notification fade or slide animation not fluid

Hi,

I am using the notification in my footer section. With animation (fade or Slide) the animation append with an empty notification windows (so with 4-5px height) then when animation complete, the notification display the correct content. Same behaviours on FadeIn or FadeOut

I try with plain string in the content and with a test ngTemplate without any binding. Just plain text like in your sample.

Any idea?

Notification

answered on 07 Jan 2021

4 answers

288 views

Managing dynamic properties

Hi there,

We are having hard times to get our notifications right. Here is how our application works.

We have created a custom NotifcationService that abstracts notification for both desktops (Kendo UI) and mobiles (Ionic). Application components can trigger our NotificationService whenever needed. For instance, for the login page, we display a notification on error or success. Our notifications always have a title / header and a content message.

Kendo UI notification for Angular provides three different ways: string (doesn't allow html tags), TemplateRef and Component.

The first option would have been perfect if we would have been able to put some tags to format the output.
The second option has not been considered given our abstraction logic.
We gave a try to the third option but without success for the time being. We created a custom NoticationComponent with two inputs: title (string) and message (string). We used ComponentFactoryResolver to get an instance of our Component and send it our variables. But when we try to use its instancefor NotificationSettings.content it fails:

Type 'NotificationComponent' is not assignable to type 'string | Function | TemplateRef<any>'

whereas passing NotificationComponent directly to NotificationSettings.content works well (but it is then not possible to pass input variables).

Are we missing something here? What would have been nice is either to: