Combobox in MVC

[jonathan]

I have a combobox that gets populated with a datasource.  How can I disable a single item in the combobox based on the value of a different form field?  For example, the combobox has 5 items, A, B, C, D, and E and they are all active.  There is a form field called letterDoc and if letterDoc has a value of 8, I want to disable item A.

 

Is this possible?

 

Thank you.

 

[Lyuboslav]

Hello, Jonathan,

To reach this scenario, first, you need to handle the "open" and "select" events of the ComboBox widget. In the "open" I get the field in which the value we want to disable from ComboBox in my way is TextBox. After that get the all ComboBox items and if the value of an item in ComboBox is equal to the item in TextBox I set the "markToDisable" property to true:

open:(e)=>{
                  var fields = [...($("#form").data("kendoForm").element[0])];
                  var valueToDisable = fields[0].value;
                  var ComboBox = e.sender;
                  var ComboBoxItems = ComboBox.dataSource.data();
                  ComboBoxItems.forEach(x=>{
                    if(x.ProductName != valueToDisable){
                      x.set("markToDisable",false);
                    }
                    if(x.ProductName == valueToDisable){
                      x.set("markToDisable",true);
                      return;
                    }
                  });
                },

After that in the "select" event, if the user tries to select the element to which I set the "markToDisable" property, I prevented the selection.

select:(e)=>{
                  if(e.dataItem.markToDisable == true){
                    e.preventDefault();
                  }
                },

All of the above examples are summarized in the sample dojo example. Also, for better demonstration, I made a short screencast.

I hope this will help you.

Regards,
Lyuboslav
Progress Telerik