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

Client Side Id for Kendo Templates

1 Answer 25 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rajaraman
Top achievements
Rank 1
Rajaraman asked on 23 Apr 2014, 12:32 PM
.cshtml

<script type="text/x-kendo-tmpl" id="flashetTemplate">
        <div class="flashetItem" id="flashetContainer">
        <h5>${Name.substring(0,10)}</h5>
            <span class="flashetDesc">${Description.substring(0,150)}</span>
            <table class="flashetsTable">
                <tr>
                    <td class="flashetStats"><img src="/Content/Images/ThumbsUp.png" title="Likes" /></td>
                    <td class="flashetStats"><img src="/Content/Images/Comments.png" title="Comments" /></td>
                    <td class="flashetStats"><img src="/Content/Images/Shared.png" title="Shared" /></td>
                    <td class="flashetStats"><img src="/Content/Images/relevance.ico" title="Relevance" /></td>
                    <td class="flashetStats"><img src="/Content/images/folder.png" title="Resources" /></td>
                </tr>
             
            </table>
    </div>

@(Html.Kendo().ListView<Flashet>() //The listview will be initially bound to the Model which is the Products table
          .Name("flashetView") //The name of the listview is mandatory. It specifies the "id" attribute of the widget.
          .TagName("div") //The tag name of the listview is mandatory. It specifies the element which wraps all listview items.
          .ClientTemplateId("flashetTemplate") // This template will be used for rendering the listview items.
          .DataSource(dataSource => {
                                        dataSource.Read(read => read.Action("GetFlashetsData", "Home"));
                                        dataSource.PageSize(5);
          })
          .Pageable())

Jquery
$(document).ready(function () {
    //alert("document loaded...");
    $("#flashetContainer").click(function (event) {
        alert('div clicked....');
    });
});

Why does the click event not work when we click on the div. What would the dynamic id be <div class="flashetItem" id="flashetContainer"> , since based on the GetFlashetsData resultset there would be multiple div blocks generated

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 23 Apr 2014, 02:01 PM
Hi Rajaraman,


There is no dynamic id generated for each list item. I would suggest you to remove the flashetContainer id and just leave the class, because the id should be unique for the page. Then you could use this class to attach the click handler.
E.g.
$("#flashetView").on("click", ".flashetItem", function () {
    alert('div clicked....');
});

I hope this information helps.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Rajaraman
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or