From 3aaac42056f6bbd75e9b671bd0ec91d31346b826 Mon Sep 17 00:00:00 2001 From: praveensf4999 Date: Tue, 21 Oct 2025 13:22:46 +0530 Subject: [PATCH] 988109: Updated the code snippet in the Menu Bar Component --- ...ta-source-binding-and-custom-menu-items.md | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/blazor/menu-bar/data-source-binding-and-custom-menu-items.md b/blazor/menu-bar/data-source-binding-and-custom-menu-items.md index 337db94708..6075ab1def 100644 --- a/blazor/menu-bar/data-source-binding-and-custom-menu-items.md +++ b/blazor/menu-bar/data-source-binding-and-custom-menu-items.md @@ -34,8 +34,8 @@ In the following example, the **id**, **pId**, and **text** columns from self-re new CustomMenuItem{ Id = "parent1", Text = "Events" }, new CustomMenuItem{ Id = "parent2", Text = "Movies" }, new CustomMenuItem{ Id = "parent3", Text = "Directory" }, - new CustomMenuItem{ Id = "parent4", Text = "Queries", ParentId = "null" }, - new CustomMenuItem{ Id = "parent5", Text = "Services", ParentId = "null" }, + new CustomMenuItem{ Id = "parent4", Text = "Queries", ParentId = null }, + new CustomMenuItem{ Id = "parent5", Text = "Services", ParentId = null }, new CustomMenuItem{ Id = "parent6", Text = "Conferences", ParentId = "parent1" }, new CustomMenuItem{ Id = "parent7", Text = "Music", ParentId = "parent1" }, new CustomMenuItem{ Id = "parent8", Text = "Workshops", ParentId = "parent1" }, @@ -69,6 +69,7 @@ In the following example, the **id**, **pId**, and **text** columns from self-re ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLIsZrssHctKuMX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Data Binding in Blazor MenuBar](./images/blazor-menubar-data-binding.png) @@ -103,8 +104,8 @@ When using TValue with CustomMenuItem in the [MenuTemplates](https://help.syncfu new CustomMenuItem{ Id = "parent1", Text = "Events"}, new CustomMenuItem{ Id = "parent2", Text = "Movies" }, new CustomMenuItem { Id = "parent3", Text = "Directory" }, - new CustomMenuItem { Id = "parent4", Text = "Queries", ParentId = "null" }, - new CustomMenuItem { Id = "parent5", Text = "Services", ParentId = "null" }, + new CustomMenuItem { Id = "parent4", Text = "Queries", ParentId = null }, + new CustomMenuItem { Id = "parent5", Text = "Services", ParentId = null }, new CustomMenuItem { Id = "parent6", Text = "Conferences", ParentId = "parent1" }, new CustomMenuItem { Id = "parent7", Text = "Music", ParentId = "parent1" }, new CustomMenuItem { Id = "parent8", Text = "Workshops", ParentId = "parent1" }, @@ -136,7 +137,7 @@ When using TValue with CustomMenuItem in the [MenuTemplates](https://help.syncfu foreach (var item in menuItems) { var clonedItem = menuDict[item.Id]; - if (!string.IsNullOrEmpty(item.ParentId) && item.ParentId != "null") + if (!string.IsNullOrEmpty(item.ParentId) && item.ParentId != null) { if (menuDict.ContainsKey(item.ParentId)) { @@ -196,6 +197,7 @@ When using TValue with CustomMenuItem in the [MenuTemplates](https://help.syncfu } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBeMjBiMnvjKgoI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor MenuBar with Self-Referential Data with CustomMenuItem TValue in MenuTemplate](./images/blazor-menubar-self-referential-data.png) @@ -225,7 +227,7 @@ To customize Menu Bar items in your application, set your customized template us @{ if (MenuItems.Url != null) { - + } @MenuItems.Value if (MenuItems.Count != null) @@ -263,10 +265,10 @@ To customize Menu Bar items in your application, set your customized template us Value = "Products", Options = new List { - new CategoryModel { Value= "JavaScript", Url= "javascript" }, - new CategoryModel { Value= "Angular", Url= "angular" }, - new CategoryModel { Value= "ASP.NET Core", Url= "core" }, - new CategoryModel { Value= "ASP.NET MVC", Url= "mvc" } + new CategoryModel { Value= "JavaScript", Url= "https://ej2.syncfusion.com/demos/src/menu/images/javascript.png" }, + new CategoryModel { Value= "Angular", Url= "https://ej2.syncfusion.com/demos/src/menu/images/angular.png" }, + new CategoryModel { Value= "ASP.NET Core", Url= "https://ej2.syncfusion.com/demos/src/menu/images/core.png" }, + new CategoryModel { Value= "ASP.NET MVC", Url= "https://ej2.syncfusion.com/demos/src/menu/images/mvc.png" } } }, new CategoryModel { @@ -376,5 +378,6 @@ To customize Menu Bar items in your application, set your customized template us ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryiDLMBRagHDoZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor MenuBar with Custom Item](./images/blazor-menubar-custom-item.png)