[LiamParticipant]

Hello, the loader has come up, but it doesn’t cover a whole window. Even I can move the window and close it while loader is running.
Attaching a screen shot : https://ibb.co/jpPDHx
Thank you !

[LiamParticipant]

Works !
Thank you very much !!!

[LiamParticipant]

Thank you !

[LiamParticipant]

Hello, Ivo.
Yes, I mean something like this.
I’ve tried to implement it, but it didn’t work. What I did wrong ?

app.component.ts

export class AppComponent {
  @ViewChild('general', {read: ViewContainerRef})
  general: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  }

  initContent = () => {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(GeneralComponent);
    this.general.createComponent(componentFactory);
  }
}

app.component.html

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

  <div>
    <jqxRibbon #jqxRibbon
               [width]="'600px'"
               [height]="'400px'"
               [position]="'left'"
               [selectionMode]="'click'"
               [animationType]="'none'">

      <ul id="header" style="width: 150px;">
        <li>General</li>
      </ul>

      <div>
        <div>
          <ng-template #general></ng-template>
        </div>
      </div>
    </jqxRibbon>
  </div>
</jqxWindow>

<input type="button" (click)="window.open()" value="Open Window">

app.module.ts

  ...
  entryComponents: [GeneralComponent],
  ...

GeneralComponent is a regular Angular component

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 !

[LiamParticipant]

Hi Ivo. Thank you for answer.

In this example we have a jqxRibbon component which contains manually created jqxGrid components in initContent() method.
I have a bit more complex situation. Each node in the jqxRibbon component is angular component. How can I create them manually ?

    <jqxRibbon #jqxRibbon
               [width]="'100%'"
               [height]="'calc( 100% - 50px )'"
               [initContent]="initContent"
               [position]="'left'"
               [selectionMode]="'click'"
               [animationType]="'none'">

      <ul id="header" style="width: 150px;">
        <li>General</li>
        <li>Bindings</li>
        <li>Logger</li>
      </ul>

      <div>
        <app-general></app-general>
        <app-bindings></app-bindings>
        <app-logger></app-logger>
      </div>
    </jqxRibbon>

Thank you !

[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]

Hello, Stanislav.
Unfortunately it doesn’t work : (
I did the following :

app.component.html

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

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

<input type="button" value="Open window" (click)="openWindow()">

app.component.ts

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

  @ViewChild('button')
  button: jqxButtonComponent;

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

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

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

Thank you

[LiamParticipant]

Hello, Stanislav. Thank you for answer!

It seems you’ve tested that example in [app.component.ts] component. And it’s really works fine.
The point is it doesn’t work when the [jqxButton] with image located inside a [jqxWindow].
Image in the button is not displayed correctly :

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

  <div>

    <jqxButton
      [imgPosition]="'center'"
      [textPosition]="'left'"
      [textImageRelation]="'imageBeforeText'"
      [width]='194'
      [height]='32'
      [imgSrc]='"/assets/close.png"'
      (onClick)="buttonClicked()">
      button
    </jqxButton>
  </div>
</jqxWindow>

<input type="button" value="Open window" (click)="window.open()">

[LiamParticipant]

Hello, Stanislav.
Unfortunately jqxButton examples don’t cover a case when jqxButton with image is in the jqxWindow.
Attaching an example as mini project.
In this project the jqxButton with image is not displayed correctly in jqxWindow.
Thank you !

[LiamParticipant]

Thank you, Ivo ! Everything works fine !

But there is still 1 little issue.
I use a <jqxButton> with image in the following way :

    <jqxButton
      [width]='194'
      [height]='32'
      [textImageRelation]="'imageBeforeText'"
      [textPosition]='center'
      [imgSrc]='"/assets/close.png"'
      (onClick)="buttonClicked()">
      Click ME!
    </jqxButton>

The problem is the text and image are not displayed in the center.

[LiamParticipant]

Hello, zIndex doesn’t work

Attaching a link to mini project with all issues I mentioned before.
May be I did something wrong.

Thank you !

[LiamParticipant]

Hi, I’ve moved the discussion to the Angular forum.
Thank you !

[LiamParticipant]

Thank you !
It works partially.

1) jqxButton works properly only in initContent() function, but doesn’t work in ngAftetViewInit()

2) Event handler doesn’t work for this button. Example :

  initContent() {
    const cancelButton = jqwidgets.createInstance('#cancelButton', 'jqxButton', {
      width: 94,
      height: 32,
      value: 'Cancel',
      textImageRelation: 'imageBeforeText',
      textPosition: 'center',
      imgSrc: 'cancel.png'
    });

    cancelButton.addEventHandler('click', ()=>{
      this.loginWindow.close();
    });
  }

When I click a button I get “undefined” exception. I.e. this.loginWindow is undefined

3) Grid works properly only in ngAfterInit() function. It populates records, but seems it has a kind of GUI bug. I use a [showeverpresentrow: true] to dynamically add items. But [Add|Reset] popup buttons doesn’t appear

4) Grid doesn’t work in initContent() function. It has the same “undefined” problem similar to (2) section when trying to get access to source and columns ( this.source and this.columns are undefined )

[LiamParticipant]

Thank you, Stanislav !
That button works fine. But I have more complex problem.
There is another @component with jqxButton and jqxGrid on it. I need to attach this component to the jqxWindow.
How can I implement that ?

[Author]

Posts