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
    2156 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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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.
  5. 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.
  6. 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.
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 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
UI for ASP.NET MVC is VS 2017 Ready