<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ValidationModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% Html.EnableClientValidation(); %>
    <% Html.EnableUnobtrusiveJavaScript(true); %>

<% Html.BeginForm(); %>
DatePicker:
<%= Html.Telerik().DatePickerFor(m => m.LastSupply) %>
<%= Html.ValidationMessageFor(m => m.LastSupply)%>

<br />
NumericTextBox:
<%= Html.Telerik().NumericTextBoxFor(m => m.Number) %>
<%= Html.ValidationMessageFor(m => m.Number) %>

<br />
ComboBox:

<%= Html.Telerik().ComboBoxFor(m => m.Id)
        .BindTo(new List<SelectListItem> 
        {
            new SelectListItem{Text="Item1", Value="1"},
            new SelectListItem{Text="Item2", Value="2"},
            new SelectListItem{Text="Item3", Value="3"}
        })
%>
<%= Html.ValidationMessageFor(m => m.Id) %>

<br />
DropDownList:

<%= Html.Telerik().DropDownListFor(m => m.DllId)
        .BindTo(new List<SelectListItem> 
        {
            new SelectListItem{Text="Item1", Value="1"},
            new SelectListItem{Text="Item2", Value="2"},
            new SelectListItem{Text="Item3", Value="3"},
            new SelectListItem{Text="Item4", Value="4"},
            new SelectListItem{Text="Item5", Value="5"},
            new SelectListItem{Text="Item6", Value="6"},
            new SelectListItem{Text="Item7", Value="7"},
            new SelectListItem{Text="Item8", Value="8"},
            new SelectListItem{Text="Item9", Value="9"},
            new SelectListItem{Text="Item10", Value="10"},
            new SelectListItem{Text="Item11", Value="11"},
            new SelectListItem{Text="Item12", Value="12"}
        })
        .ClientEvents(e => e.OnLoad("onDllLoad"))
%>
<%= Html.ValidationMessageFor(m => m.DllId) %>
<br />
AutoComplete:

<%= Html.Telerik().AutoCompleteFor(m => m.SubModel.Phone) %>
<%= Html.ValidationMessageFor(m => m.SubModel.Phone) %>

<button>Click</button>

<% Html.EndForm(); %>

<hr />

<% Html.BeginForm(); %>

<%= Html.EditorFor(m => m.UnitPrice) %>
<%= Html.ValidationMessageFor(m => m.UnitPrice)%>
<button>Click</button>

<% Html.EndForm(); %>

<hr />

<%= Html.Telerik().Grid(new List<ValidationModel> { Model })
        .Name("Grid")
        .DataKeys(keys => keys.Add(v => v.Id))
        .DataBinding( binding => binding.Server().Update("default"))
        .Columns(columns => {
            columns.Bound(v => v.Id);
            columns.Bound(v => v.LastSupply);
            columns.Bound(v => v.UnitPrice);
            columns.Bound(v => v.Discontinued);
            columns.Command(command => command.Edit());
        })
%>

<% Html.Telerik().ScriptRegistrar()
       .DefaultGroup(group => group
                                .Add("jquery.validate.min.js")
                                .Add("jquery.validate.unobtrusive.js")); %>

<script type="text/javascript">
    function onDllLoad(e) { 
        var changePropertyEventName = $.browser.msie ? 'propertychange' : 'DOMAttrModified';
        var $dll = $(this);

        $dll.find('input')
            .bind(changePropertyEventName, function (e) {
                  var hasError = $(this).attr("class").indexOf("input-validation-error") != -1;
                  $dll.find(".t-dropdown-wrap").toggleClass("input-validation-error", hasError);
              });

        $('.t-datepicker').data('tDatePicker').onChange = function () { 
            //call validation of the form      
        }
    }
</script>
</asp:Content>
