KendoUI ListView Edit Template Ignoring Model Required Attribute Razor Partial Form

4 posts, 0 answers
  1. Jeffrey
    Jeffrey avatar
    2 posts
    Member since:
    Sep 2012

    Posted 16 Dec 2012 Link to this post

    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
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 18 Dec 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jeffrey
    Jeffrey avatar
    2 posts
    Member since:
    Sep 2012

    Posted 22 Dec 2012 Link to this post

    I opened a Support Ticket
  5. Randy
    Randy avatar
    5 posts
    Member since:
    Jun 2012

    Posted 09 Sep 2013 Link to this post

    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. 
Back to Top
UI for ASP.NET MVC is VS 2017 Ready