This is a migrated thread and some comments may be shown as answers.

KendoUI ListView Edit Template Ignoring Model Required Attribute Razor Partial Form

3 Answers 167 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Jeffrey
Top achievements
Rank 1
Jeffrey asked on 16 Dec 2012, 11:18 PM
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

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 18 Dec 2012, 10:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeffrey
Top achievements
Rank 1
answered on 23 Dec 2012, 01:08 AM
I opened a Support Ticket
0
Randy
Top achievements
Rank 1
answered on 09 Sep 2013, 06:24 PM
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. 
Tags
ListView
Asked by
Jeffrey
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Jeffrey
Top achievements
Rank 1
Randy
Top achievements
Rank 1
Share this question
or