988109: Updated the code snippet in the Menu Bar Component

Author: praveensf4999

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)
                                 {
-                                    <img class="e-avatar e-avatar-small" src="@UriHelper.ToAbsoluteUri($"images/menu-bar/{MenuItems.Url}.png")" />
+                                    <img class="e-avatar e-avatar-small" src="@MenuItems.Url" />
                                 }
                                 <span style="width:100%;">@MenuItems.Value</span>
                                 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<CategoryModel>
         {
-                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
 </style>
 
 ```
+{% 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)