jqxButton is not rendered properly in dialog window

[LiamParticipant]

Hello, I’ve faced the following problem.
I have a jqxButton with image inside some jqxwindow window. When dialog opens the button is not displayed properly.

I was told I have to use a initContent method to solve that. But it doesn’t work ( getting exceptions ).
Could you provide working example for that ?

Thank you !

[StanislavParticipant]

Hello Liam,

Here is an example of setting a button inside a jqxWindow with initContent:

app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    initContent() {
        jqwidgets.createInstance('#myButtonWrap', 'jqxButton', { width: 100, height: 60, value: 'click me!' });
    }
}

app.component.html

<jqxWindow #myWindow
        [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [initContent]="initContent">
    <div> Test window </div>
    <div>
        <div id="myButtonWrap"></div>
    </div>
</jqxWindow>

Best Regards,
Stanislav

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

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

[StanislavParticipant]

Hello Liam,

In this situation, it is a bit complicated, if you create a Grid in the initContent, you won’t be able to populate the grid with any data, because the initcontent gets called too fast and leaves the grid empty. You can move the elements from the initContent to a ngAfterVeiwInit()

Here is an example:
app.component.ts

export class AppComponent implements AfterViewInit {
    ngAfterViewInit(): void {
        jqwidgets.createInstance('#myButtonWrap', 'jqxButton', { width: 100, height: 60, value: 'click me!' });
        jqwidgets.createInstance('#myGridWrap', 'jqxGrid', { source: this.dataAdapter, columns: this.columns, width: 480, height: 290 });
    }

    source =
        {
            localdata: [
                ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
                ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
                ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico']
            ],
            datafields: [
                { name: 'CompanyName', type: 'string', map: '0' },
                { name: 'ContactName', type: 'string', map: '1' },
                { name: 'Title', type: 'string', map: '2' },
                { name: 'Address', type: 'string', map: '3' },
                { name: 'City', type: 'string', map: '4' },
                { name: 'Country', type: 'string', map: '5' }
            ],
            datatype: 'array'
        };

    dataAdapter = new jqx.dataAdapter(this.source);

    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName', width: 200 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'Title', width: 100 },
        { text: 'Address', datafield: 'Address', width: 100 },
        { text: 'City', datafield: 'City', width: 100 },
        { text: 'Country', datafield: 'Country' }
    ];
}

app.component.html

<jqxWindow #myWindow
           [width]="500" [height]="400" [minHeight]="300" [minWidth]="300" [initContent]="initContent">
  <div> Test window </div>
  <div>
    <div id="myButtonWrap"></div>

    <div id="myGridWrap"></div>
  </div>
</jqxWindow>

I hope this helps you!

Best Regards,
Stanislav

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

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

[StanislavParticipant]

Hello Liam,

1) I am not so sure about this, it worked fine for me in both.
2) Yes, the addEventHandler didn’t work for me eighter, I tried to do the event with addEventListener and it worked.

3) The pop-up with the add/reset buttons seems to be rendered behind the window itself. Putting a higher z-index will fix this minor issue.
4) Yes that is odd, we will take a look at that, thanks!

Best Regards,
Stanislav

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

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

[Ivo ZhulevParticipant]

Hi Liam,

Here is a code, in which ALL is okey. All of this “problems” are just not right set code. :

app.component.html

<jqxWindow #myWindowReference
           [width]="500" [height]="400" [minHeight]="300" [minWidth]="300">
    <div> Test window </div>
    <div>
        <jqxButton (onClick)="buttonClicked()">Click ME!</jqxButton>

        <jqxGrid #myGridReference
            [source]="dataAdapter" [columns]="columns" [width]="400" [height]="300" 
            [showeverpresentrow]="true" [everpresentrowactions]="'update reset'">
        </jqxGrid>
    </div>
</jqxWindow>

app.component.ts

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';

import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
import { jqxWindowComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxwindow';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    // The jqx-shadow selector is in the major case. Must adjust it if your is different.
    styles: [<code></code>
        .jqx-shadow {
            z-index: 9999 !important;
        }
    <code></code>],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    @ViewChild('myWindowReference') myWindow: jqxWindowComponent;
    @ViewChild('myGridReference') myGrid: jqxGridComponent;

    buttonClicked() {
        alert('Window Will Close. - Check Console!!');
        this.myWindow.close();
        console.log('Grid Source: ', this.myGrid.source());
        console.log('Grid Columns: ', this.myGrid.columns());
    }

    source =
    {
        localdata: [
            ['Alfreds Futterkiste', 'Germany'],
            ['Ana Trujillo Emparedados', 'Mexico'],
            ['Antonio Moreno', 'Spain']
        ],
        datafields: [
            { name: 'CompanyName', type: 'string', map: '0' },
            { name: 'Country', type: 'string', map: '1' }
        ],
        datatype: 'array'
    };

    dataAdapter = new jqx.dataAdapter(this.source);

    columns: any[] =
    [
        { text: 'Company Name', datafield: 'CompanyName' },
        { text: 'Country', datafield: 'Country' }
    ];
}

Best Regards,
Ivo

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

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

[StanislavParticipant]

Hello Liam,

Take a look at the examples on our web-site.

Best Regards,
Stanislav

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

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

[StanislavParticipant]

Hello Liam,

I tested two ways of doing this:

1) app.component.ts

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

2) app.component.html

       [imgPosition]="'center'" 
       [textPosition]="'left'" 
       [textImageRelation]="'imageBeforeText'"

Both seemed to work fine for me.
I used This as an example and a template for these testes. Take a look at try them yourself.

Best Regards,
Stanislav

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

[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()">

[StanislavParticipant]

Hello Liam,

Unfortunately, there is an issue and this does not work as intended.
You can still use the other method I showed you in the above post: Link.

Best Regards,
Stanislav

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

[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

[Author]

Posts