Keep ListView in edit mode after server-side error

3 posts, 1 answers
  1. Steve
    Steve avatar
    13 posts
    Member since:
    Aug 2008

    Posted 01 Oct 2013 Link to this post

    I am using server-side validation for some model properties when editing in a ListView with an editor template. The errors are generated from a custom ValidationAttribute. The errors are generated properly, and I am able to display them when the Update button is pressed, but the ListView exits the edit mode, and I would like to prevent this so that the user can update the values.

    Sample model property:
    [CompareValues("PEEP", CompareValues.GreatThanOrEqualTo, ErrorMessageResourceName = "MAPGreaterThanPEEP", ErrorMessageResourceType = typeof(VentSettingStrings))]
    public decimal? MAP { get; set; }

    The ListView declaration in the view file:
        .DataSource(datasource => datasource
            .Events(events => events.Error("handleError"))
            .Model(model => model.Id(m => m.VentSettingId))
            .Read(read => read.Action("ReadVentSettings", "RunDetail"))
            .Create(create => create.Action("CreateVentSetting", "RunDetail"))
            .Update(update => update.Action("UpdateVentSetting", "RunDetail"))
            .Destroy(destroy => destroy.Action("DeleteVentSetting", "RunDetail"))

    The relevant parts of the EditorTemplate:
    @using ELSORegistry.Helpers
    @using Kendo.Mvc.UI
    @model ELSORegistry.Areas.ECLS.Models.VentSetting
    <div style="padding:10px">
        <span>@Html.LabelWithTooltipFor(model => model.MAP)</span>
        <span>@Html.TextBoxFor(model => model.MAP, new { @class = "k-textbox", style = "width:50px"})</span>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button"><span class="k-icon k-update"></span>Save</a>
            <a class="k-button k-button-icontext k-cancel-button"><span class="k-icon k-cancel"></span>Cancel</a>


    I borrowed the following scripts from an example using the Grid control, and modified (possibly not correctly) for the ListView:
    $(function () {
        var listView = $("#listView").data("kendoListView");
        $(".k-add-button").click(function (e) {
    function handleError(args) {
        if (args.errors) {
            var list = $("#listView").data("kendoListView");
            var validationTemplate = kendo.template($("#validationMessageTemplate").html());
  "dataBinding", function (e) {
                $.each(args.errors, function (propertyName) {
                    var renderedTemplate = validationTemplate({ field: propertyName, messages: this.errors });
                    document.getElementById("errorList").innerHTML += renderedTemplate;
    According to the Grid example, the preventDefault() method should keep it in edit mode, but this does not work for me in ListView. Any help on this, or any other approach to the problem, would be appreciated. Another goal is to provide this as client-side validation as well, but I can save that for another post.

  2. Answer
    Daniel avatar
    2177 posts

    Posted 03 Oct 2013 Link to this post

    Hello Steve,

    For the listview it will be needed to prevent the save event as well because by default the ListView will exit edit mode before the request is completed. I attached the code-library project modified to use a ListView.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Steve
    Steve avatar
    13 posts
    Member since:
    Aug 2008

    Posted 03 Oct 2013 Link to this post

    Thanks. That works.
Back to Top