Select first tab having external datasource

[Claudia]

Hi

I have issue selecting first tab, I read  in https://www.telerik.com/forums/can-t-programmatically-select-a-tab#8GpHjbXuJkyTYw-siBriCw that the issue can be because of the external dataSource. I use the example from http://demos.kendoui.com/web/tabstrip/images.html to create my json. here is part of my code. Any idea?

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/GetTabs/",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type) {
var result = {
val1: $("#val1").val(),
val2: $("#val2").val(),
}
return kendo.stringify(result);
}
},
});

$("#tabstrip").kendoTabStrip({               
dataTextField: "resId",
dataContentUrlField: "resName",
dataSource: dataSource
                
            });

 

function SelecTab() {    
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
}

[Veselin Tsvetanov]

Hello Claudia,

Here you will find a Dojo sample based on the snippets sent. You will notice, that upon a button click the Tab on index 1 (the second Tab) gets properly selected.

May I ask you to modify the above, so it reproduces the issue observed at your end and send it back to us? This way we will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance for this case.

Regards,
Veselin Tsvetanov
Progress Telerik

[Claudia]

Hi

Thank you for your answer. I need to call SelectTab function in dataBound of a listview. Once I load all the item in my listview I select the first and I need to show in the tabstrip all the subitems related and show the content of the first one.

$("#listview").kendoListView({
dataSource: dataSourceItem,
selectable: "single",
dataBound: onDataBound,
change: onLobChange,
template: kendo.template($("#template").html())
});

 

function onDataBound() {
var listView = $("#listview").data("kendoListView");
listView.select(listView.element.children().first());

SelecTab()
}

 

This shows the list of tabs but do not select the first one. Maye is related with the event or something else but I don't have a button here. Can you please help me?

Thank you

[Veselin Tsvetanov]

Hi Claudia,

In the described case, at the time when the DataBound event of the ListView fires, the TabStrip may not be available yet, or it may not be bound yet to its DataSource. Therefore, selecting the tab at this stage may not be possible.

In order to overcome this issue, I would suggest you to watch for the DataBound events of both widgets and perform the select after both of them are fired. Here you will find a simple Dojo implementing such scenario.

Regards,
Veselin Tsvetanov
Progress Telerik

[Claudia]

Hi

Thank you!! yes that was the issue, now is working fine  I appreciate your help