Dependent list in field in Grid

[Santy]

Hello, I have a grid with several fields, one of them is a select list (doc_id) and the values of said list (datasource), must be updated according to the "Period" field.How can I update the datasource values every time the "Periodo" changes?The data corresponding to the "Periodo" is returned through ajax, but I don't know how to update the "doc_id" field through javascript

The "doc_id" field is declared as follows

To perform the ajax request, I use the following code. What is between the lines is where the action should be in order to update the grid datasource.

The request through POST, returns the corresponding data every time the "Periodo" changes

[Rajapandiyan Settu]

Hi Santy,

Thanks for contacting Syncfusion support.

You can achieve your requirement by using cellEditTemplate feature of Grid. In which you can dynamically change the dataSource of dropdown.

cellEditTemplate: https://ej2.syncfusion.com/javascript/documentation/grid/editing/edit-types/#custom-editors-using-template

In the change event of period DropDown, you can dynamically change the dataSource for ShipCountry column. Find the below code example and sample for more information.

function periodChange(args) {

  serverData.executeQuery(new ej.data.Query().where('EmployeeID', 'equal', args.value).take(5))

    .then((e) => {

      // get new data

      var newData = ej.data.DataUtil.distinct(e.result.d, 'ShipCountry', true);

 

      // dynamically change the dropdown dataSource of ShipCountry column

      if (grid.isEdit) {

        var shipCountryEle = grid.element.querySelector('#' + grid.element.id + 'ShipCountry'

        );  // grid element id + field name

        if (shipCountryEle) {

          shipCountryEle.ej2_instances[0].dataSource = newData;

        }

      } else {

        shipCountryData = newData;

      }

    });

}

 

Sample: https://stackblitz.com/edit/sqh78o?file=index.js,index.html

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[Santy]

I appreciate your response, it was very helpful.

I found a problem, when I change the value "ShipCountry" by "EmployeeID" referring to an ID.

The value returned to me is the ID and not the name. How can I fix that?

Modify the example so that it can be better understood

https://stackblitz.com/edit/sqh78o-623t7v?file=index.js,index.html

[Rajapandiyan Settu]

Hi Santy,

Thanks for your update.

By analyzing your query we suspect that you want to save the Dropdown’s text to the Grid dataSource. If so, you can achieve this by returning the Dropdown’s text in the read event of cellEditTemplate.

        read: (args) => {

          return ddObj.text; // return the dropdown’s text which will be saved to the Grid dataSource

        },

 

Sample: https://stackblitz.com/edit/sqh78o-rksqwy?file=index.js,index.html

Note: If the Dropdown’s value field (EmployeeID) contains duplicate data in the Dropdown’s dataSource, then the dropdown always selects its first value. This is the behavior of the Dropdown.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[Santy]

It worked perfectly, thank you very much

[Rajapandiyan Settu]

Hi Santy,

We are glad to hear that you have achieved your requirement with the solution provided.

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S