This is a migrated thread and some comments may be shown as answers.

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

1 Answer 42 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Martin Kelly
Top achievements
Rank 1
Martin Kelly asked on 23 Jul 2012, 07:42 AM
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="\\#"><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>
    </d

1 Answer, 1 is accepted

Sort by
0
brian keating
Top achievements
Rank 1
answered on 30 Aug 2012, 03:35 PM
Hi Martin,



did you manage to do this.



I'm also in somewhat the same situation,



for example if I try to enter a duplicate item into my list view. my MVC Api Controller returns HttpStatus.Found, so I don't want to show this newly created client side duplicate...
Tags
ListView
Asked by
Martin Kelly
Top achievements
Rank 1
Answers by
brian keating
Top achievements
Rank 1
Share this question
or