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
close icon

ASP NET MVC DropDownList Refresh Data When Using URL And Required Validation Rule

I am using the DropDownList in a Dialog and have 2 questions:

1) How do I refresh the data? The datasource is a URL
2) I want the require that the user select a value However, if doesn't seem to work. (Validation does work for an field right number the drop down list that I have put in as a test)

@{Html.EJ().Dialog("addToGroupDialog").Title("Add To Group").Containment(".control").IsResponsive(true).ContentTemplate(@
@Html.EJ().DropDownList("addToGroupName").Datasource(ds => ds.URL("GetGroups")).DropDownListFields(f => f.Text("Name").Value("Id")).WatermarkText("Select a group").Width("100%").ValidationMessage(vm => vm.AddMessage("required", "* Required")).ValidationRules(vr => vr.AddRule("required", true))
@Html.EJ().Button("addToGroupOkButton").Type(ButtonType.Submit).Size(ButtonSize.Medium).Height("30").Width("100").Text("OK").ClientSideEvents(s => s.Click("onAddToGroupOkButtonClick"))
).EnableModal(true).Width(300).MinWidth(250).MinHeight(200).IsResponsive(true).ShowOnInit(false).Render();}

function onAddAllToGroupClick() {
var dialog = settings.$addToGroupDialog;
       // I would like to refresh the data in the DropDownList before it opens
dialog.ejDialog("open");
}

function onAddToGroupOkButtonClick(evt) {
var form = $("#addToGroupDialogForm");
// this is always true even when no item has been selected
alert("Valid: " + form.valid());
}
Regards, Jeff

1 Reply

KC Kasithangam C Syncfusion Team August 3, 2016 03:57 AM UTC

 Hi Jeffrey, 
Thanks for contacting Syncfusion support. 
Query1: How do I refresh the data? The datasource is a URL 
Datasource binded in the initial rendering of Dropdownlist control. If you want to refresh the data before dialog open, then you can set the datasource again in Dropdownlist control as shown below code: 
<code> 
function onclick() { 
        var dialog = $("#basicDialog").data("ejDialog"); 
        var dropObj=$("#addToGroupName").data("ejDropDownList") 
        dropObj.option({ 
            dataSource: dropObj.model.dataSource.dataSource.json 
        }); 
        dialog.open(); 
    } 
</code> 
Query 2:  I want the require that the user select a value However, if doesn't seem to work. (Validation does work for an  field right number the drop down list that I have put in as a test) 
To achieve the validation for dropdownlist control, we need to add the validator code in your script section as shown below code: 
<code> 
$.validator.setDefaults({ 
            ignore: [], //to validate all fields(hidden also) 
            errorClass: 'e-validation-error', //if we don’t set custom class, default “error” class will be added 
            errorPlacement: function (error, element) { 
                $(error).insertAfter(element.closest(".e-widget")); 
            } 
            // any other default options and/or rules 
        }); 
</code> 
Also, we have prepared the sample based on this and it is available under the following link: 
Sample: Sample 
We have showcased this validation functionality in the below UG link: 
Regards, 
Kasithangam 


Loader.
Live Chat Icon For mobile
Up arrow icon