JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid Mapping dataField to complex JSON structure

This topic contains 10 replies, has 5 voices, and was last updated by Avatar Yavor Dashev 4 months, 1 week ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #101184
    Avatar
    Nikhil Jain
    Participant

    Hi,

    The example provided in the “demos” section is quite clear and uses a standard data structure, data[{Date:'', value1:7, value2:77}], the coresponding series have data fields value1 and value2.

    I have below Complex JSON structure in my code. I am unable to bind the data.
    <div>
    <div>[</div>
    <div>  {</div>
    </div>
    <div>
    <div>       “Group”: {</div>
    <div>           “dataField_name_1”: {</div>
    <div>           “value”: null,</div>
    <div>           },</div>
    <div>
    <div>           “dataField_name_2”: {</div>
    <div>           “value”: null,</div>
    <div>           },</div>
    </div>
    <div>       }</div>
    <div>   }</div>
    <div>]</div>
    </div>
    <div>previously we were using JQXGrid and they have provided “map” attribute to bind the data to Complex JSON structure.</div>
    <div>datafields: [</div>
    <div>      { name: ’empName’ },</div>
    <div>      { name: ‘age’ },</div>
    <div>      { name: ‘id’, map: ‘department>id’ },</div>
    <div>      { name: ‘name’, map: ‘department>name’ },</div>
    <div>      { name: ‘author’ }</div>
    <div>],</div>
    <div> How do you map complex structures?</div>
    <div></div>
     

    #101185
    Avatar
    admin
    Keymaster

    Hi Nikhil Jain,

    We are working on our next release coming in mid of December which will add support for dataFields mapping, binding to CSV & TSV. At present, there is no built-in way to map fields in Smart.Grid.

    Best regards,
    Peter Stoev

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

    #101242
    Avatar
    Nikhil Jain
    Participant

    Hi,
    when will you have next release.

    Thanks
    Nikhil Jain

    #101243
    Avatar
    admin
    Keymaster

    Hi Nikhil Jain,

    Could you post an example how you exactly try to bind the data grid? I just want to check whether the upcoming release which is now in a test phase covers your scenario.

    Looking forward to your reply.

    Best regards,
    Peter Stoev

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

    #101244
    Avatar
    Nikhil Jain
    Participant

    Hi Peter,

    Please find the below data structure which we are using.

    [
    {
    “Group1”: {
    “Group2”: [
    {
    “DataField1”: [
    {
    “value”: “abc”
    },
    {
    “value”: “def”
    }
    ]
    }
    ]
    }
    },
    {
    “Group1”: {
    “Group2”: [
    {
    “DataField2”: [
    {
    “value”: “abf”
    },
    {
    “value”: “xyz”
    }
    ]
    }
    ]
    }
    }
    ]

    Looking forward to your reply.

    Thanks
    Nikhil Jain

    #101306
    Avatar
    Nikhil Jain
    Participant

    Hi Peter,

    Can you please update when mapping to complex JSON will be released in Data Grid.

    Looking forward to your reply.
    Thanks,
    Nikhil Jain

    #101307
    Avatar
    admin
    Keymaster

    Hi Nikhil Jain,

    jqxGrid like mapping is now supported in the latest version. If you wish, you can try it.

    Best regards,
    Peter Stoev

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

    #101376
    Avatar
    dusrkdldlr
    Participant

    Can I see an example?

    #101385
    Avatar
    dusrkdldlr
    Participant

    I was solve it used template

    #101790
    Avatar
    l.garcia
    Participant

    I have this situation
    How setting value of field company whith description value?
    <div>
    <div> “data”: [</div>
    <div>        {</div>
    <div>            “_id”: “605b0c6d5b99d60f23af2324”,</div>
    <div>            “nroOffer”: “OP0014-21”,</div>
    <div>            “offerDate”: “2021-01-11T23:00:00.000Z”,</div>
    <div>            “company”: {</div>
    <div>                “_id”: “5ec2a22aa41b9eeb2125180a”,</div>
    <div>                “description“: “ppppppp”,</div>
    <div></div>
    </div>

    #101800
    Avatar
    Yavor Dashev
    Participant

    Hi I.garcia,

    I would like to share with you a code snippet which showcases the functionality you want to achieve.

                dataSource: new window.Smart.DataAdapter({
                    dataSource: [
    					{ 
    						"empName": "Peter", 
    						"age": "33", 
    						"company": { "id": "1234", "description": "Sales" },
    						"author": "Johny Bravo"
    					}
    				],
                    dataFields: [
                        { name: 'empName', dataType: 'string' },
                        { name: 'age', dataType: 'int' },
                        { name: 'id',map: 'company.id', dataType: 'int' },
                        { name: 'name', map: 'company.description', dataType: 'string' },
                        { name: 'author', dataType: 'string' }
                    ]
                }),
                columns: 
    			[
    			  { label: 'Name', dataField: 'empName', width: 250 },
    			  { label: 'Age', dataField: 'age', width: 250 },
    			  { label: 'Department Name', dataField: 'name', width: 180 },
    			  { label: 'Author', dataField: 'author'}
                ]

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

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

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

You must be logged in to reply to this topic.