jQWidgets Forums

jQuery UI Widgets Forums Angular jqxGrid datafield mapping for list of items

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 4 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • wpd
    Participant

    In jqxGrid in a column i want to display yellow,red. below is my json response. tagColor is the field i want to display from.

    {
    “customerId”: 4,
    “userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
    “customerName”: “test”,
    “customerFName”: null,
    “customerLName”: null,
    “companyName”: “”,
    “customerMarketPlace”: “”,
    “customerEmail”: “test.test1@gmail.com”,
    “customerPhone”: “203789087”,
    “customerAddr”: {
    “addressId”: 4,
    “customerName”: “”,
    “companyName”: “”,
    “addressType”: “test”,
    “street1”: “21589 Green Hill Rd”,
    “street2”: “APT 2789”,
    “street3”: “”,
    “city”: “Farmington Hills”,
    “county”: “”,
    “state”: “MI”,
    “postalCode”: “48335”,
    “country”: “United States”,
    “residential”: false,
    “addressVerified”: “”,
    “crtDt”: “2020-05-20T14:49:45.003+0000”,
    “lastUpdtDt”: “2020-05-20T14:49:45.003+0000”
    },
    “customerTags”: [
    {
    “customerTagId”: 18,
    “customerId”: 4,
    “tagDetails”: {
    “tagId”: 10,
    “tagName”: “test”,
    “tagColor”: “yellow”,
    “userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
    “crtDt”: “2020-08-03T22:21:55.402+0000”,
    “lastUpdtDt”: “2020-08-03T22:21:55.402+0000”
    },
    “crtDt”: “2020-08-03T21:28:51.495+0000”,
    “lastUpdtDt”: “2020-08-03T21:28:51.495+0000”
    },
    {
    “customerTagId”: 19,
    “customerId”: 4,
    “tagDetails”: {
    “tagId”: 11,
    “tagName”: “test1”,
    “tagColor”: “red”,
    “userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
    “crtDt”: “2020-08-03T22:21:55.402+0000”,
    “lastUpdtDt”: “2020-08-03T22:21:55.402+0000”
    },
    “crtDt”: “2020-08-03T21:33:59.216+0000”,
    “lastUpdtDt”: “2020-08-03T21:33:59.216+0000”
    }
    ],
    “crtDt”: “2020-05-20T14:49:45.003+0000”,
    “lastUpdtDt”: “2020-05-20T14:49:45.003+0000”
    },

    below is the input for jqxGrid building code
    how to map multiple tagColor in datafields

    const source: any = {
    localdata: this.allCustomers,
    datatype: ‘json’,
    datafields: [
    { name: ‘customerId’, type: ‘number’ },
    { name: ‘customerName’, type: ‘string’ },
    { name: ‘companyName’, type: ‘string’ },
    { name: ‘customerMarketPlace’, type: ‘string’ },
    { name: ‘customerEmail’, type: ‘string’ },
    { name: ‘customerPhone’, type: ‘string’ },
    { name: ‘customerAddrId’, type: ‘number’ },
    { name: ‘city’,map: ‘customerAddr>city’, type: ‘string’ },
    { name: ‘state’,map: ‘customerAddr>state’, type: ‘string’ },
    { name: ‘country’,map: ‘customerAddr>country’, type: ‘string’ },
    { name: ‘crtDt’, type: ‘date’ },
    { name: ‘lastUpdtDt’, type: ‘date’ }
    ],
    };


    Hristo
    Participant

    Hello wpd,

    Please, take a look at this demo:
    https://stackblitz.com/github/jqwidgets/angular/tree/master/grid/defaultfunctionality/
    You could include this field as an additional datafield option.
    After that, as in the demo, you could use the sixth argument of the cellsrenderer callback which will have information for the new field.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    wpd
    Participant

    Thanks for reply
    My problem here is with mapping result with datafiled. my json response is nested response

    `{
    “customerId”: 4,
    “userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
    “customerName”: “test”,
    “customerFName”: null,
    “customerLName”: null,
    “companyName”: “”,
    “customerMarketPlace”: “”,
    “customerEmail”: “test.java@gmail.com”,
    “customerPhone”: “2039988796”,
    “customerAddr”: {
    “addressId”: 4,
    “customerName”: “”,
    “companyName”: “”,
    “addressType”: “test”,
    “street1”: “567 Green Hill Rd”,
    “street2”: “APT 567”,
    “street3”: “”,
    “city”: “Farmington Hills”,
    “county”: “”,
    “state”: “MI”,
    “postalCode”: “48335”,
    “country”: “United States”,
    “residential”: false,
    “addressVerified”: “”,
    “crtDt”: “2020-05-20T14:49:45.003+0000”,
    “lastUpdtDt”: “2020-05-20T14:49:45.003+0000″
    },
    <em>”customerTags”: [
    {
    “customerTagId”: 18,
    “customerId”: 4,
    “tagDetails”: {
    “tagId”: 10,
    “tagName”: “test”,
    “tagColor”: “yellow”,
    “userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
    “crtDt”: “2020-08-03T22:21:55.402+0000”,
    “lastUpdtDt”: “2020-08-03T22:21:55.402+0000”
    },
    “crtDt”: “2020-08-03T21:28:51.495+0000”,
    “lastUpdtDt”: “2020-08-03T21:28:51.495+0000”
    },
    {
    “customerTagId”: 19,
    “customerId”: 4,
    “tagDetails”: {
    “tagId”: 11,
    “tagName”: “test1”,
    “tagColor”: “yellow”,
    “userKey”: “ccb34aed-c6a2-41c4-9251-dcdfd2b2d000”,
    “crtDt”: “2020-08-03T22:21:55.402+0000”,
    “lastUpdtDt”: “2020-08-03T22:21:55.402+0000”
    },
    “crtDt”: “2020-08-03T21:33:59.216+0000”,
    “lastUpdtDt”: “2020-08-03T21:33:59.216+0000”
    }
    ],</em>

    “crtDt”: “2020-05-20T14:49:45.003+0000”,
    “lastUpdtDt”: “2020-05-20T14:49:45.003+0000”
    },`

    in customerTags i have multiple tagColor fields how to map this to datafiled to render data.

    I know about cellrenderer i dont have any issue with that below is my code

    {
    text: ‘Tags’, width: ‘10%’, cellsrenderer: customerTagRender
    }


    Hristo
    Participant

    Hello wpd,

    Please, take a look at this example:
    https://jsfiddle.net/txhi/thysnrL1/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.