DevExtreme jQuery/JS - Customize Item Appearance
An item in the TabPanel widget 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.
- $(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. In Angular and Vue, you can declare them in the markup. In React, you can use rendering functions (shown in the code below) or components.
If you use jQuery, use DOM manipulation methods to combine the HTML markup for TabPanel items. To apply this markup, use the itemTemplate and itemTitleTemplate callback functions as shown in the following code:
- 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>
You can also customize individual items. In Angular, Vue, and React, declare them using the dxItem component. When using jQuery, you can declare the items as scripts and reference them in the template option or assign a customization function straight to this option.
- $(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>
In addition, you can use a 3rd-party template engine to customize widget appearance. For more information, see the 3rd-Party Template Engines article.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.