JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › How to render nested data (tags structure) in grid
- This topic has 3 replies, 3 voices, and was last updated 1 year, 5 months ago by sarahcuneiform22.
-
AuthorPosts
-
January 27, 2023 at 9:19 pm #104314pkzBlocked
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?January 30, 2023 at 12:47 pm #104321ivanpeevskiParticipantHi 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 PeevskiSmart UI Team
https://www.htmlelements.com/January 30, 2023 at 2:42 pm #104323pkzBlockedHi,
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.
July 3, 2023 at 6:05 am #107414sarahcuneiform22ParticipantTo render nested data (tag structure) in a grid, you can use recursion or a hierarchical data structure.
Define your grid structure: Determine the columns and rows needed for your grid layout.
Prepare your nested data: Ensure that your nested data is in a suitable format, such as an array of objects with each object representing a tag and containing properties for the tag’s name, attributes, and child tags.
Implement a recursive function: Create a function that can iterate through the nested data and render each tag and its children. The function should take the current tag as input and generate the necessary HTML or UI elements for rendering.
Render the grid: Use your recursive function to iterate through the nested data and generate the grid elements dynamically. The function should handle cases where a tag has child tags by calling itself recursively to render the nested structure within the grid.
By using recursion or a hierarchical approach, you can traverse the nested data structure and render each tag and its children in the desired grid layout.
-
AuthorPosts
- You must be logged in to reply to this topic.