JqxGrid Key Value issue

[akramParticipant]

I have a two grid, one is the main grid and the other is the child grid of the main grid. One click of a toolbar button of the main grid, I open up the child grid and display the available data. The user selected the rows and clicks Add.

The data gets added to the main grid, but it displays key and not value (few columns in the grid are dropdownlist)

I have added the image for reference https://imgur.com/a/iSebASD
Let me explain the way I have coded this.

1.First when the page loads, the dataAdapter of the main and child grid are empty.
2.On click of the Add Item button, I trigger an axios call and get the data like this

getChildGridData : function () {
    // alert();
    var _this = this;
    if(_this.childGridData.length === 0){
        axios
            .get('/admin/forms/'+JSON.parse(_this.formData).formID+'/getAllItemMaster/listDataSource')
            .then(response => {
                console.log('fetching data');

                for(var z = 0 ; z < _this.gridValues.length ; z++){
                   // i am doing this so that I can set the source of the dropdown
                    if(_this.gridValues[z]['columntype'] === 'dropdownlist'){
                        var currColumnID = _this.gridValues[z]['datafield'];
                        var currColumnValue = _this.gridValues[z]['datafield'].split('_')[0]+'_value';
                        for(var cD = 0 ; cD < response.data.length ; cD++){
                             // here 
                            _this.gridValues[z].values.source.push( {
                                [currColumnID] : response.data[cD][currColumnID],
                                [currColumnValue] : response.data[cD][currColumnValue]

                            });

                        }
                    }

                }

   
                this.refreshDataField(_this.gridValues,response.data);
                _this.childGridDataFields = _this.gridValues;
                _this.childGridData = response.data;

            })

        ;
    }

}

Once the data is got then I do this to set the dataAdapter to the main grid.

refreshDataField : function(_dataArray,x){
    console.log('asdfasdf')
    this.dataAdapter = new jqx.dataAdapter({
        datatype: 'array',
        datafields : _dataArray,
        localdata : [x]
    });
    // this.dataAdapter.dataBind();
    // this.$refs.mainGrid.refresh();
}

The same method I follow for child grid, but it works fine and displays key:display correctly but why is the main grid not working as expected?

Please feel free to message if it is not understood.

[MartinParticipant]

Hello akram,

It seems that the issue is in how the source of the main grid and its datafields are set.
Could you provide a working sample of this case, where the data is seen, so we could help you?

I would suggest you to check this Demo about dropdownlist columns.

Best Regards,
Martin

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

[Author]

Posts