[Ivo ZhulevParticipant]

Hi timhortons,

This worked in my test. Heres the code:

app.component.html

<jqxGauge #myGauge
          [value]="0" [colorScheme]="'scheme04'" [animationDuration]="1500"
          [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
          [labels]="labels" [style]="style" [caption]="caption" [cap]="'radius: 0.04'">
</jqxGauge>

<button (click)="clickFunction()">Click Me!</button>

app.component.ts

export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };

    ticksMajor: any = { interval: 10, size: '10%' };

    labels: any = { visible: true, position: 'inside' };

    style: any = { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' };

    caption: any = { offset: [0, -25], value: 'jQWidgets', position: 'bottom' };

    ranges: any[] =
    [
        { startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
        { startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
        { startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
        { startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }
    ];

    clickFunction() {
        this.caption = { offset: [0, -25], value: 'asdasd', position: 'bottom' };
    }
}

Best Regards,
Ivo

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

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

[Ivo ZhulevParticipant]

Hi hanusaikrishna786,

Let’s say the code is the same as the code given by my college Stanislav.
If the component you wanna have reference to is let’s say the ‘jqxToolBar’ widget(it’s inside the jqxLayout) you have the reference when you create the widget in the ngAfterViewInit.
If the reference is to some other component for which you don’t have anything inside the app.component.ts, so just use the angular markup id selector – #. Something like <myCustomComponent #myCustomComponent></myCustomComponent>. Then inside the app.component.ts get that reference by @ViewChild.

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi Liam,

Please look at this demo:
https://www.jqwidgets.com/angular/angular-ribbon/angular-ribbon-integrationwithotherwidgets.htm

Here the grid is created within the initContent callback.

P.S.
My advice is to use the jqxSpliiter(not jqxRibbon) and inside of it to make tabs and grid.

Best Regards,
Ivo

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

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

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

[Ivo ZhulevParticipant]

Hi softboy99,

Can you share your tsconfig.json file?

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi timhortons,

Glad I could help 🙂

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi timhortons,

This is probably not working because the widget itself is ready inside the ngAfterViewInit lifecycle. So when you set a value there, it’s like the initial value. The way to do this is calling the this.myGauge.value(this.value) inside the subscribe success callback in your constructor.

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi douglas168,

I don’t see the last thing I told you in your code. –>

this.articleService.getAllArticles().retry(3).subscribe(
   data => {
      this.articles = data;
      this.source.localdata = data;
      this.dataAdapter.dataBind();
      // You must have a reference to the grid in order to call any of its methods/props.
      this.myGrid.updatebounddata();
   },
   .........

Try this.

About the error:
(ps. I tried ‘this.source.localdata = data;’ but get Module parse failed: Unexpected token)

The problem comes from something else in your code, so check this out carefully.

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi douglas168,

First of all, do you receive data in the subscribe success callback?
If yes then there you must do the following:

this.source.localdata = data;
this.dataAdapter.dataBind();
this.myGrid.updatebounddata();

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi gudboisgn,

Please check this topic:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm?search=grid

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi douglas168,

Have you included the angular_jqxgrid.ts file in your package.json, as the error says?

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi jdh,

Something is missing from that test, cuz as you see the element is fully working and okey.
I shall look into that. If you find an answer, please post it.

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi kelsey,

First of all, are you sure the API returns the data as intended?

Best Regards,
Ivo

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

[Ivo ZhulevParticipant]

Hi srinivas77877,

Please include the angular_jqxbuttons.ts file from the jqwidgets-ts folder.

import { jqxButtonComponent } from 'jqwidgets-ts/angular_jqxbuttons';

Include that import in the declarations.

Best Regards,
Ivo

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

[Author]

Posts