JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums General Discussions How to render nested data (tags structure) in grid

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #104314
    pkz
    Blocked
    Up
    0
    Down

    Hi,

    I have the following structure for each row:

    
    
    {
    "_id": "2",
    "symbol": "sym2",
    "open_date": "2029-01-11",
    "_type": "t2",
    "currency": "EUR",
    "quantity": 312,
    "tags": [
    {
    "tag": "G3_TAG-ABC",
    "group_name": "#0000ff",
    },
    {
    "tag": "G2_TAG-DEF",
    "group_name": "#00ff00",
    },
    {
    "tag": "G_TAG3",
    "group_name": "#ff0000",
    }
    ],
    },
    
    

     

    How do I render the nested tag as a tags in each row? and if I want to assign a color to the tag based on group_name – how can I do that?

    I tried get cell value based on this guide, but it does not work and instead it renders as objects as string:

    
    
    {label: "tags", dataField: "tags", template: 'tags', width: 'auto', getCellValue: (id, dataField, data) => {
    return data.tag;
    }
    
    

     

    How an I achieve G3_TAG-ABC, G2_TAG-DEF, G_TAG3 each with correct color?

     

    #104321
    ivanpeevski
    Participant
    Up
    1
    Down

    Hi pkz,

     

    “data” represents the entire row object. So to create tags, you can use:

    return data.tags.map(el=>el.tag)

     

    This transforms the cell value from an array of objects to a comma separated string.

     

    Best regards,
    Ivan Peevski

    Smart UI Team
    https://www.htmlelements.com/

    #104323
    pkz
    Blocked
    Up
    0
    Down

    Hi,

    I see this error:

    I have shared this question as part of my email support request. I hope you can take a look at it.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.