TabStrip set selected index

9 posts, 2 answers
  1. Keziah
    Keziah avatar
    7 posts
    Member since:
    Jun 2016

    Posted 27 Jun Link to this post

    Hi

    I've got the  following TabStrip which loads partial views in each tab. The partial views have previous and next buttons which navigate to the relevant tab. I determine the tab that needs to be selected in the controller. How do I set the selected tab index?

    I tried multiple options but none work.

    I am new to Kendo so any help will be appreciated.

    Thanks.

    ------------------------------------------------------------------

     <div id="tabs">
            <hr />
            @(Html.Kendo().TabStrip()
              .Name("tabstrip")
              .Scrollable(false)
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Step 1").LoadContentFrom("_Step1", "ManageFbo").Selected(true);
                  tabstrip.Add().Text("Step 2").LoadContentFrom("_Step2", "ManageFbo");
                  tabstrip.Add().Text("Step 3").LoadContentFrom("_Step3", "ManageFbo");
              })
            )
        </div>

  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 28 Jun Link to this post

    Hello,

    Could you be more specific what exactly you like to achieve and to send us the whole piece of code, including the content that should be loaded?

    You could also use the following blog: http://developer.telerik.com/featured/step-wise-forms-with-asp-net-mvc-and-kendo-ui/

    And the select method documentation for TabStrip Kendo UI: http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-select

    Regards,
    Bozhidar
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Keziah
    Keziah avatar
    7 posts
    Member since:
    Jun 2016

    Posted 28 Jun in reply to Bozhidar Link to this post

    Thank you very much for your help Bozhidar. The wizard example is exactly what I was looking for :-)
  5. Keziah
    Keziah avatar
    7 posts
    Member since:
    Jun 2016

    Posted 09 Jul Link to this post

    Hi

    I followed the example illustrated in the links provided and it works as expected except when I want to change the tabindex dynamically when next is selected. I have logic in my controller to determine which tabIndex to load next. The controller then returns it to the view correctly but its not loading the new tab.

    From the example I thought that this does it but its not working

    tabs.select(getTabAtIndex(data.index));

    It executes tabs.select(getTabAtIndex(4)); but nothing happens.

     

    My code is below. Thanks

    <script>

        var progress,
            tabs,
            currentIndex = 0;

        $(document).ready(function ()
        {
            @*var selector = '@active';
            var index = '@index';*@

            tabs = $("#tabstrip").data("kendoTabStrip");      
        })
        .Events(ev => {
            ev.Select("onSelect");
            ev.Show("onShow");
        })

        function onSelect(e) {
    //
        }

        function tabIndexOfElement(element) {
            return tabs.element.find(element).index();
        }

        function isTabValidAt(tabIndex) {
            var el = tabs.contentElement(tabIndex),
            val = $(el).kendoValidator().data("kendoValidator");
            return val.validate();
        }

        function getTabAtIndex(index) {
            return tabs.tabGroup.children().eq(index);
        }

        function onShow(e) {
            ////progress.value(currentIndex + 1);
        }


        function onPreviousClick(e) {
            e.preventDefault();

            tabs.select(tabs.select().prev());
        }

        function onNextClick(e)
        {
            var selector = '@active';
            var index = '@index';

           
            e.preventDefault();
          
             $.ajax({
            url: '@Url.Action(@active, "ManageFbo")',
            type: 'POST',
            dataType: 'json',
            cache: false,
            data: { orgID: $("#ddlOrganisations").val(), indexVal: index },
            success: function (data) {
                alert('success:' + data.index);            
               
                tabs.select(getTabAtIndex(data.index));
              
            },
            error: function () {
                alert('Error occured');
            }
        });
        }

        </script>

     @using (Html.BeginForm("ApplyforFbo", "ManageFbo", FormMethod.Post))
            {
                @(Html.Kendo().TabStrip()
                      .Name("tabstrip")
                      .Scrollable(false)
                      .Items(tabstrip =>
                      {
                          tabstrip.Add().Text("Step 1").LoadContentFrom("_Step1", "ManageFbo");
                          tabstrip.Add().Text("Step 2").LoadContentFrom("_Step2", "ManageFbo");
                          tabstrip.Add().Text("Step 3").LoadContentFrom("_Step3", "ManageFbo");
                          tabstrip.Add().Text("Step 4").LoadContentFrom("_Step4", "ManageFbo");
                          tabstrip.Add().Text("Step 5").LoadContentFrom("_Step5", "ManageFbo");
                          tabstrip.Add().Text("Step 6").LoadContentFrom("Documents", "ManageFbo");
                      })
                    )
             
                <br />
                <footer class="col-xs-12 form-group text-right">

                    @(Html.Kendo().Button()
                .Name("Previous2")
                .Content("Previous")
                .Events(ev => ev.Click("onPreviousClick")))

                    @(Html.Kendo().Button()
                .Name("Next2")
                .Content("Next")
                .HtmlAttributes(new { @class = "k-primary" })
                .Events(ev => ev.Click("onNextClick")))
                </footer>
            }

     

    //controller

    //this is loads populate the first tab

    public ActionResult ApplyForFbo(int? orgID, int? indexVal)
            {
                //empty value or a default
                var activeTab = "Step1";

                //selecting active tab logic here
                //...
                ViewBag.Active = activeTab;
                ViewBag.Index = "0";
                PopulateOrganisations();
                PopulateOrganisationContacts(Convert.ToInt32(TempData["OrganisationID"]));

                return View();
            }

     

    //on next it correctly come here and determines which index to go to next

    //this is then returned to the ajax's success function correctly

    [HttpPost]
    public ActionResult Step1(string orgID, string index)
    {
        int organisationID = Convert.ToInt32(orgID);

        if(organisationID == 0)
        {
            ViewBag.Active = "Step2";
            ViewBag.Index = "1";
        }
        else
        { 
           ViewBag.Active = "Step5";
            ViewBag.Index = "4";
        }

        return Json(new
        {
            index = ViewBag.Index
        });


    }

     

  6. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 12 Jul Link to this post

    Hi,

    I think that eq is returning a specific element: https://api.jquery.com/eq/

    The Select method will return the currently selected tab: http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#methods-select

    While tabGroup the object which contains the TabStrip items: http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#fields-tabGroup

    Could you check again if you are using the correct method and if you still experience any issues, please send us a runnable project, even with a dummy data, to test it on our side, as the code you sent can't be run and tested.

    Regards,
    Bozhidar
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Keziah
    Keziah avatar
    7 posts
    Member since:
    Jun 2016

    Posted 12 Jul Link to this post

    Hi Bozhidar

    I tried all the options you suggested above but they didnt work. I think if I can get it working just in a document.ready function then I will be able to get it working in my scenario as well. All Im trying to do is basically set the tab dynamically. So for example I need tab2 to be selected. If I manually click on each tab it works and if I set it statically as .Selected(true) it works but I want to set the tab in the jquery portion.

    If this still isn't sufficient then I'll create a sample project.

     

    <script>


        var progress,
            tabs,
            currentIndex = 0;


        $(document).ready(function ()
        {
           tabs = $("#tabstrip").data("kendoTabStrip");

           //need to set tab here
        
        })

        </script>

     

    --kendo control

     @(Html.Kendo().TabStrip()
                      .Name("tabstrip")
                      .Scrollable(false)
                      .Items(tabstrip =>
                      {
                          tabstrip.Add().Text("Step 1").LoadContentFrom("_Step1", "ManageFbo").HtmlAttributes(new { id = "tab1"});
                          tabstrip.Add().Text("Step 2").LoadContentFrom("_Step2", "ManageFbo").HtmlAttributes(new { id = "tab2" });
                          tabstrip.Add().Text("Step 3").LoadContentFrom("_Step3", "ManageFbo").HtmlAttributes(new { id = "tab3" });
                          tabstrip.Add().Text("Step 4").LoadContentFrom("_Step4", "ManageFbo").HtmlAttributes(new { id = "tab4" });
                          tabstrip.Add().Text("Step 5").LoadContentFrom("_Step5", "ManageFbo").HtmlAttributes(new { id = "tab5" });
                          tabstrip.Add().Text("Step 6").LoadContentFrom("Documents", "ManageFbo").HtmlAttributes(new { id = "tab6" });
                          tabstrip.Add().Text("Step 7").LoadContentFrom("_Step7", "ManageFbo").HtmlAttributes(new { id = "tab7" });
                      })
                    )

     

     

     

  8. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 13 Jul Link to this post

    Hi,

    If I understand correctly, you want by using the TabStrip API to select a specific tab using a button. The bellow example, shows how to do that:

    <script>
        //var progress,
        //    tabs,
        //    currentIndex=0;
        $(document).ready(function() {
            //tabs=$("#tabstrip").data("kendoTabStrip");
     
            //need to set tab here
            var tabStrip=$("#tabstrip").kendoTabStrip().data("kendoTabStrip");
     
            tabStrip.select("li:first");  // Select by jQuery selector
            $(".k-button").on("click",function() {
                tabStrip.select(1);   // Select by index
                return false;
            })
        })
    </script>
    --kendo control
    @(Html.Kendo().TabStrip()
                      .Name("tabstrip")
                      .Scrollable(false)
                      .Items(tabstrip =>
                      {
                          tabstrip.Add().Text("Step 1").HtmlAttributes(new { id = "tab1" });
                          tabstrip.Add().Text("Step 2").HtmlAttributes(new { id = "tab2" });
                          tabstrip.Add().Text("Step 3").HtmlAttributes(new { id = "tab3" });
                          tabstrip.Add().Text("Step 4").HtmlAttributes(new { id = "tab4" });
                          tabstrip.Add().Text("Step 5").HtmlAttributes(new { id = "tab5" });
                          tabstrip.Add().Text("Step 6").HtmlAttributes(new { id = "tab6" });
                          tabstrip.Add().Text("Step 7").HtmlAttributes(new { id = "tab7" });
                      })
    )
    <button class='k-button'>Select second tab</button>

    If the example is wrong, could you explain using the same example, what you want to achieve?

    Regards,
    Bozhidar
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Keziah
    Keziah avatar
    7 posts
    Member since:
    Jun 2016

    Posted 13 Jul Link to this post

    Perfect. That works on my next button. I found my problem from your example - thank you.

    What do you suggest is the best way to set the first tab as the selected and opened tab on first entry of the page? In the code below tabStrip.select(0) just selects the first tab but doesnt open it as illustrated in the picture.

    Sorry for all the questions on selecting the index.

    <script>

    $(document).ready(function ()
        {
            tabs = $("#tabstrip").data("kendoTabStrip");
            //var validator = $("#tickets").kendoValidator().data("kendoValidator");
                   
            var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
            tabStrip.select(0); //Assume this will set the first tab as opened and selected
       
            //tabStrip.select("li:first");  // Select by jQuery selector
            $("#Next").on("click", function () {
               
                var selector = '@active';
                var index = '@index';


                //e.preventDefault();


                $.ajax({
                    url: '@Url.Action(@active, "ManageFbo")',
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: { orgID: $("#ddlOrganisations").val(), indexVal: index },
                    success: function (data) {
                        tabStrip.select(data.index);   // Select by index
                        return false;
                    },
                    error: function () {
                        alert('Error occured');
                    }
                });
            })
        })

    </script>

  10. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 14 Jul Link to this post

    Hi,

    I modified a little my previous example and the first tab content is loaded:

    <script>
        //var progress,
        //    tabs,
        //    currentIndex=0;
        $(document).ready(function() {
            //tabs=$("#tabstrip").data("kendoTabStrip");
     
            //need to set tab here
            var tabStrip=$("#tabstrip").kendoTabStrip().data("kendoTabStrip");
     
            tabStrip.select(0);  // Select by jQuery selector
            $(".k-button").on("click",function() {
                tabStrip.select(1);   // Select by index
                return false;
            })
        })
    </script>
    --kendo control
    @(Html.Kendo().TabStrip()
                      .Name("tabstrip")
                      .Scrollable(false)
                      .Items(tabstrip =>
                      {
                          tabstrip.Add().Text("Step 1").HtmlAttributes(new { id = "tab1" }).Content("<div>content 1</div>");
                          tabstrip.Add().Text("Step 2").HtmlAttributes(new { id = "tab2" }).Content("<div>content 2</div>");
                          tabstrip.Add().Text("Step 3").HtmlAttributes(new { id = "tab3" }).Content("<div>content 3</div>");
                          tabstrip.Add().Text("Step 4").HtmlAttributes(new { id = "tab4" });
                          tabstrip.Add().Text("Step 5").HtmlAttributes(new { id = "tab5" });
                          tabstrip.Add().Text("Step 6").HtmlAttributes(new { id = "tab6" });
                          tabstrip.Add().Text("Step 7").HtmlAttributes(new { id = "tab7" });
                      })
    )
    <button class='k-button'>Select second tab</button>

    As you could see, the select method selects a specific tab inside the strip starting from 0.

    If could try to modify your code to match the same behavior, so you will be able to load the first tab.

    If you experience any problems, please, modify your code in a way to be runnable and send us back to us for testing.

    This is a short video: http://screencast.com/t/1XLKygbk showing the code in a browser - on load it loads the first tab, then I click the button and second tab is selected, then reload the page and again first tab is selected.

    Regards,
    Bozhidar
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready