I would like to position both the scroll buttons for the tabstrip to the right (see screenshot) and let them always be visible. Any thoughts on whether this is possible and how to get that working?

Thanks,
Ron

Hi,

Google maps can just display in the first tab, no other tabs, it only showed the icons but no content, as in the attached file.

I've tried different way, including put the function inside onSelect, none worked well.

Please help, thanks!

Hello all,

I would like to append the badge count of number of records (retrieved in the grid that appears when a Kendo TabStrip Item is selected) to the TabStrip Item's Text. So basically this is something like changing the TabStrip Item's Text dynamically. It would be really helpful if someone could suggest any ideas on how to achieve this. Thank you in advance!! 

Hi

I have a TabStrips that gets the tabs from external source (dynamic) and the scrollable property is not working for me. Here is part of the code, I will appreciate any help.

$("#tabstrip").kendoTabStrip({
tabPosition: "top",
scrollable: true,
dataTextField: "ItemId",
dataContentUrlField: "ItemUrl",
dataSource: dataSourceItem
dataBound: function () {
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.select(0);
},
activate: onItemSelect,
});

Thank you!!!

Hi support team. 

We are developing an offline application with use of angular 1.6 & kendo ui & jQuery 3.1.1.
We've tried to update a kendo to newest version, but we've hit issue #3446 so we've decided to use latest version, that handles dropdowns correctly - 2015.3.1111. 

I have a following tabstrip control:

When I use Kendo.Ui ver v2014.2.903 Ajax calls from TabStrip looks like that: ".../NGViews/First.html", but when I switch to 2015.3.1111 they starts looking like this: "....NGViews/First.html?_=1501840674365 - this number at the end is increased with every call. So caching mechanism can't read page from cache.

According to documentation this can be overrided in 2017 releases.

Do you know a way to bypass this problem in 2015.3.1111? For us it is critical issue.

I've tried to make $.ajaxSetup({ 'cache': true }); just after referencing jQuery, but it gave me nothing.

Hi

I'm having trouble binding the data when I change the tab. First time the data s binding perfectly fine but when I click any other tab is not working and if I return to the first one the data is there. here is part of my code I will appreciate any help

function createTabStrip() {
$("#tabstrip").kendoTabStrip({
tabPosition: "top",
scrollable: true,
dataTextField: "ItemId",
dataContentUrlField: "ItemUrl",
dataSource: dataSourceItem,
dataBound: function () {
var tabStrip = $("#tabstrip").data("kendoTabStrip");
tabStrip.select(0);
},
activate: onItemSelect,
});
}

function onItemSelect()
{
var index = this.select().index();
currItem = dataSourceItem.view()[index].ItemId;
if (itemDatSourceCreated === false) {
createItemObsDataSource();
createItemDataObservable();
itemDatSourceCreated = true;
        Observ.dataSource.read();
}
else
itemObserv.dataSource.read();
}

function createItemDataObservable() {
itemObserv = kendo.observable({
dataSource: dataSourceItemDat
});
}

function createItemObsDataSource() {
dataSourceItemDat = new kendo.data.DataSource({
transport: {
read: {
url: baseUrl + "/api/EPDApi/GetInfo/",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
},
parameterMap: function (data, type) {
var result = {
Id: currId,
source: currSource,
contract: currItem
}
return kendo.stringify(result);
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "contID",
fields: {
contID: { from: "ContractId" },
contDirInc: { from: "DirectoryInclude" },
contIpa: { from: "IPAAffiliate" },
contIpaName: { from: "IPAAffiliateName" },
contPart: { from: "Participation" },
contPcp: { from: "PCP" },
contSpecialty: { from: "Specialty" },
contPrimSpec: { from: "PrimarySpecialty" },
contSubSpec: { from: "SubSpecialty" },
contSpecType: { from: "SpecialtyType" },
contProvTier: { from: "ProvTier" },
contProvTierPlan: { from: "ProvTierPlanCode" }
}
}
},
change: function () {
kendo.unbind($("#contract"));
kendo.bind($("#contract"), itemObserv.dataSource.data()[0]);
}
})
}

Hi @all

Is there a good way of keeping some tabs within a Tabstrip visible all the time, whereas allowing all others to scroll if tab space is not sufficient. I'm not sure whether this is easy to accomplish as all tabs are placed into a single "ul"-placeholder element that is scrolled if tab space is not sufficient

Bye

Ralf

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

Hi
I have this annoying blue border around the Kendo TabStrip whenever it is selected.

Please see attached image.

Does anyone know how to use it please?

Thanks.

Hi,

I have a problem with opacity in Tabs on Mircosoft Edge. I use kendo UI in version (2017.3.1026), but it doesn't seem to work even on the latest version kendo.

When I changing the tab there is some kind of animation with opacity. But I don't know how I can disabled it.

On chrome everything works fine.

https://demos.telerik.com/aspnet-mvc/tabstrip

Can you help me fix it?

Best regards.