Client Side Id for Kendo Templates

[Rajaraman]

.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

[Dimiter Madjarov]

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