[douglas168Participant]

Yes, just what I was looking for.

Appreciate the help!

[douglas168Participant]

Hi Ivo,

I have two components. Both use the same article.service.ts. One component uses regular table (see articles.components.ts and articles.component.html). However, the other components uses jqxgrid (see jqxgrid.component.ts and jqxgrid.component.html) CAN NOT display data from article.service.ts. If I set ‘localdata: this.datatest’ where datatest is defined within the component, I can get the datatest to display. So, I guess I need help in HOW DO I GET DATA FROM SUBSCRIBE SERVICE TO DISPLAY IN JQXGIRD? Please help!

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

articles.components.ts

export class ArticlesComponent implements OnInit {

    public articles;

    // Inject HttpClient into your component or service.
    constructor(private http: HttpClient, private articleService: ArticleService) {
    }

    ngOnInit(): void {
        this.getAllArticles();

    }

    getAllArticles(){
        this.articleService.getAllArticles().retry(3).subscribe(
            data => {this.articles = data},
            (err: HttpErrorResponse) => {
                if (err.error instanceof Error) {
                    //A client-side or network error occurred.
                    console.log('An error occurred:', err.error.message);
                } else {
                    //Backend returns unsuccessful response codes such as 404, 500 etc.
                    console.log('Backend returned status code: ', err.status);
                    console.log('Response body:', err.error);
                }
            },
                    () =>console.log('done loading')

        );

    }
}

articles.component.html

<table class="table">
                                <thead>
                                <tr>
                                    <th> Id</th>
                                    <th>Title</th>
                                    <th>Category</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let article of articles">
                                    <td>{{article.id}}</td>
                                    <td>{{article.title}}</td>
                                    <td>{{article.category}}</td>
                                </tr>
                                </tbody>
                            </table>

jqxgrid.components.ts

export class JqxgridComponent implements OnInit {

    public articles;

    public datatest = [
        {
            "title": "Android AsyncTask Example",
            "category": "Androids333",
            "id": 1
        },
        {
            "title": "vbv",
            "category": "vbv",
            "id": 7
        }
    ];

    constructor(private http: HttpClient, private articleService: ArticleService) {
    }

    ngOnInit(): void {
        this.getAllArticles();
    }

    getAllArticles() {
        this.articleService.getAllArticles().retry(3).subscribe(
            data => {
                this.articles = data; console.log("data: ",data);
            },
            (err: HttpErrorResponse) => {
                if (err.error instanceof Error) {
                    //A client-side or network error occurred.
                    console.log('An error occurred:', err.error.message);
                } else {
                    //Backend returns unsuccessful response codes such as 404, 500 etc.
                    console.log('Backend returned status code: ', err.status);
                    console.log('Response body:', err.error);
                }
            },
            () => console.log('done loading')
        );

    }

    source: any =

        {
            datatype: 'array',
            datafields: [
                {name: 'id', type: 'int'},
                {name: 'title', type: 'service'},
                {name: 'category', type: 'service'}
            ],
            id: 'id',
            localdata: this.datatest
        };

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

    cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
        if (value < 20) {
            return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #ff0000;'>${value}</span></code>;
        }
        else {
            return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #008000;'>${value}</span></code>;
        }
    };

    columns: any[] =
        [
            {text: 'Id', datafield: 'id', width: 100},
            {
                text: 'Title',
                // columngroup: 'ToDoList',
                datafield: 'title',
                cellsalign: 'left',
                align: 'left',
                width: 150
            },
            {text: 'Category', datafield: 'category', align: 'center', width: 100}
        ];
}

jqxgrid.component.html

<jqxGrid
                      [width]="1000" [source]="dataAdapter" [columns]="columns"
                      [pageable]="true" [autoheight]="true" [sortable]="true"
                      [altrows]="true" [enabletooltips]="true" [editable]="true"
                      [selectionmode]="'multiplecellsadvanced'">
              </jqxGrid>

[douglas168Participant]

Hi Ivo,

I can get the following ‘table’ way to display but can’t get ‘jqxgrid’ way to display. I like to keep using jqxgrid with Angular if possible.

jqxgrid.component.html

<div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th> Id</th>
                                    <th>Title</th>
                                    <th>Category</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let article of articles">
                                    <td>{{article.id}}</td>
                                    <td>{{article.title}}</td>
                                    <td>{{article.category}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

[douglas168Participant]

Hi Ivo,

Thank you for the information. I have the following files and I can’t give the data to the dataAdapter (grid shows up blank) . Please help!

ArticleService.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from "@angular/common/http";

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ArticleService {
    //URL for CRUD operations
    private readonly API_URL = "http://localhost:3000/articles";

    //Create constructor to get Http instance
    constructor(private http: HttpClient) {
    }

    getAllArticles(){
        return this.http.get(this.API_URL);
    }
}

jqxgrid.component.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient, HttpErrorResponse} from "@angular/common/http";
import {ArticleService} from "../shared/services/article.service";

