Dynamically adding tab with append, imageUrl and imageHtmlAttributes.

[Nathan]

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.

[Daniel]

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

[Nathan]

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.

[Daniel]

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