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>
8 Answers, 1 is accepted
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
Rank 1
Rank 1
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
});
}
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
Rank 1
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" });
})
)
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
Rank 1
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>
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