From fe05d9eca91eb44508f38cda6914ae41e91c33b3 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Wed, 21 May 2025 19:26:06 +0300 Subject: [PATCH] chore(PanelBar): update field bindings docs --- components/panelbar/data-binding/overview.md | 11 ++- components/panelbar/templates/header.md | 83 ++++++++++---------- 2 files changed, 52 insertions(+), 42 deletions(-) diff --git a/components/panelbar/data-binding/overview.md b/components/panelbar/data-binding/overview.md index b3d735677..87118ba53 100644 --- a/components/panelbar/data-binding/overview.md +++ b/components/panelbar/data-binding/overview.md @@ -66,7 +66,7 @@ Each `PanelBarBinding` tag exposes the following properties that refer to item p * ItemsField => Items -* Level - this is used for defining [different bindings for different levels](#multiple-level-bindings). If no level is set, the bindings are taken as default for any level that does not have explicit settings. You should have one `TelerikPanelBarBinding` without a level. +* Level - this is used for defining [custom field bindings](#custom-field-bindings) or [different bindings for different levels](#multiple-level-bindings). If no level is set, the bindings are taken as default for any level that does not have explicit settings. You should have one `TelerikPanelBarBinding` without a level to set the default bindings. >tip There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings. @@ -182,6 +182,15 @@ The following **Example** shows how to define simple binding to match item field ![Blazor PanelBar Data Binding](../images/panelbar-data-binding-basic-example.png) +### Custom Field Bindings + +If you are using custom field names, you must ensure their binding for each level. Otherwise, the PanelBar will not render items where the field bindings are missing. + +For that purpose, you must do either of the following: + +* Add one `TelerikPanelBarBinding` without a level to set the default bindings. +* Add `TelerikPanelBarBinding` for each level where you explicitly set the field bindings to your custom fields. + ### Multiple Level Bindings 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. diff --git a/components/panelbar/templates/header.md b/components/panelbar/templates/header.md index 80a45dd9e..accc52ec2 100644 --- a/components/panelbar/templates/header.md +++ b/components/panelbar/templates/header.md @@ -13,9 +13,9 @@ position: 5 You can control and customize the rendering of the header items in the PanelBar by using the `HeaderTemplate`. It provides a `context` object that you can cast to the type that the PanelBar is bound to. -The `HeaderTemplate` of a level is defined under the `PanelBarBinding` tag. +The `HeaderTemplate` of a level is defined under the `PanelBarBinding` tag. Set the `Level` parameter of the `PanelBarBinding` to specify the level the `HeaderTemplate` must be applied to. -If no levels are defined the `HeaderTemplate` will apply to the entire data. +If the `Level` parameter of the `PanelBarBinding` is not set, the `HeaderTemplate` will apply to the entire data. >caption Use HeaderTemplate to customize the rendering of the headers in the PanelBar @@ -26,7 +26,7 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. - + @{ var item = context as PanelBarItem; @@ -42,8 +42,9 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. @code { - public List Items { get; set; } - public IEnumerable ExpandedItems { get; set; } = new List(); + private List Items { get; set; } + + private IEnumerable ExpandedItems { get; set; } = new List(); public class PanelBarItem { @@ -60,50 +61,50 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. List items = new List(); items.Add(new PanelBarItem() - { - Id = 1, - Text = "Project", - ParentId = null, - HasChildren = false, - Icon = SvgIcon.Folder, - Url = "projectURL.url" - }); + { + Id = 1, + Text = "Project", + ParentId = null, + HasChildren = false, + Icon = SvgIcon.Folder, + Url = "projectURL.url" + }); items.Add(new PanelBarItem() - { - Id = 2, - Text = "Implementation", - ParentId = null, - HasChildren = true, - Icon = SvgIcon.Code - }); + { + Id = 2, + Text = "Implementation", + ParentId = null, + HasChildren = true, + Icon = SvgIcon.Code + }); items.Add(new PanelBarItem() - { - Id = 3, - Text = "C#", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Cs - }); + { + Id = 3, + Text = "C#", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Cs + }); items.Add(new PanelBarItem() - { - Id = 4, - Text = "HTML 5", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Html5 - }); + { + Id = 4, + Text = "HTML 5", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Html5 + }); items.Add(new PanelBarItem() - { - Id = 5, - Text = "CSS", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Css - }); + { + Id = 5, + Text = "CSS", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Css + }); return items; }