Add Link to ListView template (or Div w/event)

[Xavier]

I am trying to define a listview containing an element that has an event linked to it (a div or an <a/> tag).  However, whenever I click on the item, the event is not invoked.  

Here is my listview definition 

<div class="demo-section k-content wide">
    @(Html.Kendo().ListView<InsightPortalWeb.Models.RootObject>(Model)
            .Name("listView")
            .TagName("div")
            .ClientTemplateId("template")
            .DataSource(dataSource =>
            {
                dataSource.Read(read => read.Action("Application_Read", "Home"));
                dataSource.PageSize(15);
            })
            .Pageable()
            .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
            .Events(events => events.Change("onChange").DataBound("onDataBound"))
    )
</div>

Here is my template: 

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">

        <div class="product-title">
            <h3>#:name#</h3>
        </div>
        <div class="product-img" id="area">
            <img src="@Url.Content("~/content/images/")Picture1.png" alt="#:name# image" />
            @*<div class="red" href="#"></div>*@
            <div id="star" class="red"></div>
        </div>

    </div>
</script>

I've tried numerous ways to get an event to fire such as the following: 

var reds = document.getElementsByClassName("red");

var redfunction = function() {
    alert("in star");
    return true; // Not needed, as long as you don't return false
};

for (var i = 0; i, reds.length; i++) {
    reds[i].addEventListener('click', redfunction, false);
};

 

However, none seem to do the trick.  What am I missing. How might I accomplish this? 

Thanks for any help. 

[Georgi]

Hello Xavier,

Have in mind that the ListView fetches the data with an ajax request after its initialization and after that it renders the elements. Thus, it is necessary to attach the handlers after the elements are created. The current implementation will work correctly if you attach the event handler within the DataBound event of the LisView.

Another possible solution is to use inline event handlers.

e.g.

<div id="star" class="red" onclick="redfunction()"></div>

You could also attach the event handlers with jQuery as follows:

$(function(){
   $('#listView').on('click', '.red', redfunction)
})

Please note that in both of the above approaches, the redfunction should be declared in the global scope.

Regards,
Georgi
Progress Telerik

[Xavier]

Thanks Georgi!