Merge branch 'hotfix/hotfix-v27.1.48' into BLAZ-910110-ColumnH1

Author: MalleshRavichandran

blazor-toc.html

@@ -3418,6 +3418,8 @@
 				<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
 			</li>
 			<li> <a href="/blazor/multicolumn-combobox/column">Columns</a></li>
+			<li> <a href="/blazor/multicolumn-combobox/grouping">Grouping</a></li>
+
 			<li>
 				<a href="/blazor/multicolumn-combobox/placeholder-and-floatlabel">Placeholder and Floatlabel</a>
 			</li>
@@ -3427,6 +3429,7 @@
 			<li>
 				<a href="/blazor/multicolumn-combobox/custom-value">Custom Value</a>
 			</li>
+			<li> <a href="/blazor/multicolumn-combobox/paging">Paging</a></li>
 			<li> <a href="/blazor/multicolumn-combobox/popup-setting">Popup Setting</a></li>
 			<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
 			<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>

blazor/diagram/annotations/appearance.md

@@ -376,7 +376,7 @@ You can change the font style of the annotations with the font specific properti
         Diagram.Nodes[0].Annotations[0].Style.Bold = false;
         Diagram.Nodes[0].Annotations[0].Style.TextDecoration = TextDecoration.None;
         Diagram.Nodes[0].Annotations[0].Style.Color = "Red";
-        Diagram.EndUpdate();
+        Diagram.EndUpdateAsync();
     }
 }
 ```

blazor/diagram/connectors/connectors.md

@@ -133,7 +133,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
         connector.ID = RandomId();
         connector.SourcePoint = new DiagramPoint { X = 100, Y = 100 };
         connector.TargetPoint = new DiagramPoint { X = 200, Y = 100 };
-        await diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { connector });
+        await diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { connector });
 
     }
     internal string RandomId()
@@ -152,9 +152,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 ![Clonning Node](../images/CloneConnector.gif)
 ## How to add connector with annotations at runtime
 
-You can add connector with annotation at runtime in the diagram component by using the [AddDiagramElements](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElements_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method.
+You can add connector with annotation at runtime in the diagram component by using the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method.
 
-The following code explains how to add an connector with annotation  at runtime by using `AddDiagramElements` method.
+The following code explains how to add an connector with annotation  at runtime by using `AddDiagramElementsAsync` method.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -200,7 +200,7 @@ The following code explains how to add an connector with annotation  at runtime
             },
         };
         NodeCollection.Add(NewConnector);
-       await Diagram.AddDiagramElements(NodeCollection);
+       await Diagram.AddDiagramElementsAsync(NodeCollection);
     }
 }
 ```
@@ -393,13 +393,13 @@ The following code example explains how to change the connector properties.
         Diagram.BeginUpdate();
         Diagram.Connectors[0].SourcePoint.X = 50;
         Diagram.Connectors[0].SourcePoint.Y = 50;
-        Diagram.EndUpdate();
+        Diagram.EndUpdateAsync();
     }
 }
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/UpdateConnectorAtRunTime)
 
-N> BeginUpdate and EndUpdate methods allow you to stop the continuous update of control and resume it finally.
+N> BeginUpdate and EndUpdateAsync methods allow you to stop the continuous update of control and resume it finally.
 
 ## Connections
 

blazor/diagram/group.md

@@ -236,7 +236,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
         (node4 as NodeGroup).Children = array;
         node4.OffsetX += 25;
         node4.OffsetY += 25;
-        await diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { node2, node3, node4 });
+        await diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { node2, node3, node4 });
     }
 
     internal string RandomId()
@@ -384,7 +384,7 @@ The following code illustrates how a node group is added at runtime.
 }
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/AddGroupAtRunTime)
-* Also, you can add the child to the node group through [AddChild](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddChild_Syncfusion_Blazor_Diagram_NodeGroup_Syncfusion_Blazor_Diagram_NodeBase_) method. The following code illustrates how to add child to the existing node group through AddChild method.
+* Also, you can add the child to the node group through [AddChildAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddChildAsync_Syncfusion_Blazor_Diagram_NodeGroup_Syncfusion_Blazor_Diagram_NodeBase_) method. The following code illustrates how to add child to the existing node group through AddChildAsync method.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -466,7 +466,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
                 }
             }
         };
