[Solved] Auto Load Tab

[Dale]

I have a tabstrip in a view and I want the default tab to load automatically, Ive tried .Selected and as you can see .SelectedIndex but the tab is never selected or loaded. Surely there is a way to make it load without a bunch of javascript.

            <div class="col-9">
                @(Html.Kendo().TabStrip()
                    .Name("TabWorkflow")
                    .Animation(false)
                    .SelectedIndex(0)
                    .Items(tab =>
                    {
                        tab.Add().Text("Statuses").Enabled(Model.WorkflowId != 0).LoadContentFrom("Index", "WorkflowStatus", new { workflowId = Model.WorkflowId });
                    })
                )
            </div>

[Vasko]

Hi Dale,

Thank you for the shared sample code.

To automatically load and select the default tab in the TabStrip, using .SelectedIndex(0) is the recommended approach and should work without any additional JavaScript. This configuration will select the first tab and trigger the AJAX request to load its content as soon as the TabStrip is rendered.

The below code demonstrates an example where the first tab is automatically selected:

@(Html.Kendo().TabStrip()
     .Name("TabWorkflow")
        .SelectedIndex(2)
        .Items(tabstrip =>
          {
              tabstrip.Add().Text("Baseball")
                  .Content(@<text>
                      Content Tab 1
                  </text>);

              tabstrip.Add().Text("Golf")
                   .Content(@<text>
                      Content Tab 2
                  </text>);

              tabstrip.Add().Text("Swimming")
                   .Content(@<text>
                      Content Tab 3
                  </text>);
          })
    )

You can also test in in this REPL. Let me know if you need further troubleshooting or have additional questions.

Regards,
Vasko
Progress Telerik