Dynamically adding tab with append, imageUrl and imageHtmlAttributes.

4 posts, 1 answers
  1. Nathan
    Nathan avatar
    3 posts
    Member since:
    Jun 2012

    Posted 22 Jun 2012 Link to this post

    I am trying to dynamically add a tab using the append method, but I cant get any of the imageHtmlAttributes to get inserted into the html.
    Here is my code:

    tabStrip.append(
        [{
            text: tabText,
            content: "<iframe style=\"width:100%\" src=\"" + url + "\"></iframe> ",
            imageUrl: "/Images/dialog_close_button.png",
            imageHtmlAttributes: { "onclick": "closeTab($(this).closest(\"li\"));" },
            collapsible: true
        }]
    );

    However the onclick is never added.
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 27 Jun 2012 Link to this post

    Hello,

    Setting the image HTML attributes with the append method is not supported. You should bind to the event with code in order to close the tab when the image is clicked.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Nathan
    Nathan avatar
    3 posts
    Member since:
    Jun 2012

    Posted 05 Jul 2012 Link to this post

    Can you give example code, I assume you want me to use the select event but I do not know how to find whether the tab was clicked or the image itself was clicked.
  5. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 09 Jul 2012 Link to this post

    Hi,

    Yes, the select even cannot be used to determine whether the image was clicked. If you need to perform the same action for the images in all tabs, you could use event delegation to bind to the image click event and execute your logic e.g.

    $("#tabstrip").on("click"," .k-tabstrip-items .k-item img", function () {
     
    });
    If you need to handle to the appended element event, you could locate it by searching for the last item and bind to its image click event.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready