Merge branch 'hotfix/hotfix-v27.1.48' into BLAZ-911019-preView32

Author: MohamedMahadeer-SF4446

blazor-toc.html

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor Weekly Nuget Release Release Notes  
+description: Essential Studio for Blazor Weekly Nuget Release Release Notes  
+platform: Blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="September 24, 2024"  version="v27.1.50" %} 
+
+{% directory path: _includes/release-notes/v27.1.50 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

blazor/Release-Notes/27.1.50.md

@@ -244,7 +244,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Avoid overlapping with bezier](../../../images/bezierOverlap.png)
 
-### How to customize Bezier Segment Thumb Shape 
+## How to customize Bezier Segment Thumb Shape 
 
 The Bezier connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
 

blazor/diagram/connectors/segments/bezier/bezier.md

@@ -100,7 +100,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Editing Straight Segment in Blazor Diagram](../../images/blazor-diagram-edit-straight-segment.gif)
 
-### How to customize Straight Segment Thumb Shape 
+## How to customize Straight Segment Thumb Shape 
 
 The Straight connector can have multiple segments between the source and target points. By default, these segments are rendered as circles, but this can be customized either globally or for individual connectors using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.
 

blazor/diagram/connectors/segments/straight.md

@@ -833,7 +833,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 For more information about tooltip, refer to [Tooltip](https://blazor.syncfusion.com/documentation/diagram/tool-tip)
 
-### How to set tooltip for user handles
+## How to set tooltip for user handles
 
 The Diagram component supports displaying tooltips when the mouse hovers over any [UserHandle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SelectorConstraints.html#Syncfusion_Blazor_Diagram_SelectorConstraints_UserHandle). To achieve this, you need to configure the `Tooltip` property of the `UserHandle` to include the tooltip [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Content) and set its [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramTooltip.html#Syncfusion_Blazor_Diagram_DiagramTooltip_Position) appropriately. This configuration ensures that relevant information is displayed at the correct position relative to the handle when users hover over it.
 
@@ -991,7 +991,7 @@ The diagram supports displaying tooltips when the mouse hovers over any [FixedUs
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleTooltip)
 ![Tooltip for UserHandle](images/FixedUserHandleTooltip.gif)
 
-## How to set sticky tooltip for fixed user handles
+### How to set sticky tooltip for fixed user handles
 
 With this mode set to `true`, Tooltips for fixed user handles can be made to show up on the screen as long as the close icon is pressed. In this mode, close icon is attached to the Tooltip located at the top right corner. This mode can be enabled or disabled using the `IsSticky` property in tooltip. By default, the value of the IsSticky property is set to false.
 
@@ -1115,7 +1115,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![ToolTip During hover the port](./images/PortTooltip.gif )
 
-## How to set sticky tooltip for ports
+### How to set sticky tooltip for ports
 
 You can configure tooltips for ports to remain visible until the close icon is pressed. This feature is known as a "sticky" tooltip. When sticky mode is enabled, a close icon appears at the top right corner of the tooltip, allowing users to manually close it.
 

blazor/diagram/tool-tip.md

@@ -11,7 +11,7 @@ documentation: ug
 
 The critical path in a project is indicated by a single task or a series of tasks. If a task in critical path is delayed, the entire project will be delayed. A task is considered to be critical if any delay to this task would affect the project end date.
 
-The critical path can be enabled in Gantt by using the built-in toolbar button or [EnableCriticalPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableCriticalPath) property.
+The critical path can be enabled in the Gantt Chart by using the built-in toolbar button or by setting the [EnableCriticalPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableCriticalPath) property to true in the [SfGantt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html) component.
 
 The following code example shows how to display the critical path in the Gantt control:
 
@@ -68,9 +68,9 @@ The critical path settings in the Gantt Chart component determine the default sl
 
 Slack is a measure of how many days a task can be delayed without affecting the project's completion. By default, tasks with zero or negative slack values are critical, while tasks with positive slack values are non-critical. If a task's end date is the same as the project's end date, the slack value is 0, and the task is considered critical.
 
-You can change the default behavior of critical tasks by using the slackValue property of `GanttCriticalPathSettings`. This property defines how many days a task can be delayed before it is considered critical. For instance, in the following code example, tasks with two days of slack are shown on the critical path, so potential issues can be detected earlier.
+You can change the default behavior of critical tasks by using the [SlackValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttCriticalPathSettings.html#Syncfusion_Blazor_Gantt_GanttCriticalPathSettings_SlackValue) property of [GanttCriticalPathSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttCriticalPathSettings.html). This property defines how many days a task can be delayed before it is considered critical. For instance, in the following code example, tasks with two days of slack are shown on the critical path, so potential issues can be detected earlier.
 
-By adjusting the slackValue, you can control which tasks are critical and ensure that potential issues are identified and addressed in a timely manner.
+By adjusting the `SlackValue`, you can control which tasks are critical and ensure that potential issues are identified and addressed in a timely manner.
 
 ```cshtml
 @using Syncfusion.Blazor.Gantt
@@ -124,7 +124,7 @@ By adjusting the slackValue, you can control which tasks are critical and ensure
 
 The taskbar in critical path can be customized by using [QueryChartRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryChartRowInfo) event. The [GanttTaskModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.QueryChartRowInfoEventArgs-1.html#Syncfusion_Blazor_Gantt_QueryChartRowInfoEventArgs_1_GanttTaskModel) in the event argument is used to retrieve taskbar information.
 
-The following code example shows how to customize the critical path taskbar in the Gantt control:
+The following code snippet demonstrates how to customize the appearance of critical path taskbars in a Gantt Chart:
 
 ```cshtml
 @using Syncfusion.Blazor.Gantt
@@ -192,3 +192,5 @@ The following code example shows how to customize the critical path taskbar in t
 </style>
 ```
 ![Customize taskbar](images/blazor-gantt-chart-critical-path-customize-taskbar.png)
+
+>If the [ProjectEndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ProjectEndDate) property is set in the `SfGantt`, any task that ends on or after this date is considered critical. If the `ProjectEndDate` is not set, the maximum end date from the task records is used to determine which tasks are critical.

blazor/gantt-chart/criticalpath.md

@@ -0,0 +1,97 @@
+@using Syncfusion.Blazor.MultiColumnComboBox
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Buttons;
+@using System.ComponentModel.DataAnnotations;
+
+
+<div class="col-lg-12 control-section">
+    <div class="control-wrapper">
+        @if (string.IsNullOrEmpty(Message))
+        {
+            <EditForm Model="@ProductModel" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
+                <DataAnnotationsValidator />
+                <div>
+                    <label class="example-label">Select a product</label>
+                    <SfMultiColumnComboBox @bind-Value="@ProductModel.Name" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" PopupWidth="600px">
+                    </SfMultiColumnComboBox>
+                    <ValidationMessage For="()=>ProductModel.Name" />
+                </div>
+                <div class="submit-btn">
+                    <SfButton type="submit" IsPrimary="true">Submit</SfButton>
+                </div>
+            </EditForm>
+        }
+        else
+        {
+            <div class="alert alert-success">
+                @Message
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+    public Product ProductModel = new Product();
+    public class Product
+    {
+        [Required(ErrorMessage = "Please select a product")]
+        public string Name { get; set; }
+        public decimal Price { get; set; }
+        public string Availability { get; set; }
+        public string Category { get; set; }
+        public double Rating { get; set; }
+    }
+    private string Value { get; set; } = "Smartphone";
+    private List<Product> Products = new List<Product>();
+    protected override Task OnInitializedAsync()
+    {
+        Products = new List<Product>
+        {
+            new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
+            new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
+            new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
+            new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 },
+            new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 },
+            new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 },
+            new Product { Name = "Keyboard", Price = 39.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.1 },
+            new Product { Name = "Mouse", Price = 19.99m, Availability = "Out of Stock", Category = "Accessories", Rating = 4.3 }
+        };
+        return base.OnInitializedAsync();
+    }
+    private string Message = string.Empty;
+    async void OnValidSubmit()
+    {
+        Message = "Form Submitted Successfully!";
+        await Task.Delay(2000);
+        Message = string.Empty;
+        ProductModel.Name = null;
+        StateHasChanged();
+    }
+    private void OnInvalidSubmit()
+    {
+        Message = string.Empty;
+    }
+}
+<style>
+    .control-wrapper {
+        max-width: 250px;
+        margin: 0 auto;
+        padding: 50px 0px 0px;
+    }
+
+    .example-label {
+        font-size: 14px;
+        margin-bottom: 6px;
+    }
+
+    .submit-btn {
+        display: flex;
+        justify-content: center;
+        padding: 20px 0px 0px;
+    }
+
+    .validation-message {
+        color: red;
+        padding: 5px 0px 0px;
+    }
+</style>

blazor/multicolumn-combobox/code-snippet/form-validation/combobox-inside-editform.razor

@@ -0,0 +1,32 @@
+---
+layout: post
+title: Form Validation in Syncfusion Blazor MultiColumn ComboBox
+description: Checkout and learn about Form validation with Blazor MultiColumn ComboBox component in Blazor Sever App and Blazor WebAssembly App.
+platform: Blazor
+control: MultiColumn ComboBox
+documentation: ug
+---
+
+# Form Validation in MultiColumn ComboBox
+
+This demonstrates the creation of a form that includes a MultiColumn ComboBox, allowing the user to select an option from a list of items. The form also includes validation, which verifies that all required fields are filled out before the form can be submitted.
+
+## MultiColumn ComboBox inside edit form
+
+The MultiColumn ComboBox component can be used inside an EditForm to create a form that includes a list for selecting an option. The `EditForm` component validates all data annotation rules using the `DataAnnotationsValidator` component.
+
+When the MultiColumn ComboBox input is valid, the form is ready to be submitted. If the input is invalid, an error message will be displayed until a valid value is chosen.
+
+* The EditForm component wraps the entire form, has the Model attribute set to the model variable of type, and triggers the OnValidSubmit() method when the form is submitted.
+* The DataAnnotationsValidator component enables validation based on the Data Annotations attributes applied on the model properties.
+* The ValidationSummary component displays a summary of all validation errors on the form.
+* The ValidationMessage component displays a validation error message for the Name property of the model variable.
+* The submit button submits the form and triggers the OnValidSubmit() method when clicked.
+
+{% highlight cshtml %}
+
+{% include_relative code-snippet/form-validation/combobox-inside-editform.razor %}
+
+{% endhighlight %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

blazor/multicolumn-combobox/form-validation.md

@@ -0,0 +1,18 @@
+---
+layout: post
+title: Localization in Syncfusion Blazor MultiColumn ComboBox
+description: Checkout and learn here all about Localization in Syncfusion Blazor MultiColumn ComboBox component and much more.
+platform: Blazor
+control: MultiColumn ComboBox
+documentation: ug
+---
+
+# Globalization and Localization in Blazor ComboBox Component
+
+## Localization
+
+[Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion Blazor components.
+
+## Globalization
+
+[Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component can be localized. Refer to [Blazor Globalization](https://blazor.syncfusion.com/documentation/common/globalization) topic helps to demonstrate how globalization can be implemented in a Blazor application.