jQuery UI Widgets Forums Grid JqxGrid – datafield mapped to sub-object + editing

This topic contains 2 replies, has 3 voices, and was last updated by  andreschardong 8 years, 7 months ago.

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

  • cosostones
    Participant

    Hi,

    I am trying to use a jqxGrid in edit mode.

    In my data, I have a sub-object (moreData).
    Datafield ‘fullName’ is maped to a property off ‘moreData’.

    The grid is well displaying the ‘fullName’.
    But when I edit the fullname and get grid rows, the sub-object is not in each row and the grid has added the property ‘fullName’ at the root.

    As the datafield is maped, I was expecting the grid to keep sub-object ‘modeData’ in each row and updating the fullname in the sub-object.

    Do you know if there is a solution to do that ?
    (i.e. keep maping hierarchy in grid row and edit inside maped property)

    You will find an example below.
    Updated rows are displayed in the console.

    Thanks.

    Alain.

    
     
    var data = [
        {
            moreData : {
                fullName : "Mr Elio Peterson"
            },
            firstname: "Elio",
            lastname: "Peterson"
        },
        {
            moreData : {
                fullName : "Mrs Beate Bein"
            },
            firstname: "Beate",
            lastname: "Bein"
        }
        
    ];
    
     var source = {
         localdata: data,
         datafields: [ 
              {
                 name: 'fullName',
                 type: 'string',
                 map: 'moreData>fullName'
             },  
             {
                 name: 'firstname',
                 type: 'string'
             }, 
             {
                 name: 'lastname',
                 type: 'string'
             }
         ],
         datatype: "array"
     };
    
     var adapter = new $.jqx.dataAdapter(source);
     $("#jqxgrid").jqxGrid({
         width: 400,
         height: 100,
         theme: 'energyblue',
         source: adapter,
         editable: true,
         columns: [
             {
                 text: 'The full name',
                 datafield: 'fullName',
                 columngroup: 'fullName',
                 width: 200
             },
                 {
                 text: 'First Name',
                 datafield: 'firstname',
                 columngroup: 'Name',
                 width: 100
             }, 
             {
                 text: 'Last Name',
                 columngroup: 'Name',
                 datafield: 'lastname',
                 width: 100
             }
         ]
     });
    
     $("#jqxbutton").jqxButton({
         theme: 'energyblue',
         width: 200,
         height: 30
     });
    
     $('#jqxbutton').click(function () {
        var rows = $('#jqxgrid').jqxGrid('getrows');
         console.log(rows);
     });
    
    
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
    <input type="button" style="margin: 50px;" id="jqxbutton" value="Get rows" />
    

    Dimitar
    Participant

    Hi cosostones,

    Regardless of what the mapping is, each row object (member of the array returned by getrows) has a flat structure corresponding to the grid columns. The mapping is only relevant when loading the data.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    andreschardong
    Participant

    Hello Alain,
    Did you solve your problem?
    What was your approach?

    REgards,
    Andre

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

You must be logged in to reply to this topic.