JqxGrid – datafield mapped to sub-object + editing

[cosostonesParticipant]

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" />

[DimitarParticipant]

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/

[andreschardongParticipant]

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

REgards,
Andre

[Author]

Posts