jqxButton is not rendered properly in dialog window

[Ivo ZhulevParticipant]

Hi Liam,

Use css to style the button:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [<code></code>
        jqxbutton span, jqxbutton img {
            position: relative !important;
        }
        jqxbutton span {
            top: 0 !important;
            left: 0 !important;
        }
    <code></code>],
    encapsulation: ViewEncapsulation.None
})

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[LiamParticipant]

Hello, Ivo.
Thank you for answer.

This fix works for button inside the window, but spoils buttons outside the window ( even if to create those buttons manually )

<jqxWindow #window
           [autoOpen]="false"
           [isModal]="true"
           [resizable]="false"
           [width]="640"
           [height]="480">

  <div>
    <jqxButton #button1 [auto-create]="false" (onClick)="closeWindow()"></jqxButton>
  </div>
</jqxWindow>

<jqxButton #button2 [auto-create]="false" (onClick)="openWindow()"></jqxButton>

<br/>

<jqxButton
  #textImageButton
  [width]='120'
  [height]='40'
  [textImageRelation]='"imageBeforeText"'
  [textPosition]='"left"'
  [imgSrc]='"/assets/close.png"'
  (onClick)="openWindow()">
  Button3
</jqxButton>

export class AppComponent implements AfterViewInit {
  @ViewChild('window')
  window: jqxWindow;

  @ViewChild('button1')
  button1: jqxButtonComponent;

  @ViewChild('button2')
  button2: jqxButtonComponent;

  ngAfterViewInit(): void {
    this.button1.createComponent({
      width: 194,
      height: 32,
      textImageRelation: 'imageBeforeText',
      imgPosition: 'center',
      textPosition: 'left',
      imgSrc: '/assets/close.png',
      value: 'button1'
    });

    this.button2.createComponent({
      width: 194,
      height: 32,
      textImageRelation: 'imageBeforeText',
      imgPosition: 'center',
      textPosition: 'left',
      imgSrc: '/assets/close.png',
      value: 'button2'
    });
  }

  openWindow() {
    this.window.open();
  }

  closeWindow() {
    this.window.close();
  }
}

Thank you !

[LiamParticipant]

I have found a solution. The jqxButtonComponent must be created in initContent() method.
Important note about initContent() method. It must be declared as a class member and not as a typescript function. I think you should mention that in documentation.

Wrong way :

  initContent() {
    this.closeWindowButton.createComponent();
  }

Right way :

  initContent = () => {
    this.closeWindowButton.createComponent();
  }

Working example :

app.component.ts

import {Component, ViewChild} from '@angular/core';
import jqxWindow = jqwidgets.jqxWindow;
import {jqxButtonComponent} from "jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('window')
  window: jqxWindow;

  @ViewChild('closeWindowButton')
  closeWindowButton: jqxButtonComponent;

  openWindow() {
    this.window.open();
  }

  closeWindow() {
    this.window.close();
  }

  initContent = () => {
    this.closeWindowButton.createComponent();
  }
}

app.component.html

<jqxWindow #window
           [autoOpen]="false"
           [isModal]="true"
           [initContent]="initContent"
           [resizable]="false"
           [width]="640"
           [height]="480">

  <div>
    <jqxButton
      #closeWindowButton
      [auto-create]="false"
      [width]='200'
      [height]='40'
      [textImageRelation]='"imageBeforeText"'
      [textPosition]='"left"'
      [imgSrc]='"/assets/close.png"'
      (onClick)="closeWindow()"
    >
      Close Window
    </jqxButton>
  </div>
</jqxWindow>

<jqxButton
  #textImageButton
  [width]='200'
  [height]='40'
  [textImageRelation]='"imageBeforeText"'
  [textPosition]='"left"'
  [imgSrc]='"/assets/close.png"'
  (onClick)="openWindow()">
  Open Window
</jqxButton>

Thank you for support !

[Ivo ZhulevParticipant]

Hi Liam,

Thanks for the feedback!

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts