Dynamically change dropdownlist options when editing the cell

[Madhu]

Hi,

I have to develop a feature wherein I have list of rows in the grid with a unique id of every record. In each record i have a dropdownlist type column and I want to asynchronously load the options of this list when starting to edit the cell. This asynchronous call needs to fetch the options using AJAX call using the row id as an input. 

I have tried cellEdit function but cannot understand how to do the async call and then update the options. Please note that I am using the functional React components.

Any help would be greatly appreciated!

[Pon Selva Jeganathan]

Hi Madthu, 

 

Thanks for contacting syncfusion forum 

 

Query: how to do the async call and then update the options. 

 

We have achieved your requirement by using the actionBegin event of the treegrid. In the actionBegin event with args.requestType as ‘beginEdit’, We call the asynchronous function and set the data in dropdown component. 

 

Please check the below code snippet, 

 

function actionbegin(args) { 

        var dropdata; 

        var treegrid=document.getElementsByClassName('e-treegrid')[0].ej2_instances[0]; //treegrid instance 

        

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

      

  var ajax = new ej.base.Ajax({url:'/Home/Getdata', 

                           data:args.rowData.TaskId, //here we have pass the task id value// you can use row id value instead of the task id value 

                            type:'POST'}); 

      treegrid.showSpinner(); 

      ajax.send(); 

     ajax.onSuccess = function (res) { 

     treegrid.hideSpinner(); 

     console.log(JSON.parse(res)); 

     var dd= document.getElementById('TreeGrid_gridcontrolDuration').ej2_instances[0]; //dropdown instance 

     var dddat =JSON.parse(res); 

     if(dd!= null){ 

          dd.dataSource = dddat; //assign the data source 

          dd.query= new ej.data.Query().select(['Priority']); 

          dd.fields= { text: 'Priority',value:"Priority" }; 

          dd.placeholder='Select a game'; 

                                

    } 

   } 

 

… 

 

 

 

Please check the below screenshot, 

a 

 

If the above solution does not meet your requirement, kindly get back to us with the below requested details, 

 

1. Please share the detailed explanation of your requirement
2. Confirm whether you are using Grid/ TreeGrid component.
3. Share us a video demo/screenshot of your requirement.
4. Share the complete tree grid code example

 

The provided information will be helpful to provide you response as early as possible.   

Regards,
Pon selva 

[Madhu]

Thank you Syncfusion team. I can confirm that I was able to make it work

[Farveen Sulthana Thameeztheen Basha]

Hi Madhu, 

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you. 

Regards, 

Farveen sulthana T