MVC TabStrip - How to change text of the tab item when a select event occurs on a tab.

6 posts, 0 answers
  1. Arul
    Arul avatar
    11 posts
    Member since:
    Oct 2014

    Posted 02 Nov 2014 Link to this post

    (1) I am using MVC application with Kendo MVC wrapper with razor syntax.
         I am trying to change a text of a tab item when a tab item is selected. How do i do that?

    For example, disabling another tab-item when a tab is selected is NOT working with the current code.

    ==============================================================
    event handler code (NOT working as far as disabling the tab item):

    <script>
       function tabMain_select(e) {
            // gives valid item here - i checked in the debugger.
            var tabstripD = $("#tabMain").kendoTabStrip().data();      
            $(tabstripD).disable(0);
    </script>

    ===========================================================
    Code that renders the tab with three tab items (this works):
    @(Html.Kendo()
        .TabStrip()
        .Name("tabMain")
        .Animation(false)
        .Events(e=>e.Select("tabMain_select"))
        .Items(tabs => 
                    {
                        tabs.Add().Text("Recent History")
                                  .Selected(true)                               // Will render as this tab selected
                                  .LoadContentFrom("About","home");             // to render a view into this tab. 
                          
                        tabs.Add()
                            .Text("Package")
                            .LoadContentFrom("About","home")
                            .HtmlAttributes(new { style = "margin-right:60px" }); // To give space after this tab but before the next tab item.

                        tabs.Add()
                            .Text("Dirty Returns")
                            .LoadContentFrom("About", "home");
                    }
                )
      )
    =========================================================

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2204 posts

    Posted 04 Nov 2014 Link to this post

    Hi Arul,


    Here is a sample approach to change the text of the currently selected tab in the select event, by using the provided e.item parameter.
    E.g.
    function select(e) {
        $(e.item).find("a").text("new text");
    }

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Arul
    Arul avatar
    11 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 in reply to Dimiter Madjarov Link to this post

    How cool! Thank You! I will try that.
  4. Arul
    Arul avatar
    11 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 in reply to Dimiter Madjarov Link to this post

    Thank you! I will try that.
  5. Arul
    Arul avatar
    11 posts
    Member since:
    Oct 2014

    Posted 04 Nov 2014 Link to this post

    Thank You! I appreciate your help. I will try this.
    -Arul.
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2204 posts

    Posted 05 Nov 2014 Link to this post

    Hello Arul,


    Thanks for the update. I am glad the issue is resolved.

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top