Completely removing the title bar of a Kendo Window

2 Answers 207 Views
Window
Francis
Top achievements
Rank 1
Iron
Francis asked on 04 Oct 2022, 02:55 PM | edited on 04 Oct 2022, 02:55 PM

I'm trying to remove the title bar component completely from a window created with a call to WindowService.

Here's my custom open method:

openWindow(settings: WindowSettings, closeCallback: any, preventClose: boolean = false, inputData: any = null): WindowRef {


    if (preventClose) {
      settings.preventClose = (e: any, w: WindowRef) => {
        return true;
      }
    }

    
    let w = this.windowService.open(settings);
    let contentInstance = w.content.instance as any;

    if (inputData) {
      for (const key in inputData) {
        const value = inputData[key];
        contentInstance[key] = value;
      }
    }

    w.window.instance.resizeStart.subscribe(() => {
      //delete w.window.instance.titleBarView
      if (w.window.instance.titleBarView)
        w.window.instance.titleBarView.el.nativeElement.remove();
    });

    return w;
    
  }

As you can see, I've found that w.window.instance.titleBarView.el.nativeElement contains the title bar and I can remove it as such, but the problem is that if I try to access the titleBarView property right before the subscribe line, it's always undefined. The title bar disappears when I resize the window, but that's not what I want.

Is there a way I can subscribe to an event (like beforeShow) and have access to it ?

Or any other way to do it would be appreciated.

Thanks.

2 Answers, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 07 Oct 2022, 11:31 AM

Hi Francis,

The most straight forward approach of removing the title bar from the Window component would be with some custom CSS:

 .k-window-titlebar {
        display: none;
      }

https://stackblitz.com/edit/angular-1xbogu?file=src%2Fapp%2Fapp.component.ts

I hope this helps.

Regards,
Yanmario
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Francis
Top achievements
Rank 1
Iron
answered on 07 Oct 2022, 02:43 PM

Thanks, but I'd like to be able to do it on a per window basis. 

This works when I do a console.log of titlebar (I see the html markup) but in when trying to access titlebar's values on runtime, it seems the window has not been fully initialized so I can't call remove() on the element.

Is there an window event that I can hook into when it is fully shown and initialized ?


let w = this.windowService.open(settings);
let el = w.window.location.nativeElement as Element; let titlebar = el.getElementsByClassName("k-window-titlebar");

 

Yanmario
Telerik team
commented on 12 Oct 2022, 10:23 AM

Hi Francis,

There isn't a specific event that provides such information, and the developer can use some delay methods like setTimeout. The developer can also add a CSS class to the specific window instance and that will allow to remove the title bar to that specific instance while the other remain with title bars.

https://www.telerik.com/kendo-angular-ui/components/dialogs/window/service/#toc-custom-css-classes

Regards,
Yanmario
Progress Telerik     

Tags
Window
Asked by
Francis
Top achievements
Rank 1
Iron
Answers by
Yanmario
Telerik team
Francis
Top achievements
Rank 1
Iron
Share this question
or