RadTab - adding attributes doesn't work

5 posts, 0 answers
  1. John
    John avatar
    8 posts
    Member since:
    Jul 2011

    Posted 08 Jul 2011 Link to this post

    I'm trying to write a workaround for the bug in your RadTabStrip control that prevents tabs from being hidden and displayed on demand.

    So instead of building the tabstrip with some tabs hidden, I now add only the tab items I want displayed initially, then use javascript to add further tab items later.

    Here's a snippet of the js code...

    var tabStrip = $find('myTabStrip');
     
    var tab = new Telerik.Web.UI.RadTab();
    tab.set_text('text');
    tab.set_value('pseudo-id_because_ID_field_is_weirdly_not_supported');
     
    var attributes = tab.get_attributes();
    attributes.setAttribute("onclick", "alert('hello')");
     
    tabStrip.get_tabs().insert(1, tab);

    this runs ok and adds a tab to the page, but the attribute is never set, and when I look at the page source it has never been rendered. The items rendered using server side code with the same settings work fine.

    Is there something else I should be doing, or is this another bug?

  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 08 Jul 2011 Link to this post

    Hello John,

    When you set an attribute on a RadTab, it doesn't add it to the page markup, but adds it to the jQuery object of the RadTab. Thus, the reason why you can't attach a click event to the RadTab using its attributes.

    The only way to add a click event to the newly created tab would be to use jQuery to attach it to the element the RadTab generates, but you would need to add the click event after you add it to the RadTabStrip, otherwise it doesn't have an element to attach itself to.

    Here's how you're code would look like:

    var tabStrip = $find('myTabStrip');
      
    var tab = new Telerik.Web.UI.RadTab();
    tab.set_text('text');
    tab.set_value('pseudo-id_because_ID_field_is_weirdly_not_supported');     
      
    tabStrip.get_tabs().insert(1, tab);
      
    $telerik.$(tab.get_element()).click(function() { alert("hello"); });

    I hope that helps.
  3. John
    John avatar
    8 posts
    Member since:
    Jul 2011

    Posted 08 Jul 2011 Link to this post

    Thanks.

    Your explanation partially fixes the problem, inasmuch as I should now be able to add a click event.

    But I'm still not sure I understand the reasoning behind your comment, in that I can add click events and attributes if I add an object server-side, yet the client side API which purports to replicate the same functionality only does half the job.

    I also want to add a further attribute to hold some custom parameters, but I'm no nearer getting this to work as it seems from your explanation that the client-side "addAttribute()" method is only there for show and doesn't actually do anything useful!

    Sorry, but this is all getting quite frustrating. Yesterday I added a RadTabStrip object to our app thinking it would be quicker than writing my own. We then hit the "known" bug which prevents the tab strip from rendering correctly if your api is used to hide tabs or make them visible. Having spent several hours coding a helper class as a workaround I just find that every time I get any nearer I hit another bug that requires a further workaround.

    Any ideas on how I can add a custom attribute when adding a RadTab client-side. Alternatively, any timescale on a bug fix for the originally reported problem that made all this additional nugatory work necessary in the first place?
  4. John
    John avatar
    8 posts
    Member since:
    Jul 2011

    Posted 08 Jul 2011 Link to this post

    sorry - should also have said we don't use jquery as we are contractually obligated to support IE6 for some of our clients...
  5. John
    John avatar
    8 posts
    Member since:
    Jul 2011

    Posted 08 Jul 2011 Link to this post

    For the benefit of other users who are wasting similar amounts of time struggling with these bugs, here is the workaround I've used for the bug, using javascript...

    var tab = new Telerik.Web.UI.RadTab();
    tab.set_text('text'); // works ok
    tab.set_value('val'); // also works
    tab.get_attributes(),addAttribute('onclick', 'alert("hello")'); // WON'T WORK - telerik code never renders this when you add the object to the page
    tabStrip.get_tabs().insert(1, tab); // tab will now render but click won't do anything (see above)
     
    // kludge to get this to work
    var element = tab.get_element(); // get reference to the html element added to the page
    element.setAttribute('onclick', 'alert("hello")'); // patch in the attributes manually
    // TODO - set further attributes here

Back to Top