need to change the data as per the foreign key value

[Arshad]

I have used the foreign key based on the documentation of the grid. It works but when changing the data, the changed dropdown is not showing. 

index.js

ej.base.enableRipple(true);

var hostUrl = 'https://secsystemeventsapi.azurewebsites.net/'; 

var data = new ej.data.DataManager({ 

url: hostUrl + 'api/Devices', 

adaptor: new ej.data.WebApiAdaptor(), 

offline:true  

});

var countryData = [{name : 'Gateway',id : 1},

{name : 'Accelometer',id : 2},

{name : 'PanicButton',id : 3},

{name : 'Motion',id : 4},

{name : 'Smoke',id : 5},

{name : 'GlassBreak',id : 6},

{name : 'DoorContact',id : 7}]

var grid = new ej.grids.Grid({

dataSource: data,

editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: '#dialogtemplate' },

toolbar: ['Add', 'Edit', 'Delete'],

columns: [

{

field: 'deviceID', headerText: 'Device ID', textAlign: 'Center',

width: 100, defaultValue: '', isPrimaryKey: true

},

{

field: 'deviceTypeID', headerText: 'Device Type ID', textAlign: 'Center',

validationRules: { required: true }, editType: 'dropdownedit', width: 100, defaultValue: '',foreignKeyValue: 'name', foreignKeyField: 'id',dataSource:countryData

},

{

field: 'serialNO', headerText: 'Serial No',

validationRules: { required: true }, textAlign: 'Center', width: 100, defaultValue: ''

},

{

field: 'version', headerText: 'Version',validationRules: { required: true }, textAlign: 'Center',

width: 100, defaultValue: ''},

{

field: 'brandName', headerText: 'Brand Name',validationRules: { required: true }, textAlign: 'Center',

width: 100, defaultValue: ''

},

{

field: 'fwid', headerText: 'FWID', textAlign: 'Center', width: 100, defaultValue: ''

}

],

actionComplete: function(args) {

if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {

var data = args.rowData;

                // Convert Widget for the ShipCountry field

                new ej.dropdowns.DropDownList({value: data.deviceTypeID, popupHeight: '300px', floatLabelType: 'Always',

                dataSource: countryData, fields: {text: 'name', value: 'id'}, placeholder: 'Device Type ID'},

                args.form.elements.namedItem('deviceTypeID'));

                if (ej.base.Browser.isDevice) {

                args.dialog.height = window.innerHeight - 90 + 'px';

                args.dialog.dataBind();

                }

                // Set initail Focus

                if (args.requestType === 'beginEdit') {

                args.form.elements.namedItem('serialNO').focus();

                } else {

                args.form.elements.namedItem('deviceID').focus();

                }

            }

            

        }

    });

grid.appendTo('#Grid');

kindly help me.

thanks.

[Thiyagu Subramani]

Hi Arshad, 

Thanks for contacting Syncfusion forum. 

Based on your reported information we have prepared a sample and your reported issue may occurs in while changed dropdown value (deviceTypeID ) as in string in actionBegin event. So for this case we suggest to use below code in sample level. 

actionBegin: function (args) { 

    if (args.requestType === 'save') { 

      args.data.deviceTypeID = parseInt(args.data.deviceTypeID) 

    } 

  } 

Please refer the below sample for reference. 

Sample link : https://stackblitz.com/edit/qtlsyt-6i8dxz?file=index.js 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.