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

3 posts, 0 answers
  1. Martin Kelly
    Martin Kelly avatar
    17 posts
    Member since:
    Jan 2010

    Posted 23 Jul 2012 Link to this post

    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>
            .DataSource(dataSource => dataSource           
                .Model(model =>
                        model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);
                        model.Field(f => f.Title);
                        model.Field(f => f.Description);;
                .Events(e => e               
                .Create(create => create.Action("createRole", "Project"))           
                .Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))
                .Update(update => update.Action("updateRole", "Project"))   
            .Events(e => e

    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>

    edit template
    @model iProjX.Models.RoleModel
    <div class="roleView" id "newRoleForm2" >
        @Html.HiddenFor(model => model.ProjectId)
        @Html.HiddenFor(model => model.RoleId)
        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        <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 class="editor-label">
            @Html.LabelFor(model => model.Description)
        <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 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>
  2. Michael
    Michael avatar
    8 posts
    Member since:
    Apr 2012

    Posted 20 Aug 2012 Link to this post

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

  3. UI for ASP.NET AJAX banner
  4. Andrei
    Andrei avatar
    5 posts
    Member since:
    Jan 2014

    Posted 14 Jul 2014 Link to this post

    Did you magane to solve this?
Back to Top