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

3 posts, 1 answers
  1. Xavier
    Xavier avatar
    9 posts
    Member since:
    Feb 2014

    Posted 01 Oct Link to this post

    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. 


  2. Answer
    Georgi
    Admin
    Georgi avatar
    572 posts

    Posted 03 Oct Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Xavier
    Xavier avatar
    9 posts
    Member since:
    Feb 2014

    Posted 08 Oct in reply to Georgi Link to this post

    Thanks Georgi! 
Back to Top