KendoUI ListView Edit Template Ignoring Model Required Attribute Razor Partial Form

[Jeffrey]

I am trying to create a simple customer search/edit form using Kendo.ListView() in MVC4.

I am running into a problem when trying to remove a value from the form, MVC is reporting that the field is required, when it is not.  Further investigation has revealed that the whole Validation framework is not working.

Here is my model:

public class ClientModel

{

    private readonly Guid _id;

 

    public string Id

    {

        get { return _id.ToString(); }

    }

 

    [Required(ErrorMessage = "Please enter a Name for this client.")]

    [Display(Name = "Name")]

    public string Name { get; set; }

 

    [Display(Name = "Address")]

    public string AddressLine1 { get; set; }

 

    public string AddressLine2 { get; set; }

 

    public string AddressLine3 { get; set; }

 

    [Display(Name = "Email Address")]

    public string EmailAddress { get; set; }

 

    [Display(Name = "Home Phone")]

    public string HomePhone { get; set; }

 

    [Display(Name = "Cellular Phone")]

    public string CellularPhone { get; set; }

 

    [Display(Name = "Work Phone")]

    public string WorkPhone { get; set; }

}

And my main view:

@using Models

 

@section Styles {

    <link href="@Url.Content("~/Content/Client.css")" rel="stylesheet" type="text/css" />

}

 

<div class="k-toolbar k-grid-toolbar">

    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add Client</a>

</div>

 

<script type="text/x-kendo-tmpl" id="client-view-template">

    <div class="client">

        <h3>${Name}</h3>

        <div class="client-details">

            <dl>           

                <dt>${AddressLine1}</dt>

                <dt>${AddressLine2}</dt>

                <dt>${AddressLine3}</dt>

            </dl>

            <h4>Phone</h4>

            <dl>

                <dt>(H) ${HomePhone}</dt>

                <dt>(M) ${CellularPhone}</dt>

                <dt>(W) ${WorkPhone}</dt>

            </dl>

            <dl>

                <dt>${EmailAddress}</dt>

            </dl>

            <div class="edit-buttons">

                <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>

                <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>

            </div>

        </div>

    </div>

</script>

 

@(Html

      .Kendo()

      .ListView<ClientModel>()

      .Name("ClientList")

      .TagName("div")

      .ClientTemplateId("client-view-template")

      .DataSource(dataSource => dataSource

                                    .Model(model =>

                                               {

                                                   model.Id("Id");

                                                   model.Field<string>("Id").DefaultValue(Guid.Empty).Editable(false);

                                                   model.Field<string>("Name").DefaultValue(string.Empty);

                                                   model.Field<string>("Address1").DefaultValue(string.Empty);

                                                   model.Field<string>("Address2").DefaultValue(string.Empty);

                                                   model.Field<string>("Address3").DefaultValue(string.Empty);

                                                   model.Field<string>("HomePhone").DefaultValue(string.Empty);

                                                   model.Field<string>("CellularPhone").DefaultValue(string.Empty);

                                                   model.Field<string>("WorkPhone").DefaultValue(string.Empty);

                                                   model.Field<string>("EmailAddress").DefaultValue(string.Empty);

                                               })

                                    .Read(read => read.Action("ClientRead", "Clients"))

                                    .Create(create => create.Action("ClientCreate", "Clients"))

                                    .Update(update => update.Action("ClientUpdate", "Clients"))

                                    .Destroy(destroy => destroy.Action("ClientDestroy", "Clients"))

      )

      .Editable(editable => editable.TemplateName("ClientModelEdit"))

      )

 

<script>

    $(function() {

        var listView = $("#ClientList").data("kendoListView");

 

        $(".k-add-button").click(function(e) {

            listView.add();

            e.preventDefault();

        });

    });

 

</script>

And finally the edit template:

@using Models

@model ClientModel

 

@{ Html.EnablePartialViewValidation(); }

 

<div class="client-edit">

     

    @Html.ValidationSummary(true);

 

    @Html.HiddenFor(model => model.Id)

    <dl>

        <dt>@Html.LabelFor(p => p.Name)</dt>

        <dd>

            @Html.EditorFor(p => p.Name)

        </dd>

        <dt>

            @Html.LabelFor(p => p.AddressLine1)

        </dt>

        <dd>

            @Html.EditorFor(p => p.AddressLine1)

        </dd>

        <dt>

        </dt>

        <dd>

            @Html.EditorFor(p => p.AddressLine2)

        </dd>

        <dt>

        </dt>

        <dd>

            @Html.EditorFor(p => p.AddressLine3)

        </dd>

        <dt>

            @Html.LabelFor(p => p.HomePhone)

        </dt>

        <dd>

            @Html.EditorFor(p => p.HomePhone)

        </dd>

        <dt>

            @Html.LabelFor(p => p.CellularPhone)

        </dt>

        <dd>

            @Html.EditorFor(p => p.CellularPhone)

        </dd>

        <dt>

            @Html.LabelFor(p => p.WorkPhone)

        </dt>

        <dd>

            @Html.EditorFor(p => p.WorkPhone)

        </dd>

        <dt>

            @Html.LabelFor(p => p.EmailAddress)

        </dt>

        <dd>

            @Html.TextBoxFor(p => p.EmailAddress)

        </dd>

    </dl>

    <div class="edit-buttons">

        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>

        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>

    </div>

 

</div>

I'm just wondering if I am missing something.  I have been trying to figure this out for 3 days now.

Thanks

[Daniel]

Hello Jeffrey,

The code looks correct and MVC should not add implicit required validation for string fields. The only thing that I see missing is the validation messages but the validation should still be working as expected. Could you send a runnable project so I can investigate what exactly is going wrong? If the project is larger than the allowed file size for the forums, please open a support ticket.

Regards,
Daniel
the Telerik team

[Jeffrey]

I opened a Support Ticket

[Randy]

I'm seeing something similar on a .NET MVC List View. For a handful of my viewmodel's columns the ListView complains that the value is required when the viewmodel has no such attribute set for them. However, it seems to respect the presence (or lack thereof) of the Required attribute on the rest of the viewmodel's columns. It's just a couple that are causing the problem. Very strange!

Anyone have more info on what's going on here?

EDIT:

Ok, I figured it out. This was because in my Controller's Read function for the ListView I was not reading in values for the columns that were reporting a Required value error for. Once I included *all* my columns in my Read function those validation errors went away. It had nothing to do with the ViewModel at all - just a mistake in the Controller serialization function.