From fe05d9eca91eb44508f38cda6914ae41e91c33b3 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Wed, 21 May 2025 19:26:06 +0300 Subject: [PATCH 1/3] 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; } From d39c59fc81ad070207dba36f7115d2ce90c346b4 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 28 May 2025 16:46:56 +0300 Subject: [PATCH 2/3] Update components/panelbar/data-binding/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/panelbar/data-binding/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/panelbar/data-binding/overview.md b/components/panelbar/data-binding/overview.md index 87118ba53..b7b243f5d 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 [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. +* 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. From e23445adb39aaf06f72b367610ba6c25d35afff0 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Wed, 28 May 2025 16:48:33 +0300 Subject: [PATCH 3/3] Update components/panelbar/data-binding/overview.md --- components/panelbar/data-binding/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/panelbar/data-binding/overview.md b/components/panelbar/data-binding/overview.md index b7b243f5d..9381161ec 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 [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. +* 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 must 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.