How can I set my own text for tabStrip

4 posts, 0 answers
  1. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 30 May 2012 Link to this post

    Hi,

    How can I set my own text for the tabStrip button on the footer.
    This is important for localization. It seems that the build-in data-icon put its own text and need a way to use standard icon but override the text. Thank you.

      <div data-role="footer">
                    <div data-role="tabstrip">
                         <a href="content/views/doctorsearch.html" id="btnActionSearch" data-icon="search"></a>
                         <a href="content/views/settings.html" id="btnActionSettings" data-icon="settings"></a>
                    </div>
                </div>
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 May 2012 Link to this post

    Hi,

    The icon does not set any text - you can put whatever text is needed inside the A element. See this fiddle for example.


    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Patrick Rioux
    Patrick Rioux avatar
    53 posts
    Member since:
    Sep 2012

    Posted 30 May 2012 Link to this post

    Ok the issue was on my end...But when I set the new caption in the data-show the button in the tabstrip became very small.
    I need to do this there before when the user on in my setting view, they can change the language. Therefore when doing a back (from my setting view) I need to set the proper caption. This is very strange and I can't figure out. Maybe there is another way to do this? Thanks.

     <body onload="onBodyLoad();">
            <div data-role="layout" data-id="default" data-show="initHomeView">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>
                <div data-role="footer">
                    <div data-role="tabstrip">
                         <a href="content/views/doctorsearch.html" id="btnActionSearch" data-icon="search"></a>
                         <a href="content/views/settings.html" id="btnActionSettings" data-icon="settings"></a>
                    </div>
                </div>
            </div>
         
            <script>
                          // Localization
                function initHomeView() {
                    $('#btnActionSearch').text(dtGetText("ActionSearch"));
                    $('#btnActionSettings').text(dtGetText("ActionSettings"));
                }

        
                
                var app;
                app = new kendo.mobile.Application($(document.body), {
                                                   transition: "slide",
                                                   initial: dtMobileHomeView,
                                                   loading: dtGetText("Loading") });
                 $("#tabStrip").data("kendoTabStrip").bind("activate", initHomeView);
                app.navigate(dtMobileHomeView);
             </script>
        </body>

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 31 May 2012 Link to this post

    Hello Patrick,

    The mobile tabstrip injects some additional HTML structure in the links if an icon is specified. You can examine it through the web inspector for further details. If you want to change the text of the tab, you should modify the text of the SPAN element with class km-text inside the link. 

    Kind regards,
    Petyo
    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
Kendo UI is VS 2017 Ready