Merge pull request #401 from telerik/panelbar-content-template

docs: Improve ContentTemplate information

Author: dimodi

components/panelbar/data-binding/overview.md

@@ -194,11 +194,13 @@ The following **Example** shows how to define simple binding to match item field
 
 You can define different binding settings for the different levels of nodes in the PanelBar. With this, the children of a node can consume a different field than their parent, and this may make your application more flexible. If you use [hierarchical data binding]({%slug panelbar-data-binding-hierarchical%}), the children can even use a different field or model from their parent.
 
-This also allows you to define a different [`ItemTemplate`]({%slug panelbar-templates%}) for different levels.
+This also allows you to define different [header and content templates]({%slug panelbar-templates%}) for different levels.
 
 To define multiple bindings, add multiple `PanelBarBinding` tags and define their `Level`.
 
-If a certain level does not have an explicit data bindings tag, it will use the default one that has no level.
+There can be maximum one binding for each level and one ("default") binding without a level. If multiple same-level bindings are declared, the first one is used and the rest are ignored.
+
+If a certain level does not have an explicit data binding tag, it will use the default one that has no level.
 
 >caption How to use per-level data binding settings to change model fields
 

components/panelbar/overview.md

@@ -144,7 +144,7 @@ Each item in the PanelBar consists of a `Header` and `Content`. The image below
 
 You can customize their rendering through the corresponding [Header Template]({%slug panelbar-templates-header%}) and [Content Template]({%slug panelbar-templates-content%}).
 
-The content represents the items in the hierarchy that does not have children. If the items have children and the ContentTemplate is defined, the template will not render. The header contains the Text of the correponding data item (model).
+The content represents the items in the hierarchy that do not have children. If the items have children and the ContentTemplate is defined, the template will not render. The header contains the Text of the correponding data item (model).
 
 ![panelbar parts](images/panelbar-parts-overview.png)
 

components/panelbar/templates/content.md

@@ -10,26 +10,38 @@ position: 10
 
 ## ContentTemplate
 
+You can control and customize the rendering of the content items in the PanelBar with a `ContentTemplate`. Here is how to use it.
 
-You can control and customize the rendering of the content items in the PanelBar. It provides a `context` object that you can cast to the type that the PanelBar is bound it.
+* The `ContentTemplate` is defined under the `PanelBarBinding` tag.
+* It provides a `context` object that you can cast to the type, which the PanelBar is bound to.
+* The template can include other Razor components or executable code.
+* Similar to [`PanelBarBinding`s]({%slug panelbar-data-binding-overview%}), there can be **one** `ContentTemplate` for all items at the same level. If the content of these items should be different, use conditional statements inside the template.
+* A `ContentTemplate` displays like a child item. It is rendered only for the items, which have no children.
 
-The `ContentTemplate` is defined under the `PanelBarBinding` tag.
-
->caption Use the ContentTemplate to customize the content items
+>caption Use ContentTemplate to customize the content items
 
 ````CSHTML
-@* Customize the rendering of the content items *@
+@*Set Level 0, 1 or 2 to the PanelBarBinding to see how the content template appears for specific levels only.*@
+@*Without a Level, the ContentTemplate will be applied to all items that have no children, from all levels, which don't have their own binding.*@
 
 <div style="width: 30%;">
     <TelerikPanelBar Data="@Items">
         <PanelBarBindings>
             <PanelBarBinding ItemsField="Items">
                 <ContentTemplate>
-                    @{ 
+                    @{
                         var item = context as PanelBarItem;
 
-                        <div style="text-decoration: underline; color: blue">
-                            @item.Text
+                        <div style="padding: 8px 16px;">
+                            <span style="text-decoration: underline; color: blue;">
+                                content template for: @item.Text
+                            </span>
+                            <br />
+                            @if (item.Text == "Item 2")
+                            {
+                                <TelerikButton Primary="true">Nested Component</TelerikButton>
+                            }
+
                         </div>
                     }
                 </ContentTemplate>
@@ -68,40 +80,14 @@ The `ContentTemplate` is defined under the `PanelBarBinding` tag.
                             new PanelBarItem()
                             {
                                 Text = "Item 1.2.1"
-                            },
-                            new PanelBarItem()
-                            {
-                                Text = "Item 1.2.2"
-                            }
-                        }
-                    }
-                }
-            },
-            new PanelBarItem()
-            {
-                Text = "Item 2",
-                Items = new List<PanelBarItem>()
-                {
-                    new PanelBarItem()
-                    {
-                        Text = "Item 2.1",
-                        Items = new List<PanelBarItem>()
-                {
-                            new PanelBarItem()
-                            {
-                                Text = "Item 2.1.1"
                             }
                         }
-                    },
-                    new PanelBarItem()
-                    {
-                        Text = "Item 2.2"
                     }
                 }
             },
             new PanelBarItem()
             {
-                Text = "Item 3"
+                Text = "Item 2"
             }
         };