How to specify templates in ListView

[Kuljit]

I am trying to use ListView using MVC 

 @{Html.Kendo()
           .ListView(Model)
           .Name("cutomers")
           .BindTo(Model);
  }

Where do we specify templates? I do see there's a ClientTemplateId property exposed but not able to find its usage.
Can you please share any sample showing ListView in MVC.

Thanks,
Kuljit

[Martin Kelly]

Here is my templated Listview. You specify the normal view (not in edit mode) in the ClientTemplateId. In this view you must have a k-edit-button (for updates) and a k-delete-button (for deletes).
In your solution in Visual studio, create a subfolder in your Views folder called "EditorTemplates". Add a new class file with the same name as the model class used for each item in your list. (Mine is called "RoleModel.cshtml"). This template will be displayed automatically on the click of the k-edit-button (Dont ask me how!).
In your edit template you must have a k-update-button and a k-cancel-button. Clicking the update will return you to the View template and call the controller specified in the Update Action. Cancel will just return to View template with original data.
To add a new item to the list use a k-add-button button. Add some code to the click event that will create a new list item. This will open a blank editor template.
Also check out the example under the "wrappers\aspnetmvc\Examples" of the download. It has a full templated version of the listview. This is what I used for guidance, though it involved a hugh amount of trial and error!

@model IEnumerable<iProjX.Models.RoleModel>

 

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

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

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

            })

        .Events(e => e

            .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")

        .DataBound("rolesListView_databound"))    

)

 

<script>

        $(".k-add-button").click(function (e) {

            listView.add();

            e.preventDefault();

        });

</script>

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>

Editor template saved in file RoleModel.cshtml

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

    </div>

</div>

[Andy]

Martin Kelly:

I've read your solution with great interest as I've had difficulty getting the Editor Template to display on click of Update button.  All I get is inline editing.

In your example that you got to work, are you talking about the "roleView" class that you're using in both your View Template and your Editor Template -- as the magical solution.  I added an Editor Template view file in my EditorTemplate view folder as you suggested.  And I added a div block in my Editor Template with the same class name as a div block in my View Template.  So I was thinking my Editor Template file would miraculously now be found and used.  But it doesn't work.

I didn't understand your sentence: "Add a new class file with the same name as the model class used for each item in your list."  But I think you meant to use the same model class name in the new Editor Template file as in the View Template file.

Thanks.

[Daniel]

Hello,

Basically there are two ways to use an editor template for a model in MVC:

1. Name the editor template with the same name as the model class name. For example in the sample application included with the installation, the model specified for the listview is named "ProductViewModel" and the editor template name is ProductViewModel.cshtml(ProductViewModel.ascx for the aspx view engine).
2. Explicitly specify the editor template name. For the ListView, the template name can be specified with the Editable TemplateName method:
   

   .Editable(editable => editable.TemplateName("MyEditor"))

Also, I am not sure if this is just a mistake in the description but the folder should be named "EditorTemplates" instead of "EditorTemplate ".

Regards,
Daniel
Telerik