diff --git a/blazor/3D-chart/getting-started-with-web-app.md b/blazor/3D-chart/getting-started-with-web-app.md index 11f6b33cc0..e0fc19c383 100644 --- a/blazor/3D-chart/getting-started-with-web-app.md +++ b/blazor/3D-chart/getting-started-with-web-app.md @@ -26,9 +26,9 @@ To get started quickly with Blazor 3D Chart component, check on the following vi ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. ## Install Syncfusion® Blazor 3D Chart NuGet in the Blazor Web App diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 22f1f6695a..1d293f04bd 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -21,9 +21,9 @@ This section briefly explains about how to include [Blazor Barcode](https://www. ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App diff --git a/blazor/breadcrumb/getting-started.md b/blazor/breadcrumb/getting-started.md index f2518af0ca..b330a59ae4 100644 --- a/blazor/breadcrumb/getting-started.md +++ b/blazor/breadcrumb/getting-started.md @@ -193,8 +193,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Breadcrumb example](https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities?theme=bootstrap5) that shows you how to render and configure the breadcrumb. diff --git a/blazor/bullet-chart/getting-started.md b/blazor/bullet-chart/getting-started.md index a596d83da2..377bfa72b6 100644 --- a/blazor/bullet-chart/getting-started.md +++ b/blazor/bullet-chart/getting-started.md @@ -26,7 +26,7 @@ To get start quickly with Bullet Chart Component using Blazor, you can check on ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Bullet Chart NuGet in the App diff --git a/blazor/check-box/getting-started.md b/blazor/check-box/getting-started.md index 249e049504..032e9ba714 100644 --- a/blazor/check-box/getting-started.md +++ b/blazor/check-box/getting-started.md @@ -165,8 +165,8 @@ Add the Syncfusion® Blazor CheckBox compone ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Checkbox example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Checkbox. diff --git a/blazor/color-picker/getting-started.md b/blazor/color-picker/getting-started.md index b3fd4c91a2..43219e0581 100644 --- a/blazor/color-picker/getting-started.md +++ b/blazor/color-picker/getting-started.md @@ -158,6 +158,6 @@ Add the Syncfusion® Blazor ColorPicker comp ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md index 69d8656161..ad5b5e2d84 100644 --- a/blazor/combobox/getting-started-with-web-app.md +++ b/blazor/combobox/getting-started-with-web-app.md @@ -297,7 +297,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/combobox/getting-started.md b/blazor/combobox/getting-started.md index 14ed4d33b9..2e3a26e078 100644 --- a/blazor/combobox/getting-started.md +++ b/blazor/combobox/getting-started.md @@ -226,6 +226,6 @@ By default, the width of the popup list automatically adjusts according to the C ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) diff --git a/blazor/dashboard-layout/getting-started-with-web-app.md b/blazor/dashboard-layout/getting-started-with-web-app.md index 83a17debbf..f6e3e688ed 100644 --- a/blazor/dashboard-layout/getting-started-with-web-app.md +++ b/blazor/dashboard-layout/getting-started-with-web-app.md @@ -457,7 +457,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/dashboard-layout/getting-started.md b/blazor/dashboard-layout/getting-started.md index ef427c2619..8bbbb49777 100644 --- a/blazor/dashboard-layout/getting-started.md +++ b/blazor/dashboard-layout/getting-started.md @@ -386,9 +386,9 @@ By default, the Dashboard Layout component is rendered with auto adjustable and ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md index fb2dae4d68..73c18fc6f5 100644 --- a/blazor/datagrid/cell.md +++ b/blazor/datagrid/cell.md @@ -766,10 +766,7 @@ The Syncfusion Blazor DataGrid allows you to display information about the Grid ### Show tooltip -The Syncfusion Blazor DataGrid provides a built-in feature to display tooltips when hovering over header and content cells. You can enable this feature by setting the `ShowTooltip` property to **true** in the DataGrid. -By default, it shows the cell value for both header and content cells. For special types like templates, it displays the row data of the corresponding cells. - -The following example demonstrates, how to set the `ShowTooltip` property in the DataGrid. +The Syncfusion Blazor DataGrid provides a built-in feature to display tooltips when hovering over header and content cells. You can enable this feature by setting the `ShowTooltip` property to **true** in the DataGrid. By default, it shows the cell value for both header and content cells. For special types like templates, it displays the row data of the corresponding cells. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -778,77 +775,70 @@ The following example demonstrates, how to set the `ShowTooltip` property in the - + - - + + @code { - private SfGrid Grid; public List Orders { get; set; } - + protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); - } + } } {% endhighlight %} -{% highlight c# tabtitle="Order.cs" %} +{% highlight c# tabtitle="OrderData.cs" %} public class OrderData +{ + public static List Orders = new List(); + public OrderData() { - public static List Orders = new List(); - public OrderData() - { - } - public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.OrderDate = OrderDate; - this.Freight = Freight; - } - public static List GetAllRecords() + } + public OrderData( int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) { - if (Orders.Count() == 0) - { - int code = 10; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(10248, "VINET",new DateTime(1996,07,07), 32.38)); - Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 07), 92.38)); - Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 07), 62.77)); - Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 07), 12.38)); - Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 07), 82.38)); - Orders.Add(new OrderData(10253, "CHOPS", new DateTime(1996, 07, 07), 31.31)); - Orders.Add(new OrderData(10254, "RICSU", new DateTime(1996, 07, 07), 22.37)); - Orders.Add(new OrderData(10255, "WELLI", new DateTime(1996, 07, 07), 44.34)); - Orders.Add(new OrderData(10256, "RICSU", new DateTime(1996, 07, 07), 31.33)); - code += 5; - } - } - return Orders; + Orders.Add(new OrderData(10248, "VINET", new DateTime(2025, 08, 01), 32.38)); + Orders.Add(new OrderData(10249, "TOMSP", new DateTime(2025, 04, 30), 92.38)); + Orders.Add(new OrderData(10250, "HANAR", new DateTime(2025, 07, 26), 62.77)); + Orders.Add(new OrderData(10251, "VICTE", new DateTime(2025, 07, 09), 12.38)); + Orders.Add(new OrderData(10252, "SUPRD", new DateTime(2025, 05, 07), 82.38)); + Orders.Add(new OrderData(10253, "CHOPS", new DateTime(2025, 07, 10), 31.31)); + Orders.Add(new OrderData(10254, "RICSU", new DateTime(2025, 01, 22), 22.37)); + Orders.Add(new OrderData(10255, "WELLI", new DateTime(2025, 03, 17), 44.34)); + Orders.Add(new OrderData(10256, "RICSU", new DateTime(2025, 07, 20), 31.33)); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + return Orders; } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSjFVnKuSghwyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBoZEshhfHlMplf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Tooltip template -The Syncfusion Blazor DataGrid component provides a built-in option to customize tooltip content for both header and content cells. This can be achieved using the `TooltipTemplate` property, which accepts a `RenderFragment` under the `GridTemplates` component. +The Syncfusion Blazor DataGrid component provides a built-in option to customize tooltip content for both header and content cells. This can be achieved using the `TooltipTemplate` property, which accepts a `RenderFragment` under the `GridTemplates` component. This feature allows you to display additional information about columns when users hover over them, enhancing the clarity and usability of the DataGrid. -This feature allows you to display additional information about columns when users hover over them, enhancing the clarity and usability of the DataGrid. Tooltip customization is supported through the `TooltipTemplateContext`, which provides access to the following built-in properties:
  • Value – Displays the content of the hovered cell: the column name for header cells or the cell value for content cells.
    • @@ -865,19 +855,18 @@ The following sample demonstrates a custom tooltip implementation using the `Too @using Syncfusion.Blazor.Grids - + @{ var tooltip = context as TooltipTemplateContext; - var order = tooltip?.RowData as OrdersDetails; + var order = tooltip?.Data as OrdersDetails; if (tooltip?.RowIndex == -1) { if (tooltip.Value == "Order ID") { @tooltip.Value: Unique number used to identify each customer order. } - else if (tooltip.Value == "Customer ID") {
    @@ -893,7 +882,6 @@ The following sample demonstrates a custom tooltip implementation using the `Too @tooltip.Value: Name of the city where the order is delivered. } } - else { var fieldName = tooltip?.Column?.Field; @@ -903,27 +891,23 @@ The following sample demonstrates a custom tooltip implementation using the `Too case nameof(order.OrderID):

    @((MarkupString)GetStatusMessage(order.Status, order.OrderDate))

    break; - case nameof(OrdersDetails.CustomerID):

    - EmailID: @order.Email + Email: @order.Email

    break; - case nameof(OrdersDetails.Freight): -

    - Delivery Type: - @GetDeliveryType(order.Freight) -

    +

    + Delivery Type: + @GetDeliveryType(order.Freight) +

    break; - case nameof(OrdersDetails.ShipCity): - + Country: @order.ShipCountry break; - default: @tooltip?.Column?.Field: @tooltip.Value break; @@ -934,9 +918,9 @@ The following sample demonstrates a custom tooltip implementation using the `Too - + - + @@ -946,26 +930,14 @@ The following sample demonstrates a custom tooltip implementation using the `Too position: relative; top: 2px; } - @code { - public List GridData { get; set; } + public List Orders { get; set; } protected override void OnInitialized() { - GridData = new List - { - new OrdersDetails { OrderID = 1001, CustomerID = "Nancy", Freight = 80, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-1), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "nancy@example.com", DeliveryDays = "5-7 days" }, - new OrdersDetails { OrderID = 1002, CustomerID = "Andrew", Freight = 120, ProductName = "Smartphone", OrderDate = DateTime.Now.AddDays(3), ShipCity = "Munster", ShipCountry = "Germany", Status = "Pending", Location = "Germany", Email = "andrew@example.com" , DeliveryDays = "3-4 days"}, - new OrdersDetails { OrderID = 1003, CustomerID = "Janet", Freight = 180, ProductName = "Tablet", OrderDate = DateTime.Now.AddDays(-3), ShipCity = "Charleroi", ShipCountry = "Belgium", Status = "Cancelled", Location = "Belgium", Email = "janet@example.com" , DeliveryDays = "1-2 days"}, - new OrdersDetails { OrderID = 1004, CustomerID = "Margaret", Freight = 60, ProductName = "Monitor", OrderDate = DateTime.Now.AddDays(-4), ShipCity = "Lyon", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "margaret@example.com" , DeliveryDays = "5-7 days"}, - new OrdersDetails { OrderID = 1005, CustomerID = "Steven", Freight = 130, ProductName = "Keyboard", OrderDate = DateTime.Now.AddDays(4), ShipCity = "Delhi", ShipCountry = "India", Status = "Pending", Location = "India", Email = "steven@example.com" , DeliveryDays = "3-4 days"}, - new OrdersDetails { OrderID = 1006, CustomerID = "Michael", Freight = 220, ProductName = "Mouse", OrderDate = DateTime.Now.AddDays(-6), ShipCity = "Tokyo", ShipCountry = "Japan", Status = "Delivered", Location = "Japan", Email = "michael@example.com" , DeliveryDays = "1-2 days" }, - new OrdersDetails { OrderID = 1007, CustomerID = "Robert", Freight = 90, ProductName = "Printer", OrderDate = DateTime.Now.AddDays(-7), ShipCity = "Toronto", ShipCountry = "Canada", Status = "Cancelled", Location = "Canada", Email = "robert@example.com" , DeliveryDays = "5-7 days"}, - new OrdersDetails { OrderID = 1008, CustomerID = "Laura", Freight = 160, ProductName = "Camera", OrderDate = DateTime.Now.AddDays(1), ShipCity = "Sydney", ShipCountry = "Australia", Status = "Pending", Location = "Australia", Email = "laura@example.com", DeliveryDays = "1-2 days" }, - new OrdersDetails { OrderID = 1009, CustomerID = "Anne", Freight = 90, ProductName = "Laptop", OrderDate = DateTime.Now.AddDays(-9), ShipCity = "Reims", ShipCountry = "France", Status = "Delivered", Location = "France", Email = "anne@example.com" ,DeliveryDays = "5-7 days" }, - }; + Orders = OrdersDetails.GetAllRecords(); } private string GetStatusMessage(string status, DateTime? orderDate) { @@ -986,26 +958,61 @@ The following sample demonstrates a custom tooltip implementation using the `Too else return "Premium Delivery"; } - public class OrdersDetails +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrdersDetails +{ + public static List Orders = new List(); + public OrdersDetails() { - public int? OrderID { get; set; } - public string? CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double Freight { get; set; } - public string? ShipCity { get; set; } - public string? ShipCountry { get; set; } - public string? Status { get; set; } - public string? Location { get; set; } - public string? ProductName { get; set; } - public string? Email { get; set; } - public string? DeliveryDays { get; set; } + + } + public OrdersDetails(int OrderID, string CustomerID, double Freight, DateTime OrderDate, string ShipCity, string ShipCountry, string Status, string Location, string Email) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShipCity = ShipCity; + this.Status = Status; + this.ShipCountry = ShipCountry; + this.Location = Location; + this.Email = Email; + } + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + Orders.Add (new OrdersDetails (1001, "Nancy", 80, DateTime.Now.AddDays(-1), "Reims", "France", "Delivered", "France", "nancy@example.com")); + Orders.Add (new OrdersDetails (1002, "Andrew", 120, DateTime.Now.AddDays(3), "Munster", "Germany", "Pending", "Germany", "andrew@example.com")); + Orders.Add (new OrdersDetails (1003, "Janet", 180, DateTime.Now.AddDays(-3), "Charleroi", "Belgium", "Cancelled", "Belgium", "janet@example.com")); + Orders.Add (new OrdersDetails (1004, "Margaret", 60, DateTime.Now.AddDays(-4), "Lyon", "France", "Delivered", "France", "margaret@example.com")); + Orders.Add (new OrdersDetails (1005, "Steven", 130, DateTime.Now.AddDays(4), "Delhi", "India", "Pending", "India", "steven@example.com")); + Orders.Add (new OrdersDetails (1006, "Michael", 220, DateTime.Now.AddDays(-6), "Tokyo", "Japan", "Delivered", "Japan", "michael@example.com")); + Orders.Add (new OrdersDetails (1007, "Robert", 90, DateTime.Now.AddDays(-7), "Toronto", "Canada", "Cancelled", "Canada", "robert@example.com")); + Orders.Add (new OrdersDetails (1008, "Laura", 160, DateTime.Now.AddDays(1), "Sydney", "Australia", "Pending", "Australia", "laura@example.com")); + } + return Orders; } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } + public string Status { get; set; } + public string Location { get; set; } + public string Email { get; set; } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDryjujMCPDfWrVi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVetYCVBodvFKAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > By default, custom tooltips will be displayed if the `ShowTooltip` property is set to **true**. diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md index 563013ddb6..523953412b 100644 --- a/blazor/datagrid/data-annotation.md +++ b/blazor/datagrid/data-annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Data Annotation in Blazor DataGrid | Syncfusion -description: Learn all about Data Annotation in Syncfusion Blazor DataGrid and more. +description: Learn how to achieve data validation with data annotations in the Syncfusion Blazor DataGrid component. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/events.md b/blazor/datagrid/events.md index f387e3f956..4858f25d92 100644 --- a/blazor/datagrid/events.md +++ b/blazor/datagrid/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor DataGrid and much more details. +description: Learn all about the events triggered by grid actions in the Syncfusion Blazor DataGrid component here. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md index 6862b5c28a..74508ef811 100644 --- a/blazor/datagrid/getting-started.md +++ b/blazor/datagrid/getting-started.md @@ -426,8 +426,8 @@ The following sample code demonstrates notifying user when server-side exception ## See Also -* [Getting started with Syncfusion Blazor DataGrid in Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting started with Syncfusion Blazor DataGrid in Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -* [Getting Started with Syncfusion Blazor DataGrid for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion Blazor DataGrid for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion Blazor DataGrid in WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio) diff --git a/blazor/datagrid/grouping.md b/blazor/datagrid/grouping.md index e040402123..743d522c3a 100644 --- a/blazor/datagrid/grouping.md +++ b/blazor/datagrid/grouping.md @@ -468,10 +468,7 @@ public class OrderData ## Persist grouped row expand or collapse state -The Syncfusion Blazor DataGrid offers the ability to persist the expand or collapse state of grouped rows across various data operations such as paging, sorting, filtering, and editing. By default, these operations reset the grouped rows to their initial collapsed or expanded state. -To retain the current state of grouped rows and ensure a consistent user experience, set the [GridGroupSettings.PersistGroupState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_PersistGroupState) property to **true**. This also applies when using external grouping methods like [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) and [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync). - -The following example demonstrates how to dynamically enable or disable the `PersistGroupState` property in the DataGrid. +The Syncfusion Blazor DataGrid offers the ability to persist the expand or collapse state of grouped rows across various data operations such as paging, sorting, filtering, and editing. By default, these operations reset the grouped rows to their initial collapsed or expanded state. To retain the current state of grouped rows and ensure a consistent user experience, set the [GridGroupSettings.PersistGroupState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_PersistGroupState) property to **true**. This also applies when using external grouping methods like [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) and [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -481,13 +478,14 @@ The following example demonstrates how to dynamically enable or disable the `Per
    - +
    - - + + + - + @@ -496,25 +494,23 @@ The following example demonstrates how to dynamically enable or disable the `Per @code { public List GridData { get; set; } - SfGrid? Grid { get; set; } - - private bool IsPersist { get; set; } = true; - private string[] Initial = (new string[] { "CustomerID", "ShipCity" }); + private bool IsGroupStatePersistent { get; set; } = true; + private string[] InitialGroupedColumns = new string[] { "CustomerID", "ShipCity" }; protected override void OnInitialized() { GridData = OrderData.GetAllRecords(); } - private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) { if (args.Checked == true) { - IsPersist = true; + IsGroupStatePersistent = true; } else { - IsPersist = false; + IsGroupStatePersistent = false; } } } @@ -540,19 +536,20 @@ public class OrderData { if (Orders.Count() == 0) { - int code = 10; - for (int i = 1; i < 2; i++) + int code = 10001; + string[] customerIDs = { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "CHOPS", "RICSU", "WELLI" }; + string[] cities = { "Reims", "Münster", "Rio de Janeiro", "Lyon", "Charleroi" }; + string[] shipNames = { "Vins et alcools Chevali", "Toms Spezialitäten", "Hanari Carnes", + "Victuailles en stock", "Suprêmes délices", "Chop-suey Chinese", + "Richter Supermarkt", "Wellington Import" }; + for (int i = 0; i < 45; i++) { - Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali")); - Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); - Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); - Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); - Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import")); - code += 5; + string customerID = customerIDs[i % customerIDs.Length]; + string city = cities[i % cities.Length]; + string shipName = shipNames[i % shipNames.Length]; + + Orders.Add(new OrderData(code, customerID, city, shipName)); + code++; } } return Orders; @@ -567,7 +564,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNroDvrRpDAvxclV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVINYihrdGfllLS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Sort grouped columns in descending order during initial grouping diff --git a/blazor/datagrid/how-to/customize-empty-grid-display-message.md b/blazor/datagrid/how-to/customize-empty-grid-display-message.md index 527e482c5d..7046a5ec61 100644 --- a/blazor/datagrid/how-to/customize-empty-grid-display-message.md +++ b/blazor/datagrid/how-to/customize-empty-grid-display-message.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize the Empty Record Template in the Blazor DataGrid | Syncfusion +title: Customize Empty Record Template in the Blazor DataGrid | Syncfusion description: Learn here all about customize the empty record template in Syncfusion Blazor DataGrid. platform: Blazor control: DataGrid diff --git a/blazor/datagrid/how-to/server-side-using-cli.md b/blazor/datagrid/how-to/server-side-using-cli.md index 846b421ce2..e18bb5354f 100644 --- a/blazor/datagrid/how-to/server-side-using-cli.md +++ b/blazor/datagrid/how-to/server-side-using-cli.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Blazor DataGrid in server side using CLI | Syncfusion +title: Add Blazor DataGrid to a Server-Side App via .NET CLI | Syncfusion description: Check out the documentation for getting started with the Syncfusion Blazor DataGrid in a server-side app using the .NET CLI and more. platform: Blazor control: DataGrid diff --git a/blazor/datagrid/row-template.md b/blazor/datagrid/row-template.md index 9a1a3dd6f8..44953db230 100644 --- a/blazor/datagrid/row-template.md +++ b/blazor/datagrid/row-template.md @@ -1,7 +1,7 @@ --- layout: post title: Row Template in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Row Template in Syncfusion Blazor DataGrid and much more details. +description: Learn how to customize the appearance and layout of rows in the Syncfusion Blazor DataGrid component using row templates. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md index 869230b480..4d208a94c0 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Sorting in Syncfusion Blazor DataGrid and much more details. +description: Learn all about sorting data-bound columns, single and multiple, in Syncfusion Blazor DataGrid component. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/virtual-scrolling.md b/blazor/datagrid/virtual-scrolling.md index 81aab054ba..213759d5ef 100644 --- a/blazor/datagrid/virtual-scrolling.md +++ b/blazor/datagrid/virtual-scrolling.md @@ -1,7 +1,7 @@ --- layout: post title: Virtualization in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Virtualization in Syncfusion Blazor DataGrid and much more. +description: Learn all about virtualization in the Syncfusion Blazor DataGrid component, including virtual scrolling and paging. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datepicker/getting-started.md b/blazor/datepicker/getting-started.md index 070a36bbf4..fd4a6deeb7 100644 --- a/blazor/datepicker/getting-started.md +++ b/blazor/datepicker/getting-started.md @@ -178,6 +178,6 @@ The following example demonstrates how to set the [Value](https://help.syncfusio ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/datetime-picker/getting-started.md b/blazor/datetime-picker/getting-started.md index 0245ec8d2d..2e727acf2b 100644 --- a/blazor/datetime-picker/getting-started.md +++ b/blazor/datetime-picker/getting-started.md @@ -178,6 +178,6 @@ The minimum and maximum date time can be defined with the help of [Min](https:// ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/diagram-classic/getting-started.md b/blazor/diagram-classic/getting-started.md index 1d04c2d58a..0306b4e49c 100644 --- a/blazor/diagram-classic/getting-started.md +++ b/blazor/diagram-classic/getting-started.md @@ -246,6 +246,6 @@ N> You can refer to our [Blazor Diagram](https://www.syncfusion.com/blazor-compo ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/diagram/getting-started.md b/blazor/diagram/getting-started.md index 8601875f26..2ea975232b 100644 --- a/blazor/diagram/getting-started.md +++ b/blazor/diagram/getting-started.md @@ -597,6 +597,6 @@ You can download a complete working sample from [GitHub](https://github.com/Sync ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/diagram/layout/mind-map.md b/blazor/diagram/layout/mind-map.md index b37a8db5a6..5e2c4130c8 100644 --- a/blazor/diagram/layout/mind-map.md +++ b/blazor/diagram/layout/mind-map.md @@ -658,10 +658,11 @@ The following code demonstrates how to update the layout's orientation dynamical You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapOrientationRuntime). The following table outlines the various orientation types available: -|Orientation Type|Description| + +| Orientation Type | Description | |---|---| -|[`Horizontal`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_Horizontal)|Aligns the tree layout from left to right| -|[`Vertical`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_Vertical)|Aligns the tree layout from top to bottom| +| [`Horizontal`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_Horizontal) | Aligns the tree layout from left to right | +| [`Vertical`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_Vertical) | Aligns the tree layout from top to bottom | ## See also diff --git a/blazor/diagram/symbol-palette/customization.md b/blazor/diagram/symbol-palette/customization.md index 2615117640..9a72833da8 100644 --- a/blazor/diagram/symbol-palette/customization.md +++ b/blazor/diagram/symbol-palette/customization.md @@ -704,7 +704,7 @@ The following code example demonstrates how to enable or disable the default too private void AddFlowShape(NodeFlowShapes shape, string id, int index) { - var node = new Node + Node node = new Node { ID = id, Shape = new FlowShape { Type = NodeShapes.Flow, Shape = shape }, @@ -728,7 +728,7 @@ The following code example demonstrates how to enable or disable the default too private void AddBasicShape(NodeBasicShapes shapeType, string id, int index) { - var node = new Node + Node node = new Node { ID = id, Width = 60, @@ -757,7 +757,7 @@ The following code example demonstrates how to enable or disable the default too private void AddConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape, int index) { - var connector = new Connector + Connector connector = new Connector { ID = id, Type = type, diff --git a/blazor/dialog/getting-started.md b/blazor/dialog/getting-started.md index 2313002247..2e5b8f13ff 100644 --- a/blazor/dialog/getting-started.md +++ b/blazor/dialog/getting-started.md @@ -270,10 +270,10 @@ The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfD ## See also -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) -N> You can also explore our [Blazor Dialog example](https://blazor.syncfusion.com/demos/dialog/default-functionalities?theme=fluent) that shows you how to render and configure the Dialog. +N> You can also explore our [Blazor Dialog example](https://blazor.syncfusion.com/demos/dialog/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Dialog. diff --git a/blazor/drop-down-menu/getting-started.md b/blazor/drop-down-menu/getting-started.md index 720df560f0..7a475cedeb 100644 --- a/blazor/drop-down-menu/getting-started.md +++ b/blazor/drop-down-menu/getting-started.md @@ -166,8 +166,8 @@ Add the Syncfusion® Blazor DropDown Menu co ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Dropdown Menu example](https://blazor.syncfusion.com/demos/buttons/dropdown-menu?theme=bootstrap5) that shows you how to render and configure the dropdown menu. diff --git a/blazor/dropdown-list/getting-started.md b/blazor/dropdown-list/getting-started.md index f4959b6155..9130d5be35 100644 --- a/blazor/dropdown-list/getting-started.md +++ b/blazor/dropdown-list/getting-started.md @@ -303,6 +303,6 @@ Get the complete object list of the selected value in the [ValueChange](https:// ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) diff --git a/blazor/file-upload/getting-started-with-web-app.md b/blazor/file-upload/getting-started-with-web-app.md index 5ffb6396a2..2c23cf9dfa 100644 --- a/blazor/file-upload/getting-started-with-web-app.md +++ b/blazor/file-upload/getting-started-with-web-app.md @@ -433,8 +433,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) 4. [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) diff --git a/blazor/file-upload/getting-started.md b/blazor/file-upload/getting-started.md index 192da954b6..1374d57043 100644 --- a/blazor/file-upload/getting-started.md +++ b/blazor/file-upload/getting-started.md @@ -502,7 +502,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) * [Getting Started with Syncfusion® File Upload in Blazor WebAssembly using Visual Studio](https://blazor.syncfusion.com/documentation/file-upload/how-to/getting-started-with-blazor-webassembly) diff --git a/blazor/heatmap-chart/getting-started.md b/blazor/heatmap-chart/getting-started.md index 90de511af6..72e7e8b5dd 100644 --- a/blazor/heatmap-chart/getting-started.md +++ b/blazor/heatmap-chart/getting-started.md @@ -184,10 +184,10 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See Also -[Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +[Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor HeatMap Chart example](https://blazor.syncfusion.com/demos/heatmap-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the heatmap chart. diff --git a/blazor/image-editor/getting-started.md b/blazor/image-editor/getting-started.md index 8df519b7a3..41533955ab 100644 --- a/blazor/image-editor/getting-started.md +++ b/blazor/image-editor/getting-started.md @@ -157,8 +157,8 @@ Add the Syncfusion® Blazor Image Editor com ## See Also -* [Getting Started with Syncfusion® Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Image Editor. diff --git a/blazor/input-mask/getting-started.md b/blazor/input-mask/getting-started.md index 674257e714..9e48dedd35 100644 --- a/blazor/input-mask/getting-started.md +++ b/blazor/input-mask/getting-started.md @@ -174,6 +174,6 @@ The following example demonstrates the usage of mask element `0` that allows any ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) diff --git a/blazor/kanban/getting-started-with-web-app.md b/blazor/kanban/getting-started-with-web-app.md index aef6b3a017..db26028321 100644 --- a/blazor/kanban/getting-started-with-web-app.md +++ b/blazor/kanban/getting-started-with-web-app.md @@ -357,7 +357,7 @@ N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfus ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/kanban/getting-started.md b/blazor/kanban/getting-started.md index 5bcf29e2c5..3fe0a54e96 100644 --- a/blazor/kanban/getting-started.md +++ b/blazor/kanban/getting-started.md @@ -288,8 +288,8 @@ N> You can also explore our [Blazor Kanban Board example](https://blazor.syncfus ## See also -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) diff --git a/blazor/listview/getting-started.md b/blazor/listview/getting-started.md index 2747878427..47a8818ddc 100644 --- a/blazor/listview/getting-started.md +++ b/blazor/listview/getting-started.md @@ -184,10 +184,10 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor ListView example](https://blazor.syncfusion.com/demos/listview/default-functionalities?theme=bootstrap5) that shows you how to render and configure the ListView. diff --git a/blazor/menu-bar/getting-started.md b/blazor/menu-bar/getting-started.md index bde9f12d78..e362030c06 100644 --- a/blazor/menu-bar/getting-started.md +++ b/blazor/menu-bar/getting-started.md @@ -193,8 +193,8 @@ N> `TValue` can be specified as either `MenuItemModel` or `MenuItem`. If the men ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [blazor menu bar example](https://blazor.syncfusion.com/demos/menu-bar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the menu bar. diff --git a/blazor/numeric-textbox/getting-started.md b/blazor/numeric-textbox/getting-started.md index 0cafbdb53e..8582c12b37 100644 --- a/blazor/numeric-textbox/getting-started.md +++ b/blazor/numeric-textbox/getting-started.md @@ -204,6 +204,6 @@ If `ValidateDecimalOnType` is false, number of decimals will not be restricted. ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) diff --git a/blazor/pivot-table/data-binding.md b/blazor/pivot-table/data-binding.md index 3d1ed302c3..896a1c409b 100644 --- a/blazor/pivot-table/data-binding.md +++ b/blazor/pivot-table/data-binding.md @@ -1163,6 +1163,96 @@ User can show custom string in empty value cells using the [EmptyCellsTextConten ![Empty Values in Blazor PivotTable](images/blazor-pivottable-empty-values.png) +## Dynamically update the report configuration + +The Blazor Pivot Table component supports dynamic data source handling and report manipulation through the [`RefreshAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_RefreshAsync_System_Boolean_) method. This method provides a streamlined and efficient approach to either refresh the component's layout or refresh the entire component, which re-initiates the engine process based on new data or report settings. + +The [`RefreshAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_RefreshAsync_System_Boolean_) method enables dynamic and asynchronous refreshing of the Pivot Table layout. It simplifies the update process and enhances responsiveness during runtime changes to report configurations. + +This method accepts a boolean parameter, **allowDataRefresh**, which determines whether the underlying data source should be reprocessed: + +* **`false`**: Refreshes only the component's layout based on the current report settings without reprocessing the entire data source. +* **`true`**: Performs a complete data refresh, which includes reprocessing the data source and recalculating all aggregations. + +> By default, the parameter is `false`, which refreshes only the component's layout without reprocessing the underlying data. + +In the following example, `true` is passed to the [`RefreshAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_RefreshAsync_System_Boolean_) method to trigger a full data refresh, updating the Pivot Table with a new row and column added to the report at runtime. + +```cshtml +@using Syncfusion.Blazor.PivotView +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + + + + + + + + + + +@code { + private SfPivotView pivot = null!; + public List data { get; set; } = null!; + + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData(); + } + + public async Task UpdatePivotReport() + { + // Adding a new row to the report + pivot.DataSourceSettings.Rows.Add(new PivotViewRow + { + Name = "Products" + }); + // Adding a new column to the report + pivot.DataSourceSettings.Columns.Add(new PivotViewColumn + { + Name = "Quarter", + Caption = "Quarter Name" + }); + // Refresh the Pivot Table to reflect the changes + await pivot.RefreshAsync(true); + } + + public class ProductDetails + { + public int Sold { get; set; } + public double Amount { get; set; } + public string? Country { get; set; } + public string? Products { get; set; } + public string? Year { get; set; } + public string? Quarter { get; set; } + + public static List GetProductData() + { + List productDetails = new List() + { + new ProductDetails { Country = "Canada", Products = "Bike", Year = "FY 2022", Quarter = "Q1", Sold = 35, Amount = 52500 }, + new ProductDetails { Country = "Canada", Products = "Car", Year = "FY 2022", Quarter = "Q2", Sold = 25, Amount = 62500 }, + new ProductDetails { Country = "Germany", Products = "Bike", Year = "FY 2023", Quarter = "Q3", Sold = 40, Amount = 60000 }, + new ProductDetails { Country = "Germany", Products = "Car", Year = "FY 2023", Quarter = "Q4", Sold = 30, Amount = 75000 }, + new ProductDetails { Country = "United States", Products = "Bike", Year = "FY 2022", Quarter = "Q1", Sold = 50, Amount = 75000 }, + }; + return productDetails; + } + } +} +``` + ## Event The event [OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnLoad) fires before initiate rendering of pivot table. It holds following parameters like [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1_DataSourceSettings), [FieldsType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1_FieldsType) and [PivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1__ctor). In this event user can customize data source settings before initiating pivot table render module. diff --git a/blazor/pivot-table/getting-started.md b/blazor/pivot-table/getting-started.md index 47e56f8030..016fa11000 100644 --- a/blazor/pivot-table/getting-started.md +++ b/blazor/pivot-table/getting-started.md @@ -657,6 +657,6 @@ N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/progress-button/getting-started.md b/blazor/progress-button/getting-started.md index e346c9c88f..65458c6c8d 100644 --- a/blazor/progress-button/getting-started.md +++ b/blazor/progress-button/getting-started.md @@ -160,8 +160,8 @@ Add the Syncfusion® Blazor ProgressButton c ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Progress Button example](https://blazor.syncfusion.com/demos/buttons/progress-button?theme=bootstrap5) that shows you how to render and configure the Progress Button. diff --git a/blazor/radio-button/getting-started.md b/blazor/radio-button/getting-started.md index 98b7596ccd..782c63b96b 100644 --- a/blazor/radio-button/getting-started.md +++ b/blazor/radio-button/getting-started.md @@ -165,8 +165,8 @@ Add the Syncfusion® Blazor RadioButton comp ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Radio Button Example](https://blazor.syncfusion.com/demos/buttons/radio-button) that shows you how to render and configure the Radio Button. diff --git a/blazor/range-selector/getting-started.md b/blazor/range-selector/getting-started.md index da1682fc5d..aafd1f35da 100644 --- a/blazor/range-selector/getting-started.md +++ b/blazor/range-selector/getting-started.md @@ -205,6 +205,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/range-slider/getting-started-webapp.md b/blazor/range-slider/getting-started-webapp.md index 005e4c86c4..0ce7360f5f 100644 --- a/blazor/range-slider/getting-started-webapp.md +++ b/blazor/range-slider/getting-started-webapp.md @@ -241,8 +241,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- [Tooltip in Slider](./tooltip) -[Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +[Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/range-slider/getting-started.md b/blazor/range-slider/getting-started.md index 3ccdd9f0da..4bd8a85cc0 100644 --- a/blazor/range-slider/getting-started.md +++ b/blazor/range-slider/getting-started.md @@ -174,8 +174,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- [Tooltip in Slider](./tooltip) -[Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +[Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +[Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/rich-text-editor/getting-started-webapp.md b/blazor/rich-text-editor/getting-started-webapp.md index 8f0fe9b12e..0118c0dc3b 100644 --- a/blazor/rich-text-editor/getting-started-webapp.md +++ b/blazor/rich-text-editor/getting-started-webapp.md @@ -500,11 +500,11 @@ To retrieve the maximum number of characters in the Rich Text Editor's content, ## See also -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) * [How to insert Emoticons](https://blazor.syncfusion.com/demos/rich-text-editor/insert-emoticons?theme=bootstrap5) diff --git a/blazor/rich-text-editor/getting-started.md b/blazor/rich-text-editor/getting-started.md index 027a1f36c0..408490fc65 100644 --- a/blazor/rich-text-editor/getting-started.md +++ b/blazor/rich-text-editor/getting-started.md @@ -440,11 +440,11 @@ To retrieve the maximum number of characters in the Rich Text Editor's content, ## See also -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-web-app) * [How to insert Emoticons](https://blazor.syncfusion.com/demos/rich-text-editor/insert-emoticons?theme=bootstrap5) diff --git a/blazor/scheduler/getting-started.md b/blazor/scheduler/getting-started.md index 7cad17f58b..ddcab3c95d 100644 --- a/blazor/scheduler/getting-started.md +++ b/blazor/scheduler/getting-started.md @@ -394,6 +394,6 @@ Each individual Scheduler views can be customized with its own options such as s ## See Also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png b/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png new file mode 100644 index 0000000000..6586e294b5 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-Alldaycells-verticalview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png b/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png new file mode 100644 index 0000000000..c88fe4967a Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-allday-appointments-vertical-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png new file mode 100644 index 0000000000..f944d4509f Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-Timeline-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png new file mode 100644 index 0000000000..f3756fb6ff Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineMonth-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png new file mode 100644 index 0000000000..f9fed32eee Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-TimelineYear-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png new file mode 100644 index 0000000000..b733aa03f8 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-Year-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png new file mode 100644 index 0000000000..576949f524 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-agenda-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png new file mode 100644 index 0000000000..be1f911aaf Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png new file mode 100644 index 0000000000..85002988c1 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-monthAgenda-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png b/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png new file mode 100644 index 0000000000..c4e5fb8297 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-appointments-vertical-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png b/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png new file mode 100644 index 0000000000..fd62654766 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-blocked-appointments.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-header-cells.png b/blazor/scheduler/images/blazor-scheduler-header-cells.png new file mode 100644 index 0000000000..7266e8a7b1 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-header-cells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png new file mode 100644 index 0000000000..1ac054a38b Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthagenda-othermonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png new file mode 100644 index 0000000000..ee55c74e3f Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthagenda-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png b/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png new file mode 100644 index 0000000000..9bc9a2ed90 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-monthview-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png new file mode 100644 index 0000000000..47a502cd42 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-othermonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png b/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png new file mode 100644 index 0000000000..981d13fbfb Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png b/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png new file mode 100644 index 0000000000..02a6c34a13 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-readonly-appointments.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png new file mode 100644 index 0000000000..b53ac82b74 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png new file mode 100644 index 0000000000..1c35758647 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-month-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png new file mode 100644 index 0000000000..682b3367d3 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells-timeline-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-resource-cells.png b/blazor/scheduler/images/blazor-scheduler-resource-cells.png new file mode 100644 index 0000000000..8559b9e2e7 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-resource-cells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-selected-appointments.png b/blazor/scheduler/images/blazor-scheduler-selected-appointments.png new file mode 100644 index 0000000000..4e068a4852 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-selected-appointments.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-selected-cells.png b/blazor/scheduler/images/blazor-scheduler-selected-cells.png new file mode 100644 index 0000000000..2d23722e5e Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-selected-cells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png new file mode 100644 index 0000000000..2084bb506c Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timeline-othermonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png new file mode 100644 index 0000000000..f1c8e477a7 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelinemonth-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png new file mode 100644 index 0000000000..c728e5d007 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelineview-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png b/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png new file mode 100644 index 0000000000..80fde2dff9 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-timelineyear-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png b/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png new file mode 100644 index 0000000000..7c96acec48 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-verticalview-workcells.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png b/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png new file mode 100644 index 0000000000..057b832818 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-Day-cells-monthview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png new file mode 100644 index 0000000000..c036685606 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-monthagenda-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png new file mode 100644 index 0000000000..25b3af6190 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-monthview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png new file mode 100644 index 0000000000..573889de55 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-day-cells-timeline-yearview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png new file mode 100644 index 0000000000..fd6c197ac3 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-timeline-view.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png new file mode 100644 index 0000000000..cf6cee16a2 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-work-hour-cells-verticalview.png differ diff --git a/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png b/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png new file mode 100644 index 0000000000..b40153e518 Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-yearview-othermonth-workcells.png differ diff --git a/blazor/scheduler/scheduler-styling.md b/blazor/scheduler/scheduler-styling.md index 302d77aac5..1ab9dda74a 100644 --- a/blazor/scheduler/scheduler-styling.md +++ b/blazor/scheduler/scheduler-styling.md @@ -49,4 +49,1950 @@ To modify the Scheduler appearance, you need to override the default CSS of Sche | .e-schedule .e-timeline-view .e-resource-cells | Resource cells in timeline views of scheduler. | | .e-schedule .e-timeline-month-view .e-resource-cells| Resource cells in timeline month view of scheduler. | | e-parent-node | Parent resource cells in timeline views of scheduler. | -| e-child-node | Child resource cells in timeline views of scheduler. | \ No newline at end of file +| e-child-node | Child resource cells in timeline views of scheduler. | + +### Work cells in vertical views of scheduler + +This CSS selector targets the work cells in the vertical views (Day, Week, and WorkWeek) of the Syncfusion Scheduler component. These cells represent the individual time slots arranged vertically where appointments are displayed and can be scheduled. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSjzXQfGnvGHlh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in vertical views](images/blazor-scheduler-verticalview-workcells.png)" %} + +### Work cells in month view of scheduler + +This CSS selector targets the work cells (day cells) that belong to the current month in the month view of the Syncfusion Scheduler. These cells represent the individual days of the displayed month where users can schedule and view appointments. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSXpMdpcPUpdLW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in month view](images/blazor-scheduler-monthview-workcells.png)" %} + +### Work cells of other month in month view of scheduler + +This CSS selector targets the work cells that represent days from adjacent months (previous or next month) that are visible in the current month view of the scheduler. These cells typically appear at the beginning and end of a month view to complete the week rows. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoDfinplIYBcIi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Other month work cells in month view](images/blazor-scheduler-othermonth-workcells.png)" %} + +### Work cells in timeline views of scheduler + +This CSS selector targets the work cells in the standard timeline views of the Syncfusion Scheduler. These cells represent time slots arranged horizontally across the scheduler. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVetzsdeXJJNgsX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline views](images/blazor-scheduler-timelineview-workcells.png)" %} + +### Work cells in timeline month view of scheduler + +This CSS selector targets the work cells in the timeline month view of the Syncfusion Scheduler component. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhSXIXUeKvJllyA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline month views](images/blazor-scheduler-timelinemonth-workcells.png)" %} + +### Work cells in timeline year view of scheduler + +This CSS selector targets the work cells in the timeline year view of the Syncfusion Scheduler component. These cells represent time slots across the entire year, arranged in a timeline format that provides an overview of appointments throughout the entire year. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBIZSXKozTrvbOf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline year views](images/blazor-scheduler-timelineyear-workcells.png)" %} + +### Work cells of other month in timeline year view of scheduler + +This CSS selector targets the work cells representing days from adjacent months (previous or next month) that are visible in the timeline year view. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIteDUymCFDFFp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in timeline other month views](images/blazor-scheduler-timeline-othermonth-workcells.png)" %} + +### Work cells in month agenda view of scheduler + +This CSS selector targets the work cells that represent the days in the month agenda view of the Syncfusion Scheduler. These cells are areas where appointments can be placed. + +```cshtml +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBItIMpzmNyLBhW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work cells in month agenda view](images/blazor-scheduler-monthagenda-workcells.png)" %} + +### Work cells of other month in month agenda view of scheduler + +This CSS selector targets the work cells representing days that belong to adjacent months within the month agenda view. These cells often show up to provide context for appointments that may extend beyond the current month. + +```cshtml +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrINyszfvZfowQQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Other month work cells in month agenda view](images/blazor-scheduler-monthagenda-othermonth-workcells.png)" %} + + +### Work Cells of Other Month in Year View of Scheduler + +This CSS selector targets the work cells representing days from adjacent months (previous or next month) that are visible in the year view of the Syncfusion Scheduler. + +```cshtml +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBeNIMOzziiJCIN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Other month work cells in Year view](images/blazor-scheduler-yearview-othermonth-workcells.png)" %} + + +### All Day Cells in Vertical Views of Scheduler + +This CSS selector targets the all-day cells in the vertical views (Day, Week, and WorkWeek) of the Syncfusion Scheduler component. These cells represent the time slots designated for all-day events, providing users with a straightforward way to visualize and manage significant appointments. + +```cshtml +@using Syncfusion.Blazor.Schedule +
    + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNByDoMYpJcFHjMv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[All-Day cells in vertical view](images/blazor-scheduler-Alldaycells-verticalview.png)" %} + + +### Work Hour Cells in Vertical Views of Scheduler + +This CSS selector targets the work hour cells in vertical views (Day, Week, WorkWeek) of the Syncfusion Scheduler. These cells show the working hours where users can add appointments, making it easier to see available time slots. + +```cshtml +@using Syncfusion.Blazor.Schedule +
    + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrSDeiOfoMsMoZt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work hour cells in vertical view](images/blazor-scheduler-work-hour-cells-verticalview.png)" %} + + +### Work Day Cells in Month View of Scheduler + +This CSS selector targets the work day cells in the month view of the Syncfusion Scheduler. These cells show the days meant for scheduling work, helping users easily see which days are available for appointments. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVStIiapeGmfItK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in month view](images/blazor-scheduler-work-Day-cells-monthview.png)" %} + + +### Work Day Cells in Month Agenda View of Scheduler + +This CSS selector targets the work day cells that represent the days in the month agenda view of the Syncfusion Scheduler. These cells show the specific days within the scheduled month where users can place appointments. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVStIiapeGmfItK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in month agenda view](images/blazor-scheduler-work-day-cells-monthagenda-view.png)" %} + + +### Work Hour Cells in Timeline Views of Scheduler + +This CSS selector targets the work hour cells in the timeline views (TimelineDay, TimelineWeek) of the Syncfusion Scheduler. These cells represent the slots of time designated for work hours, providing users with a visual indication of when appointments can be scheduled. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIXyCYpxaMcIgD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work hour cells in timeline view](images/blazor-scheduler-work-hour-cells-timeline-view.png)" %} + + +### Work Day Cells in Timeline Month View of Scheduler + +This CSS selector targets the work day cells in the timeline month view of the Syncfusion Scheduler. These cells represent the specific days designated as working days for the month timeline, allowing users to visualize their tasks and appointments within those time frames. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthIXICaJwbDIMPr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in timeline month view](images/blazor-scheduler-work-day-cells-timeline-monthview.png)" %} + + +### Work Day Cells in Timeline Year View of Scheduler + +This CSS selector targets the work day cells in the timeline year view of the Syncfusion Scheduler. These cells highlight the working days throughout the entire year, giving users a comprehensive overview of their yearly schedule and enabling easier appointment management. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLytSsaTviyMXFM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Work day cells in timeline year view](images/blazor-scheduler-work-day-cells-timeline-yearview.png)" %} + +### Appointment in vertical views of scheduler + +This CSS selector targets the regular appointments that appear in these vertical views. Customizing this selector can significantly improving appointment visibility, readability, and overall visual appearance. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLSXlXiqeOnoBFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in vertical view](images/blazor-scheduler-appointments-vertical-view.png)" %} + +### All day Appointment in vertical views of scheduler + +This CSS selector targets the all-day appointments that appear in the vertical views (Day, Week, and WorkWeek) of the Syncfusion Blazor Scheduler component. All-day appointments are events that span an entire day or multiple days without specific start and end times within those days. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 11, 10, 0, 0) , EndTime = new DateTime(2020, 2, 12, 12, 0, 0), IsAllDay = true }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), IsAllDay = true } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhINvDCqxEWFfUp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[All day appointments in vertical view](images/blazor-scheduler-allday-appointments-vertical-view.png)" %} + +### Appointment in month view of scheduler + +This CSS selector targets appointment elements in the month view of the Syncfusion Blazor Scheduler component. This selector is crucial for customizing how appointments appear in the calendar-style month view, which presents unique visualization challenges due to the compact nature of displaying an entire month at once. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 10, 10, 0, 0) , EndTime = new DateTime(2020, 2, 11, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyjbDigwxldZQH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in month view](images/blazor-scheduler-appointments-month-view.png)" %} + +### Appointment in timeline views of scheduler + +This CSS selector targets appointment elements in the timeline views of the Syncfusion Blazor Scheduler component. Timeline views (TimelineDay, TimelineWeek, TimelineWorkWeek) present a unique horizontal orientation of appointments that differs significantly from the traditional vertical or month views. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 13, 12, 30, 0) , EndTime = new DateTime(2020, 2, 13, 14, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrSNbjiqlpgpavw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline view](images/blazor-scheduler-appointments-Timeline-view.png)" %} + +### Appointment in timeline month view of scheduler + +This CSS selector targets appointment elements specifically in the timeline month view of the Syncfusion Blazor Scheduler component. This specialized view combines the horizontal time-based layout of timeline views with the monthly calendar perspective, creating a unique visualization for planning and scheduling. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 11); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSDFZMJTeCySrl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline Month view](images/blazor-scheduler-appointments-TimelineMonth-view.png)" %} + +### Appointment in timeline year view of scheduler + +This CSS selector targets appointment elements specifically in the timeline year view of the Syncfusion Blazor Scheduler component. The Timeline Year view in Syncfusion Scheduler is designed to display events across an entire year in a horizontal, scrollable layout. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 11); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 1, 1, 10, 0, 0) , EndTime = new DateTime(2020, 1, 2, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 4, 3, 10, 0, 0) , EndTime = new DateTime(2020, 4, 3, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBIDvNfqjpWspUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in timeline year view](images/blazor-scheduler-appointments-TimelineYear-view.png)" %} + +### Appointment in year view of scheduler + +This CSS selector targets appointment elements specifically in the year view of the Syncfusion Blazor Scheduler component. In a year view of a scheduler, appointments are displayed across all 12 months of the year, offering a high-level overview of scheduled events. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 14); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrSjbXpKSaxvJSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments indicator in year view](images/blazor-scheduler-appointments-Year-view.png)" %} + +### Appointment in agenda view of scheduler + +This CSS selector targets appointment elements specifically in the agenda view of the Syncfusion Blazor Scheduler component. An appointment in the agenda view of a scheduler is shown as a simple list of events sorted by date and time. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 12); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLyNlZJAnFDusMl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in agenda view](images/blazor-scheduler-appointments-agenda-view.png)" %} + +### Appointment in month agenda view of scheduler + +This CSS selector targets appointment elements specifically in the month agenda view of the Syncfusion Blazor Scheduler component. An appointment in the month agenda view of a scheduler is shown as a list of events organized by day within a selected month. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBotPNTAGcpjRvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Appointments in month agenda view](images/blazor-scheduler-appointments-monthAgenda-view.png)" %} + +### Block appointment in scheduler + +This CSS selector targets appointment elements specifically designated as blocked appointments in the Syncfusion Blazor Scheduler component. A blocked appointment refers to a reserved time slot during which no other appointments or events can be scheduled. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Blocked", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0), IsBlock = true }, + new AppointmentData { Id = 2, Subject = "Blocked", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), IsBlock = true } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public bool IsBlock { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVytvNTTzoPWdKC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blocked Appointment in schedule](images/blazor-scheduler-blocked-appointments.png)" %} + +### Read only appointment in scheduler. + +This CSS selector targets appointment elements that are specifically marked as read-only in the Syncfusion Blazor Scheduler component. A read-only appointment in a scheduler refers to an event or time slot that is visible to users but cannot be modified, deleted, or rescheduled through the user interface. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0), IsReadonly = true }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0), IsReadonly = true } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public bool IsReadonly { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBojvXpJoKirsVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ReadOnly Appointment in schedule](images/blazor-scheduler-readonly-appointments.png)" %} + +### Selected Appointments in scheduler. + +This CSS selector targets appointment elements that are specifically marked as selected in the Syncfusion Blazor Scheduler component. A selected appointment in a scheduler refers to an event that a user has actively clicked on or interacted with. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLoDlZJfSbnzyVC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selected Appointment in schedule](images/blazor-scheduler-selected-appointments.png)" %} + +### Selected Cells in scheduler. + +This CSS selector targets the cells that are specifically marked as selected in the Syncfusion Blazor Scheduler component. A selected cell in a scheduler refers to a time slot that a user has actively clicked on or interacted with. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrStPtfpRsutkic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selected cells in schedule](images/blazor-scheduler-selected-cells.png)" %} + +### Header Cells in scheduler. + +This CSS selector targets the cells that are specifically marked as header cells in the Syncfusion Blazor Scheduler component. Header cells in a scheduler refer to the top row that display contextual information such as dates and day labels. + +```cshtml + +@using Syncfusion.Blazor.Schedule +
    + + + + + + + + +
    + +@code{ + DateTime CurrentDate = new DateTime(2020, 2, 13); + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) }, + new AppointmentData { Id = 2, Subject = "German", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + } +} + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVSNPNpfmXnWpnA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Header cells in schedule](images/blazor-scheduler-header-cells.png)" %} + +### Resource cells in vertical views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in the Syncfusion Blazor Scheduler component. Resource cells in the vertical views of a scheduler are the sections that display the names or labels of resources such as people, rooms, equipment, or services. These cells are usually shown on the top of the scheduler and help organize appointments by resource. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeNvjJTccyxmoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in schedule](images/blazor-scheduler-resource-cells.png)" %} + +### Resource cells in month views of scheduler. + +This CSS selector targets the resource cells in the Syncfusion Blazor Scheduler Month view. These cells show names of resources in month view. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLetFtpplJIudiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in month view](images/blazor-scheduler-resource-cells-month-view.png)" %} + +### Resource cells in timeline views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in timeline views of the Syncfusion Blazor Scheduler component. Resource cells in the timeline views of a scheduler are usually shown on the left side of the scheduler. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBINbjTfvuqAUlm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline view](images/blazor-scheduler-resource-cells-timeline-view.png)" %} + +### Resource cells in timeline month views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in timeline month views of the Syncfusion Blazor Scheduler component. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhoNbXzpaIzpSch?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline month view](images/blazor-scheduler-resource-cells-timeline-month-view.png)" %} + +### Resource cells in timeline month views of scheduler. + +This CSS selector targets the cells that are specifically marked as resource cells in timeline month views of the Syncfusion Blazor Scheduler component. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Owners" }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1 }, + new AppointmentData { Id = 2, Subject = "Swimming", StartTime = new DateTime(2023, 6, 2, 10, 30, 0) , EndTime = new DateTime(2023, 6, 2, 12, 30, 0), OwnerId = 2 }, + new AppointmentData { Id = 3, Subject = "Movie", StartTime = new DateTime(2023, 6, 3, 10, 0, 0) , EndTime = new DateTime(2023,6 , 3, 12, 0, 0), OwnerId = 3 } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhoNbXzpaIzpSch?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resource cells in timeline month view](images/blazor-scheduler-resource-cells-timeline-month-view.png)" %} + +### Parent and child resource cells in timeline views of scheduler. + +This CSS selector targets the parent and child resource cells in the timeline views of the Syncfusion Blazor Scheduler component. These cells display both parent and child resources (like rooms and individuals) and help organize appointments based on resource hierarchy. + +```cshtml + +@using Syncfusion.Blazor.Schedule + + + + + + + + + + + + + + + +@code{ + DateTime CurrentDate = new DateTime(2023, 6, 1); + public string[] Resources { get; set; } = { "Rooms", "Owners" }; + public List RoomData { get; set; } = new List + { + new ResourceData{ RoomText = "ROOM 1", Id = 1, RoomColor = "#cb6bb2" }, + new ResourceData{ RoomText = "ROOM 2", Id = 2, RoomColor = "#56ca85" } + }; + public List OwnersData { get; set; } = new List + { + new ResourceData{ OwnerText = "Nancy", Id = 1, OwnerGroupId = 1, OwnerColor = "#ffaa00" }, + new ResourceData{ OwnerText = "Steven", Id = 2, OwnerGroupId = 2, OwnerColor = "#f8a398" }, + new ResourceData{ OwnerText = "Michael", Id = 3, OwnerGroupId = 1, OwnerColor = "#7499e1" } + }; + List DataSource = new List + { + new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 6, 1, 9, 30, 0) , EndTime = new DateTime(2023, 6, 1, 11, 0, 0), OwnerId = 1, RoomId = 1 } + }; + public class AppointmentData + { + public int Id { get; set; } + public string Subject { get; set; } + public string Location { get; set; } + public DateTime StartTime { get; set; } + public DateTime EndTime { get; set; } + public string Description { get; set; } + public bool IsAllDay { get; set; } + public string RecurrenceRule { get; set; } + public string RecurrenceException { get; set; } + public Nullable RecurrenceID { get; set; } + public int OwnerId { get; set; } + public int RoomId { get; set; } + } + public class ResourceData + { + public int Id { get; set; } + public string RoomText { get; set; } + public string RoomColor { get; set; } + public string OwnerText { get; set; } + public string OwnerColor { get; set; } + public int OwnerGroupId { get; set; } + } +} + + + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSZvjTejMOiBfs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Parent and child resource cells in timeline month view](images/blazor-scheduler-parentandchild-resource-cells-timeline-month-view.png)" %} \ No newline at end of file diff --git a/blazor/signature/getting-started.md b/blazor/signature/getting-started.md index f3a6e859f8..32900c35bb 100644 --- a/blazor/signature/getting-started.md +++ b/blazor/signature/getting-started.md @@ -162,8 +162,8 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See Also -* [Getting Started with Syncfusion® Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Signature example](https://blazor.syncfusion.com/demos/signature/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Signature. diff --git a/blazor/sparkline/getting-started.md b/blazor/sparkline/getting-started.md index 5eb8b0191a..adac95363a 100644 --- a/blazor/sparkline/getting-started.md +++ b/blazor/sparkline/getting-started.md @@ -292,10 +292,10 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Sparkline Chart example](https://blazor.syncfusion.com/demos/sparkline/default-functionalities?theme=bootstrap5) that shows you how to render and configure the sparkline chart. diff --git a/blazor/speech-to-text/getting-started-web-app.md b/blazor/speech-to-text/getting-started-web-app.md index 2956b46f45..fb40c921bd 100644 --- a/blazor/speech-to-text/getting-started-web-app.md +++ b/blazor/speech-to-text/getting-started-web-app.md @@ -258,6 +258,6 @@ You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/split-button/getting-started-webapp.md b/blazor/split-button/getting-started-webapp.md index 2d4ce46f21..0bd9bc3cea 100644 --- a/blazor/split-button/getting-started-webapp.md +++ b/blazor/split-button/getting-started-webapp.md @@ -21,9 +21,9 @@ This section briefly explains about how to include [Blazor Split Button](https:/ ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. ## Install Syncfusion® Blazor SplitButtons and Themes NuGet in the App diff --git a/blazor/split-button/getting-started.md b/blazor/split-button/getting-started.md index cbcb97ef97..b8fdccb1ec 100644 --- a/blazor/split-button/getting-started.md +++ b/blazor/split-button/getting-started.md @@ -166,9 +166,9 @@ Add the Syncfusion® Blazor Split Button com ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Split Button example](https://blazor.syncfusion.com/demos/buttons/split-button?theme=bootstrap5) that shows you how to render and configure the Split Button. diff --git a/blazor/splitter/getting-started.md b/blazor/splitter/getting-started.md index cc93fa839a..db6831816d 100644 --- a/blazor/splitter/getting-started.md +++ b/blazor/splitter/getting-started.md @@ -189,10 +189,10 @@ Add the Syncfusion® Blazor Splitter compone ## See Also -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Splitter example](https://blazor.syncfusion.com/demos/splitter/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Splitter. diff --git a/blazor/stock-chart/getting-started.md b/blazor/stock-chart/getting-started.md index 9728a858b1..745f9da5f0 100644 --- a/blazor/stock-chart/getting-started.md +++ b/blazor/stock-chart/getting-started.md @@ -335,6 +335,6 @@ The trackball is used to track a closest data point to the mouse or touch positi ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/tabs/getting-started.md b/blazor/tabs/getting-started.md index 60f3c81c14..44d3f188bd 100644 --- a/blazor/tabs/getting-started.md +++ b/blazor/tabs/getting-started.md @@ -273,8 +273,8 @@ Selected Tab ## See also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Tabs example](https://blazor.syncfusion.com/demos/tabs/default-functionalities?theme=bootstrap5) that shows you how to render and configure the tabs. diff --git a/blazor/textbox/getting-started.md b/blazor/textbox/getting-started.md index 4923b2bccd..f8726a2159 100644 --- a/blazor/textbox/getting-started.md +++ b/blazor/textbox/getting-started.md @@ -253,6 +253,6 @@ The floating label TextBox floats the label above the TextBox after focusing, or ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/timepicker/getting-started.md b/blazor/timepicker/getting-started.md index d931b204bc..685b139f05 100644 --- a/blazor/timepicker/getting-started.md +++ b/blazor/timepicker/getting-started.md @@ -179,8 +179,8 @@ The below code demonstrates how to render TimePicker component in 24 hours Forma ## See Also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](../getting-started/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](../getting-started/blazor-web-app) N> You can also explore our [Blazor TimePicker Example](https://blazor.syncfusion.com/demos/timepicker/default-functionalities?theme=bootstrap5) that shows you how to render and configure the TimePicker. diff --git a/blazor/toggle-switch-button/getting-started.md b/blazor/toggle-switch-button/getting-started.md index 938a6c9873..0842b83ef5 100644 --- a/blazor/toggle-switch-button/getting-started.md +++ b/blazor/toggle-switch-button/getting-started.md @@ -185,6 +185,6 @@ N> Switch does not have text support for material themes, and does not support l ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/toolbar/getting-started.md b/blazor/toolbar/getting-started.md index ef42d4ab61..d381f9da58 100644 --- a/blazor/toolbar/getting-started.md +++ b/blazor/toolbar/getting-started.md @@ -170,8 +170,8 @@ Add the Syncfusion® Blazor Toolbar componen ## See Also -1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Toolbar example](https://blazor.syncfusion.com/demos/toolbar/default-functionalities?theme=bootstrap5) that shows you how to render and configure the toolbar. diff --git a/blazor/tooltip/getting-started-webapp.md b/blazor/tooltip/getting-started-webapp.md index 2495ea38c3..efe7dd1768 100644 --- a/blazor/tooltip/getting-started-webapp.md +++ b/blazor/tooltip/getting-started-webapp.md @@ -247,10 +247,10 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- * [Customize the Tooltip](./customization) -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Tooltip example](https://blazor.syncfusion.com/demos/tooltip/default?) that shows you how to render and configure the tooltip \ No newline at end of file diff --git a/blazor/tooltip/getting-started.md b/blazor/tooltip/getting-started.md index fea39ce0cc..c77936da21 100644 --- a/blazor/tooltip/getting-started.md +++ b/blazor/tooltip/getting-started.md @@ -176,10 +176,10 @@ N> The Tooltip component in our system uses the HTML element's id or class name * [Customize the Tooltip](./customization) -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Syncfusion® Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Tooltip example](https://blazor.syncfusion.com/demos/tooltip/default?theme=bootstrap5) that shows you how to render and configure the tooltip