Get a value bound to a droptownlist

[Luis Guerrero]

I have a list of products and their prices.

id	Item	Price
1	Movimiento 1	20
2	Movimiento 2	25.5
3	Movimiento 3	10

I need that when I select the item in the droptownlist, the price that corresponds to that selected item is automatically charged.

Is there a way to do this with the data preloaded in the datasource without doing an iterated search?

thanks for your help.

[Vinitha Balasubramanian]

Hi Luis Guerrero,

Greetings from Syncfusion support.

Query : Get a value bound to a dropdownlist

Based on your query, we have prepared a sample to achieve your requirement. On that sample, we have automatically changed the column (‘price’) value while changing the column (‘Item’) value using the below code.

Kindly refer the below code and sample for your reference.

[index.js]

 

      {

      field: 'Item',

      headerText: 'ITEM',

      editType: 'dropdownedit',

      edit: {

        create: function () {

          var countryElem = document.createElement('input');

          return countryElem;

        },

        read: function () {

          return countryObj.text;

        },

        destroy: function () {

          countryObj.destroy();

        },

        write: function (args) {

          countryObj = new ej.dropdowns.DropDownList({

            dataSource: drpdwnData,

            text: args.rowData[args.column.field],

            fields: { value: 'Item', text: 'Item' },

 

            change: function (e) {

              var valObj = new ej.data.DataManager(drpdwnData).executeLocal(

                new ej.data.Query().where('Item', 'equal', e.value)

              );

              var grid = document.getElementById('Grid').ej2_instances[0];

              var priceInputEle = grid.editModule.formObj.element.querySelector(

                "tbody td input[name='Price']"

              );

              var priceInputInstance = priceInputEle

                .closest('.e-control-wrapper')

                .querySelector('.e-control').ej2_instances[0];

              priceInputInstance.value = valObj[0].Price;

            },

            placeholder: 'Select a country',

            floatLabelType: 'Never',

          });

          countryObj.appendTo(args.element);

        },

 

Sample : https://stackblitz.com/edit/hphvp2-3wzj4f?file=index.js

Please get back to us if you need further assistance with this.

Regards,

Vinitha Balasubramanian