How can I use Listview templates for editing with server side validation?

[Martin Kelly]

I am using MVC4 with the latest Kendo UI Q2. I am trying to use the mvc wrappers to implement a list view with a view template and an edit template 

After editing a listview item using an edit template, I click the save button. The edit template is immediately replaced by the view template before the Create/Update controller action is hit on the server. If the controller action fails some validation I can not show this to the user as the edit template is no longer visible. Is there a way to make the edit template remain open until either the controller action has completed successfully or if the controller action fails validation push the validation errors to the edit template. This would be a fairly typical pattern.

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

    <a id="addRoleButton" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Role</a>

</div>

 

    @(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)

        .Name("rolesListView")       

        .TagName("div")       

        .ClientTemplateId("rolesList")       

        .Editable()

        .Pageable()

        .DataSource(dataSource => dataSource           

            .Model(model =>

                {

                    model.Id("RoleId");

                    model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);

                    model.Field(f => f.Title);

                    model.Field(f => f.Description);;

                })

            .Events(e => e               

                .Error("rolesListViewData_error")

                .Change("rolesListViewData_change")

                .RequestStart("rolesListViewData_requestStart"))          

            .Create(create => create.Action("createRole", "Project"))           

            .Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))

            .Update(update => update.Action("updateRole", "Project"))   

            .PageSize(30)           

         )

        .Events(e => e

            .Change("rolesListView_change")

            .Edit("rolesListView_edit")

            .DataBound("rolesListView_databound"))     

    )

view template

//View template

<script type="text/x-kendo-template" id="rolesList">

    <div class="roleView" >

        <div> ${Title} </div>

        <div> ${Description} </div>

        <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>

</script>

edit template

@model iProjX.Models.RoleModel

 

<div class="roleView" id = "newRoleForm2" >

    @Html.ValidationSummary(true)

 

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

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

 

    <div class="editor-label">

        @Html.LabelFor(model => model.Title)

    </div>

    <div class="editor-field">

        @Html.TextBoxFor(model => model.Title, new { style = "width:99%", maxlength = 100 })

        <span data-for="Title" class="k-invalid-msg"></span>

    </div>

 

    <div class="editor-label">

        @Html.LabelFor(model => model.Description)

    </div>

    <div class="editor-field">

        @Html.TextAreaFor(model => model.Description, new { style = "width:100%; height:100px"})

        <span data-for="Description" class="k-invalid-msg"></span>

    </div>

 

    <div class="edit-buttons">

        <a class="k-button k-button-icontext k-update-button" onclick="updateClick()" href="\\#"><spanclass="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>

    </d

[Michael]

Are you using a Controller for this?  or trying to do it all with the MVVM?

[Andrei]

Did you magane to solve this?