This is a migrated thread and some comments may be shown as answers.

Select first tab having external datasource

4 Answers 58 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Claudia
Top achievements
Rank 1
Claudia asked on 19 Mar 2018, 02:47 PM

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);
}

4 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 21 Mar 2018, 07:52 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claudia
Top achievements
Rank 1
answered on 21 Mar 2018, 02:05 PM

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

0
Veselin Tsvetanov
Telerik team
answered on 22 Mar 2018, 03:50 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Claudia
Top achievements
Rank 1
answered on 22 Mar 2018, 05:22 PM

Hi

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

Tags
TabStrip
Asked by
Claudia
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Claudia
Top achievements
Rank 1
Share this question
or