dropdownlist validation

[jsu]

Hi Team,

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

We use @Html.EJS().DropDownList

Thanks

[Sureshkumar P]

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.  

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_editTemplate_dropdownlist_validation1717585507.zip   

 

UG: https://ej2.syncfusion.com/documentation/form-validator/validation-rules/?no-cache=1  

 

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.