Dropdown not updating after changing the value from the code

1 Answer 76 Views

DropDownList

Daniela asked on 26 Nov 2021, 09:19 AM

Hello,

I have a simple dropdown and I update the value of the id in the code but the value is not reflected, the code is below, some help would be appreciated. (The dropdown I am trying ot update is regulation)

              <DropDownList 
                  disabled={modelDropDownDisable}           
                  data={compModelData}                   
                  onChange={(e) => {    
                      setCompModelText(e.target.value);
                      const compressorModelSelected = compressorsModelData.filter(function(elem) {
                        //return false for the element that matches both the name and the id
                        return (elem.fk_brand_id == compBrandId.id && elem.comp_model == e.target.value)
                      }); 
                      if(compressorModelSelected.length>0) {
                        debugger
                        setCompressorModelSelectedRegulation(compressorModelSelected[0].fk_comp_regulation_id);
                      }
                    }
                  }
                  value={compModelText}
/>
          <DropDownList
                      value={compressorModelSelectedRegulation}
                      textField="text"
                      dataItemKey="id" 
                      onChange={(e) => {
                        setCompressorModelSelectedRegulation(e.target.value);
                      }}
                      data={compRegulations}
                    /> 

1 Answer, 1 is accepted

answered on 30 Nov 2021, 07:16 AM

Hello, Daniela,

In order to update the dropdown, it is important to pass the entire object in the value prop with the correct ID, and not just the id of the item. In order to do that it is necessary to find the entire object by looping through the data and finding the object only through its ID. Setting the entire object in your setCompressorModelSelectedRegulation function should successfully update the data, similar to this example:

https://stackblitz.com/edit/react-iqbwri?file=app/main.jsx

I hope this helps.

Regards,Filip Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniela

commented on 30 Nov 2021, 08:39 AM

ok, thanks

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Dropdown not updating after changing the value from the code

1 Answer, 1 is accepted