Merge branch 'hotfix/hotfix-v27.1.48' into Es-892868-PortTooltip

Author: RamyaSubramaniSF4537

blazor-toc.html

@@ -3404,6 +3404,8 @@
 					<li> <a href="/blazor/multicolumn-combobox/getting-started">Blazor Server and WASM App</a></li>
 				</ul>
 			</li>
+			<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
+			<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
 		</ul>
 	</li>
 	<li>MultiSelect Dropdown

blazor/gantt-chart/data-binding.md

@@ -67,10 +67,10 @@ N> * Indent/Outdent is not supported for Hierarchy Data.
 
 ### Self-Referential / Flat Data Binding
 
-The Gantt Chart component can be bound with self-referential data by mapping the data source field values to the `Id` and `ParentID` properties.
+The Gantt Chart component uses a self-referential data binding model to represent hierarchical tasks, in which two key fields from your data source has to be mapped to the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) field and the [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) field of [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html). Together, these two fields define the parent-child relationship between tasks.
 
-* ID field: This field contains unique values used to identify each individual task and it is mapped to the `Id` property.
-* Parent ID field: This field contains values that indicate parent tasks and it is mapped to the `ParentID` property.
+* **Id field**: A field in each data object of the data source that uniquely identifies the task. This field name is mapped to the `Id` property of `GanttTaskFields`.
+* **ParentID field**: A field in each data object of the data source that contains a value corresponding to the **Id Field** to establish a parent-child relationship between tasks. This field name is mapped to the `ParentID` property of `GanttTaskFields`.
 
 ```cshtml
 @using Syncfusion.Blazor.Gantt

blazor/gantt-chart/getting-started-with-web-app.md

@@ -95,33 +95,16 @@ Add the Syncfusion Blazor Gantt Chart component in `.razor` file inside the `Pag
 {% tabs %}
 {% highlight razor %}
 
