DropDownlist Validation is not validating

[Bharathi]

Hello I'm trying to validate the dropdownlist and it is not validating.. Below is the code i'm trying.. DropDownlist and Date column is required field and when click the button it populate the grid view.. Even though I'm not selecting dropdownlist value it is not validating and populating the empty grid.


@using DWH.WEB.Models.ViewModel

 

@{

    ViewBag.Title = "test";

}

<div style="background-color: #E3F1F7; text-align: left; vertical-align: middle;">

<h2>>>>test</h2>

</div>

 

 

<table>

<tr>

 

<td>

<div class="section"style="width: 350px;">

 <h4>Select Entity code</h4>

 <div id="ValidateMyContents">

 @(Html.Kendo().DropDownList()

            .Name("dropdownlist")

            .HtmlAttributes(new { style = "width:320px" }) 

            .DataTextField("Text")

            .DataValueField("Value")

            //.OptionLabel("Please Select")

            .OptionLabel(new { Text = "Select Entity", Value = 0 })

                 .DataSource(source =>

                 {

                     source.Read(read =>

                     {

                         read.Action("GetEntityCode", "GLFINBAL");

                     });

                 })

         ) 

         <span class="k-invalid-msg" data-for="dropdownlist"></span>        

 

    </div>

     

 </div>

</td>

 

<td>

<div class="section"style="width: 250px;">

 <h4>Select FiscalYear</h4>

  

        @(Html.Kendo().DatePicker()

              .Name("yearpicker")

              .Start(CalendarView.Decade)

              .Depth(CalendarView.Decade)

              .Format("yyyy")

              .Value("2014")             

              .HtmlAttributes(new { style = "width:250px" })            

        )

    </div>

 

</td>

 

<td>

 

<button id="showGrid" class="k-button" type="button" style="width: 150px">View Report</button><br />

 <span id="status"></span>

</td>

 

</tr>

 

<tr>

<td colspan="3">

 

</td>

 

</tr>

 

</table>

 

 

<script>

 

    $("#showGrid").click(function (e) {

        e.preventDefault();

        $("#status").text("");

        var validator = $("#ValidateMyContents").kendoValidator().data('kendoValidator');

        if (validator.validate()) {

            $("#status").text("Entity was selected");

 

        } else {

            $("#status").text("Entity was not selected");

        }

 

        $("#AjaxGrid").data("kendoGrid").dataSource.read();

        $("#AjaxGrid").css("display", "block");

 

    });

 

 

 

 

 

//    $("#showGrid").click(function () {

//        $("#AjaxGrid").data("kendoGrid").dataSource.read();

//        $("#AjaxGrid").css("display", "block");

//    });

 

    function additionalInfo() {

        var info = $("#dropdownlist").data("kendoDropDownList").value();

        var yearpicker = $("#yearpicker").data("kendoDatePicker").value();       

        return {

            dropdownlist: info,

            yearpicker: yearpicker

        }

    }

     

</script>

[Daniel]

Hello,

How is the required validation specified? If the RequiredAttribute is used for the model property then you should use the same name or the DropDownListFor(recommended) helper:

@(Html.Kendo().DropDownListFor(model => model.PropertyName)
    .HtmlAttributes(new { style = "width:320px" })
    .DataTextField("Text")
    .DataValueField("Value")
    //.OptionLabel("Please Select")
    .OptionLabel(new { Text = "Select Entity", Value = 0 })
     .DataSource(source =>
     {
         source.Read(read =>
         {
             read.Action("GetEntityCode", "GLFINBAL");
         });
     })
)

in order for the validation attributes to be set. Otherwise, you should add the required attribute to the input with the HtmlAttributes method:

.HtmlAttributes(new { style = "width:320px", required="required" })

Also, note that the validator should be initialized only once and not each time the click handler is triggered:

var validator = $("#ValidateMyContents").kendoValidator().data('kendoValidator');

$("#showGrid").click(function (e) {
    e.preventDefault();
    $("#status").text("");
    if (validator.validate()) {
        $("#status").text("Entity was selected");

    } else {
        $("#status").text("Entity was not selected");
    }

    $("#AjaxGrid").data("kendoGrid").dataSource.read();
    $("#AjaxGrid").css("display", "block");
});

Regards,
Daniel
Telerik