We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Drop down list doesn't select item

Drop down list doesn't select item

Hello,

I'm using the dropdownlistfor control in a dialog. The datasource is a list of objects of type {Id : Guid. Name : String}. 

This is the view code: 
  @Html.EJ().DropDownListFor(model => model.ProviderId, new DropDownListProperties()
           {
               DataSource = Model.Providers,
               DropDownListFields = new DropDownListFields() { Text = "Name", Id = "Id", Value = "Id" },
               ValidationRules = new Dictionary<string, object> { { "required", true } },
               ValidationMessage = new Dictionary<string, object> { { "required", ModelResource.ProviderErrorMessage } },
               WatermarkText = "Select a provider",
               Enabled = Model.EnableAllFields,
               Width = "100%"
           })


When the dialog is open, no item is selected in the drop-down, even if the ProviderId in the Model has a value. 

Also, the validators are no longer working, they are not triggered even if I'm not selecting an item before submitting the form. I am currently including the file 'ej.unobtrusive.min.js'. do I have to include other files? 

I have recent;y updated the syncfusion controls to the latest version (14.1400.0.46). Before the update, there was no problem with these controls.


Thank you!





4 Replies
KR Keerthana Rajendran Syncfusion Team June 1, 2016 05:57 AM UTC

Hi Catalina, 
 
Thank you for contacting Syncfusion support 
 
Query 
Solution 
1. When the dialog is open, no item is selected in the drop-down, even if the ProviderId in the Model has a value.  
We suggest you to use selectedIndex property to make an item selected in dropdown when dialog is open. 
 
<code> 
@Html.EJ().DropDownListFor(model=>model.providers, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["ddl"]).WatermarkText("Select a Provider").SelectedIndex(2) 
</code> 
 
 
2. the validators are no longer working, they are not triggered even if I'm not selecting an item before submitting the form. I am currently including the file 'ej.unobtrusive.min.js'. do I have to include other files?  
We  suggest you to refer jquery.validate.min.js and jquery.unobtrusive.min.js in script section. 
 
In our previous versions jquery validation will work fine .After 14.1 the input element was hidden in DropDownList so jquery will not validate the hidden element. So we have to configure validator settings manually.We have prepared a sample for validation  
 
Please refer the sample link: 
 
 
 
<code> 
<script type="text/javascript"> 
            $.validator.setDefaults({ ignore: ":hidden:not('span.e-ddl input:hidden')" }); 
 
            $(function () { 
                var target = $("#providers").data("ejDropDownList"); 
                target.setModel({ 
                    change: function () { 
                        this.wrapper.find("input:hidden").valid(); 
                    } 
                }); 
            }); 
        </script> 
</code> 
 
 
 
Regards, 
Keerthana. 
 
 


CV Catalina Vatuiu June 1, 2016 07:05 AM UTC

Thank you for your answer!

The validation doens't work anymore for other syncfusion controls (datetimepicker, ejmaskedit), the solution is similar with the one you provided for the dropdown? Could you give me some examples?



CV Catalina Vatuiu June 1, 2016 08:11 AM UTC


Also, there is no way of selectong an item by value in a dropdown list? Considering that normally in the model, the value of a field is saved, and not the index of the item in the list, I think this apporach doesn't use the MVC principles very well...

DT Dhivyalakshmi Thirumurugan Syncfusion Team June 2, 2016 03:50 PM UTC

Hi Catalina,  
 
Thanks for the update. 
 
Query#1): The validation doesn't work anymore for other syncfusion controls (datetimepicker, ejmaskedit).  Could you give me some examples?  
  
You can perform validation on DateTimePicker and MaskEdit Controls. Please get the sample from the below location.  
  
By default, jQuery contains some settings for the validation and it ignores hidden elements in from validation. But some of our EJ components (“Checkbox”, “MaskEdit”,”NumericTextbox”, “CurrencyTextbox”, “PercentageTextbox”, “RTE”, “Dropdownlist” ) contains hidden fields with values, these values need to be validated at here.   
So to perform the validation properly, you have to set “[]” in “ignore” API of “$.validator.setDefaults”. If validation gets fail, in-built “error” class will be added to corresponding element. Here you can specify a custom class with your own style using “errorClass” API and you can place the error message in necessary position using “errorPlacement” API. Refer following code block to customize the default jQuery validation settings.  
  
           
      $.validator.setDefaults({    
           //to validate all fields(hidden also)    
           ignore: [],    
           //if we don’t set custom class, default “error” class will be added    
           errorClass: 'e-validation-error',    
           //it specifies the error message display position    
           errorPlacement: function (error, element) {    
               $(error).insertAfter(element.closest(".e-widget"));    
           }    
       });    
  
  
Previously, we have specified above settings in source level, but it creates problems in validation behavior while having multiple controls in a form. Also user not able to override the inner settings, which is available in source. In form validation, these settings are common for all controls that is available in the form. So you need to provide this custom settings in sample level and you can customize it as per your requirement.  
  
In 14.1.0.41 version, we have made breaking change and you can find it through our release notes.  
  
  
So, before rendering Maskedit control, you have to specify above mentioned settings in your sample.  

Query#2): Also, there is no way of selecting an item by value in a dropdown list? Considering that normally in the model, the value of a field is saved, and not the index of the item in the list, I think this approach doesn't use the MVC principles very well... 
 
To select an item initially you can pass the item’s value via Value property. Please find the code below, 

               
@Html.EJ().DropDownListFor(model=>model.providers, (Syncfusion.JavaScript.Models.DropDownListProperties)ViewData["ddl"]).WatermarkText("Select a Provider").Value("Austin-žHealey")  


We have attached the sample for your reference in the following link. 

Please let us know, if you need any further assistance on this.  
Regards, 
Dhivyalakshmi. 

 


Loader.
Live Chat Icon For mobile
Up arrow icon