JavaScript/jQuery TabPanel - Customize Item Appearance

An item in the TabPanel UI component includes a tab and a view. For a minor customization of TabPanel items, you can define specific fields in item data objects. For example, the following code generates three items: the first has a badge, the second is disabled, the third has an icon.

JavaScript
HTML
  • $(function() {
  • $('#tabPanelContainer').dxTabPanel({
  • items: [{
  • title: 'Info',
  • text: 'This is Info Tab',
  • badge: 'New'
  • }, {
  • title: 'Contacts',
  • text: 'This is Contacts Tab',
  • disabled: true
  • }, {
  • title: 'Address',
  • text: 'This is Address Tab',
  • icon: 'home'
  • }]
  • });
  • });
  • <div id="tabPanelContainer"></div>

If you need a more flexible solution, define itemTemplate and itemTitleTemplate for views and tabs, respectively.

JavaScript
HTML
  • var dataItems = [{
  • title: "Info",
  • data: { firstName: "John", lastName: "Smith", birthYear: 1986 }
  • }, {
  • title: "Contacts",
  • data: { phone: "(555)555-5555", email: "John.Smith@example.com" }
  • }];
  •  
  • $(function() {
  • $("#tabPanelContainer").dxTabPanel({
  • items: dataItems,
  • itemTitleTemplate: function(itemData, itemIndex, itemElement) {
  • itemElement.append("<p>" + itemData.title + "</p>");
  • },
  • itemTemplate: function(itemData, itemIndex, itemElement) {
  • var container = $("<div style='margin:25px;'>");
  • container.append("<h1>" + itemData.title + "</h1>");
  •  
  • var info = $("<div style='text-align:left;'>");
  • for (var field in itemData.data) {
  • info.append("<p>" + field + ": <b>" + itemData.data[field] + "</b></p>");
  • }
  • container.append(info);
  • itemElement.append(container);
  • }
  • });
  • });
  • <div id="tabPanelContainer"></div>

View Demo

You can also customize individual items. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.

JavaScript
HTML
  • $(function() {
  • $("#tabPanelContainer").dxTabPanel({
  • items: [{
  • title: "Info",
  • template: function() {
  • return $("<p>").text("This is Info Tab");
  • }
  • }, {
  • title: "Contacts",
  • template: $("#individualTemplate")
  • }]
  • });
  • });
  • <div id="tabPanelContainer"></div>
  • <script id="individualTemplate" type="text/html">
  • <p>This is Contacts Tab</p>
  • </script>
See Also