I am wanting to just display an icon instead of using text on the tabstrip tabs (the titles of the tab, not the content that pops up when you press the tab).
I have this tabstrip:
$('#filterTabStrip').kendoTabStrip({
//animation: false,
collapsible: true,
dataTextField: 'text',
dataImageUrlField: 'imageUrl',
dataContentField: 'content',
dataSource: [
{
text: 'Users',
//imageUrl: $('#user_tab_image').html(),
content: $('#user_filter_template').html()
},
{
text: 'Location',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#location")}'
content: $('#location_filter_template').html()
},
{
text: 'Description',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/action-sprite/svg/symbols.svg#description")}'
content: $('#description_filter_template').html()
},
{
text: 'Type',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#picklist")}'
content: $('#type_filter_template').html()
},
{
text: 'Custom',
//imageUrl: '{!URLFOR($Resource.slds, "slds-master/assets/icons/utility-sprite/svg/symbols.svg#apps")}'
content: $('#user_filter_template').html()
}
]
});
I have attempted to use static resource URL as well as setting the svg image in an html template, then setting the imageURL to that template, but that didn't work either.
I am hoping this is possible. Thank you for any help.
You can probably try to have an empty text for the dataTextField and provide the imageUrl of the icon which needs to show up. Something similar to this might help!