Setting Tab width on client side

8 posts, 2 answers
  1. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 17 Jul 2013 Link to this post

    Hi All,

    I've been trying to set my tab width on client side but its not working. There is no error but changes are not being applied. This is based on Clients screen resolution. 1024x768 and below will be 150px tab width, higher than 1024x768 300px tab width.

    Heres my code

    var Mytab;
    function OnClientLoad(sender)
    {
       Mytab = sender;
       var scrW = screen.width;
       var scrH = screen.height;
       var val;
     
       if (scrW <= 1024){
          val = "150px";
       }else{
          val = "300px";
       }
       for (var i = 0; i < Mytab.get_allTabs().length; i++)
       {
          Mytab.get_allTabs()[i].width = val;
       }
    }
     
     
    <telerik:RadTabStrip ID="MyTab" runat="server" EnableEmbeddedSkins="False" OnClientLoad="OnClientLoad" .....


    Thanks in advance,
    Rj
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Jul 2013 Link to this post

    Hi RJ,

    Try the following JavaScript code in your OnClientLoad event.

    JavaScript:

    Mytab.get_allTabs()[0]._element.style.width = val;

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 18 Jul 2013 Link to this post

    Thanks a lot Princy it works!

    Though after testing it in different client resolution, it seems like I need to change not just the width but the css of the tab. Is it possible to do that? Thanks again
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jul 2013 Link to this post

    Hi RJ,

    I guess you want to set a CSS class for the respective tabs. Please try the following JavaScript code.

    JavaScript:
    for (var i = 0; i < Mytab.get_allTabs().length; i++) {
        Mytab.get_allTabs()[i].set_cssClass("style1");
    }

    CSS:
    <style type="text/css">
        .style1
        {
            width: 150px;
        }
    </style>

    Thanks,
    Princy.
  6. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 20 Jul 2013 Link to this post

    Thanks so much Princy..

    I just wonder where did you find those javascript property. Cant find those on http://www.telerik.com/help/aspnet-ajax/introduction.html
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2013 Link to this post

    Hi RJ,

    The set_cssClass() is a method of the RadTab client object. Please have a look at this documentation where you can find all the properties and methods of RadTab client object.

    Thanks,
    Shinu.
  8. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 22 Jul 2013 Link to this post

    Hello RJ,

     
    The get_allTabs() method is shown in this help topic. It seems that the set_cssClass is not described in the RadTab object article but it is typical for RadControls and almost all of them have one. We will add it as soon as we can.

    Regards,
    Plamen
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 23 Jul 2013 Link to this post

    Thanks Plamen
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017