dataTextField String|Array (default: null)

Sets the field of the data item that provides the text content of the nodes. If an array, each level uses the field that is at the same index in the array, or the last item in the array.

Example

<ul id="panelbar"></ul>
<script>
var items = [
  { ProductName: "Tea", items: [
    { ProductName: "Green Tea" },
    { ProductName: "Black Tea" }
  ] },
  { ProductName: "Coffee" }
];
$("#panelbar").kendoPanelBar({
  dataTextField: "ProductName",
  dataSource: items
});
</script>

Example - using different fields on different levels

<ul id="panelbar"></ul>
<script>
var items = [
  { CategoryName: "Tea", items: [
    { ProductName: "Green Tea" },
    { ProductName: "Black Tea" }
  ] },
  { CategoryName: "Coffee" }
];
$("#panelbar").kendoPanelBar({
  dataTextField: [ "CategoryName", "ProductName" ],
  dataSource: items
});
</script>
In this article