-        await diagram.AddChild(group as NodeGroup, node);
+        await diagram.AddChildAsync(group as NodeGroup, node);
     }
 }
 ```

blazor/diagram/how-to.md

@@ -50,11 +50,11 @@ To create a node, define the Node object and add it to the nodes collection of t
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddMethod)
 
-## How to add nodes through AddDiagramElements
+## How to add nodes through AddDiagramElementsAsync
 
- Unlike the Add() method, the [AddDiagramElements](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElements_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method will measure the passed elements before re-rendering the complete diagram component at once. When using the Add() method to add multiple nodes and connectors simultaneously, the connectors will be rendered before the nodes. As a result, connectors may be misplaced due to the synchronous behavior of the Add method. To overcome this, use the asynchronous AddDiagramElements() method.
+ Unlike the Add() method, the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method will measure the passed elements before re-rendering the complete diagram component at once. When using the Add() method to add multiple nodes and connectors simultaneously, the connectors will be rendered before the nodes. As a result, connectors may be misplaced due to the synchronous behavior of the Add method. To overcome this, use the asynchronous AddDiagramElementsAsync() method.
 
-* AddDiagramElements() method is a preferred way to add a collection of items to the diagram to get better performance compared to Add() method.
+* AddDiagramElementsAsync() method is a preferred way to add a collection of items to the diagram to get better performance compared to Add() method.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -147,7 +147,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
         NodeCollection.Add(node1);
         NodeCollection.Add(node2);
         NodeCollection.Add(Connector);
-        await Diagram.AddDiagramElements(NodeCollection);
+        await Diagram.AddDiagramElementsAsync(NodeCollection);
     }
 }
 ```
@@ -958,8 +958,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
  ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/GetCustomCursor)
 
-## How to use the BeginUpdate and EndUpdate
- [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) prevents visual updates to the diagram until the EndUpdate() method is called. [EndUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdate) means that the diagram is unlocked following a call to the BeginUpdate(Boolean) method, resulting in an immediate visual update.
+## How to use the BeginUpdate and EndUpdateAsync
+ [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) prevents visual updates to the diagram until the EndUpdateAsync() method is called. [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) means that the diagram is unlocked following a call to the BeginUpdate(Boolean) method, resulting in an immediate visual update.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -1032,7 +1032,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
         diagram.BeginUpdate();
         diagram.Nodes[0].Height = 150;
         diagram.Nodes[0].Width = 150;
-        diagram.EndUpdate();
+        diagram.EndUpdateAsync();
 
     }
 }
@@ -1305,7 +1305,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
             {
                 sfDiagram.EndGroupAction();
             }
-            _ = sfDiagram.EndUpdate();
+            _ = sfDiagram.EndUpdateAsync();
             base.OnMouseUp(args);
             this.InAction = true;
         }
@@ -1525,7 +1525,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/ZoomAndPan)
 
 ## How to refresh the datasource
- [RefreshDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RefreshDataSource) will refresh the layout based on the changes in the data source.
+ [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RefreshDataSourceAsync) will refresh the layout based on the changes in the data source.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -1599,7 +1599,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
         new MindMapDetails() { Id= "4",  Label="Sessions", ParentId ="2", Branch = "subRight" },
         new MindMapDetails() { Id= "5",  Label="Complementing", ParentId ="2", Branch = "subRight" },
         };