@Component({
    selector: 'app-jqxgrid',
    templateUrl: './jqxgrid.component.html',
    styleUrls: ['./jqxgrid.component.scss']
})
export class JqxgridComponent implements OnInit {

    public articles;

    constructor(private http:HttpClient, private articleService: ArticleService) {
    }

    ngOnInit(): void {
        this.getAllArticles();
    }

    getAllArticles(){
        this.articleService.getAllArticles().retry(3).subscribe(
            data => {this.articles = data},
            (err: HttpErrorResponse) => {
                if (err.error instanceof Error) {
                    //A client-side or network error occurred.
                    console.log('An error occurred:', err.error.message);
                } else {
                    //Backend returns unsuccessful response codes such as 404, 500 etc.
                    console.log('Backend returned status code: ', err.status);
                    console.log('Response body:', err.error);
                }
            },
            () =>console.log('done loading')

        );

    }

    source: any =
        {
            datatype: 'json',
            datafields: [
                {name: 'id', type: 'int'},
                {name: 'title', type: 'service'},
                {name: 'category', type: 'service'}
            ],
            id: 'id',
            url: 'http://localhost:3000/articles'
        };

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

    cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
        if (value < 20) {
            return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #ff0000;'>${value}</span></code>;
        }
        else {
            return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #008000;'>${value}</span></code>;
        }
    };

    columns: any[] =
        [
            {text: 'Id', datafield: 'id', width: 100},
            {
                text: 'Title',
                // columngroup: 'ToDoList',
                datafield: 'title',
                cellsalign: 'left',
                align: 'left',
                width: 150
            },
            {text: 'Category', datafield: 'category', align: 'center', width: 100}
        ];
}

[douglas168Participant]

Hi all,

After googling and trying out different solutions, using ‘ng serve –aot’ seems to fix the problem but don’t know why.

FYI,
https://github.com/angular/angular-cli/issues/8284

In case others have same problem.

[douglas168Participant]

Hi Ivo,

Thank you for the input. Yes, I am trying to get jqxGrid data through Angular service but not sure how? Any example on JqWidget web site?

Thanks,
Douglas

[douglas168Participant]

Problem fixed. Seems javascript is cached. Clear cache seems to fix the problem.

[douglas168Participant]

Thank you, Stanislav.

Just checking to see if there is recent update on this feature. Hope there will be in the future release!

[douglas168Participant]

Hi Stanislav,

Here is an example.

I tried the following link on my Andriod phone. Once I clicked the down arrow, the select list and scroll bar disappear.

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm#demos/jqxcombobox/rendering.htm

Let me know how to fix this.

Appreciate the help!

[douglas168Participant]

Hi,

I tried

$(‘#licenseNum’).find(‘.jqx-combobox-arrow-normal’).height(50);

but the downarrow size on the jqxComboBox did not change.

I am more interested in increasing the ‘width’ of the arrow so user can easier click on touch screen.

Thanks!

[douglas168Participant]

Hi all,

I found a question on the forum asking pretty similar question (I think).

https://www.jqwidgets.com/community/topic/angular-4-httpclient-and-jqxgrid/

Sorry I am new to this and not sure what Ivo meant. Any sample code?

Appreciate the help!

[douglas168Participant]

OK. Thank you Stanislav!

[douglas168Participant]

Hi Hristo,

I can use the following link to demostrate the issue.

http://jsfiddle.net/jqwidgets/jmAuH/

If mouse hover over ‘products’ the dropdown list appears
If I left click on ‘products’ once, the dropdown list dissappear
If I left click on ‘products’ once again, the dropdown list DOES NOT re-appear.
Once if mouse move out and hover over ‘products’ again would the dropdown list appear again.

Is there any way to have jqxMenu either

1- not able to click on the menu item (kind like jqxWidget web page’s menu bar)
2- click once on the menu item and dropdown menu disappear and click again the dropdown menu disappear

[douglas168Participant]

Hi Stanislav,

I use

{
input: ‘#borrower’, message: ‘Text is required！’, action: ‘blur, keyup’, rule: function (input) {

var val = $(“#borrower input”).val();
if (val == “”) {
return false;
}
return true;
}
},

to validate and it seems to work with jqxComboBox. So far so good! Thanks again Stanislav.

[douglas168Participant]

Hi Stanislav,

The code from that link is what I need. Thank you.

However, because one of my input field is jqxComboBox, that jqxComboBox’s validator keeps saying “Text is required” even if there is text in the input box.

How do I fix this problem?

Appreciate the help!

[Author]

Posts