Kendoui | Grid | Server Side validations in the grid

Question

I am using kendoui grid with ClientTemplate to show textbox on each row of the grid. I need to show validation messages on each empty textbox of the grid on click of a button outside the grid which will actually post the data.

View

@(Html.Kendo().Grid<MMM.Lumos.Entities.CustomEntities.OrganizationRiskViewModel>()
                .Name("OrgRiskGrid")
                .DataSource(dataSource => dataSource.Ajax()
                    .Model(model =>
                    {
                        model.Id(m => m.RiskId);
                        model.Id(m => m.RiskTierId);
                        model.Id(m => m.RiskTierKey);
                        model.Id(m => m.RiskKey);
                    })
                    .Read(read => read.Action("GetRiskType", "RiskTier").Data("getRiskTier"))
                    .Events(events =>
                        events.Error("error"))
                )
                .Columns(columns =>
                {
                    columns.Bound(c => c.RiskName).Width(50);
                    columns.Bound(c => c.ATPTestMix).ClientTemplate(Html.Kendo().IntegerTextBox().Name("ATPTestMix").Min(0).HtmlAttributes(new { value = "", style = "width: 50px;" }).ToClientTemplate().ToHtmlString()).Width(60);
                    columns.Bound(c => c.VITestMix).ClientTemplate(Html.Kendo().IntegerTextBox().Name("VITestMix").Min(0).HtmlAttributes(new { value = "", style = "width: 50px;" }).ToClientTemplate().ToHtmlString()).Width(60);
                    columns.Bound(c => c.SMTestMix).ClientTemplate(Html.Kendo().IntegerTextBox().Name("SMTestMix").Min(0).HtmlAttributes(new { value = "", style = "width: 50px;" }).ToClientTemplate().ToHtmlString()).Width(60);
                })
            )

Model

public class OrganizationRiskViewModel
    {        
        public int OrganizationId { get; set; }

        public short RiskTierId { get; set; }

        public string RiskTierName { get; set; }

        public short RiskId { get; set; }

        public string RiskName { get; set; }

        [Required(ErrorMessage="ATP Test Mix is mandatory")]
        public short ATPTestMix { get; set; }

        [Required(ErrorMessage = "ATP Test Mix is mandatory")]
        public short SMTestMix { get; set; }

        [Required(ErrorMessage = "ATP Test Mix is mandatory")]
        public short VITestMix { get; set; }

        public string RiskTierKey { get; set; }

        public string RiskKey { get; set; }
    }

I tried setting the data annotations on the model to which the Grid is binded but unfortunately it didnt work.

Let me know if any one has the solution for the same.

Answer 1

<script type="text/javascript">
    $(function () {
        var form = $('#yourFormName');
        form.data('validator').settings.ignore = ''; // default is ":hidden".
    });
</script>

//Set DataAnnotation attributes

public IList<SelectListItem> SecretQuestion1IdList { get; set; }

    [DisplayName("Answer to First Secret Question")]
    [Required]
    public string SecretQuestionAnswer1 { get; set; }

    [DisplayName("Second Secret Question")]
    [Required]
    public int SecretQuestion2Id { get; set; }

    public IList<SelectListItem> SecretQuestion2IdList { get; set; }

    [DisplayName("Answer to Second Secret Question")]
    [Required]
    public string SecretQuestionAnswer2 { get; set; }

    [Required]
    public int TrustedDomainId { get; set; }

    public IList<SelectListItem> TrustedDomain { get; set; }

}



@model ExternalUserManagement.Web.Mvc.Controllers.ViewModels.Register.RegisterPageViewModel
@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="accountDetails" class="centre-container">
    @using (Ajax.BeginForm("CreateAccount", "Register",
        new AjaxOptions
        {
            UpdateTargetId = "accountDetails",
            OnBegin = "windowHelper.displayWaitingDialog('Saving Registration Details, please wait...')",
            OnComplete = "windowHelper.close()"
        }))
    {  
        <p class="message information">Register you details, then click submit.</p>

        <div class="row">
            @Html.LabelFor(m => m.FirstName, new { @class = "label" })
            @Html.TextBoxFor(m => m.FirstName, new { @class = "input k-textbox" })
        </div>
        <div class="row">
            @Html.LabelFor(m => m.LastName, new { @class = "label" })
            @Html.TextBoxFor(m => m.LastName, new { @class = "input k-textbox" })

        </div>
        <div class="row">
            @Html.LabelFor(m => m.CompanyEmail, new { @class = "label" })
            @Html.TextBoxFor(m => m.CompanyEmail, new { @class = "input-left k-textbox" })
            @&nbsp;
            @(Html.Kendo().DropDownListFor(m => m.TrustedDomainId)
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(Model.TrustedDomain)
                      .OptionLabel(" -- Please Select --")
                      .HtmlAttributes(new { @class = "input-right" })
                      )
        </div>
        <div class="row">
            @Html.LabelFor(m => m.BirthDate, new { @class = "label" })
            @Html.Kendo().DatePickerFor(m => m.BirthDate).HtmlAttributes(new { @class = "input" })
        </div>
        <div class="row">
            @Html.LabelFor(m => m.SecretQuestion1Id, new { @class = "label" })
            @(Html.Kendo().DropDownListFor(m => m.SecretQuestion1Id)
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(Model.SecretQuestion1IdList)
                      .OptionLabel(" -- Please Select --")
                      .HtmlAttributes(new { @class = "input" })
                      )
        </div>
        <div class="row">
            @Html.LabelFor(m => m.SecretQuestionAnswer1, new { @class = "label" })
            @Html.TextBoxFor(m => m.SecretQuestionAnswer1, new { @class = "input k-textbox" })
        </div>
        <div class="row">
            @Html.LabelFor(m => m.SecretQuestion2Id, new { @class = "label" })
            @(Html.Kendo().DropDownListFor(m => m.SecretQuestion2Id)
                      .DataTextField("Text")
                      .DataValueField("Value")
                      .BindTo(Model.SecretQuestion2IdList)
                      .OptionLabel(" -- Please Select --")
                      .HtmlAttributes(new { @class = "input" }).AutoBind(true)
                      )
        </div>
        <div class="row">
            @Html.LabelFor(m => m.SecretQuestionAnswer2, new { @class = "label" })
            @Html.TextBoxFor(m => m.SecretQuestionAnswer2, new { @class = "input k-textbox" })
        </div>
        <div class="captcha row">
            @Html.Label("Are you a human?", new { @class = "label" })
            <br />
            @Html.Raw(Html.GenerateCaptcha("captcha", "clean"))
            @Html.ValidationMessage("Invalid Characters")
        </div>
        <div class="row">
            <div class="commands">
                <button class="k-button" type="submit" title="Sumbit">
                    <img src="@Url.Content("~/Content/Images/Icons/disk.png")" alt="" />
                    Sumbit
                </button>
            </div>
        </div>
    }
</div>

Please have a look the following

Link: http://macaalay.com/2014/02/15/enabling-asp-net-mvc-client-validation-for-kendo-ui-components/