-        await Diagram.RefreshDataSource();
+        await Diagram.RefreshDataSourceAsync();
     }
 }
 ```

blazor/diagram/interaction.md

@@ -251,7 +251,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram
             groupNode.OffsetX += 25;
             groupNode.OffsetY += 25;
         }
-        diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { groupNode });
+        diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { groupNode });
         return groupNode.ID;
     }
     public string CloneNode(Node node, bool isChild)
@@ -264,7 +264,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram
             nodeChild.OffsetX += 25;
             nodeChild.OffsetY += 25;
         }
-        diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { nodeChild });
+        diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { nodeChild });
         diagram.EndGroupAction();
         return nodeChild.ID;
     }
@@ -278,7 +278,7 @@ Clone is a virtual method of the node that is used to create a copy of a diagram
             connectorChild.SourcePoint = new DiagramPoint() { X = connectorChild.SourcePoint.X + 25, Y = connectorChild.SourcePoint.Y + 25 };
             connectorChild.TargetPoint = new DiagramPoint() { X = connectorChild.TargetPoint.X + 25, Y = connectorChild.TargetPoint.Y + 25 };
         }
-        diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { connectorChild });
+        diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { connectorChild });
         diagram.EndGroupAction();
         return connectorChild.ID;
     }

blazor/diagram/layout/hierarchical-layout.md

@@ -196,7 +196,7 @@ public void UpdateSpacing()
     Diagram.BeginUpdate();
     HorizontalSpacing += 10;
     VerticalSpacing += 10;
-    Diagram.EndUpdate();
+    Diagram.EndUpdateAsync();
 }
 ```
 
@@ -221,7 +221,7 @@ public void UpdateMargin()
     Diagram.BeginUpdate();
     left += 10;
     top += 10;
-    Diagram.EndUpdate();
+    Diagram.EndUpdateAsync();
 }
 ```
 

blazor/diagram/layout/organizational-chart.md

@@ -370,11 +370,11 @@ The following code example illustrates how to add assistants to the layout.
 
 ## How to refresh the layout
 
-Diagram allows to refresh the layout at runtime by using the [DoLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DoLayout) method. Use the following code example to refresh the layout.
+Diagram allows to refresh the layout at runtime by using the [DoLayoutAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DoLayoutAsync) method. Use the following code example to refresh the layout.
 
 ```csharp
 //Update the layout at runtime.
-diagram.DoLayout();
+diagram.DoLayoutAsync();
 
 //Here, diagram is instance of SfDiagramComponent.
 ```

blazor/diagram/nodes/nodes.md

@@ -116,9 +116,9 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ## How to add node with annotations at runtime
 
-You can add node with annotation at runtime in the diagram component by using the [AddDiagramElements](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElements_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method.
+You can add node with annotation at runtime in the diagram component by using the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method.
 
-The following code explains how to add an node with annotation  at runtime by using `AddDiagramElements` method.
+The following code explains how to add an node with annotation  at runtime by using `AddDiagramElementsAsync` method.
 
 ```cshtml
 @using Syncfusion.Blazor.Diagram
@@ -175,7 +175,7 @@ The following code explains how to add an node with annotation  at runtime by us
             },
         };
         NodeCollection.Add(NewNode);
-       await diagram.AddDiagramElements(NodeCollection);
+       await diagram.AddDiagramElementsAsync(NodeCollection);
     }
 }
 ```
@@ -300,7 +300,7 @@ public void RemoveNodes()
         node.ID = RandomId();
         node.OffsetX += 25;
         node.OffsetY += 25;
-        await diagram.AddDiagramElements(new DiagramObjectCollection<NodeBase>() { node });
+        await diagram.AddDiagramElementsAsync(new DiagramObjectCollection<NodeBase>() { node });
     }
 
     internal string RandomId()
@@ -358,13 +358,13 @@ The following code example explains how to change the node properties.
         Diagram.BeginUpdate();
         Diagram.Nodes[0].Width = 50;
         Diagram.Nodes[0].Height = 50;
-        await Diagram.EndUpdate();
+        await Diagram.EndUpdateAsync();
     }
 }
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/UpdateNode)
 
-N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) and [EndUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdate) methods allow you to stop the continuous update of control and resume it finally.
+N> [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_BeginUpdate) and [EndUpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EndUpdateAsync) methods allow you to stop the continuous update of control and resume it finally.
 
 ## See Also
 

blazor/diagram/ports/ports.md

@@ -346,7 +346,7 @@ protected override void OnInitialized()
         diagram.BeginUpdate();
         nodes[0].Ports[0].Offset.X = 1;
         nodes[0].Ports[0].Offset.Y = 1;
-        await diagram.EndUpdate();
+        await diagram.EndUpdateAsync();
     }
 }
 ```