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

dropdownlist validation

Hi Team,

Can you please advise how to implement required field validation for dropdownlist in edit template.

We use @Html.EJS().DropDownList

Thanks

1 Reply

SP Sureshkumar P Syncfusion Team December 12, 2019 12:21 AM

Hi jsu, 
 
We could see that you want to set the validation for the column with dropdownlist in edit template. We have created the created the sample with your requirement, in that we have set the validation rules for the dropdownlist of shipCountry column. please refer the below code for example, documentation and sample for more information.  
 
 
 
App.vue  
@Html.EJS().Grid("Validation").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>  
{  
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true"}).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();  
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();  
    col.Field("ShipCountry").HeaderText("Ship Country").ValidationRules(new { required = "true"}).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write"}).Width("150").Add();  
  
}).AllowPaging().PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()  
  
  
<script>  
    var elem;  
    var dObj;  
    var data = @Html.Raw(Json.Encode(ViewBag.DataSource));  
    var shipCountryData = ej.data.DataUtil.distinct(data, 'ShipCountry', true);  
    function create(args) {  
        elem = document.createElement('input');  
        return elem;  
    }  
    function write(args) {  
          
        dObj = new ej.dropdowns.DropDownList({  
  
            dataSource: shipCountryData,  
  
            fields: { text: 'ShipCountry', value: 'ShipCountry' }, placeholder: 'Ship Country'  
        });  
        dObj.appendTo(elem);  
    }  
  
    function destroy() {  
        dObj.destroy();  
    }  
    function read(args) {  
        return dObj.value;  
    }  
</script>  
 
Regards, 
Sureshkumar P.    


Loader.
Live Chat Icon For mobile
Up arrow icon