@progress/kendo-layout-react-wrapper/docs/panelbar/templates.md

Kendo UI Layout wrapper for React

---
title: Templates
page_title: Templates - PanelBar - Kendo UI Wrappers for React
description: "Use the available templates of the Kendo UI PanelBar wrapper for React."
slug: templates_panelbar
position: 3
---

# Templates

The PanelBar allows you to use templates for instantiating its items and for customizing its appearance.

{% meta height:420 %}
```html
<script id="panelbar-template" type="text/kendo-ui-template">
        #: item.text #
        # if (!item.items) { #
        <a class='k-icon k-i-close-outline' href='\#'></a>
        # } #
</script>
<style>
		[data-role='panelbar'] .k-sprite {
        background-image: url("../icons/coloricons-sprite.png");
    }
    .rootfolder { background-position: 0 0; }
    .folder { background-position: 0 -16px; }
    .pdf { background-position: 0 -32px; }
    .html { background-position: 0 -48px; }
    .image { background-position: 0 -64px; }
</style>
```
```jsx-preview
class PanelBarContainer extends React.Component {
	  constructor(props) {
	    super(props);
			this.dataTextField = props.dataTextField;
      this.template =  kendo.template($("#panelbar-template").html());
	    this.dataSource = new kendo.data.HierarchicalDataSource({
	      data: props.data
	    });
  }

  render() {
    return (
      <PanelBar
        dataSource={this.dataSource}
        template={this.template}
        />
    );
  }
}
ReactDOM.render(
   <PanelBarContainer data={
			      [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder",
								items: [{
                    id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder",
										items: [
												{ id: 3, text: "about.html", spriteCssClass: "html" },
                          { id: 4, text: "index.html", spriteCssClass: "html" },
                          { id: 5, text: "logo.png", spriteCssClass: "image" }
                      ]
                  }, {
                    id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder",
										items: [
                          { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                          { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                      ]
                  },{
                    id: 9, text: "Reports", expanded: true, spriteCssClass: "folder",
										items: [
                          { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                          { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                          { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                      ]
                  }]
            }]
			    } />,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Suggested Links

* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)