Keep ListView in edit mode after server-side error

[Steve]

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:

@(Html.Kendo().ListView<VentSetting>(Model.VentSettingsList)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("ventTemplate")
    .Editable()
    .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>

    </div>



</div>

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) {
        listView.add();
        e.preventDefault();
    });
});

function handleError(args) {
    if (args.errors) {
        var list = $("#listView").data("kendoListView");
        var validationTemplate = kendo.template($("#validationMessageTemplate").html());
        list.one("dataBinding", function (e) {
            e.preventDefault();
            $.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.

[Daniel]

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.

Regards,
Daniel
Telerik

[Steve]

Thanks. That works.