Display Map Panel on click of Hyperlink with Kendo UI in Angular

Question

I am using Angular 14 and Kendo Dialog UI 7.1.2

On click of a link, I should display a Map Panel just below the link as in the below screenshot. The Maximize and Close buttons should be as in the screenshot. When the Panel opens, the Panel should not have a shadow effect.

The code related to this is below...

private maximizeWindow(): void {
    // Your maximize logic goes here
    console.log('Maximize button clicked');
}

private onWindowClose(): void {
    if (this.dialogRef) {
      this.dialogRef.close();
    }
}

public openWindow(): void {
    this.dialogRef = this.dialogService.open({
      content: 'Window content goes here',
      width: 400,
      height: 200,
    });
}

<kendo-window
  [width]="400"
  [height]="200"
  (close)="onWindowClose()">
  <div class="custom-titlebar">
    My Window
    <button class="custom-action" (click)="maximizeWindow()">Maximize</button>
    <button class="custom-action" (click)="closeWindow()">Close</button>
  </div>
  <sd-customer-map [customer]="customer" class="map-image"></sd-customerinquiry-map>
</kendo-window>

The CSS Code is below..

.custom-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 5px 10px;
}

.custom-action {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
}

With this code, it displays like a Window in the center of the screen with Shadow effect. Also, I would like to place the MapComponent to display map which is already there. Now it shows empty window box.

EDIT

There are 3 things I am looking into...

1. To display window near to the Hyperlink.
2. To display Map Component inside the window.
3. To use custom buttons for Maximize and Close.

Any help would be greatly appreciated. Thank you.

Answer 1

You can just set it using CSS to remove box shadow.

make sure you add additional CSS classes, so that this change will not affect other dialogs in your component!

.k-window.k-dialog {
    box-shadow: none !important;
}

or

.k-dialog {
    box-shadow: none !important;
}