How to specify templates in ListView

4 posts, 0 answers
  1. Kuljit
    Kuljit avatar
    1 posts
    Member since:
    Jun 2012

    Posted 21 Jun 2012 Link to this post

    I am trying to use ListView using MVC 


    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.

  2. Martin Kelly
    Martin Kelly avatar
    17 posts
    Member since:
    Jan 2010

    Posted 23 Jul 2012 Link to this post

    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>
        .DataSource(dataSource => dataSource
            .Model(model =>
                    model.Field(f => f.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
            $(".k-add-button").click(function (e) {

    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>

    Editor template saved in file RoleModel.cshtml
    @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" 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>
  3. Andy
    Andy avatar
    1 posts
    Member since:
    Mar 2014

    Posted 09 Jun 2014 in reply to Martin Kelly Link to this post

    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.

  4. Daniel
    Daniel avatar
    2177 posts

    Posted 12 Jun 2014 Link to this post


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


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top