jQuery UI Widgets Forums Angular jqxButton is not rendered properly in dialog window

This topic contains 18 replies, has 3 voices, and was last updated by  Ivo Zhulev 2 years, 4 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author

  • Liam
    Participant

    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 !


    Stanislav
    Participant

    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/


    Liam
    Participant

    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 ?


    Stanislav
    Participant

    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/


    Liam
    Participant

    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 )


    Stanislav
    Participant

    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/


    Liam
    Participant

    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 Zhulev
    Participant

    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/

    • This reply was modified 2 years, 5 months ago by  Ivo Zhulev.

    Liam
    Participant

    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.


    Stanislav
    Participant

    Hello Liam,

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

    Best Regards,
    Stanislav

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


    Liam
    Participant

    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 !

    • This reply was modified 2 years, 5 months ago by  Liam.

    Stanislav
    Participant

    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/


    Liam
    Participant

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

    Stanislav
    Participant

    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/


    Liam
    Participant

    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

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.