-<SfGantt TValue="TaskData">
-</SfGantt>
-
-@code{
-    public class TaskData
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentId { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Binding Blazor Gantt Chart with Data
-
-Bind data with the Gantt Chart component by using the `DataSource` property. It accepts the list objects or the DataManager instance.
-
-{% tabs %}
-{% highlight razor %}
-
 <SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
+    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
+    </GanttTaskFields>
+    <GanttColumns>
+        <GanttColumn Field="TaskId" HeaderText="Task ID"></GanttColumn>
+        <GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
+        <GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
+        <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
+        <GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
+    </GanttColumns>
 </SfGantt>
 
 @code{
@@ -156,9 +139,13 @@ Bind data with the Gantt Chart component by using the `DataSource` property. It
 {% endhighlight %}
 {% endtabs %}
 
-## Mapping task fields
+## Binding Gantt Chart with Data and Mapping Task Fields
+
+Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance. 
+
+Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
 
-The data source fields that are required to render the tasks are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property.
+This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
 
 {% tabs %}
 {% highlight razor %}
@@ -202,12 +189,14 @@ The data source fields that are required to render the tasks are mapped to the G
 
 ## Defining columns
 
-Gantt Chart has an option to define columns as an array. You can customize the Gantt Chart columns using the following properties:
+Gantt Chart has an option to define columns as an array. You can manage the order and customize the Gantt Chart columns using the following properties:
 
 * [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
 * [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
 * [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
 * [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
+* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
 
 {% tabs %}
 {% highlight razor %}
@@ -259,7 +248,7 @@ Gantt Chart has an option to define columns as an array. You can customize the G
 {% endhighlight %}
 {% endtabs %}
 
-For further details regarding Columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
+For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
 
 ## Enable editing
 

blazor/gantt-chart/getting-started.md

@@ -112,33 +112,16 @@ Add the Syncfusion Blazor Gantt Chart component in the **~/Pages/Index.razor** f
 {% tabs %}
 {% highlight razor %}
 
-<SfGantt TValue="TaskData">
-</SfGantt>
-
-@code{
-    public class TaskData
-    {
-        public int TaskId { get; set; }
-        public string TaskName { get; set; }
-        public DateTime StartDate { get; set; }
-        public DateTime EndDate { get; set; }
-        public string Duration { get; set; }
-        public int Progress { get; set; }
-        public int? ParentId { get; set; }
-    }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Binding Blazor Gantt Chart with Data
-
-Bind data with the Gantt Chart component by using the `DataSource` property. It accepts the list objects or the DataManager instance.
-
-{% tabs %}
-{% highlight razor %}
-
 <SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
+    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
+    </GanttTaskFields>
+    <GanttColumns>
+        <GanttColumn Field="TaskId" HeaderText="Task ID"></GanttColumn>
+        <GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
+        <GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
+        <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
+        <GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
+    </GanttColumns>
 </SfGantt>
 
 @code{
@@ -169,13 +152,16 @@ Bind data with the Gantt Chart component by using the `DataSource` property. It
         return Tasks;
     }
 }
-
 {% endhighlight %}
 {% endtabs %}
 
-## Mapping task fields
+## Binding Gantt Chart with Data and Mapping Task Fields
+
+Bind data with the Gantt Chart component by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) property. It accepts the list objects or the DataManager instance. 
+
+Additionally, task-related fields from the data source are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property. This property ensures that the necessary task fields, such as [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id), [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Name), [StartDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_StartDate), [EndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_EndDate), [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Duration), and [ParentID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_ParentID) are properly linked to the corresponding data source fields, allowing the Gantt Chart to render tasks accurately. The columns in the Gantt Chart are automatically rendered based on the properties specified in `GanttTaskFields`, ensuring that the necessary columns are displayed to represent the task data.
 
-The data source fields that are required to render the tasks are mapped to the Gantt Chart component using the [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) property.
+This following sample shows self-referential data binding in the Gantt Chart by mapping the data source fields to the `Id` and `ParentID` properties. For more detailed information, refer to the [documentation](https://blazor.syncfusion.com/documentation/gantt-chart/data-binding#self-referential--flat-data-binding).
 
 {% tabs %}
 {% highlight razor %}
@@ -219,12 +205,14 @@ The data source fields that are required to render the tasks are mapped to the G
 
 ## Defining columns
 
-Gantt Chart has an option to define columns as an array. You can customize the Gantt Chart columns using the following properties:
+Gantt Chart has an option to define columns as an array. You can manage the order and customize the Gantt Chart columns using the following properties:
 
 * [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Field): Maps the data source fields to the columns.
 * [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderText): Changes the title of columns.
 * [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_TextAlign): Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set `TextAlign` to right.
 * [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Format): Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
+* [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Visible): Show or hide a particular column. By default, columns are visible. Set this property to **false** to hide the column or **true** to make it visible.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width): To specify the width of the column, which can be defined in **pixels** or as a **percentage** of the total column width.
 
 {% tabs %}
 {% highlight razor %}
@@ -276,7 +264,7 @@ Gantt Chart has an option to define columns as an array. You can customize the G
 {% endhighlight %}
 {% endtabs %}
 
-For further details regarding Columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
+For further details regarding columns, refer [here](https://blazor.syncfusion.com/documentation/gantt-chart/columns).
 
 ## Enable editing
 
@@ -477,7 +465,7 @@ You can find the full information regarding Predecessors from [here](https://bla
 ## Handling exceptions
 Exceptions that occur during Gantt actions can be handled without stopping the application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event.
 
-The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure)event contains the error details returned from the server.
+The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_OnActionFailure) event contains the error details returned from the server.
 
 N> We recommend you bind the `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get a solution as early as possible.
 

blazor/multicolumn-combobox/code-snippet/data-binding/action-begin.razor

@@ -0,0 +1,21 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionBegin="@OnActionBeginhandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
+    <SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code {
+    public Query RemoteQuery = new Query();
+    public class EmployeeData
+    {
+        public int EmployeeID { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Country { get; set; }
+    }
+    private void OnActionBeginhandler(ActionBeginEventArgs args)
+    {
+        // Here, you can customize your code.
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/action-complete.razor

@@ -0,0 +1,21 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionComplete="@OnActionCompletehandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
+    <SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code {
+    public Query RemoteQuery = new Query();
+    public class EmployeeData
+    {
+        public int EmployeeID { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Country { get; set; }
+    }
+    private void OnActionCompletehandler(ActionCompleteEventArgs<EmployeeData> args)
+    {
+        // Here, you can customize your code.
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/action-failure.razor

@@ -0,0 +1,21 @@
+                @using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+
+<SfMultiColumnComboBox TItem="EmployeeData" TValue="string" AllowFiltering=true ValueField="EmployeeID" OnActionFailure="@OnActionFailurehandler" TextField="FirstName" PopupWidth="600px" Placeholder="e.g. Andrew">
+    <SfDataManager Url="https://blazor.syncfusion.com/services/release/api/Employees" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
+</SfMultiColumnComboBox>
+
+@code {
+    public Query RemoteQuery = new Query();
+    public class EmployeeData
+    {
+        public int EmployeeID { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Country { get; set; }
+    }
+    private void OnActionFailurehandler(Exception args)
+    {
+        // Here, you can customize your code.
+    }
+}

blazor/multicolumn-combobox/code-snippet/data-binding/add-new-item.razor

@@ -0,0 +1,39 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Buttons
+
+<div>
+    <SfMultiColumnComboBox @ref="multicolumnObj" TItem="Games" TValue="string" DataSource="LocalData" AllowFiltering=true ValueField="Game" TextField="Game" PopupWidth="600px" >
+</SfMultiColumnComboBox>
+</div>
+<div>
+    <SfButton Content="Click to add a new item" OnClick="OnBtnClick"></SfButton>
+</div>
+
+
+@code {
+    SfMultiColumnComboBox<string, Games> multicolumnObj;
+
+    public class Games
+    {
+        public string ID { get; set; }
+        public string Game { get; set; }
+        public string Category { get; set; } // New field
+    }
+    List<Games> LocalData = new List<Games> {
+    new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
+    new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
+    new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
+    new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
+    new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
+    new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
+    new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
+    new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
+    new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
+};
+
+    public async Task OnBtnClick()
+    {
+        await this.multicolumnObj.AddItemsAsync(new List<Games> { new Games() { ID = "Game11", Game = "Tennis", Category ="Outdoor" } });
+    }
+}