diff --git a/blazor/3D-chart/getting-started.md b/blazor/3D-chart/getting-started.md index 916374fbcd..74e3409074 100644 --- a/blazor/3D-chart/getting-started.md +++ b/blazor/3D-chart/getting-started.md @@ -201,6 +201,8 @@ Now, map the data fields `Month` and `Sales` to the series `XName` and `YName` {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Chart3D + diff --git a/blazor/accumulation-chart/getting-started-with-server-app.md b/blazor/accumulation-chart/getting-started-with-server-app.md index 26804ebb04..38e27c8d80 100644 --- a/blazor/accumulation-chart/getting-started-with-server-app.md +++ b/blazor/accumulation-chart/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + @@ -204,6 +206,8 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index ae6e6e127e..6490ad5cbd 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + @@ -212,6 +214,8 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + @@ -248,7 +252,7 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html). {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} diff --git a/blazor/ai-assistview/getting-started-webapp.md b/blazor/ai-assistview/getting-started-webapp.md index ea61b52f82..720aff322f 100644 --- a/blazor/ai-assistview/getting-started-webapp.md +++ b/blazor/ai-assistview/getting-started-webapp.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.InteractiveChat +
@@ -187,6 +189,8 @@ You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfu {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.InteractiveChat +
diff --git a/blazor/autocomplete/getting-started-with-server-app.md b/blazor/autocomplete/getting-started-with-server-app.md index e3770d12b4..bb49688a20 100644 --- a/blazor/autocomplete/getting-started-with-server-app.md +++ b/blazor/autocomplete/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + @@ -198,6 +200,8 @@ After initialization, populate the AutoComplete with data using the [DataSource] {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index d617632d78..12ed212c38 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + @@ -206,6 +208,8 @@ After initialization, populate the AutoComplete with data using the [DataSource] {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + diff --git a/blazor/block-editor/getting-started.md b/blazor/block-editor/getting-started.md index fc54fac9d6..498305954e 100644 --- a/blazor/block-editor/getting-started.md +++ b/blazor/block-editor/getting-started.md @@ -185,6 +185,8 @@ The Block Editor uses a block-based content structure where each block represent {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.BlockEditor + diff --git a/blazor/bullet-chart/getting-started-with-server-app.md b/blazor/bullet-chart/getting-started-with-server-app.md index 45209ab5ca..13bd98e236 100644 --- a/blazor/bullet-chart/getting-started-with-server-app.md +++ b/blazor/bullet-chart/getting-started-with-server-app.md @@ -140,7 +140,7 @@ The script can be accessed from NuGet through [Static Web Assets](https://blazor N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. -## Add Blazor Bullet Chart component +## Add Syncfusion® Blazor Bullet Chart component Add the Syncfusion® Blazor Bullet Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. @@ -158,6 +158,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + diff --git a/blazor/bullet-chart/getting-started-with-web-app.md b/blazor/bullet-chart/getting-started-with-web-app.md index 45d6d610a0..f1b825ccd2 100644 --- a/blazor/bullet-chart/getting-started-with-web-app.md +++ b/blazor/bullet-chart/getting-started-with-web-app.md @@ -166,6 +166,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + diff --git a/blazor/calendar/getting-started-with-server-app.md b/blazor/calendar/getting-started-with-server-app.md index b936aa1ccd..4ede9fd538 100644 --- a/blazor/calendar/getting-started-with-server-app.md +++ b/blazor/calendar/getting-started-with-server-app.md @@ -181,6 +181,8 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code{ diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index abaa4207bc..1db982ccfd 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -151,7 +151,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor Calendar component +## Add Syncfusion® Blazor Calendar component Add the Syncfusion® Blazor Calendar component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). @@ -189,6 +189,8 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code{ diff --git a/blazor/chart-wizard/getting-started-with-web-app.md b/blazor/chart-wizard/getting-started-with-web-app.md index 380b371b95..22374581cc 100644 --- a/blazor/chart-wizard/getting-started-with-web-app.md +++ b/blazor/chart-wizard/getting-started-with-web-app.md @@ -221,6 +221,8 @@ The default series type is Line. Use the `SeriesType` property to change the ser {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.ChartWizard +
Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. -## Add Blazor Chart Wizard component +## Add Syncfusion® Blazor Chart Wizard component Add the Syncfusion® Blazor Chart Wizard component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. @@ -215,6 +215,8 @@ The default series type is Line. Use the `SeriesType` property to change the ser {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.ChartWizard +
Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. -## Add Blazor Chart component +## Add Syncfusion® Blazor Chart component Add the Syncfusion® Blazor Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. @@ -205,6 +205,8 @@ Now, map the data fields `Month` and `Sales` to the series [XName](https://help {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index 03d1464465..8037f4ee7d 100644 --- a/blazor/chat-ui/getting-started-webapp.md +++ b/blazor/chat-ui/getting-started-webapp.md @@ -174,6 +174,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.InteractiveChat +
@@ -192,6 +194,8 @@ Use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inter {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.InteractiveChat +
diff --git a/blazor/chat-ui/getting-started-with-server-app.md b/blazor/chat-ui/getting-started-with-server-app.md index b6b47193e9..2b5c19613f 100644 --- a/blazor/chat-ui/getting-started-with-server-app.md +++ b/blazor/chat-ui/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.InteractiveChat +
@@ -179,6 +181,8 @@ Use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inter {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.InteractiveChat +
diff --git a/blazor/check-box/getting-started-with-server-app.md b/blazor/check-box/getting-started-with-server-app.md index ce8eaf76ba..084d61d756 100644 --- a/blazor/check-box/getting-started-with-server-app.md +++ b/blazor/check-box/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Buttons + @code diff --git a/blazor/check-box/getting-started-with-web-app.md b/blazor/check-box/getting-started-with-web-app.md index bc8cd65954..dcd1a2fe3d 100644 --- a/blazor/check-box/getting-started-with-web-app.md +++ b/blazor/check-box/getting-started-with-web-app.md @@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Buttons + @code diff --git a/blazor/combobox/getting-started-with-server-app.md b/blazor/combobox/getting-started-with-server-app.md index 1ad8b76293..0633fc36e9 100644 --- a/blazor/combobox/getting-started-with-server-app.md +++ b/blazor/combobox/getting-started-with-server-app.md @@ -177,6 +177,8 @@ After initializing, populate the ComboBox with data using the [DataSource](https {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + diff --git a/blazor/combobox/getting-started-with-web-app.md b/blazor/combobox/getting-started-with-web-app.md index 2069130c63..586c61f8fc 100644 --- a/blazor/combobox/getting-started-with-web-app.md +++ b/blazor/combobox/getting-started-with-web-app.md @@ -185,6 +185,8 @@ After initializing, populate the ComboBox with data using the [DataSource](https {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + diff --git a/blazor/common/authentication/blazor-asp-net-core-identity.md b/blazor/common/authentication/blazor-asp-net-core-identity.md index 0a68a4deb9..3354e28ea6 100644 --- a/blazor/common/authentication/blazor-asp-net-core-identity.md +++ b/blazor/common/authentication/blazor-asp-net-core-identity.md @@ -392,16 +392,8 @@ N> This example uses Bootstrap classes (`d-flex`, `ms-auto`, `gap-3`). If your p ### 12. Create the secure Syncfusion® DataGrid and Charts pages -Create two protected pages using `[Authorize]` that display Syncfusion DataGrid and Charts components. The generated components will use the default namespace `BlazorIdentitySyncfusion.Components.Pages`. If needed, adjust the `@namespace` directive in the generated files. - -{% tabs %} -{% highlight bash tabtitle=".NET CLI" %} - -dotnet new razorcomponent -n SecureGrid -o Components/Pages -dotnet new razorcomponent -n SecureChart -o Components/Pages - -{% endhighlight %} -{% endtabs %} +Create two protected Razor pages named `SecureGrid.razor` and `SecureChart.razor` inside the `Components/Pages` folder. +Apply the `[Authorize]` attribute to both pages and use them to display the Syncfusion DataGrid and Charts components respectively. **Add Syncfusion® Blazor DataGrid component** @@ -520,7 +512,7 @@ Create the database tables required for ASP.NET Core Identity by running Entity If you have not installed the EF Core command-line tools, install them first. {% tabs %} -{% highlight bash tabtitle=".NET CLI" %} +{% highlight c# tabtitle=".NET CLI" %} dotnet tool install --global dotnet-ef @@ -530,7 +522,7 @@ dotnet tool install --global dotnet-ef Then create the migration and update the database. {% tabs %} -{% highlight bash tabtitle=".NET CLI" %} +{% highlight c# tabtitle=".NET CLI" %} dotnet ef migrations add CreateIdentitySchema dotnet ef database update @@ -547,7 +539,7 @@ N> If you receive an error that a migration with this name already exists, you c Run the application and verify the authentication flow. {% tabs %} -{% highlight bash tabtitle=".NET CLI" %} +{% highlight c# tabtitle=".NET CLI" %} dotnet run diff --git a/blazor/common/authentication/blazor-jwt-authentication.md b/blazor/common/authentication/blazor-jwt-authentication.md index b6301dac29..38d42e1c19 100644 --- a/blazor/common/authentication/blazor-jwt-authentication.md +++ b/blazor/common/authentication/blazor-jwt-authentication.md @@ -66,12 +66,12 @@ Open the `~/_Imports.razor` file and import the Syncfusion® namespaces. {% endhighlight %} {% endtabs %} -### Add stylesheet and script resources +### Add stylesheet and Interactive Server routing -Include the theme stylesheet and script references in the `App.razor` file. +Include the Syncfusion® theme stylesheet, required script references, and configure Interactive Server rendering in the `App.razor` file. {% tabs %} -{% highlight html %} +{% highlight razor tabtitle="App.razor" %} @@ -79,6 +79,8 @@ Include the theme stylesheet and script references in the `App.razor` file. + + @@ -295,6 +297,7 @@ This section explains how the Syncfusion® Blazor DataGrid API endpoint is secur using YourProjectName.Models; using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Mvc; +using Syncfusion.Blazor; using Syncfusion.Blazor.Data; namespace YourProjectName.Controllers; @@ -319,10 +322,10 @@ public class GridController : ControllerBase ### Adding JWT to Syncfusion® Blazor DataManager headers -Attach the JWT token to HTTP headers so the **DataManager** can send authenticated requests. +This example demonstrates how a JWT token is retrieved from the server and attached to the Syncfusion® Blazor DataManager as an HTTP Authorization header. This ensures that the DataGrid loads data only from a secured API after the user has been authenticated. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} @page "/" @using Syncfusion.Blazor @@ -332,12 +335,12 @@ Attach the JWT token to HTTP headers so the **DataManager** can send authenticat @inject HttpClient Http @inject NavigationManager Nav -

JWT + Syncfusion DataGrid (Click to Load)

+

JWT‑Secured Syncfusion® Blazor DataGrid

- + - // Only render the DataManager after the token is fetched. + @* Only render the DataManager after the token is fetched. *@ @if (isDataManagerEnabled) { @@ -389,9 +392,9 @@ Attach the JWT token to HTTP headers so the **DataManager** can send authenticat {% endhighlight %} {% endtabs %} -![Blazor DataGrid with JWT](images/jwt-authentication.webp) +When the Load GridData button is clicked, the application first authenticates the request using JWT. After successful authentication, the secured API is accessed and the DataGrid data is loaded. -The complete application flow ensures the **DataGrid** loads only after the user is authenticated using a valid JWT. +![Blazor DataGrid with JWT](images/jwt-authentication.webp) ## See also diff --git a/blazor/common/authentication/images/jwt-authentication.webp b/blazor/common/authentication/images/jwt-authentication.webp index 236a444c17..f236e1244c 100644 Binary files a/blazor/common/authentication/images/jwt-authentication.webp and b/blazor/common/authentication/images/jwt-authentication.webp differ diff --git a/blazor/common/integration/blazor-azure-functions.md b/blazor/common/integration/blazor-azure-functions.md index 5ce9fc56f6..01f6bc04ff 100644 --- a/blazor/common/integration/blazor-azure-functions.md +++ b/blazor/common/integration/blazor-azure-functions.md @@ -99,18 +99,18 @@ This sample exposes `GET /api/orders` and `POST /api/orders`. The Blazor page us Ensure the .NET SDK and Azure Functions Core Tools are compatible. Refer to the [Azure Functions supported versions](https://learn.microsoft.com/en-us/azure/azure-functions/supported-languages) to verify compatibility for your environment. -### Create solution and projects +### Create the projects -In this section, you will create a single solution that contains: +In this section, you will create two projects: * A Blazor WebAssembly (WASM) client application. * An Azure Functions project using the isolated worker model. -Keeping both projects in one solution makes development and debugging easier. +Keeping both projects in the same folder makes development and debugging easier. Run the commands from your terminal in a new, empty directory. **Step 1: Create the Blazor WebAssembly client project** -Run the following command to create a Blazor WebAssembly application named Client. +Run the following command to create a Blazor WebAssembly application named **Client**. {% tabs %} {% highlight bash tabtitle=".NET CLI" %} @@ -122,7 +122,7 @@ dotnet new blazorwasm -o Client -f net10.0 **Step 2: Create the Azure Functions project (isolated worker)** -Create an Azure Functions project named Functions using the isolated worker model, then add an HTTP triggered function. +Create an Azure Functions project named **Functions** using the isolated worker model, then add an HTTP triggered function. {% tabs %} {% highlight bash tabtitle="CLI" %} @@ -134,63 +134,44 @@ func new --name OrdersApi --template "HTTP trigger" --authlevel function {% endhighlight %} {% endtabs %} -**Step 3: Create a solution and add both projects** - -Return to the root folder and create a solution file to manage both projects. - -{% tabs %} -{% highlight bash tabtitle=".NET CLI" %} - -cd .. -dotnet new sln -n BlazorFunctions -dotnet sln add Client/Client.csproj -dotnet sln add Functions/Functions.csproj - -{% endhighlight %} -{% endtabs %} - ### Install required NuGet packages **Syncfusion packages:** -Navigate to the Blazor WASM project and install the necessary Syncfusion packages. +Navigate into the Blazor WASM project(`Client`) directory and install the necessary Syncfusion packages. * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) * [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) * [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) -Alternatively, you can install the required packages by using the following .NET CLI commands. +Alternatively, you can install the required packages by using the following .NET CLI commands in the Client project. {% tabs %} {% highlight bash tabtitle=".NET CLI" %} -cd Client dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Schedule -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -cd .. {% endhighlight %} {% endtabs %} **Microsoft packages:** -Install the necessary packages for isolated worker runtime Azure Functions with HTTP triggers. +Navigate to the Functions project and install the necessary packages for isolated worker runtime Azure Functions with HTTP triggers. * [Microsoft.Azure.Functions.Worker](https://www.nuget.org/packages/Microsoft.Azure.Functions.Worker) * [Microsoft.Azure.Functions.Worker.Extensions.Http](https://www.nuget.org/packages/Microsoft.Azure.Functions.Worker.Extensions.Http) -Alternatively, you can install the required packages by using the following .NET CLI commands. +Alternatively, you can install the required packages by using the following .NET CLI commands in the Functions project. {% tabs %} {% highlight bash tabtitle=".NET CLI" %} -cd Functions dotnet add package Microsoft.Azure.Functions.Worker dotnet add package Microsoft.Azure.Functions.Worker.Extensions.Http -cd .. {% endhighlight %} {% endtabs %} diff --git a/blazor/context-menu/getting-started-with-server-app.md b/blazor/context-menu/getting-started-with-server-app.md index cbd6ab897d..edd211ebf0 100644 --- a/blazor/context-menu/getting-started-with-server-app.md +++ b/blazor/context-menu/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Navigations +
Right click/Touch hold to open the ContextMenu
diff --git a/blazor/context-menu/getting-started-with-web-app.md b/blazor/context-menu/getting-started-with-web-app.md index f2bb363937..6f8b852adb 100644 --- a/blazor/context-menu/getting-started-with-web-app.md +++ b/blazor/context-menu/getting-started-with-web-app.md @@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Navigations +
Right click/Touch hold to open the ContextMenu
diff --git a/blazor/datagrid/getting-started-with-server-app.md b/blazor/datagrid/getting-started-with-server-app.md index 0e0ca8a30b..dea085355b 100644 --- a/blazor/datagrid/getting-started-with-server-app.md +++ b/blazor/datagrid/getting-started-with-server-app.md @@ -163,6 +163,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Grids + @code{ @@ -199,6 +201,8 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Grids + @code{ @@ -352,6 +356,7 @@ The following sample code demonstrates notifying user when server-side exception {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @ErrorDetails diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index 1acde98f50..008222d3c4 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Grids + @code{ @@ -205,6 +207,8 @@ To bind data for the Grid, you can assign a IEnumerable object to the [DataSourc {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Grids + @code{ @@ -358,6 +362,7 @@ The following sample code demonstrates notifying user when server-side exception {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @ErrorDetails diff --git a/blazor/datepicker/getting-started-with-server-app.md b/blazor/datepicker/getting-started-with-server-app.md index 50c32e7f45..f2a6672902 100644 --- a/blazor/datepicker/getting-started-with-server-app.md +++ b/blazor/datepicker/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + {% endhighlight %} @@ -177,6 +179,8 @@ The following example demonstrates how to set the [Value](https://help.syncfusio {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code { diff --git a/blazor/datepicker/getting-started-with-web-app.md b/blazor/datepicker/getting-started-with-web-app.md index b86c3af5f6..c53376bde8 100644 --- a/blazor/datepicker/getting-started-with-web-app.md +++ b/blazor/datepicker/getting-started-with-web-app.md @@ -165,6 +165,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + {% endhighlight %} @@ -181,6 +183,8 @@ The following example demonstrates how to set the [Value](https://help.syncfusio {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code { diff --git a/blazor/daterangepicker/getting-started-with-server-app.md b/blazor/daterangepicker/getting-started-with-server-app.md index 9f16c5d69b..55d310460a 100644 --- a/blazor/daterangepicker/getting-started-with-server-app.md +++ b/blazor/daterangepicker/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + {% endhighlight %} @@ -177,6 +179,8 @@ The minimum and maximum date range can be defined with the help of [Min](https:/ {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code { diff --git a/blazor/daterangepicker/getting-started-with-web-app.md b/blazor/daterangepicker/getting-started-with-web-app.md index 70764f2c26..d40060dd22 100644 --- a/blazor/daterangepicker/getting-started-with-web-app.md +++ b/blazor/daterangepicker/getting-started-with-web-app.md @@ -165,6 +165,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + {% endhighlight %} @@ -181,6 +183,8 @@ The minimum and maximum date range can be defined with the help of [Min](https:/ {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code { diff --git a/blazor/datetime-picker/getting-started-with-server-app.md b/blazor/datetime-picker/getting-started-with-server-app.md index cfd81c3029..05bff64123 100644 --- a/blazor/datetime-picker/getting-started-with-server-app.md +++ b/blazor/datetime-picker/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + {% endhighlight %} @@ -177,6 +179,8 @@ The minimum and maximum date time can be defined with the help of [Min](https:// {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code{ diff --git a/blazor/datetime-picker/getting-started-with-web-app.md b/blazor/datetime-picker/getting-started-with-web-app.md index 287f02dd40..c021a216ab 100644 --- a/blazor/datetime-picker/getting-started-with-web-app.md +++ b/blazor/datetime-picker/getting-started-with-web-app.md @@ -165,6 +165,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + {% endhighlight %} @@ -181,6 +183,8 @@ The minimum and maximum date time can be defined with the help of [Min](https:// {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Calendars + @code{ diff --git a/blazor/diagram/Blazor-PostgreSQL.md b/blazor/diagram/Blazor-PostgreSQL.md index cdf7863eb9..70f852fa39 100644 --- a/blazor/diagram/Blazor-PostgreSQL.md +++ b/blazor/diagram/Blazor-PostgreSQL.md @@ -1,29 +1,35 @@ --- layout: post -title: Loading Blazor Diagram from PostgreSQL database | Syncfusion® -description: Fetch organizational-chart layout data from PostgreSQL and bind it to a .NET API-backed Syncfusion Blazor Diagram for Server and WASM samples. +title: Loading Blazor Diagram from PostgreSQL Database | Syncfusion® +description: Fetch organizational chart layout data from PostgreSQL and bind it to a .NET API-backed Syncfusion® Blazor Diagram for Server and WASM samples. platform: Blazor control: Diagram documentation: ug --- -# Loading a Syncfusion Blazor Diagram from PostgreSQL +# Loading Blazor Diagram from PostgreSQL Database -This guide shows how the sample in this repository loads organizational-chart layout data from PostgreSQL and renders it with the Syncfusion Blazor Diagram component. It covers database creation, API backend, EF Core migrations, and how the Blazor Server and WASM projects consume the API. +This guide explains how to display an organizational chart using data stored in a PostgreSQL database and visualize it with the Syncfusion® Blazor Diagram component. -> Note: The API returns objects with fields `id`, `parentId` (C#) / `parent_id` (DB) and `role`. The diagram's `DataSourceSettings` expects this parent–child shape. +It covers: +* Design and store organizational chart data in a database. +* Connect the application to the database using Entity Framework Core. +* Make the data available through a backend API. +* Display the organizational chart in Blazor Server and Blazor WebAssembly (WASM) applications. + +> **Note**: The REST API must return an array of JSON objects with **id**, **parent_id**, and **role** fields for correct data binding. **What is Entity Framework Core?** -Entity Framework Core (EF Core) is a software tool that simplifies database operations in .NET applications. It serves as a bridge between C# code and databases like PostgreSQL. +Entity Framework Core (EF Core) is a software tool that simplifies database operations in .NET applications. It acts as a bridge between C# code and databases such as PostgreSQL. **Key Benefits of Entity Framework Core** - **Automatic SQL Generation**: Entity Framework Core generates optimized SQL queries automatically, eliminating the need to write raw SQL code. -- **Type Safety**: Work with strongly-typed objects instead of raw SQL strings, reducing errors. -- **Built-in Security**: Automatic parameterization prevents SQL injection attacks. -- **Version Control for Databases**: Manage database schema changes version-by-version through migrations. -- **Familiar Syntax**: Use LINQ (Language Integrated Query) syntax, which is more intuitive than raw SQL strings. +- **Type Safety**: Work with strongly typed C# objects instead of SQL strings, which helps reduce runtime errors. +- **Built-in Security**: Automatic query parameterization helps protect applications from SQL injection attacks. +- **Database Versioning with Migrations**: Database schema changes can be tracked, applied, and rolled back using migrations. +- **Familiar Syntax**: **LINQ (Language Integrated Query)** provides a readable and intuitive way to query data using C#. **What is Npgsql Entity Framework Core Provider?** @@ -31,105 +37,159 @@ The **Npgsql.EntityFrameworkCore.PostgreSQL** package is the official Entity Fra ## Prerequisites -Ensure the following software and packages are available: +Ensure that the following software and packages are installed: | Software / Package | Version | Purpose | |---|---|---| | Visual Studio / Code | Latest | Development IDE with .NET workloads | | .NET SDK | 10.0 or later | Build & run projects | -| PostgreSQL Server | 12.x or later | Stores org-chart data | +| PostgreSQL Server | 12.x or later | Stores organizational chart data | | pgAdmin 4 (optional) | Latest | DB management UI | | Syncfusion.Blazor.Diagram | {{site.blazorversion}} | Diagram component | -| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for Syncfusion components | -| Microsoft.EntityFrameworkCore | 10.x | EF Core runtime | +| Syncfusion.Blazor.Themes | {{site.blazorversion}} | Styling for Syncfusion® Blazor components | +| Microsoft.EntityFrameworkCore.Design | 10.x | EF Core design‑time tools | +| Microsoft.EntityFrameworkCore.Tools | 10.x | EF Core CLI tools | | Npgsql.EntityFrameworkCore.PostgreSQL | 10.x | EF provider for PostgreSQL | -## Setting Up the PostgreSQL Environment for Entity Framework Core +## Installing PostgreSQL -You can create the database and table manually (pgAdmin/psql) or apply the EF Core migrations included in the Api project. +Download PostgreSQL from the official website: [https://www.postgresql.org/download/](https://www.postgresql.org/download/). -### Step 1: Create the database and Table in PostgreSQL +**Installation Steps:** -#### Option A — Manual (pgAdmin / psql) +1. Download the installer for the preferred version (12.x or higher recommended). +2. Run the installer and follow the setup wizard. +3. During installation: + - Set a password for PostgreSQL (for example, postgres123) and remember it. + - Keep the default port **5432**. + - Next, the Select Components screen will open. + - By default, all options are selected, as shown in the image: + ![Select Components](images/select-component-Package.png) + - Uncheck the **Stack Builder** option — it is not necessary for this setup. + - Ensure **PostgreSQL Server**, **pgAdmin 4**, and **Command Line Tools** are selected. +4. Complete the installation. -First, the **PostgreSQL database** structure must be created to store purchase order records. -**UI Instructions (Using pgAdmin 4):** +## PostgreSQL Database Setup -1. **Open pgAdmin 4** and connect to the PostgreSQL server. -2. **Create Database**: - - Right-click on **Databases** → Select **Create** → **Database** - - Enter name: `org_chart_db` - - Click **Save** -3. **Create Table**: - - Expand `org_chart_db` → Right-click on **Schemas** → **public** → **Tables** - - Click **Create** → **Table** - - Enter table name: `org_chart_layout` - - Define columns as per the script below -4. **Execute SQL Script** (Alternative method): - - Right-click on `org_chart_db` → **Query Tool** - - Copy and paste the SQL script below - - Execute (F5 or Run button) +Two options are available to create a database: + * Manual (pgAdmin 4) + * Automated Database Setup Using EF Core Migrations. -**SQL Script for PostgreSQL:** +### Option A: Manual (pgAdmin 4) -```sql --- Create Database -CREATE DATABASE org_chart_db +#### Opening pgAdmin + +PostgreSQL includes pgAdmin 4, a graphical tool for database management. Open pgAdmin 4 from the Windows Start menu or application launcher. + +![Opening pgAdmin 4](images/pgadmin-start.jpg) + +#### Creating the Database + +Right-click on the **Databases** option and select **Create** → **Database**. + +![Create Database Menu](images/create-database-menu.png) + +In the **Create - Database** dialog: +1. Enter **org_chart_db** as the database name. +2. Click **Save** to create the database. --- Connect to the database -\c org_chart_db; +![Database Creation Dialog](images/database-creation-dialog.png) --- Create PurchaseOrder Table +After creating the database, right-click the **org_chart_db** database and choose **Query Tool** from the context menu. + +**Quick procedure before running SQL:** + +- Clear the editor (Ctrl+A → Delete) to remove any previous statements. +- Enter the SQL, then click **Execute / Execute Query** (or press **F5**) to run it. +- After execution, clear the editor again before entering the next statement. + +Follow this simple sequence for every SQL in this guide. + +#### Creating the Table + +Run the following SQL to create the **org_chart_layout** table: + +```sql CREATE TABLE IF NOT EXISTS org_chart_layout ( id text PRIMARY KEY, role text NOT NULL, parent_id text NULL ); +``` +![Create Table Query](images/create-table-query.jpg) -INSERT INTO org_chart_layout (id, role, parent_id) VALUES -('parent','Board',NULL), -('1','General Manager','parent') -ON CONFLICT (id) DO UPDATE SET role = EXCLUDED.role, parent_id = EXCLUDED.parent_id; +The table structure includes: +- **id** – Primary key for unique node identification. +- **role** – Display text for the node in the organizational chart layout. +- **parent_id** – Foreign key reference to the parent node (NULL for root). + +#### Inserting Sample Data +Add organizational chart data using the SQL **INSERT** statement. The sample data shows a typical organizational structure with board, management, and department levels. + +```sql +INSERT INTO org_chart_layout (id, role, parent_id) VALUES +('parent', 'Board', NULL), +('1', 'General Manager', 'parent'), +('2', 'Human Resource Manager', '1'), +('3', 'Trainers', '2'), +('4', 'Recruiting Team', '2'), +('5', 'Finance Asst. Manager', '2'), +('6', 'Design Manager', '1'), +('7', 'Design Supervisor', '6'), +('8', 'Development Supervisor', '6'), +('9', 'Drafting Supervisor', '6'), +('10', 'Operations Manager', '1'), +('11', 'Statistics Department', '10'), +('12', 'Logistics Department', '10'), +('16', 'Marketing Manager', '1'), +('17', 'Overseas Sales Manager', '16'), +('18', 'Petroleum Manager', '16'), +('20', 'Service Department Manager', '16'), +('21', 'Quality Control Department', '16') +ON CONFLICT (id) DO UPDATE +SET role = EXCLUDED.role, + parent_id = EXCLUDED.parent_id; ``` -#### Option B — Automated (EF Core migrations + seed) +![Insert Data Query](images/insert-data-query.jpg) -Apply the EF Core migrations included in the host project that contains `AppDbContext` (the Server host includes migrations by default). Update the connection string in the host's `appsettings.Development.json` and run migrations from that project directory. +#### Verifying Data Insertion -Example (Blazor Server host): +Run a **SELECT** query to confirm the data insertion: -```powershell -cd src/BlazorServerStyle -dotnet restore -dotnet build -dotnet ef database update +```sql +SELECT * FROM org_chart_layout ORDER BY id; ``` -If you prefer the WASM host (it also contains the server + migrations), run: +The query should return 18 rows. Parent–child relationships are indicated by the **parent_id** column, which references the **id** of the parent node (NULL for root nodes). -```powershell -cd src/BlazorWASMStyle/BlazorWASMStyle -dotnet restore -dotnet build -dotnet ef database update -``` +![Verify Data Query Results](images/verify-data-results.jpg) -If `dotnet-ef` is not installed: +### Option B — Automated Database Setup Using EF Core Migrations -```powershell -dotnet tool install --global dotnet-ef -``` +As an alternative to manually creating database tables and inserting data using SQL scripts, this project supports automated database setup using Entity Framework Core (EF Core) migrations. This approach allows the database schema and initial data to be created directly from the application’s data model and configuration, ensuring consistency between the code and the database. ---- +When EF Core migrations are applied, the following actions occur: + +**Database Creation**: If the target PostgreSQL database specified in the connection string does not exist, EF Core creates the database when migrations are executed, provided that the database server is reachable and the user has sufficient permissions. +**Schema Generation**: EF Core creates the required database schema based on the `AppDbContext` configuration. This includes creating the **org_chart_layout** table and applying primary keys and indexes. +**Data Seeding**: Initial organizational chart records are inserted into the database using the seed data defined in `AppDbContext.OnModelCreating()` via the `HasData()` method. + +The exact procedure for creating and applying migrations is described in the [automated database initialization and seeding](#step-8-automated-database-initialization-and-seeding). -### Step 2: Install Required NuGet Packages +## Backend Implementation -Before installing the necessary NuGet packages, a new Blazor Web Application must be created using the default template. -This template automatically generates essential starter files—such as **Program.cs, appsettings.json, the wwwroot folder, and the Components folder**. +### Step 1: Install Required NuGet Packages -For this guide, a Blazor application named **BlazorServerStyle** has been created. Once the project is set up, the next step involves installing the required NuGet packages. NuGet packages are software libraries that add functionality to the application. These packages enable Entity Framework Core and PostgreSQL integration. +Before installing the necessary NuGet packages, a new Blazor web application must be created using the default template. For full step-by-step instructions on creating a Blazor project, see the getting-started guide: **[Getting Started](https://blazor.syncfusion.com/documentation/diagram/getting-started)**. + +For this guide, a Blazor application named **BlazorServerStyle** has been created. Once the project is set up, the next step involves installing the required NuGet packages. These packages enable Entity Framework Core and PostgreSQL integration. + +> **Note**: +In Blazor Server, the UI, API, and EF Core all run in the same project. +In Blazor WebAssembly, the API and EF Core must run in a Server host project, and the WASM client calls it over HTTP. **Method 1: Using Package Manager Console** @@ -153,6 +213,17 @@ Install-Package Syncfusion.Blazor.Themes -Version {{site.blazorversion}} - **[Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/)** (version {{site.blazorversion}}) - **[Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)** (version {{site.blazorversion}}) +**Method 3: Using Integrated Terminal in Visual Studio Code** + +Install NuGet packages from the Visual Studio Code terminal (run these from the project folder): + +```powershell +dotnet add package Microsoft.EntityFrameworkCore --version 10.0.2 +dotnet add package Npgsql.EntityFrameworkCore.PostgreSQL --version 10.0.0 +dotnet add package Syncfusion.Blazor.Diagram --version +dotnet add package Syncfusion.Blazor.Themes --version +``` + **Project File Reference** The installed packages are reflected in the **BlazorServerStyle.csproj** file: @@ -166,17 +237,15 @@ The installed packages are reflected in the **BlazorServerStyle.csproj** file: ``` -All required packages are now installed. +### Step 2: Create the Data Model -### Step 3: Create the Data Model - -A data model is a C# class that represents the structure of a database table. This model defines the properties that correspond to the columns in the `LayoutNode` table. +A data model is a C# class that represents the structure of a database table. This model defines the properties that correspond to the columns in the **org_chart_layout** table. **Instructions:** -1. Create a new folder named `Models` in the Blazor application project. -2. Inside the `Models` folder, create a new file named **LayoutNode.cs**. -3. Define the **LayoutNode** class with the following code: +1. Create a new folder named **Models** in the Blazor application project. +2. Inside the **Models** folder, create a new file named **LayoutNode.cs**. +3. Define the `LayoutNode` class with the following code: ```csharp using System.ComponentModel.DataAnnotations; @@ -191,21 +260,15 @@ public class LayoutNode } ``` -**Explanation:** -- Each property represents a column in the database table. -- The `?` symbol indicates that a property is nullable (can be empty). -- The model includes comprehensive XML documentation for each property. - -The data model has been successfully created. - -### Step 4: Configure the DbContext +### Step 3: Configure the DbContext -A `DbContext` is a special class that manages the connection between the application and the PostgreSQL database. It handles all database operations such as saving, updating, deleting, and retrieving data. +A `DbContext` is a special class that manages the connection between the Blazor application and the PostgreSQL database. It handles all database operations such as saving, updating, deleting, and retrieving data. **Instructions:** -1. Inside the `Data` folder, create a new file named **AppDbContext.cs**. -2. Define the `AppDbContext` class with the following code: +1. Create a new folder named **Data** in the Blazor application project. +2. Inside the **Data** folder, create a new file named **AppDbContext.cs**. +3. Define the `AppDbContext` class with the following code: ```csharp using Microsoft.EntityFrameworkCore; @@ -263,35 +326,25 @@ public class AppDbContext : DbContext ``` **Explanation:** -- The `DbContext` class inherits from Entity Framework's `DbContext` base class. -- The `OrgChartLayouts` property represents the `org_chart_layout` table in the database. -- The `OnModelCreating` method configures how the database columns should behave (maximum length, required/optional, default values, data types, indexes, etc.). -- Database indexes are configured for improved query performance on frequently accessed columns. +- The `AppDbContext` class connects the Blazor application to the PostgreSQL database. +- It maps the `LayoutNode` model to the **org_chart_layout** table. +- Column mappings, required fields, and table structure are configured in `OnModelCreating`. +- An index is added on the **parent_id** column to improve performance when loading organizational chart data. -The **AppDbContext** class is required because: - -- It **connects** the application to the PostgreSQL database. -- It **manages** all database operations. -- It **maps** C# models to actual database tables. -- It **configures** how data should look inside the database. -- It **enables** PostgreSQL-specific features like indexes and default value functions. - -Without this class, Entity Framework Core will not know where to save data or how to create the org_chart_layout table. The DbContext has been successfully configured. - -### Step 5: Configure the Connection String +### Step 4: Configure the Connection String A connection string contains the information needed to connect the application to the PostgreSQL database, including the server address, database name, and authentication credentials. **Instructions:** -1. Open the `appsettings.json` file in the project root. +1. Open the **appsettings.json** file in the project root. 2. Update the `ConnectionStrings` section with the PostgreSQL connection details: ```json { - "ConnectionStrings": { - "DefaultConnection": "Server=localhost;Port=5432;Database=PurchaseOrderDB;User Id=postgres;Password=postgresql@123" - }, + "ConnectionStrings": { + "DefaultConnection": "Server=localhost;Port=5432;Database=org_chart_db;User Id=postgres;Password=postgresql@123" + }, "Logging": { "LogLevel": { "Default": "Information", @@ -308,29 +361,52 @@ A connection string contains the information needed to connect the application t |-----------|-------------| | Server | The address of the PostgreSQL server (localhost for local development) | | Port | The port number on which PostgreSQL is running (default is 5432) | -| Database | The database name (in this case, `PurchaseOrderDB`) | -| User Id | The PostgreSQL username (default is `postgres`) | +| Database | The database name (for this guide, **org_chart_db**) | +| User Id | The PostgreSQL username | | Password | The password for the PostgreSQL user account | -> **Security Note:** For production environments, store sensitive credentials in environment variables or Azure Key Vault instead of storing them in appsettings.json. Example: `Password=${DB_PASSWORD}` and set the environment variable `DB_PASSWORD` on the deployment server. +> **Security Note:** For production environments, store sensitive credentials in environment variables or Azure Key Vault instead of storing them in **appsettings.json**. Example: **Password=${DB_PASSWORD}** and set the environment variable **DB_PASSWORD** on the deployment server. + +### Step 5: Create the API Controller + +Create a controller file (e.g., **Controllers/LayoutController.cs**) in the current project. This controller exposes a GET API endpoint at **api/Layout** that returns all OrgChart layout records from the database. + +```csharp +using BlazorServerStyle.Data; +using BlazorServerStyle.Models; +using Microsoft.AspNetCore.Mvc; +using Microsoft.EntityFrameworkCore; + +namespace BlazorServerStyle.Controllers; + +[ApiController] +[Route("api/[controller]")] +public class LayoutController : ControllerBase +{ + private readonly AppDbContext _db; + + public LayoutController(AppDbContext db) => _db = db; -The database connection string has been configured successfully. + [HttpGet] + public async Task Get() => Ok(await _db.OrgChartLayouts.ToListAsync()); +} +``` ### Step 6: Create the LayoutService Class -A LayoutService class is an intermediary layer that handles all database operations. This class uses Entity Framework Core to communicate with the PostgreSQL database. +The `LayoutService` class acts as an HTTP client wrapper that calls the API endpoint to retrieve organizational chart layout data. The Blazor application uses this service to load data from the **/api/layout** endpoint. **Instructions:** -1. Inside the `Data` folder, create a new file named **LayoutService.cs**. -2. Define the **LayoutService** class with the following code: +1. Inside the **Data** folder, create a new file named **LayoutService.cs**. +2. Define the `LayoutService` class with the following code: ```csharp using BlazorServerStyle.Models; using System.Net.Http.Json; -namespace Services; // change namespace for WASM project +namespace BlazorServerStyle.Services; // Change namespace for WASM project public class LayoutService { @@ -347,17 +423,16 @@ public class LayoutService } } ``` -The repository class has been created. - +This service encapsulates HTTP-related logic and provides a clean abstraction for retrieving layout data. By centralizing API calls in a service, Blazor components remain focused on presentation and state management. -### Step 7: Register Services in Program.cs +### Step 7: Register Services in **Program.cs** -The `Program.cs` file is where application services are registered and configured. This file must be updated to enable Entity Framework Core with PostgreSQL and the repository pattern. +The **Program.cs** file is used to register and configure application services. This step sets up Entity Framework Core with PostgreSQL, registers API controllers, and configures application services used by the Blazor application. **Instructions:** -1. Open the `Program.cs` file at the project root. -2. Add the following code after the line `var builder = WebApplication.CreateBuilder(args);`: +1. Open the **Program.cs** file at the project root. +2. Add the following code after the line **var builder = WebApplication.CreateBuilder(args)**: ```csharp using BlazorServerStyle.Components; @@ -372,12 +447,12 @@ var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); builder.Services.AddSyncfusionBlazor(); -builder.Services.AddScoped(); builder.Services.AddHttpClient("Api", client => { - client.BaseAddress = new Uri("http://localhost:5069/"); // ← change to your actual API HTTP port (from dotnet run output) + // Use the port shown in dotnet run output or launchSettings.json + client.BaseAddress = new Uri("http://localhost:5069/"); }); -// Add controllers and EF DbContext +// Add controllers and EF DbContext. builder.Services.AddControllers(); builder.Services.AddDbContext(options => options.UseNpgsql(builder.Configuration.GetConnectionString("DefaultConnection"))); @@ -408,33 +483,88 @@ app.Run(); **Explanation:** -- **`AddSyncfusionBlazor()`**: Registers Syncfusion Blazor components (Diagram, themes, etc.). -- **`AddDbContext`**: Registers the DbContext with PostgreSQL as the database provider using `UseNpgsql()`. -- **Connection String Validation**: Ensures the connection string is configured before attempting to connect. -- **`AddScoped`**: Registers the repository as a scoped service, creating a new instance for each HTTP request. -- **`AddRazorComponents()` and `AddInteractiveServerComponents()`**: Enables Blazor server-side rendering with interactive components. +- `AddSyncfusionBlazor()`: Registers Syncfusion® Blazor components such as Diagram and themes. +- `AddDbContext`: Configures Entity Framework Core to use PostgreSQL via the `UseNpgsql` provider. +- `AddHttpClient(...)`: Registers `LayoutService` as a typed HTTP client, enabling it to call the **/api/layout** endpoint using dependency injection. +- `AddControllers()`: Enables API controllers for handling HTTP API requests. -The service registration has been completed successfully. +With these registrations: + * The application can access the database via `AppDbContext`. + * API endpoints are enabled. + * Blazor components can use `LayoutService` to retrieve data from the API. ---- +### Step 8: Automated Database Initialization and Seeding + +This step initializes the PostgreSQL database using EF Core migrations. The migrations create the database (if it does not already exist), apply the schema, and insert the initial organizational chart data required by the application. -## Integrating Syncfusion Blazor Diagram +To run the migrations, open a terminal in the **server host project** that contains `AppDbContext`. Before running the commands, ensure the PostgreSQL connection string is correctly configured in the host’s **appsettings.Development.json** file. + +Example (Blazor Server host): + +```powershell +cd src/BlazorServerStyle +dotnet restore +dotnet build +dotnet ef migrations add InitialCreate +dotnet ef database update +``` + +The Blazor WebAssembly host also includes a server project and migrations. To use it instead, run the commands from that project directory: + +```powershell +cd src/BlazorWASMStyle +dotnet restore +dotnet build +dotnet ef migrations add InitialCreate +dotnet ef database update +``` + +**What happens when you run the above commands** + +```powershell +dotnet ef migrations add InitialCreate +``` +Creates a migration file based on the current `AppDbContext`. This migration represents the database structure required by the application. + +```powershell +dotnet ef database update +``` +Applies the migration to PostgreSQL. This command: + - Creates the database if it does not already exist. + - Creates the required tables and schema. + - Inserts the initial data needed by the application. + +The initial data is defined using the `HasData` method inside `OnModelCreating()` in `AppDbContext`. This allows EF Core to automatically insert required base data (such as organizational chart layouts) during +migration, without writing or running manual SQL scripts. + +The backend setup is now complete. The next section focuses on configuring the Blazor frontend to consume the API and display the diagram. + +## Rendering the Blazor Diagram Component ### Step 1: Install and Configure Blazor Diagram Component -Syncfusion is a library that provides pre-built UI components like Diagram, which is used to display data as a diagram. +This section explains how to render an organizational chart using the Syncfusion® Blazor Diagram component by binding it to data loaded from the backend API. **Instructions:** -* The Syncfusion.Blazor.Diagram package was installed in **Step 2** of the previous section. -* Import the required namespaces in the `Components/_Imports.razor` file: +* The Syncfusion.Blazor.Diagram package was installed in **Step 2** of the previous section **Backend Implementation**[🔗](#Backend-implementation). +* Import the required namespaces in the **Components/_Imports.razor** file: ```csharp @using Syncfusion.Blazor @using Syncfusion.Blazor.Diagram ``` -* Add the Syncfusion stylesheet and scripts in the `Components/App.razor` file. Find the `` section and add: +* Before using Syncfusion® Blazor components, register your license key in **Program.cs**: + +```csharp +Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); +``` + +* Add the Syncfusion® stylesheet and scripts to the host page **** element to ensure that required assets load before the Blazor components are rendered. Use the appropriate host file based on your project type: + + - **Blazor Server (.NET 8+)**: Add the links to **Pages/App.razor** (inside the **** element). + - **Blazor WebAssembly**: Add the links to **wwwroot/index.html** (inside the **** element). ```html @@ -443,17 +573,17 @@ Syncfusion is a library that provides pre-built UI components like Diagram, whic ``` -For this project, the bootstrap5 theme is used. A different theme can be selected or the existing theme can be customized based on project requirements. Refer to the [Syncfusion Blazor Components Appearance](https://blazor.syncfusion.com/documentation/appearance/themes) documentation to learn more about theming and customization options. +For this project, the Bootstrap 5 theme is used. A different theme can be selected or the existing theme can be customized based on project requirements. Refer to the [Syncfusion Blazor Components Appearance](https://blazor.syncfusion.com/documentation/appearance/themes) documentation to learn more about theming and customization options. -Syncfusion components are now configured and ready to use. For additional guidance, refer to the Diagram component's [getting-started](https://blazor.syncfusion.com/documentation/diagram/getting-started-with-web-app) documentation. +For additional guidance, refer to the Diagram component [getting-started](https://blazor.syncfusion.com/documentation/diagram/getting-started-with-web-app) documentation. ### Step 2: Update the Blazor Diagram -The `Home.razor` component will display the data in a Syncfusion Blazor Diagram Organization chart. +In this step, an organizational chart layout is created using the Blazor Diagram component in the **Home.razor** file. **Instructions:** -1. Open the file named `Home.razor` in the `Components/Pages` folder. +1. Open the file named **Home.razor** in the **Components/Pages** folder. 2. Add the following code to create a Diagram: ```cshtml @@ -497,7 +627,7 @@ else private int _horizontalSpacing = 40; private int _verticalSpacing = 50; - //Creates node with some default values. + //Creates nodes with default values. private void OnNodeCreating(IDiagramObject obj) { Node node = obj as Node; @@ -512,7 +642,7 @@ else node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "Black" }; } - //Creates connectors with some default values. + //Creates connectors with default styling. private void OnConnectorCreating(IDiagramObject connector) { Connector connectors = connector as Connector; @@ -548,71 +678,44 @@ else } } ``` - -**Component Explanation:** - -- **`@inject LayoutService`**: Injects the repository to access database methods. -- **``**: The Diagram component that displays data as layout. -- **``**: Represents the settings that specify the data source and define how the parent and child relationship will be generated in the diagram layout. -- **``**: Customize and control the grid lines and snap behavior of the diagram. -- **``**: Class for arranging the nodes and connectors in a tree structure. - -The Home component has been updated successfully with Diagram. - --- -## Run the sample locally - -1. Ensure PostgreSQL is running and reachable; update the `DefaultConnection` in the host project's `appsettings.Development.json`. - -2. Apply migrations and seed (choose the host project that contains `Migrations`): +## Run the Sample Locally -```powershell -dotnet tool install --global dotnet-ef -cd src/BlazorServerStyle -dotnet restore -dotnet build -dotnet ef database update -``` +This section explains how to run the application locally. -3. Run the Server host (this project also exposes the API endpoints at `/api/layout`): +**Run the Blazor Server host** ```powershell cd src/BlazorServerStyle dotnet run ``` -By default the Server app uses the launch settings shown in `BlazorServerStyle/Properties/launchSettings.json` and will be available on `http://localhost:5069` (HTTP) and `https://localhost:7269` (HTTPS). - -4. Or run the WASM host (which serves the client and hosts the API): +**Run the Blazor WebAssembly host** ```powershell cd src/BlazorWASMStyle/BlazorWASMStyle dotnet run ``` -Typical WASM host URLs in this workspace are `http://localhost:5252` and `https://localhost:7042` . - -5. Open the app in a browser and navigate to the Home page — the organizational chart should load from the host's `/api/layout` endpoint and render via the Syncfusion Blazor Diagram. - ## Troubleshooting -- API connection errors: confirm PostgreSQL is running and `appsettings.Development.json` contains correct credentials. -- CORS errors: check CORS configuration in `Program.cs` and ensure the Blazor host origin is allowed. -- No data in diagram: open `/api/layout` in a browser or Postman to confirm JSON is returned; verify `LayoutService` base address. +### Application or API Not Working -## Next steps / customization +- Confirm that PostgreSQL is running and reachable. +- Verify the PostgreSQL connection string in **appsettings.Development.json**: + `Server`, `Port`, `Database`, `User Id`, and `Password` must match your PostgreSQL setup. +- Run **dotnet ef database update** from the server host project to ensure migrations were applied successfully. -- Change API origin: update CORS in `Program.cs` and `LayoutService` base address in the Blazor hosts. -- Modify seed data: edit `AppDbContext.OnModelCreating()` and create a new migration: +### No data in Diagram -```powershell -cd src/Api -dotnet ef migrations add UpdateSeed -dotnet ef database update -``` - -- Explore Syncfusion Diagram properties to alter templates, orientation, spacing, or styles. +- Verify that `DataSourceSettings` uses the correct property names: + - `ID="Id"` + - `ParentID="ParentId"` + These property names must exactly match the model returned by the API. +- Check the browser developer console (F12) for errors from `LayoutService` class. +- Ensure migrations completed successfully and that seed data exists in the database + (you may verify this directly in PostgreSQL). --- @@ -620,21 +723,23 @@ dotnet ef database update A complete, working sample implementation is available in the [GitHub repository](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/Samples/OrganizationalChartPostgresql). +You can clone the repository, update the PostgreSQL connection string, apply migrations, and run the project to see the organizational chart in action. + ## Summary This guide demonstrates how to: -1. Create a PostgreSQL database with layout Nodes using pgAdmin 4. [🔗](#step-1-create-the-database-and-table-in-postgresql) -2. Install necessary NuGet packages for Entity Framework Core with Npgsql and Syncfusion. [🔗](#step-2-install-required-nuget-packages) -3. Create data models and DbContext for database communication with PostgreSQL-specific configuration. [🔗](#step-3-create-the-data-model) -4. Configure connection strings and register services. [🔗](#step-5-configure-the-connection-string) -5. Implement the repository pattern for data access with helper methods. [🔗](#step-6-create-the-LayoutService-class) -6. Create a Blazor component with a Diagram that visualizes data as a Organization layout. [🔗](#step-1-install-and-configure-blazor-Diagram-component) - +1. Install PostgreSQL. [🔗](#Installing-PostgreSQL) +2. Create a PostgreSQL database with layout nodes using pgAdmin 4. [🔗](#PostgreSQL-database-setup) +3. Configure backend implementations. [🔗](#Backend-implementation) +4. Create data models and DbContext for database communication with PostgreSQL-specific configuration. [🔗](#step-2-create-the-data-model) +5. Configure connection strings and register services. [🔗](#step-4-configure-the-connection-string) +6. HTTP service abstraction for data access using helper methods. [🔗](#step-6-create-the-layoutservice-class) +7. Create a Blazor component with a Diagram that visualizes data as an Organizational Chart layout. [🔗](#rendering-the-blazor-diagram-component) -The application now provides a complete solution for visualizing data from as a organization chart layout integrated with PostgreSQL. +The application now provides a complete solution for visualizing organizational chart data from PostgreSQL. -## See also +## See Also -- Data Binding: https://blazor.syncfusion.com/documentation/diagram/data-binding#how-to-specify-parent-child-relationship-in-data-source -- Organizational Chart Layout: https://blazor.syncfusion.com/documentation/diagram/layout/organizational-chart +- **Data Binding** – https://blazor.syncfusion.com/documentation/diagram/data-binding#how-to-specify-parent-child-relationship-in-data-source +- **Organizational Chart Layout** – https://blazor.syncfusion.com/documentation/diagram/layout/organizational-chart diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index f24c3bc7f7..8f454d8b97 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Diagram + {% endhighlight %} @@ -193,6 +195,8 @@ Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Diagram + @code diff --git a/blazor/diagram/getting-started.md b/blazor/diagram/getting-started.md index 9620a048be..7ccbe09432 100644 --- a/blazor/diagram/getting-started.md +++ b/blazor/diagram/getting-started.md @@ -163,6 +163,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Diagram + {% endhighlight %} @@ -187,6 +189,8 @@ Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Diagram + @code diff --git a/blazor/dialog/getting-started-with-server-app.md b/blazor/dialog/getting-started-with-server-app.md index dbe8012ba5..0900397141 100644 --- a/blazor/dialog/getting-started-with-server-app.md +++ b/blazor/dialog/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Popups + This is a Dialog with content @@ -194,7 +196,8 @@ html, body { - The [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Destroyed) event triggers when the dialog component is removed from the DOM. These lifecycle events allow executing custom code at specific points in the component's existence. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups @@ -214,7 +217,8 @@ html, body { } } -``` +{% endhighlight %} +{% endtabs %} ## Prerender the Dialog @@ -223,7 +227,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop * By default, AllowPrerender is set to false. In this mode, dialog DOM elements are completely removed from the DOM when the dialog is hidden, and recreated each time the dialog is shown. This approach saves memory but requires re-rendering on each display. * When AllowPrerender is set to true, the dialog elements remain in the DOM even when hidden, which improves performance for frequently accessed dialogs but uses more memory. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Buttons @@ -248,7 +253,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop } } -``` +{% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyNPspKoXXlIYf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -256,13 +262,15 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) property allows rendering a dialog with custom text header. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups -``` +{% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %} @@ -270,13 +278,15 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Dial The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Content) property allows rendering a dialog with custom text content. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups -``` +{% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Content](./images/blazor-dialog-content.png)" %} diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md index 29a2c61229..4f2df053c8 100644 --- a/blazor/dialog/getting-started-with-web-app.md +++ b/blazor/dialog/getting-started-with-web-app.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Popups + This is a Dialog with content @@ -200,7 +202,8 @@ html, body { - The [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Destroyed) event triggers when the dialog component is removed from the DOM. These lifecycle events allow executing custom code at specific points in the component's existence. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups @@ -220,7 +223,8 @@ html, body { } } -``` +{% endhighlight %} +{% endtabs %} ## Prerender the Dialog @@ -229,7 +233,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop * By default, AllowPrerender is set to false. In this mode, dialog DOM elements are completely removed from the DOM when the dialog is hidden, and recreated each time the dialog is shown. This approach saves memory but requires re-rendering on each display. * When AllowPrerender is set to true, the dialog elements remain in the DOM even when hidden, which improves performance for frequently accessed dialogs but uses more memory. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Buttons @@ -254,7 +259,8 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop } } -``` +{% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyNPspKoXXlIYf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -262,13 +268,15 @@ The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pop The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) property allows rendering a dialog with custom text header. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups -``` +{% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhyjEByHgdKnwXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Header](./images/blazor-dialog-header.png)" %} @@ -276,13 +284,15 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.Dial The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Content) property allows rendering a dialog with custom text content. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Popups -``` +{% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dialog with Content](./images/blazor-dialog-content.png)" %} diff --git a/blazor/drop-down-menu/getting-started-with-server-app.md b/blazor/drop-down-menu/getting-started-with-server-app.md index 15a6ca09e5..5b31b44289 100644 --- a/blazor/drop-down-menu/getting-started-with-server-app.md +++ b/blazor/drop-down-menu/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.SplitButtons + diff --git a/blazor/drop-down-menu/getting-started-with-web-app.md b/blazor/drop-down-menu/getting-started-with-web-app.md index 8315be5b14..b4cc4fca2c 100644 --- a/blazor/drop-down-menu/getting-started-with-web-app.md +++ b/blazor/drop-down-menu/getting-started-with-web-app.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.SplitButtons + diff --git a/blazor/dropdown-list/getting-started-with-server-app.md b/blazor/dropdown-list/getting-started-with-server-app.md index 1397793c23..80499447a1 100644 --- a/blazor/dropdown-list/getting-started-with-server-app.md +++ b/blazor/dropdown-list/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + {% endhighlight %} @@ -177,6 +179,8 @@ After initialization, populate the DropDownList with data using the [DataSource] {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + @@ -213,6 +217,8 @@ By default, the popup list width adjusts to match the DropDownList input width, {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + @@ -246,19 +252,23 @@ By default, the popup list width adjusts to match the DropDownList input width, Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. +{% tabs %} {% highlight razor tabtitle="Home.razor" %} {% include_relative code-snippet/getting-started/get-selected-value.razor %} {% endhighlight %} +{% endtabs %} Get the complete object for the selected item in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. +{% tabs %} {% highlight razor tabtitle="Home.razor" %} {% include_relative code-snippet/getting-started/item-data.razor %} {% endhighlight %} +{% endtabs %} N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList). diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index 25b7599c18..a36e09f254 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + {% endhighlight %} @@ -183,6 +185,8 @@ After initialization, populate the DropDownList with data using the [DataSource] {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + @@ -219,6 +223,8 @@ By default, the popup list width adjusts to the DropDownList input width, and th {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + @@ -252,21 +258,23 @@ By default, the popup list width adjusts to the DropDownList input width, and th Get the selected value of the DropDownList component in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using [ChangeEventArgs.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_Value) property. - +{% tabs %} {% highlight razor tabtitle="Home.razor" %} {% include_relative code-snippet/getting-started/get-selected-value.razor %} {% endhighlight %} +{% endtabs %} Get the complete object list of the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event using the [ChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ChangeEventArgs-2.html#Syncfusion_Blazor_DropDowns_ChangeEventArgs_2_ItemData) property. - +{% tabs %} {% highlight razor tabtitle="Home.razor" %} {% include_relative code-snippet/getting-started/item-data.razor %} {% endhighlight %} +{% endtabs %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList). diff --git a/blazor/floating-action-button/getting-started-with-server-app.md b/blazor/floating-action-button/getting-started-with-server-app.md index d4400e14d3..3614ef0c39 100644 --- a/blazor/floating-action-button/getting-started-with-server-app.md +++ b/blazor/floating-action-button/getting-started-with-server-app.md @@ -183,6 +183,8 @@ The floating action button control triggers the [OnClick](https://help.syncfusio {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Buttons +
diff --git a/blazor/floating-action-button/getting-started-with-web-app.md b/blazor/floating-action-button/getting-started-with-web-app.md index 73acc967c5..598b6503cd 100644 --- a/blazor/floating-action-button/getting-started-with-web-app.md +++ b/blazor/floating-action-button/getting-started-with-web-app.md @@ -189,6 +189,8 @@ The floating action button control triggers the [OnClick](https://help.syncfusio {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Buttons +
diff --git a/blazor/gantt-chart/baseline.md b/blazor/gantt-chart/baseline.md index 56093d94a0..0c6297ba98 100644 --- a/blazor/gantt-chart/baseline.md +++ b/blazor/gantt-chart/baseline.md @@ -62,6 +62,6 @@ The baseline feature enables users to view the deviation between the planned dat The following screenshot shows the baselines in Gantt Chart component. -![Baselines in Blazor Gantt Chart](images/blazor-gantt-chart-with-baseline.png) +![Baselines in Blazor Gantt Chart](images/blazor-gantt-chart-with-baseline.webp) N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities) to know how to render and configure the gantt. \ No newline at end of file diff --git a/blazor/gantt-chart/column-chooser.md b/blazor/gantt-chart/column-chooser.md index ba2b0582db..816c3711da 100644 --- a/blazor/gantt-chart/column-chooser.md +++ b/blazor/gantt-chart/column-chooser.md @@ -406,7 +406,7 @@ public class TaskData {% endhighlight %} {% endtabs %} -![Blazor Gantt Chart with custom column chooser using ListView for grouped columns](images/blazor-gantt-chart-custom-column-chooser.png) +![Blazor Gantt Chart with custom column chooser using ListView for grouped columns](images/blazor-gantt-chart-custom-column-chooser.webp) ## See also diff --git a/blazor/gantt-chart/column-resizing.md b/blazor/gantt-chart/column-resizing.md index 9eb026454e..2ef9481602 100644 --- a/blazor/gantt-chart/column-resizing.md +++ b/blazor/gantt-chart/column-resizing.md @@ -144,6 +144,6 @@ To resize a column: The screenshot below illustrates column resizing on a touch device. -![Column resize](images/blazor-gantt-chart-column-resizing.png) +![Column resize](images/blazor-gantt-chart-column-resizing.webp) > You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt Chart. \ No newline at end of file diff --git a/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md b/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md index 26d1cd695a..d45912d214 100644 --- a/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md +++ b/blazor/gantt-chart/connecting-to-adaptors/custom-adaptor.md @@ -187,7 +187,7 @@ The following example demonstrates how to implement custom data binding using a The following image shows the custom-bind data displayed in the Gantt Chart: -![Custom Binding in Gantt](../images/blazor-gantt-custom-binding.png) +![Custom Binding in Gantt](../images/blazor-gantt-custom-binding.webp) > If the `Read/ReadAsync` method is not overridden in the custom adaptor, the default read handler will be used. @@ -316,7 +316,7 @@ The following example demonstrates how to inject a service into the Custom Adapt When using a custom adaptor, searching operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` object provides details about the search action as shown in the image below: -![Handling Searching in Custom Adaptor](../images/searching-custom-adaptor.png) +![Handling Searching in Custom Adaptor](../images/searching-custom-adaptor.webp) The following example demonstrates how to implement searching operation for custom-bound data: @@ -407,7 +407,7 @@ The following example demonstrates how to implement searching operation for cust When using a custom adaptor, filtering operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` object provides filtering details as shown in the image below: -![Handling Filtering in Custom Adaptor](../images/filtering-in-custom-binding.png) +![Handling Filtering in Custom Adaptor](../images/filtering-in-custom-binding.webp) Based on this information, the custom data source can be filtered using the built-in [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Collections_Generic_IEnumerable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method of the `DataOperations` class. @@ -506,7 +506,7 @@ The following example demonstrates how to implement the filtering operation for When using a custom adaptor, the sorting operation must be handled by overriding the `Read` or `ReadAsync` method of the `DataAdaptor` abstract class. The `DataManagerRequest` object provides sorting details, as shown in the image below: -![Handling Sorting in Custom Adaptor](../images/sorting-in-custom-binding.png) +![Handling Sorting in Custom Adaptor](../images/sorting-in-custom-binding.webp) You can sort data using the built‑in [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting_System_Collections_IEnumerable_System_Collections_Generic_List_Syncfusion_Blazor_Data_SortedColumn__) method of the `DataOperations` class. @@ -853,4 +853,4 @@ The following example demonstrates how to send additional parameters to the serv ``` -![Passing Additional Parameters to Custom Adaptor in Blazor Gantt Chart](../images/sending-additional-param-custom-binding.png) \ No newline at end of file +![Passing Additional Parameters to Custom Adaptor in Blazor Gantt Chart](../images/sending-additional-param-custom-binding.webp) \ No newline at end of file diff --git a/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md b/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md index 2067a7837f..7c795e4dba 100644 --- a/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md +++ b/blazor/gantt-chart/connecting-to-adaptors/url-adaptor.md @@ -316,7 +316,7 @@ namespace URLAdaptor.Controllers When you run the application, the Blazor Gantt Chart will display data fetched from the API. -![UrlAdaptor Data](../images/url-adaptor.png) +![UrlAdaptor Data](../images/url-adaptor.webp) > * The Gantt Chart supports server-side operations such as **searching**, **sorting** and **filtering**. These can be handled using methods like [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__), [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_), [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__), [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_), and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) from the **Syncfusion.Blazor.Data** package. Let's explore how to manage these data operations using the `UrlAdaptor`. > * In an API service project, add **Syncfusion.Blazor.Data** by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it. @@ -325,7 +325,7 @@ When you run the application, the Blazor Gantt Chart will display data fetched To handle the searching operation, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server side using the `PerformSearching` method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo searching based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. -![UrlAdaptor - Searching](../images/searching-in-urladaptor.png) +![UrlAdaptor - Searching](../images/searching-in-urladaptor.webp) {% tabs %} {% highlight cs tabtitle="GanttController.cs" %} @@ -388,7 +388,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest) To handle the filtering operation, ensure that your API endpoint supports custom filtering criteria. Implement the filtering logic on the server side using the `PerformFiltering` method from the `DataOperations` class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming `DataManagerRequest` object. **Column filtering** -![Column filtering](../images/single-filtering-urladaptor.png) +![Column filtering](../images/single-filtering-urladaptor.webp) {% tabs %} {% highlight cs tabtitle="GanttController.cs" %} @@ -455,10 +455,10 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest) To handle the sorting operation, ensure that your API endpoint supports custom sorting criteria. Implement the sorting logic on the server side using the `PerformSorting` method from the `DataOperations` class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming `DataManagerRequest` object. **Single column sorting** -![Single column sorting](../images/sorting-urladaptor.png) +![Single column sorting](../images/sorting-urladaptor.webp) **Multi column sorting** -![Multi column sorting](../images/multisorting-url-adaptor.png) +![Multi column sorting](../images/multisorting-url-adaptor.webp) {% tabs %} {% highlight cs tabtitle="GanttController.cs" %} @@ -605,7 +605,7 @@ public class CRUDModel where T : class To insert a new record, use the `InsertUrl` property to specify the controller action mapping URL for the insert operation. The details of the newly added record are passed to the **newRecord** parameter. -![Insert Record](../images/crud-insert-urladaptor.png) +![Insert Record](../images/crud-insert-urladaptor.webp) {% tabs %} {% highlight cs tabtitle="GanttController.cs" %} @@ -633,7 +633,7 @@ public void Insert([FromBody] CRUDModel newRecord) For updating existing records, use the `UpdateUrl` property to specify the controller action mapping URL for the update operation. The details of the updated record are passed to the **updatedRecord** parameter. -![Update Record](../images/crud-update-urladaptor.png) +![Update Record](../images/crud-update-urladaptor.webp) {% tabs %} {% highlight cs tabtitle="GanttController.cs" %} @@ -670,7 +670,7 @@ public void Update([FromBody] CRUDModel updatedRecord) To delete existing records, use the `RemoveUrl` property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is passed to the **deletedRecord** parameter. -![Delete Record](../images/crud-delete-urladaptor.png) +![Delete Record](../images/crud-delete-urladaptor.webp) {% tabs %} {% highlight cs tabtitle="GanttController.cs" %} diff --git a/blazor/gantt-chart/criticalpath.md b/blazor/gantt-chart/criticalpath.md index 1df9c7cdcf..44deeff5b2 100644 --- a/blazor/gantt-chart/criticalpath.md +++ b/blazor/gantt-chart/criticalpath.md @@ -230,6 +230,6 @@ The following code snippet demonstrates how to customize the appearance of criti {% endhighlight %} {% endtabs %} -![Customize taskbar](images/blazor-gantt-chart-critical-path-customize-taskbar.png) +![Customize taskbar](images/blazor-gantt-chart-critical-path-customize-taskbar.webp) >If the [ProjectEndDate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ProjectEndDate) property is set in the `SfGantt`, any task that ends on or after this date is considered critical. If the `ProjectEndDate` is not set, the maximum end date from the task records is used to determine which tasks are critical. \ No newline at end of file diff --git a/blazor/gantt-chart/customize-pdf-export.md b/blazor/gantt-chart/customize-pdf-export.md index 1a0584c8aa..94a03198b4 100644 --- a/blazor/gantt-chart/customize-pdf-export.md +++ b/blazor/gantt-chart/customize-pdf-export.md @@ -1138,7 +1138,7 @@ In the following sample, header template with images and text are exported to PD
- + @((context as GridColumn).HeaderText)
@@ -1146,7 +1146,7 @@ In the following sample, header template with images and text are exported to PD
- + @((context as GridColumn).HeaderText)
@@ -1167,7 +1167,7 @@ In the following sample, header template with images and text are exported to PD protected override async Task OnInitializedAsync() { TaskCollection = GetTaskCollection(); - var imageBytes = await Http.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.png"); + var imageBytes = await Http.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.webp"); using var imageStream = new MemoryStream(imageBytes); image = PdfImage.FromStream(imageStream); } @@ -1258,7 +1258,7 @@ In the following sample, task label template with images and text are exported t if ((context as TaskData).TaskID == 5) {
- +
} else @@ -1322,7 +1322,7 @@ In the following sample, task label template with images and text are exported t this.TaskCollection = GetTaskCollection(); using var httpClient = new HttpClient(); - var imageBytes = await httpClient.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.png"); + var imageBytes = await httpClient.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.webp"); var imageStream = new MemoryStream(imageBytes); image = PdfImage.FromStream(imageStream); } diff --git a/blazor/gantt-chart/data-binding.md b/blazor/gantt-chart/data-binding.md index 7b0128f1ce..3d003519af 100644 --- a/blazor/gantt-chart/data-binding.md +++ b/blazor/gantt-chart/data-binding.md @@ -1213,7 +1213,7 @@ namespace URLAdaptor.Controllers {% endtabs %} -![Sending Additional Param](images/sending-additional-param.png) +![Sending Additional Param](images/sending-additional-param.webp) ### Handling HTTP error diff --git a/blazor/gantt-chart/editing-tasks.md b/blazor/gantt-chart/editing-tasks.md index 3ca7bd7ec2..28a0f7e848 100644 --- a/blazor/gantt-chart/editing-tasks.md +++ b/blazor/gantt-chart/editing-tasks.md @@ -321,15 +321,15 @@ Enable dependency editing by mapping the [GanttTaskFields.Dependency](https://he - **Mouse interactions**: Drag connector points on taskbars to create or modify links. - ![Updating task dependency with mouse drag and drop action](images/user-interaction.png) + ![Updating task dependency with mouse drag and drop action](images/user-interaction.webp) - **Dialog**: Edit the Dependency tab in the edit dialog. - ![Updating task dependency in dialog Dependency tab](images/editing-dialog.png) + ![Updating task dependency in dialog Dependency tab](images/editing-dialog.webp) - **Cell editing**: Update the dependency field in the TreeGrid. Ensure valid dependency strings to avoid circular references. - ![Updating task dependency via cell editing in TreeGrid](images/cell-edit.png) + ![Updating task dependency via cell editing in TreeGrid](images/cell-edit.webp) {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/gantt-chart/getting-started-with-server-app.md b/blazor/gantt-chart/getting-started-with-server-app.md index 2eadd2d442..8b31c4c16c 100644 --- a/blazor/gantt-chart/getting-started-with-server-app.md +++ b/blazor/gantt-chart/getting-started-with-server-app.md @@ -163,6 +163,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -221,6 +223,8 @@ This following sample shows self-referential data binding in the Gantt Chart by {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -280,6 +284,7 @@ The Gantt Chart has an option to define columns using the [GanttColumns](https:/ {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @@ -344,6 +349,8 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -401,6 +408,8 @@ The filtering feature enables you to view the reduced amount of records based on {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -455,6 +464,8 @@ The sorting feature enables you to order the records. To enable sorting in the G {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -516,6 +527,8 @@ These relationships can be configured using the [Dependency](https://help.syncfu {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + diff --git a/blazor/gantt-chart/getting-started-with-web-app.md b/blazor/gantt-chart/getting-started-with-web-app.md index 4ce2a7173d..f0704457a9 100644 --- a/blazor/gantt-chart/getting-started-with-web-app.md +++ b/blazor/gantt-chart/getting-started-with-web-app.md @@ -227,6 +227,8 @@ This following sample shows self-referential data binding in the Gantt Chart by {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -286,6 +288,7 @@ The Gantt Chart has an option to define columns using the [GanttColumns](https:/ {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @@ -350,6 +353,8 @@ The editing feature enables you to edit the tasks in the Gantt Chart component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -407,6 +412,8 @@ The filtering feature enables you to view the reduced amount of records based on {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -461,6 +468,8 @@ The sorting feature enables you to order the records. To enable sorting in the G {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + @@ -524,6 +533,8 @@ These relationships can be configured using the [Dependency](https://help.syncfu {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Gantt + diff --git a/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md b/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md index fbbcc55a3c..392d674f02 100644 --- a/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md +++ b/blazor/gantt-chart/how-to/blazor-webassembly-gantt-using-visual-studio.md @@ -463,4 +463,4 @@ You can find the full information regarding Predecessors from [here](https://bla ## Blazor WASM Gantt Chart Demonstration Video -![Blazor Gantt Chart](../images/blazor-gantt-chart.gif) +![Blazor Gantt Chart](../images/blazor-gantt-chart.webp) diff --git a/blazor/gantt-chart/images/Blazor-server-app-creation.png b/blazor/gantt-chart/images/Blazor-server-app-creation.png deleted file mode 100644 index 02e4a025bf..0000000000 Binary files a/blazor/gantt-chart/images/Blazor-server-app-creation.png and /dev/null differ diff --git a/blazor/gantt-chart/images/Blazor-server-app-creation.webp b/blazor/gantt-chart/images/Blazor-server-app-creation.webp new file mode 100644 index 0000000000..fa8d2fba56 Binary files /dev/null and b/blazor/gantt-chart/images/Blazor-server-app-creation.webp differ diff --git a/blazor/gantt-chart/images/Column_Virtual.gif b/blazor/gantt-chart/images/Column_Virtual.gif deleted file mode 100644 index 52a71d9c04..0000000000 Binary files a/blazor/gantt-chart/images/Column_Virtual.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/Column_Virtual.webp b/blazor/gantt-chart/images/Column_Virtual.webp new file mode 100644 index 0000000000..2ef13e4e4d Binary files /dev/null and b/blazor/gantt-chart/images/Column_Virtual.webp differ diff --git a/blazor/gantt-chart/images/Indicator_Tolltip.png b/blazor/gantt-chart/images/Indicator_Tolltip.png deleted file mode 100644 index 33ed5b72cd..0000000000 Binary files a/blazor/gantt-chart/images/Indicator_Tolltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/Indicator_Tolltip.webp b/blazor/gantt-chart/images/Indicator_Tolltip.webp new file mode 100644 index 0000000000..2eb87ee2a1 Binary files /dev/null and b/blazor/gantt-chart/images/Indicator_Tolltip.webp differ diff --git a/blazor/gantt-chart/images/addRecord.gif b/blazor/gantt-chart/images/addRecord.gif deleted file mode 100644 index 683153d64f..0000000000 Binary files a/blazor/gantt-chart/images/addRecord.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/addRecord.webp b/blazor/gantt-chart/images/addRecord.webp new file mode 100644 index 0000000000..251ac52719 Binary files /dev/null and b/blazor/gantt-chart/images/addRecord.webp differ diff --git a/blazor/gantt-chart/images/addedit.gif b/blazor/gantt-chart/images/addedit.gif deleted file mode 100644 index 893498307c..0000000000 Binary files a/blazor/gantt-chart/images/addedit.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/addedit.webp b/blazor/gantt-chart/images/addedit.webp new file mode 100644 index 0000000000..c56598a78c Binary files /dev/null and b/blazor/gantt-chart/images/addedit.webp differ diff --git a/blazor/gantt-chart/images/blazor-app-interactive-mode.png b/blazor/gantt-chart/images/blazor-app-interactive-mode.png deleted file mode 100644 index 9edcc0e351..0000000000 Binary files a/blazor/gantt-chart/images/blazor-app-interactive-mode.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-app-interactive-mode.webp b/blazor/gantt-chart/images/blazor-app-interactive-mode.webp new file mode 100644 index 0000000000..9eaa954eda Binary files /dev/null and b/blazor/gantt-chart/images/blazor-app-interactive-mode.webp differ diff --git a/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.png b/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.png deleted file mode 100644 index 41e58a31db..0000000000 Binary files a/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.webp b/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.webp new file mode 100644 index 0000000000..b482ed75fa Binary files /dev/null and b/blazor/gantt-chart/images/blazor-aspnet-core-project-configuration.webp differ diff --git a/blazor/gantt-chart/images/blazor-client-template.png b/blazor/gantt-chart/images/blazor-client-template.png deleted file mode 100644 index 0005e2b949..0000000000 Binary files a/blazor/gantt-chart/images/blazor-client-template.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-client-template.webp b/blazor/gantt-chart/images/blazor-client-template.webp new file mode 100644 index 0000000000..8ee02ba659 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-client-template.webp differ diff --git a/blazor/gantt-chart/images/blazor-create-web-app.png b/blazor/gantt-chart/images/blazor-create-web-app.png deleted file mode 100644 index 7dd6e612d2..0000000000 Binary files a/blazor/gantt-chart/images/blazor-create-web-app.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-create-web-app.webp b/blazor/gantt-chart/images/blazor-create-web-app.webp new file mode 100644 index 0000000000..13b8b0455c Binary files /dev/null and b/blazor/gantt-chart/images/blazor-create-web-app.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.png b/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.png deleted file mode 100644 index f29afdc26f..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.webp b/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.webp new file mode 100644 index 0000000000..c944ebced0 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-add-dialogtab.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.png b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.png deleted file mode 100644 index ccff90ce64..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.webp b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.webp new file mode 100644 index 0000000000..4c28acd67c Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-record.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.png b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.png deleted file mode 100644 index d3382483c9..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.webp b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.webp new file mode 100644 index 0000000000..9e5ab4ccff Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-add-new-row.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.png b/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.png deleted file mode 100644 index 7ffda6e3d2..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.webp b/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.webp new file mode 100644 index 0000000000..41d5bab6c9 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-assign-resource.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-autofill.gif b/blazor/gantt-chart/images/blazor-gantt-chart-autofill.gif deleted file mode 100644 index 7d418033fb..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-autofill.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-autofill.webp b/blazor/gantt-chart/images/blazor-gantt-chart-autofill.webp new file mode 100644 index 0000000000..d99ab5b6d7 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-autofill.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.png b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.png deleted file mode 100644 index 4955b71327..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.webp new file mode 100644 index 0000000000..3870687db7 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip-customization.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.png deleted file mode 100644 index b6fe6e6497..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.webp new file mode 100644 index 0000000000..dbc36d9067 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-baseline-tooltip.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.png b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.png deleted file mode 100644 index 3537dc0e36..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.webp b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.webp new file mode 100644 index 0000000000..8de94e6c51 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing-in-treegrid.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.png b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.png deleted file mode 100644 index eeaf697d99..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.webp new file mode 100644 index 0000000000..ba292f7424 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-cell-editing.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.gif b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.gif deleted file mode 100644 index 03cefe218e..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.png deleted file mode 100644 index fcbed4de2b..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.webp new file mode 100644 index 0000000000..de543e34e7 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-cell-selection.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.png b/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.png deleted file mode 100644 index 19ee5d1e75..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.webp b/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.webp new file mode 100644 index 0000000000..8c670ef635 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-change-work-week.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.gif b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.gif deleted file mode 100644 index c00896c38e..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.png b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.png deleted file mode 100644 index 1d8c8a15b8..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.webp new file mode 100644 index 0000000000..6bc454b735 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-clear-filter.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.png deleted file mode 100644 index 6519c6617a..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.webp new file mode 100644 index 0000000000..58baf02585 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-chooser.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.gif b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.gif deleted file mode 100644 index ee83545c93..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.png deleted file mode 100644 index a1e242c360..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.webp new file mode 100644 index 0000000000..f502fcccde Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-reorder.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.gif b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.gif deleted file mode 100644 index b2934ce398..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.png deleted file mode 100644 index 641e40b5af..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.webp new file mode 100644 index 0000000000..c8fea5aa17 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-resize.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.png b/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.png deleted file mode 100644 index 4837298d7e..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.webp new file mode 100644 index 0000000000..7c94e72f87 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-column-resizing.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-columns.png b/blazor/gantt-chart/images/blazor-gantt-chart-columns.png deleted file mode 100644 index 70137c327b..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-columns.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-columns.webp b/blazor/gantt-chart/images/blazor-gantt-chart-columns.webp new file mode 100644 index 0000000000..323d718f09 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-columns.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.png b/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.png deleted file mode 100644 index b77933e59c..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.webp b/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.webp new file mode 100644 index 0000000000..5ace75fb83 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-complex-dependencies.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.png b/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.png deleted file mode 100644 index 1872fa5570..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.webp new file mode 100644 index 0000000000..5875117ef4 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-connector-line-customization.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.png b/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.png deleted file mode 100644 index 8673e28227..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.webp b/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.webp new file mode 100644 index 0000000000..b67800da70 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-create-new-project.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.PNG deleted file mode 100644 index 7b39d0313e..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.webp b/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.webp new file mode 100644 index 0000000000..53693d5ec4 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-critical-path-customize-taskbar.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.png b/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.png deleted file mode 100644 index fbc49e236d..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.webp b/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.webp new file mode 100644 index 0000000000..ac163c1517 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-custom-column-chooser.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.png b/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.png deleted file mode 100644 index be9da5ec31..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.webp b/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.webp new file mode 100644 index 0000000000..d62dfe34a1 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-custom-fields.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.png b/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.png deleted file mode 100644 index c60c960f5a..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.webp b/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.webp new file mode 100644 index 0000000000..44851814a3 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-data-binding.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-date-format.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-date-format.PNG deleted file mode 100644 index 995b9733b2..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-date-format.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-date-format.webp b/blazor/gantt-chart/images/blazor-gantt-chart-date-format.webp new file mode 100644 index 0000000000..23d07c328b Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-date-format.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.png deleted file mode 100644 index bd05c4d815..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.webp new file mode 100644 index 0000000000..02767e6c6e Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-day-mode.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.png b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.png deleted file mode 100644 index 3b34ab0062..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.webp b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.webp new file mode 100644 index 0000000000..8cff168199 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-appearance.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.png deleted file mode 100644 index ed046b34fe..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.webp new file mode 100644 index 0000000000..c0adb59922 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-dependency-tooltip.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.png b/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.png deleted file mode 100644 index 025f7cca39..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.webp new file mode 100644 index 0000000000..8f51ea8143 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-dialog-editing.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.png deleted file mode 100644 index fae2f91375..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.webp new file mode 100644 index 0000000000..19263519c3 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-duration-task.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.png deleted file mode 100644 index 715b1d8b5e..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.webp b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.webp new file mode 100644 index 0000000000..29c554c751 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialog.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.png b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.png deleted file mode 100644 index 7487aa69dd..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.webp b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.webp new file mode 100644 index 0000000000..4d3b0e2ba8 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-edit-dialogtab.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.png deleted file mode 100644 index f48417036d..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.webp b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.webp new file mode 100644 index 0000000000..9c9a5533d9 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resource-in-dialog.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.png b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.png deleted file mode 100644 index bd517b6a98..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.webp b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.webp new file mode 100644 index 0000000000..7c773732c5 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-editing-resources-in-cell.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.png deleted file mode 100644 index ce0eac8efb..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.webp new file mode 100644 index 0000000000..ce6d9c5e25 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-end-date-task.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.png deleted file mode 100644 index 115e8875d3..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.webp new file mode 100644 index 0000000000..0643ea2a37 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-event-marker-tooltip.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.gif b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.gif deleted file mode 100644 index 4ecd40aafc..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.png b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.png deleted file mode 100644 index de94c5f935..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.webp b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.webp new file mode 100644 index 0000000000..d2e5c40e57 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-filter-column.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.png b/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.png deleted file mode 100644 index 704621e7dc..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.webp b/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.webp new file mode 100644 index 0000000000..1f25b929bd Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-filter-diacritic-charater.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.png deleted file mode 100644 index 4a5702cb4b..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.webp new file mode 100644 index 0000000000..6f369e0938 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-finish-relation.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.png deleted file mode 100644 index 4f5aed3689..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.webp new file mode 100644 index 0000000000..edb2921c80 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-finish-to-start-relation.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.png b/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.png deleted file mode 100644 index 56c8a830f4..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.webp b/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.webp new file mode 100644 index 0000000000..2880c33acb Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-handling-exception.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.png b/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.png deleted file mode 100644 index 408b07ca39..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.webp b/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.webp new file mode 100644 index 0000000000..e5c23a3c59 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-hide-grid-lines.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-holidays.png b/blazor/gantt-chart/images/blazor-gantt-chart-holidays.png deleted file mode 100644 index 066c674141..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-holidays.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-holidays.webp b/blazor/gantt-chart/images/blazor-gantt-chart-holidays.webp new file mode 100644 index 0000000000..a0d0670adb Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-holidays.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.png deleted file mode 100644 index 62447259c9..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.webp new file mode 100644 index 0000000000..2750991d37 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-hour-mode.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.png b/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.png deleted file mode 100644 index 1fc7f785e6..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.webp new file mode 100644 index 0000000000..9604387805 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-initial-filter.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.PNG deleted file mode 100644 index b196b38e89..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.webp new file mode 100644 index 0000000000..4d0f97ad2f Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-manual-schedule-task.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.PNG deleted file mode 100644 index ef9a2a46da..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.webp new file mode 100644 index 0000000000..46ac4fedde Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-manual-taskbar-tooltip.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.png b/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.png deleted file mode 100644 index 6e2e57f2b0..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.webp new file mode 100644 index 0000000000..b0eef7f6c3 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-menu-filter.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.png deleted file mode 100644 index 1c8ed85c3c..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.webp new file mode 100644 index 0000000000..dd21945af5 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-milestone-task.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.png deleted file mode 100644 index a1f68c2344..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.webp new file mode 100644 index 0000000000..4e55ac6ef1 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multi-cell-selection.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.gif b/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.gif deleted file mode 100644 index ecf9659f6b..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.webp new file mode 100644 index 0000000000..5b3adc4580 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multi-row-selection.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.png b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.png deleted file mode 100644 index 85e78cecca..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.webp new file mode 100644 index 0000000000..17f5ca4c6e Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-predecessor.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.PNG deleted file mode 100644 index 86713f06fd..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.webp new file mode 100644 index 0000000000..e78e982ba1 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-selection.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.png b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.png deleted file mode 100644 index a1a7b11c6f..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.webp new file mode 100644 index 0000000000..ac9e37da5d Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-sorting.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.png b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.png deleted file mode 100644 index 4dd3db6de5..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.webp b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.webp new file mode 100644 index 0000000000..1e746c9411 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-multiple-task-dependencies.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.PNG deleted file mode 100644 index af4893982b..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.webp new file mode 100644 index 0000000000..93f0b8f0bc Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-observable-collection.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.PNG deleted file mode 100644 index 96bf6cd162..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.webp b/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.webp new file mode 100644 index 0000000000..76d4b10003 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-observable-property-changed.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png deleted file mode 100644 index 9fafe04d13..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.webp b/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.webp new file mode 100644 index 0000000000..1952653c57 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.png b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.png deleted file mode 100644 index bddd91d239..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.webp b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.webp new file mode 100644 index 0000000000..0521020816 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-with-offsets.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.gif b/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.gif deleted file mode 100644 index 8a3446a01c..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.webp b/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.webp new file mode 100644 index 0000000000..d1308b91e7 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-preserve-link-with-editing.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.gif b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.gif deleted file mode 100644 index 9fafbce9c0..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.png b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.png deleted file mode 100644 index 5e266b2ad4..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.webp b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.webp new file mode 100644 index 0000000000..28f05cc964 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-reorder-multiple-columns.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.png b/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.png deleted file mode 100644 index 3c3904457e..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.webp new file mode 100644 index 0000000000..af5689ac1e Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-row-cell-customization.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.PNG deleted file mode 100644 index 30b8e6b769..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.webp b/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.webp new file mode 100644 index 0000000000..ff76556357 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-row-customization.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.gif b/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.gif deleted file mode 100644 index 0fa1b759d6..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.webp new file mode 100644 index 0000000000..603750a0f1 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-row-selection.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-search.gif b/blazor/gantt-chart/images/blazor-gantt-chart-search.gif deleted file mode 100644 index 25c7cde8b6..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-search.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-search.webp b/blazor/gantt-chart/images/blazor-gantt-chart-search.webp new file mode 100644 index 0000000000..44650bdab0 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-search.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.png b/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.png deleted file mode 100644 index 1ac6c641cf..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.webp b/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.webp new file mode 100644 index 0000000000..5cd6256540 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-single-cell-selection.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.png b/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.png deleted file mode 100644 index 3aa55a29ac..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.webp b/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.webp new file mode 100644 index 0000000000..ff2c4153c2 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-splitter-position.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.png deleted file mode 100644 index aaa16f6174..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.webp b/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.webp new file mode 100644 index 0000000000..ff282e2baf Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-start-date-task.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.png deleted file mode 100644 index fec926a8fb..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.webp new file mode 100644 index 0000000000..ff2b33635d Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-finish-relation.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.png b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.png deleted file mode 100644 index 0bbcf00ba5..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.webp b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.webp new file mode 100644 index 0000000000..31e5d7347d Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-start-to-start-relation.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.png b/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.png deleted file mode 100644 index 4b312f22ba..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.webp b/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.webp new file mode 100644 index 0000000000..b4a0a8c423 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-task-dependency.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-label.png b/blazor/gantt-chart/images/blazor-gantt-chart-task-label.png deleted file mode 100644 index a2463f3317..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-task-label.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-label.webp b/blazor/gantt-chart/images/blazor-gantt-chart-task-label.webp new file mode 100644 index 0000000000..34161267e2 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-task-label.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.png b/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.png deleted file mode 100644 index 69eb351275..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.webp b/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.webp new file mode 100644 index 0000000000..32f999562e Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-task-relationship.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.png deleted file mode 100644 index 1aef43e0fc..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.webp new file mode 100644 index 0000000000..a9f88d4801 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-background.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.png deleted file mode 100644 index 355176c8ec..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.webp new file mode 100644 index 0000000000..e0276250a2 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-height.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.png deleted file mode 100644 index 052b2eb689..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.webp new file mode 100644 index 0000000000..b857753004 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-template.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.png deleted file mode 100644 index 3c27354440..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.webp new file mode 100644 index 0000000000..4a84d4900a Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-taskbar-tooltip.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.png deleted file mode 100644 index bec19647c4..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.webp new file mode 100644 index 0000000000..1a89e8856b Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-timeline-cell-tooltip.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.png b/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.png deleted file mode 100644 index 2b4466aa96..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.webp b/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.webp new file mode 100644 index 0000000000..1f0a57948e Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-unscheduled-tasks.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-update-record.png b/blazor/gantt-chart/images/blazor-gantt-chart-update-record.png deleted file mode 100644 index 1156bc5f65..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-update-record.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-update-record.webp b/blazor/gantt-chart/images/blazor-gantt-chart-update-record.webp new file mode 100644 index 0000000000..863b15322f Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-update-record.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.png deleted file mode 100644 index 687fbd8158..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.webp new file mode 100644 index 0000000000..258462c150 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-week-mode.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.png b/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.png deleted file mode 100644 index 7e44fdcf75..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.webp b/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.webp new file mode 100644 index 0000000000..6afa410619 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-week-start-day.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.png deleted file mode 100644 index bd2504e003..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.webp b/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.webp new file mode 100644 index 0000000000..ac4b0e4094 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-with-baseline.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.png deleted file mode 100644 index 7b0f3bdb4f..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.webp b/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.webp new file mode 100644 index 0000000000..23ad4c71c9 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-with-splitter.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.png b/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.png deleted file mode 100644 index 201e054cf4..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.webp b/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.webp new file mode 100644 index 0000000000..e94f1d61f4 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-with-taskbar-tooltip.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.png b/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.png deleted file mode 100644 index 486ddaa554..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.webp b/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.webp new file mode 100644 index 0000000000..1489a46df2 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-working-time-range.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.png b/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.png deleted file mode 100644 index 9ec10367b2..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.webp b/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.webp new file mode 100644 index 0000000000..3a2e003bce Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart-year-mode.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart.gif b/blazor/gantt-chart/images/blazor-gantt-chart.gif deleted file mode 100644 index fafbc91110..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart.webp b/blazor/gantt-chart/images/blazor-gantt-chart.webp new file mode 100644 index 0000000000..61a5b3b844 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-chart.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-column-chooser.gif b/blazor/gantt-chart/images/blazor-gantt-column-chooser.gif deleted file mode 100644 index 5fc7f03872..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-column-chooser.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-column-chooser.webp b/blazor/gantt-chart/images/blazor-gantt-column-chooser.webp new file mode 100644 index 0000000000..5e4d32ed8e Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-column-chooser.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-custom-binding.png b/blazor/gantt-chart/images/blazor-gantt-custom-binding.png deleted file mode 100644 index ebf1ed636b..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-custom-binding.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-custom-binding.webp b/blazor/gantt-chart/images/blazor-gantt-custom-binding.webp new file mode 100644 index 0000000000..be0b648800 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-custom-binding.webp differ diff --git a/blazor/gantt-chart/images/blazor-gantt-maui-app.png b/blazor/gantt-chart/images/blazor-gantt-maui-app.png deleted file mode 100644 index 618e14c2d2..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-maui-app.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-maui-app.webp b/blazor/gantt-chart/images/blazor-gantt-maui-app.webp new file mode 100644 index 0000000000..bc55efcf6c Binary files /dev/null and b/blazor/gantt-chart/images/blazor-gantt-maui-app.webp differ diff --git a/blazor/gantt-chart/images/blazor-nuget-package-manager.png b/blazor/gantt-chart/images/blazor-nuget-package-manager.png deleted file mode 100644 index f9306f219e..0000000000 Binary files a/blazor/gantt-chart/images/blazor-nuget-package-manager.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-nuget-package-manager.webp b/blazor/gantt-chart/images/blazor-nuget-package-manager.webp new file mode 100644 index 0000000000..b5d7fe4df4 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-nuget-package-manager.webp differ diff --git a/blazor/gantt-chart/images/blazor-nuget-selection.png b/blazor/gantt-chart/images/blazor-nuget-selection.png deleted file mode 100644 index 36142ec9c1..0000000000 Binary files a/blazor/gantt-chart/images/blazor-nuget-selection.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-nuget-selection.webp b/blazor/gantt-chart/images/blazor-nuget-selection.webp new file mode 100644 index 0000000000..4dc1460a8e Binary files /dev/null and b/blazor/gantt-chart/images/blazor-nuget-selection.webp differ diff --git a/blazor/gantt-chart/images/blazor-template.png b/blazor/gantt-chart/images/blazor-template.png deleted file mode 100644 index d94910dc70..0000000000 Binary files a/blazor/gantt-chart/images/blazor-template.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-template.webp b/blazor/gantt-chart/images/blazor-template.webp new file mode 100644 index 0000000000..e54e791804 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-template.webp differ diff --git a/blazor/gantt-chart/images/blazor-wasm-app-template.png b/blazor/gantt-chart/images/blazor-wasm-app-template.png deleted file mode 100644 index 8cf1737d81..0000000000 Binary files a/blazor/gantt-chart/images/blazor-wasm-app-template.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-wasm-app-template.webp b/blazor/gantt-chart/images/blazor-wasm-app-template.webp new file mode 100644 index 0000000000..96f02df178 Binary files /dev/null and b/blazor/gantt-chart/images/blazor-wasm-app-template.webp differ diff --git a/blazor/gantt-chart/images/browser-output.png b/blazor/gantt-chart/images/browser-output.png deleted file mode 100644 index 7180b1e150..0000000000 Binary files a/blazor/gantt-chart/images/browser-output.png and /dev/null differ diff --git a/blazor/gantt-chart/images/browser-output.webp b/blazor/gantt-chart/images/browser-output.webp new file mode 100644 index 0000000000..017262cfa6 Binary files /dev/null and b/blazor/gantt-chart/images/browser-output.webp differ diff --git a/blazor/gantt-chart/images/cell-edit.png b/blazor/gantt-chart/images/cell-edit.png deleted file mode 100644 index af1496d81a..0000000000 Binary files a/blazor/gantt-chart/images/cell-edit.png and /dev/null differ diff --git a/blazor/gantt-chart/images/cell-edit.webp b/blazor/gantt-chart/images/cell-edit.webp new file mode 100644 index 0000000000..d98f62dbf2 Binary files /dev/null and b/blazor/gantt-chart/images/cell-edit.webp differ diff --git a/blazor/gantt-chart/images/clearSort.gif b/blazor/gantt-chart/images/clearSort.gif deleted file mode 100644 index 959b24b04b..0000000000 Binary files a/blazor/gantt-chart/images/clearSort.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/clearSort.webp b/blazor/gantt-chart/images/clearSort.webp new file mode 100644 index 0000000000..89f2a9fada Binary files /dev/null and b/blazor/gantt-chart/images/clearSort.webp differ diff --git a/blazor/gantt-chart/images/column-virtual-scroll.gif b/blazor/gantt-chart/images/column-virtual-scroll.gif deleted file mode 100644 index 8b394c2454..0000000000 Binary files a/blazor/gantt-chart/images/column-virtual-scroll.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/column-virtual-scroll.webp b/blazor/gantt-chart/images/column-virtual-scroll.webp new file mode 100644 index 0000000000..15f3fb20fa Binary files /dev/null and b/blazor/gantt-chart/images/column-virtual-scroll.webp differ diff --git a/blazor/gantt-chart/images/confirm-dialog.PNG b/blazor/gantt-chart/images/confirm-dialog.PNG deleted file mode 100644 index b4ed585dc4..0000000000 Binary files a/blazor/gantt-chart/images/confirm-dialog.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/confirm-dialog.webp b/blazor/gantt-chart/images/confirm-dialog.webp new file mode 100644 index 0000000000..bbc322daba Binary files /dev/null and b/blazor/gantt-chart/images/confirm-dialog.webp differ diff --git a/blazor/gantt-chart/images/copypaste_cell.gif b/blazor/gantt-chart/images/copypaste_cell.gif deleted file mode 100644 index 687a939b78..0000000000 Binary files a/blazor/gantt-chart/images/copypaste_cell.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/copypaste_cell.webp b/blazor/gantt-chart/images/copypaste_cell.webp new file mode 100644 index 0000000000..e4ab2ce041 Binary files /dev/null and b/blazor/gantt-chart/images/copypaste_cell.webp differ diff --git a/blazor/gantt-chart/images/copypaste_row.gif b/blazor/gantt-chart/images/copypaste_row.gif deleted file mode 100644 index cb0d6e4971..0000000000 Binary files a/blazor/gantt-chart/images/copypaste_row.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/copypaste_row.webp b/blazor/gantt-chart/images/copypaste_row.webp new file mode 100644 index 0000000000..b720488785 Binary files /dev/null and b/blazor/gantt-chart/images/copypaste_row.webp differ diff --git a/blazor/gantt-chart/images/crud-delete-urladaptor.png b/blazor/gantt-chart/images/crud-delete-urladaptor.png deleted file mode 100644 index 981aaa6e56..0000000000 Binary files a/blazor/gantt-chart/images/crud-delete-urladaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/crud-delete-urladaptor.webp b/blazor/gantt-chart/images/crud-delete-urladaptor.webp new file mode 100644 index 0000000000..b9b86a0129 Binary files /dev/null and b/blazor/gantt-chart/images/crud-delete-urladaptor.webp differ diff --git a/blazor/gantt-chart/images/crud-insert-urladaptor.png b/blazor/gantt-chart/images/crud-insert-urladaptor.png deleted file mode 100644 index 87df243951..0000000000 Binary files a/blazor/gantt-chart/images/crud-insert-urladaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/crud-insert-urladaptor.webp b/blazor/gantt-chart/images/crud-insert-urladaptor.webp new file mode 100644 index 0000000000..0244741c17 Binary files /dev/null and b/blazor/gantt-chart/images/crud-insert-urladaptor.webp differ diff --git a/blazor/gantt-chart/images/crud-update-urladaptor.png b/blazor/gantt-chart/images/crud-update-urladaptor.png deleted file mode 100644 index e692f35a04..0000000000 Binary files a/blazor/gantt-chart/images/crud-update-urladaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/crud-update-urladaptor.webp b/blazor/gantt-chart/images/crud-update-urladaptor.webp new file mode 100644 index 0000000000..3dcd5687b8 Binary files /dev/null and b/blazor/gantt-chart/images/crud-update-urladaptor.webp differ diff --git a/blazor/gantt-chart/images/deleteRecord.gif b/blazor/gantt-chart/images/deleteRecord.gif deleted file mode 100644 index 97bed28df8..0000000000 Binary files a/blazor/gantt-chart/images/deleteRecord.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/deleteRecord.webp b/blazor/gantt-chart/images/deleteRecord.webp new file mode 100644 index 0000000000..05881d6216 Binary files /dev/null and b/blazor/gantt-chart/images/deleteRecord.webp differ diff --git a/blazor/gantt-chart/images/dependency-editing-touch.png b/blazor/gantt-chart/images/dependency-editing-touch.png deleted file mode 100644 index f2e4643f22..0000000000 Binary files a/blazor/gantt-chart/images/dependency-editing-touch.png and /dev/null differ diff --git a/blazor/gantt-chart/images/dependency-editing-touch.webp b/blazor/gantt-chart/images/dependency-editing-touch.webp new file mode 100644 index 0000000000..f6c3edf9db Binary files /dev/null and b/blazor/gantt-chart/images/dependency-editing-touch.webp differ diff --git a/blazor/gantt-chart/images/dependency-editing.png b/blazor/gantt-chart/images/dependency-editing.png deleted file mode 100644 index ff60a4ef82..0000000000 Binary files a/blazor/gantt-chart/images/dependency-editing.png and /dev/null differ diff --git a/blazor/gantt-chart/images/dependency-editing.webp b/blazor/gantt-chart/images/dependency-editing.webp new file mode 100644 index 0000000000..c6485428b3 Binary files /dev/null and b/blazor/gantt-chart/images/dependency-editing.webp differ diff --git a/blazor/gantt-chart/images/dependencyLineTemplate.png b/blazor/gantt-chart/images/dependencyLineTemplate.png deleted file mode 100644 index 56ccb3a68c..0000000000 Binary files a/blazor/gantt-chart/images/dependencyLineTemplate.png and /dev/null differ diff --git a/blazor/gantt-chart/images/dependencyLineTemplate.webp b/blazor/gantt-chart/images/dependencyLineTemplate.webp new file mode 100644 index 0000000000..662f059474 Binary files /dev/null and b/blazor/gantt-chart/images/dependencyLineTemplate.webp differ diff --git a/blazor/gantt-chart/images/duration-manual.PNG b/blazor/gantt-chart/images/duration-manual.PNG deleted file mode 100644 index 9a59cf7581..0000000000 Binary files a/blazor/gantt-chart/images/duration-manual.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/duration-manual.webp b/blazor/gantt-chart/images/duration-manual.webp new file mode 100644 index 0000000000..d4e039e107 Binary files /dev/null and b/blazor/gantt-chart/images/duration-manual.webp differ diff --git a/blazor/gantt-chart/images/editing-dialog.png b/blazor/gantt-chart/images/editing-dialog.png deleted file mode 100644 index e20b75ce58..0000000000 Binary files a/blazor/gantt-chart/images/editing-dialog.png and /dev/null differ diff --git a/blazor/gantt-chart/images/editing-dialog.webp b/blazor/gantt-chart/images/editing-dialog.webp new file mode 100644 index 0000000000..fd0bc6eb76 Binary files /dev/null and b/blazor/gantt-chart/images/editing-dialog.webp differ diff --git a/blazor/gantt-chart/images/editingResources.png b/blazor/gantt-chart/images/editingResources.png deleted file mode 100644 index 6d78a32a35..0000000000 Binary files a/blazor/gantt-chart/images/editingResources.png and /dev/null differ diff --git a/blazor/gantt-chart/images/editingResources.webp b/blazor/gantt-chart/images/editingResources.webp new file mode 100644 index 0000000000..5d548121bb Binary files /dev/null and b/blazor/gantt-chart/images/editingResources.webp differ diff --git a/blazor/gantt-chart/images/editingTemplate.png b/blazor/gantt-chart/images/editingTemplate.png deleted file mode 100644 index 65621d9d6b..0000000000 Binary files a/blazor/gantt-chart/images/editingTemplate.png and /dev/null differ diff --git a/blazor/gantt-chart/images/editingTemplate.webp b/blazor/gantt-chart/images/editingTemplate.webp new file mode 100644 index 0000000000..d8d29d9b1b Binary files /dev/null and b/blazor/gantt-chart/images/editingTemplate.webp differ diff --git a/blazor/gantt-chart/images/editingparent.png b/blazor/gantt-chart/images/editingparent.png deleted file mode 100644 index 7f0c9d876c..0000000000 Binary files a/blazor/gantt-chart/images/editingparent.png and /dev/null differ diff --git a/blazor/gantt-chart/images/editingparent.webp b/blazor/gantt-chart/images/editingparent.webp new file mode 100644 index 0000000000..0a84d500f9 Binary files /dev/null and b/blazor/gantt-chart/images/editingparent.webp differ diff --git a/blazor/gantt-chart/images/editingstate.png b/blazor/gantt-chart/images/editingstate.png deleted file mode 100644 index 10a3e0fc42..0000000000 Binary files a/blazor/gantt-chart/images/editingstate.png and /dev/null differ diff --git a/blazor/gantt-chart/images/editingstate.webp b/blazor/gantt-chart/images/editingstate.webp new file mode 100644 index 0000000000..326098c145 Binary files /dev/null and b/blazor/gantt-chart/images/editingstate.webp differ diff --git a/blazor/gantt-chart/images/enableToolbar.gif b/blazor/gantt-chart/images/enableToolbar.gif deleted file mode 100644 index 5b926b4d26..0000000000 Binary files a/blazor/gantt-chart/images/enableToolbar.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/enableToolbar.webp b/blazor/gantt-chart/images/enableToolbar.webp new file mode 100644 index 0000000000..c227a1650e Binary files /dev/null and b/blazor/gantt-chart/images/enableToolbar.webp differ diff --git a/blazor/gantt-chart/images/endDate-manual.PNG b/blazor/gantt-chart/images/endDate-manual.PNG deleted file mode 100644 index 07442b4b0a..0000000000 Binary files a/blazor/gantt-chart/images/endDate-manual.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/endDate-manual.webp b/blazor/gantt-chart/images/endDate-manual.webp new file mode 100644 index 0000000000..6569aaaa1d Binary files /dev/null and b/blazor/gantt-chart/images/endDate-manual.webp differ diff --git a/blazor/gantt-chart/images/filtering-in-custom-binding.png b/blazor/gantt-chart/images/filtering-in-custom-binding.png deleted file mode 100644 index 6b8c3e3c71..0000000000 Binary files a/blazor/gantt-chart/images/filtering-in-custom-binding.png and /dev/null differ diff --git a/blazor/gantt-chart/images/filtering-in-custom-binding.webp b/blazor/gantt-chart/images/filtering-in-custom-binding.webp new file mode 100644 index 0000000000..a95aef9150 Binary files /dev/null and b/blazor/gantt-chart/images/filtering-in-custom-binding.webp differ diff --git a/blazor/gantt-chart/images/frame-work.png b/blazor/gantt-chart/images/frame-work.png deleted file mode 100644 index 50082a3d37..0000000000 Binary files a/blazor/gantt-chart/images/frame-work.png and /dev/null differ diff --git a/blazor/gantt-chart/images/frame-work.webp b/blazor/gantt-chart/images/frame-work.webp new file mode 100644 index 0000000000..72ebedcf90 Binary files /dev/null and b/blazor/gantt-chart/images/frame-work.webp differ diff --git a/blazor/gantt-chart/images/gantt-crud-operations-timezone.gif b/blazor/gantt-chart/images/gantt-crud-operations-timezone.gif deleted file mode 100644 index f3c664f063..0000000000 Binary files a/blazor/gantt-chart/images/gantt-crud-operations-timezone.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/gantt-crud-operations-timezone.webp b/blazor/gantt-chart/images/gantt-crud-operations-timezone.webp new file mode 100644 index 0000000000..806ee1082d Binary files /dev/null and b/blazor/gantt-chart/images/gantt-crud-operations-timezone.webp differ diff --git a/blazor/gantt-chart/images/gantt-output.png b/blazor/gantt-chart/images/gantt-output.png deleted file mode 100644 index 9e7dee9eb8..0000000000 Binary files a/blazor/gantt-chart/images/gantt-output.png and /dev/null differ diff --git a/blazor/gantt-chart/images/gantt-output.webp b/blazor/gantt-chart/images/gantt-output.webp new file mode 100644 index 0000000000..2c3fa2b3f0 Binary files /dev/null and b/blazor/gantt-chart/images/gantt-output.webp differ diff --git a/blazor/gantt-chart/images/gantt-timezone.gif b/blazor/gantt-chart/images/gantt-timezone.gif deleted file mode 100644 index 004d0bb8cc..0000000000 Binary files a/blazor/gantt-chart/images/gantt-timezone.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/gantt-timezone.webp b/blazor/gantt-chart/images/gantt-timezone.webp new file mode 100644 index 0000000000..eec5c02e5c Binary files /dev/null and b/blazor/gantt-chart/images/gantt-timezone.webp differ diff --git a/blazor/gantt-chart/images/getting-started1.gif b/blazor/gantt-chart/images/getting-started1.gif deleted file mode 100644 index 5338c822cc..0000000000 Binary files a/blazor/gantt-chart/images/getting-started1.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/getting-started1.webp b/blazor/gantt-chart/images/getting-started1.webp new file mode 100644 index 0000000000..79bf5cc32e Binary files /dev/null and b/blazor/gantt-chart/images/getting-started1.webp differ diff --git a/blazor/gantt-chart/images/import-cdn.png b/blazor/gantt-chart/images/import-cdn.png deleted file mode 100644 index 075d96aab3..0000000000 Binary files a/blazor/gantt-chart/images/import-cdn.png and /dev/null differ diff --git a/blazor/gantt-chart/images/import-cdn.webp b/blazor/gantt-chart/images/import-cdn.webp new file mode 100644 index 0000000000..bed5aebe82 Binary files /dev/null and b/blazor/gantt-chart/images/import-cdn.webp differ diff --git a/blazor/gantt-chart/images/invalid-taskbar.PNG b/blazor/gantt-chart/images/invalid-taskbar.PNG deleted file mode 100644 index ffabbe7fce..0000000000 Binary files a/blazor/gantt-chart/images/invalid-taskbar.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/invalid-taskbar.webp b/blazor/gantt-chart/images/invalid-taskbar.webp new file mode 100644 index 0000000000..18ce8cf844 Binary files /dev/null and b/blazor/gantt-chart/images/invalid-taskbar.webp differ diff --git a/blazor/gantt-chart/images/mouse-interactions.png b/blazor/gantt-chart/images/mouse-interactions.png deleted file mode 100644 index 9a55e60a83..0000000000 Binary files a/blazor/gantt-chart/images/mouse-interactions.png and /dev/null differ diff --git a/blazor/gantt-chart/images/mouse-interactions.webp b/blazor/gantt-chart/images/mouse-interactions.webp new file mode 100644 index 0000000000..3747f0e943 Binary files /dev/null and b/blazor/gantt-chart/images/mouse-interactions.webp differ diff --git a/blazor/gantt-chart/images/multisorting-url-adaptor.png b/blazor/gantt-chart/images/multisorting-url-adaptor.png deleted file mode 100644 index 244f96875c..0000000000 Binary files a/blazor/gantt-chart/images/multisorting-url-adaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/multisorting-url-adaptor.webp b/blazor/gantt-chart/images/multisorting-url-adaptor.webp new file mode 100644 index 0000000000..61cda6e681 Binary files /dev/null and b/blazor/gantt-chart/images/multisorting-url-adaptor.webp differ diff --git a/blazor/gantt-chart/images/multisorting-urladaptor.png b/blazor/gantt-chart/images/multisorting-urladaptor.png deleted file mode 100644 index 0a0054cf2f..0000000000 Binary files a/blazor/gantt-chart/images/multisorting-urladaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/multisorting-urladaptor.webp b/blazor/gantt-chart/images/multisorting-urladaptor.webp new file mode 100644 index 0000000000..b260323643 Binary files /dev/null and b/blazor/gantt-chart/images/multisorting-urladaptor.webp differ diff --git a/blazor/gantt-chart/images/new-project.png b/blazor/gantt-chart/images/new-project.png deleted file mode 100644 index 057f6b0f7c..0000000000 Binary files a/blazor/gantt-chart/images/new-project.png and /dev/null differ diff --git a/blazor/gantt-chart/images/new-project.webp b/blazor/gantt-chart/images/new-project.webp new file mode 100644 index 0000000000..fa6121cb69 Binary files /dev/null and b/blazor/gantt-chart/images/new-project.webp differ diff --git a/blazor/gantt-chart/images/nuget-explorer.png b/blazor/gantt-chart/images/nuget-explorer.png deleted file mode 100644 index f9306f219e..0000000000 Binary files a/blazor/gantt-chart/images/nuget-explorer.png and /dev/null differ diff --git a/blazor/gantt-chart/images/nuget-explorer.webp b/blazor/gantt-chart/images/nuget-explorer.webp new file mode 100644 index 0000000000..b5d7fe4df4 Binary files /dev/null and b/blazor/gantt-chart/images/nuget-explorer.webp differ diff --git a/blazor/gantt-chart/images/parent-taskbar.PNG b/blazor/gantt-chart/images/parent-taskbar.PNG deleted file mode 100644 index 8f170f26ec..0000000000 Binary files a/blazor/gantt-chart/images/parent-taskbar.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/parent-taskbar.webp b/blazor/gantt-chart/images/parent-taskbar.webp new file mode 100644 index 0000000000..ea1350cefd Binary files /dev/null and b/blazor/gantt-chart/images/parent-taskbar.webp differ diff --git a/blazor/gantt-chart/images/predecessor-configuration.gif b/blazor/gantt-chart/images/predecessor-configuration.gif deleted file mode 100644 index ffb0cec92c..0000000000 Binary files a/blazor/gantt-chart/images/predecessor-configuration.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/predecessor-configuration.webp b/blazor/gantt-chart/images/predecessor-configuration.webp new file mode 100644 index 0000000000..391bda2bfc Binary files /dev/null and b/blazor/gantt-chart/images/predecessor-configuration.webp differ diff --git a/blazor/gantt-chart/images/predecessor-validation-enabled.PNG b/blazor/gantt-chart/images/predecessor-validation-enabled.PNG deleted file mode 100644 index 63dd5ed379..0000000000 Binary files a/blazor/gantt-chart/images/predecessor-validation-enabled.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/predecessor-validation-enabled.webp b/blazor/gantt-chart/images/predecessor-validation-enabled.webp new file mode 100644 index 0000000000..da4c9e9e8f Binary files /dev/null and b/blazor/gantt-chart/images/predecessor-validation-enabled.webp differ diff --git a/blazor/gantt-chart/images/predecessorWithOffset.png b/blazor/gantt-chart/images/predecessorWithOffset.png deleted file mode 100644 index ca149223f6..0000000000 Binary files a/blazor/gantt-chart/images/predecessorWithOffset.png and /dev/null differ diff --git a/blazor/gantt-chart/images/predecessorWithOffset.webp b/blazor/gantt-chart/images/predecessorWithOffset.webp new file mode 100644 index 0000000000..12306d9718 Binary files /dev/null and b/blazor/gantt-chart/images/predecessorWithOffset.webp differ diff --git a/blazor/gantt-chart/images/resource-allocation.gif b/blazor/gantt-chart/images/resource-allocation.gif deleted file mode 100644 index 7c414da097..0000000000 Binary files a/blazor/gantt-chart/images/resource-allocation.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/resource-allocation.webp b/blazor/gantt-chart/images/resource-allocation.webp new file mode 100644 index 0000000000..a0ceb73dde Binary files /dev/null and b/blazor/gantt-chart/images/resource-allocation.webp differ diff --git a/blazor/gantt-chart/images/scroll-to-taskbar-on-click.gif b/blazor/gantt-chart/images/scroll-to-taskbar-on-click.gif deleted file mode 100644 index efbb3c637c..0000000000 Binary files a/blazor/gantt-chart/images/scroll-to-taskbar-on-click.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/scroll-to-taskbar-on-click.webp b/blazor/gantt-chart/images/scroll-to-taskbar-on-click.webp new file mode 100644 index 0000000000..fa303166d9 Binary files /dev/null and b/blazor/gantt-chart/images/scroll-to-taskbar-on-click.webp differ diff --git a/blazor/gantt-chart/images/searching-custom-adaptor.png b/blazor/gantt-chart/images/searching-custom-adaptor.png deleted file mode 100644 index 4cfe41ace0..0000000000 Binary files a/blazor/gantt-chart/images/searching-custom-adaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/searching-custom-adaptor.webp b/blazor/gantt-chart/images/searching-custom-adaptor.webp new file mode 100644 index 0000000000..aaf948d836 Binary files /dev/null and b/blazor/gantt-chart/images/searching-custom-adaptor.webp differ diff --git a/blazor/gantt-chart/images/searching-in-urladaptor.png b/blazor/gantt-chart/images/searching-in-urladaptor.png deleted file mode 100644 index 87fee3b948..0000000000 Binary files a/blazor/gantt-chart/images/searching-in-urladaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/searching-in-urladaptor.webp b/blazor/gantt-chart/images/searching-in-urladaptor.webp new file mode 100644 index 0000000000..1afe5dd910 Binary files /dev/null and b/blazor/gantt-chart/images/searching-in-urladaptor.webp differ diff --git a/blazor/gantt-chart/images/select-nuget.png b/blazor/gantt-chart/images/select-nuget.png deleted file mode 100644 index 4b67d0ce11..0000000000 Binary files a/blazor/gantt-chart/images/select-nuget.png and /dev/null differ diff --git a/blazor/gantt-chart/images/select-nuget.webp b/blazor/gantt-chart/images/select-nuget.webp new file mode 100644 index 0000000000..eae1ed1674 Binary files /dev/null and b/blazor/gantt-chart/images/select-nuget.webp differ diff --git a/blazor/gantt-chart/images/sending-additional-param-custom-binding.png b/blazor/gantt-chart/images/sending-additional-param-custom-binding.png deleted file mode 100644 index cb9e3d262a..0000000000 Binary files a/blazor/gantt-chart/images/sending-additional-param-custom-binding.png and /dev/null differ diff --git a/blazor/gantt-chart/images/sending-additional-param-custom-binding.webp b/blazor/gantt-chart/images/sending-additional-param-custom-binding.webp new file mode 100644 index 0000000000..e80dfa8510 Binary files /dev/null and b/blazor/gantt-chart/images/sending-additional-param-custom-binding.webp differ diff --git a/blazor/gantt-chart/images/sending-additional-param.png b/blazor/gantt-chart/images/sending-additional-param.png deleted file mode 100644 index 8acf996dc8..0000000000 Binary files a/blazor/gantt-chart/images/sending-additional-param.png and /dev/null differ diff --git a/blazor/gantt-chart/images/sending-additional-param.webp b/blazor/gantt-chart/images/sending-additional-param.webp new file mode 100644 index 0000000000..609456e05b Binary files /dev/null and b/blazor/gantt-chart/images/sending-additional-param.webp differ diff --git a/blazor/gantt-chart/images/single-filtering-urladaptor.png b/blazor/gantt-chart/images/single-filtering-urladaptor.png deleted file mode 100644 index da092d723e..0000000000 Binary files a/blazor/gantt-chart/images/single-filtering-urladaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/single-filtering-urladaptor.webp b/blazor/gantt-chart/images/single-filtering-urladaptor.webp new file mode 100644 index 0000000000..48102b8911 Binary files /dev/null and b/blazor/gantt-chart/images/single-filtering-urladaptor.webp differ diff --git a/blazor/gantt-chart/images/sortColumn.gif b/blazor/gantt-chart/images/sortColumn.gif deleted file mode 100644 index ff6d47cf4b..0000000000 Binary files a/blazor/gantt-chart/images/sortColumn.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/sortColumn.webp b/blazor/gantt-chart/images/sortColumn.webp new file mode 100644 index 0000000000..6d8ed31862 Binary files /dev/null and b/blazor/gantt-chart/images/sortColumn.webp differ diff --git a/blazor/gantt-chart/images/sorting-in-custom-binding.png b/blazor/gantt-chart/images/sorting-in-custom-binding.png deleted file mode 100644 index e9277073de..0000000000 Binary files a/blazor/gantt-chart/images/sorting-in-custom-binding.png and /dev/null differ diff --git a/blazor/gantt-chart/images/sorting-in-custom-binding.webp b/blazor/gantt-chart/images/sorting-in-custom-binding.webp new file mode 100644 index 0000000000..3122224bef Binary files /dev/null and b/blazor/gantt-chart/images/sorting-in-custom-binding.webp differ diff --git a/blazor/gantt-chart/images/sorting-urladaptor.png b/blazor/gantt-chart/images/sorting-urladaptor.png deleted file mode 100644 index 2ee2ccf955..0000000000 Binary files a/blazor/gantt-chart/images/sorting-urladaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/sorting-urladaptor.webp b/blazor/gantt-chart/images/sorting-urladaptor.webp new file mode 100644 index 0000000000..35b2126315 Binary files /dev/null and b/blazor/gantt-chart/images/sorting-urladaptor.webp differ diff --git a/blazor/gantt-chart/images/splitterMethods.gif b/blazor/gantt-chart/images/splitterMethods.gif deleted file mode 100644 index a52dd7369b..0000000000 Binary files a/blazor/gantt-chart/images/splitterMethods.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/splitterMethods.webp b/blazor/gantt-chart/images/splitterMethods.webp new file mode 100644 index 0000000000..26e00d1b39 Binary files /dev/null and b/blazor/gantt-chart/images/splitterMethods.webp differ diff --git a/blazor/gantt-chart/images/startDate-manual.PNG b/blazor/gantt-chart/images/startDate-manual.PNG deleted file mode 100644 index 417cb5fcbc..0000000000 Binary files a/blazor/gantt-chart/images/startDate-manual.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/startDate-manual.webp b/blazor/gantt-chart/images/startDate-manual.webp new file mode 100644 index 0000000000..06986cade8 Binary files /dev/null and b/blazor/gantt-chart/images/startDate-manual.webp differ diff --git a/blazor/gantt-chart/images/stylesAndAppearance.PNG b/blazor/gantt-chart/images/stylesAndAppearance.PNG deleted file mode 100644 index b5421f476b..0000000000 Binary files a/blazor/gantt-chart/images/stylesAndAppearance.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/stylesAndAppearance.webp b/blazor/gantt-chart/images/stylesAndAppearance.webp new file mode 100644 index 0000000000..26d4c6ddf1 Binary files /dev/null and b/blazor/gantt-chart/images/stylesAndAppearance.webp differ diff --git a/blazor/gantt-chart/images/taskbar-states.png b/blazor/gantt-chart/images/taskbar-states.png deleted file mode 100644 index 0c881b5721..0000000000 Binary files a/blazor/gantt-chart/images/taskbar-states.png and /dev/null differ diff --git a/blazor/gantt-chart/images/taskbar-states.webp b/blazor/gantt-chart/images/taskbar-states.webp new file mode 100644 index 0000000000..c4f145f671 Binary files /dev/null and b/blazor/gantt-chart/images/taskbar-states.webp differ diff --git a/blazor/gantt-chart/images/taskbar_draw.gif b/blazor/gantt-chart/images/taskbar_draw.gif deleted file mode 100644 index ec9e5164b8..0000000000 Binary files a/blazor/gantt-chart/images/taskbar_draw.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/taskbar_draw.webp b/blazor/gantt-chart/images/taskbar_draw.webp new file mode 100644 index 0000000000..6eeacee7e9 Binary files /dev/null and b/blazor/gantt-chart/images/taskbar_draw.webp differ diff --git a/blazor/gantt-chart/images/timeline-cell-tooltip.png b/blazor/gantt-chart/images/timeline-cell-tooltip.png deleted file mode 100644 index 86aee3a7de..0000000000 Binary files a/blazor/gantt-chart/images/timeline-cell-tooltip.png and /dev/null differ diff --git a/blazor/gantt-chart/images/timeline-cell-tooltip.webp b/blazor/gantt-chart/images/timeline-cell-tooltip.webp new file mode 100644 index 0000000000..963595e304 Binary files /dev/null and b/blazor/gantt-chart/images/timeline-cell-tooltip.webp differ diff --git a/blazor/gantt-chart/images/timeline_virtual.gif b/blazor/gantt-chart/images/timeline_virtual.gif deleted file mode 100644 index c313d1d5c0..0000000000 Binary files a/blazor/gantt-chart/images/timeline_virtual.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/timeline_virtual.webp b/blazor/gantt-chart/images/timeline_virtual.webp new file mode 100644 index 0000000000..30965ff2ca Binary files /dev/null and b/blazor/gantt-chart/images/timeline_virtual.webp differ diff --git a/blazor/gantt-chart/images/updateRecord.gif b/blazor/gantt-chart/images/updateRecord.gif deleted file mode 100644 index 6c3b49e29d..0000000000 Binary files a/blazor/gantt-chart/images/updateRecord.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/updateRecord.webp b/blazor/gantt-chart/images/updateRecord.webp new file mode 100644 index 0000000000..899bb81826 Binary files /dev/null and b/blazor/gantt-chart/images/updateRecord.webp differ diff --git a/blazor/gantt-chart/images/updatescheduledates.gif b/blazor/gantt-chart/images/updatescheduledates.gif deleted file mode 100644 index 8d71c2d5ec..0000000000 Binary files a/blazor/gantt-chart/images/updatescheduledates.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/updatescheduledates.webp b/blazor/gantt-chart/images/updatescheduledates.webp new file mode 100644 index 0000000000..ee8d15400e Binary files /dev/null and b/blazor/gantt-chart/images/updatescheduledates.webp differ diff --git a/blazor/gantt-chart/images/url-adaptor.png b/blazor/gantt-chart/images/url-adaptor.png deleted file mode 100644 index 77c4533fca..0000000000 Binary files a/blazor/gantt-chart/images/url-adaptor.png and /dev/null differ diff --git a/blazor/gantt-chart/images/url-adaptor.webp b/blazor/gantt-chart/images/url-adaptor.webp new file mode 100644 index 0000000000..fda7a87364 Binary files /dev/null and b/blazor/gantt-chart/images/url-adaptor.webp differ diff --git a/blazor/gantt-chart/images/user-interaction.png b/blazor/gantt-chart/images/user-interaction.png deleted file mode 100644 index 2c55bc67ea..0000000000 Binary files a/blazor/gantt-chart/images/user-interaction.png and /dev/null differ diff --git a/blazor/gantt-chart/images/user-interaction.webp b/blazor/gantt-chart/images/user-interaction.webp new file mode 100644 index 0000000000..723d2118b3 Binary files /dev/null and b/blazor/gantt-chart/images/user-interaction.webp differ diff --git a/blazor/gantt-chart/images/valid-taskbar.PNG b/blazor/gantt-chart/images/valid-taskbar.PNG deleted file mode 100644 index 362722db85..0000000000 Binary files a/blazor/gantt-chart/images/valid-taskbar.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/valid-taskbar.webp b/blazor/gantt-chart/images/valid-taskbar.webp new file mode 100644 index 0000000000..014a12bf14 Binary files /dev/null and b/blazor/gantt-chart/images/valid-taskbar.webp differ diff --git a/blazor/gantt-chart/images/vertical-scroll.gif b/blazor/gantt-chart/images/vertical-scroll.gif deleted file mode 100644 index 7f8f520bcf..0000000000 Binary files a/blazor/gantt-chart/images/vertical-scroll.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/vertical-scroll.webp b/blazor/gantt-chart/images/vertical-scroll.webp new file mode 100644 index 0000000000..1262261275 Binary files /dev/null and b/blazor/gantt-chart/images/vertical-scroll.webp differ diff --git a/blazor/gantt-chart/images/zoomMethods.gif b/blazor/gantt-chart/images/zoomMethods.gif deleted file mode 100644 index b7eab5a8f2..0000000000 Binary files a/blazor/gantt-chart/images/zoomMethods.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/zoomMethods.webp b/blazor/gantt-chart/images/zoomMethods.webp new file mode 100644 index 0000000000..cd0bb3d5a6 Binary files /dev/null and b/blazor/gantt-chart/images/zoomMethods.webp differ diff --git a/blazor/gantt-chart/managing-tasks.md b/blazor/gantt-chart/managing-tasks.md index c4a4e1baa6..3ff08b9608 100644 --- a/blazor/gantt-chart/managing-tasks.md +++ b/blazor/gantt-chart/managing-tasks.md @@ -318,7 +318,7 @@ Action |Description -----|----- [Cell editing](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks#cell-editing) | To perform `double tap` on a specific cell, initiate the cell to be in edit state. [Dialog editing](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks#dialog-editing) | To perform `double tap` on a specific row, initiate the edit dialog to be opened. -[Taskbar editing](https://blazor.syncfusion.com/documentation/gantt-chart/taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar.
**Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.
![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingparent.png)

**Child taskbar** : Once you tap the child taskbar, it will be changed to editing state.
![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingstate.png)

**Dragging taskbar** : To drag a taskbar to the left or right in editing state.

**Resizing taskbar** : To resize a taskbar, drag the left/right resize icon.

**Progress resizing** : To change the progress, drag the progress resize icon to the left or right direction. +[Taskbar editing](https://blazor.syncfusion.com/documentation/gantt-chart/taskbar-editing) | Taskbar editing action is initiated using the `tap` action on the taskbar.
**Parent taskbar** : Once you tap on the parent taskbar, it will be changed to editing state. Perform only dragging action on parent taskbar editing.
![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingparent.webp)

**Child taskbar** : Once you tap the child taskbar, it will be changed to editing state.
![Blazor Gantt Chart displays editing parent taskbar in touch mode](images/editingstate.webp)

**Dragging taskbar** : To drag a taskbar to the left or right in editing state.

**Resizing taskbar** : To resize a taskbar, drag the left/right resize icon.

**Progress resizing** : To change the progress, drag the progress resize icon to the left or right direction. ### Task dependency editing @@ -326,16 +326,16 @@ You can tap the left/right connector point to initiate task dependencies edit mo Once the dependency edit mode is initiated, a dialog appears with the message **Choose another task** and a **Cancel** button. Tapping another taskbar will prompt a second dialog with the message **Select the connector position** and a tooltip near the second taskbar showing **Left** and **Right** buttons. Selecting one of these buttons establishes the dependency relationship between the two tasks. You can click the **Cancel** button at any time to exit the edit mode. -![Task Dependency Editing in Blazor Gantt Chart](images/dependency-editing.png) +![Task Dependency Editing in Blazor Gantt Chart](images/dependency-editing.webp) The following table explains the taskbar state in dependency edit mode. Taskbar state |Description -----|----- -Parent taskbar | You cannot create dependency relationship to parent tasks.
![Parent taskbar](images/parent-taskbar.PNG) -Taskbar without dependency | If you tap a valid child taskbar, it will create `FS` type dependency line between tasks, otherwise exits from task dependency edit mode.
![Valid taskbar](images/valid-taskbar.PNG) -Taskbar with dependency | If you tap the second taskbar, which has already been directly connected, it will ask to remove it.
![Invalid taskbar](images/invalid-taskbar.PNG) -Removing dependency | Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency.
![Confirm dialog](images/confirm-dialog.PNG) +Parent taskbar | You cannot create dependency relationship to parent tasks.
![Parent taskbar](images/parent-taskbar.webp) +Taskbar without dependency | If you tap a valid child taskbar, it will create `FS` type dependency line between tasks, otherwise exits from task dependency edit mode.
![Valid taskbar](images/valid-taskbar.webp) +Taskbar with dependency | If you tap the second taskbar, which has already been directly connected, it will ask to remove it.
![Invalid taskbar](images/invalid-taskbar.webp) +Removing dependency | Once you tap the taskbar with direct dependency, then confirmation dialog will be shown for removing dependency.
![Confirm dialog](images/confirm-dialog.webp) ## Taskbar editing tooltip diff --git a/blazor/gantt-chart/scheduling-tasks.md b/blazor/gantt-chart/scheduling-tasks.md index d1a33333a0..63b732526b 100644 --- a/blazor/gantt-chart/scheduling-tasks.md +++ b/blazor/gantt-chart/scheduling-tasks.md @@ -196,10 +196,10 @@ Unscheduled tasks are planned for a project without any definite schedule dates. Taskbar state |Auto |Manual -----|-----|----- -`Start Date Only` | ![Blazor Gantt Chart with Start Date Task](images/blazor-gantt-chart-start-date-task.png) | ![Alt text](images/startDate-manual.png) -`End Date Only` | ![Blazor Gantt Chart with End Date Task](images/blazor-gantt-chart-end-date-task.png) | ![Alt text](images/endDate-manual.png) -`Duration Only` | ![Blazot Gantt Chart with Duration Task](images/blazor-gantt-chart-duration-task.png) | ![Alt text](images/duration-manual.png) -`Milestone`| ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.png) | ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.png) +`Start Date Only` | ![Blazor Gantt Chart with Start Date Task](images/blazor-gantt-chart-start-date-task.webp) | ![Alt text](images/startDate-manual.webp) +`End Date Only` | ![Blazor Gantt Chart with End Date Task](images/blazor-gantt-chart-end-date-task.webp) | ![Alt text](images/endDate-manual.webp) +`Duration Only` | ![Blazot Gantt Chart with Duration Task](images/blazor-gantt-chart-duration-task.webp) | ![Alt text](images/duration-manual.webp) +`Milestone`| ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.webp) | ![Blazor Gantt Chart with Milestone Task](images/blazor-gantt-chart-milestone-task.webp) > A milestone is a task that has no start and end dates, but it has a duration value of zero. diff --git a/blazor/gantt-chart/selection.md b/blazor/gantt-chart/selection.md index 62afa303fe..1e6ed80950 100644 --- a/blazor/gantt-chart/selection.md +++ b/blazor/gantt-chart/selection.md @@ -316,4 +316,4 @@ The Syncfusion® Blazor Gantt Chart componen [Multiple Row selection](https://blazor.syncfusion.com/documentation/gantt-chart/selection): To select multiple rows, tap a row to display a popup that activates multi-selection mode. After tapping the popup, continue tapping the desired rows to select them. This allows you to select multiple rows simultaneously, as illustrated below: -![Multiple selection in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-selection.PNG) \ No newline at end of file +![Multiple selection in Blazor Gantt Chart](images/blazor-gantt-chart-multiple-selection.webp) \ No newline at end of file diff --git a/blazor/gantt-chart/sorting.md b/blazor/gantt-chart/sorting.md index aeea47bf11..7eafd0f8e4 100644 --- a/blazor/gantt-chart/sorting.md +++ b/blazor/gantt-chart/sorting.md @@ -430,4 +430,4 @@ To perform a tap action on a column header in the Syncfusion - +
} else @@ -274,7 +274,7 @@ The following example demonstrates how to implement the `PdfQueryTaskbarInfo` ev private SfGantt Gantt; private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; private static WebClient webClient = new WebClient(); - private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.png"); + private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.webp"); private static MemoryStream imageStream = new MemoryStream(imageBytes); public static PdfImage image = PdfImage.FromStream(imageStream); protected override void OnInitialized() diff --git a/blazor/heatmap-chart/getting-started-with-server-app.md b/blazor/heatmap-chart/getting-started-with-server-app.md index c7d1c2cb4e..0ed8483522 100644 --- a/blazor/heatmap-chart/getting-started-with-server-app.md +++ b/blazor/heatmap-chart/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.HeatMap + diff --git a/blazor/heatmap-chart/getting-started-with-web-app.md b/blazor/heatmap-chart/getting-started-with-web-app.md index 0412c22eb3..d5a14aa234 100644 --- a/blazor/heatmap-chart/getting-started-with-web-app.md +++ b/blazor/heatmap-chart/getting-started-with-web-app.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.HeatMap + diff --git a/blazor/image-editor/getting-started-with-server-app.md b/blazor/image-editor/getting-started-with-server-app.md index c358dd0671..059e6f3690 100644 --- a/blazor/image-editor/getting-started-with-server-app.md +++ b/blazor/image-editor/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.ImageEditor + {% endhighlight %} diff --git a/blazor/image-editor/getting-started-with-web-app.md b/blazor/image-editor/getting-started-with-web-app.md index 11c89e44fa..ba2f6388e5 100644 --- a/blazor/image-editor/getting-started-with-web-app.md +++ b/blazor/image-editor/getting-started-with-web-app.md @@ -171,6 +171,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.ImageEditor + {% endhighlight %} diff --git a/blazor/image-editor/getting-started.md b/blazor/image-editor/getting-started.md index 0988c583af..ff4b25e3c3 100644 --- a/blazor/image-editor/getting-started.md +++ b/blazor/image-editor/getting-started.md @@ -148,6 +148,8 @@ Add the Syncfusion® Blazor Image Editor com {% tabs %} {% highlight razor tabtitle="~/Index.razor" %} +@using Syncfusion.Blazor.ImageEditor + {% endhighlight %} diff --git a/blazor/kanban/getting-started-with-server-app.md b/blazor/kanban/getting-started-with-server-app.md index f708ae8164..ebdfc5f8a2 100644 --- a/blazor/kanban/getting-started-with-server-app.md +++ b/blazor/kanban/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Kanban + @@ -196,6 +198,8 @@ To populate the empty Kanban with cards, define the Enumerable object or remote {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Kanban + @@ -240,6 +244,8 @@ To populate the empty Kanban with cards, define the Enumerable object or remote {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Kanban + diff --git a/blazor/kanban/getting-started-with-web-app.md b/blazor/kanban/getting-started-with-web-app.md index 31db649ce0..aa3fad8b7a 100644 --- a/blazor/kanban/getting-started-with-web-app.md +++ b/blazor/kanban/getting-started-with-web-app.md @@ -169,6 +169,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Kanban + @@ -204,6 +206,8 @@ To populate the empty Kanban with cards, define the Enumerable object or remote {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Kanban + @@ -248,6 +252,8 @@ To populate the empty Kanban with cards, define the Enumerable object or remote {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Kanban + diff --git a/blazor/listbox/getting-started-webapp.md b/blazor/listbox/getting-started-webapp.md index de83c25098..d3d6240368 100644 --- a/blazor/listbox/getting-started-webapp.md +++ b/blazor/listbox/getting-started-webapp.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + {% endhighlight %} @@ -179,6 +181,8 @@ After initialization, populate the ListBox using the `DataSource` property. In t {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + diff --git a/blazor/listbox/getting-started-with-server-app.md b/blazor/listbox/getting-started-with-server-app.md index c7d3f8d49b..975b44b199 100644 --- a/blazor/listbox/getting-started-with-server-app.md +++ b/blazor/listbox/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + {% endhighlight %} @@ -173,6 +175,8 @@ After initialization, populate the ListBox using the `DataSource` property. The {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + diff --git a/blazor/markdown-editor/getting-started-webapp.md b/blazor/markdown-editor/getting-started-webapp.md index f68522b372..0e260e36b4 100644 --- a/blazor/markdown-editor/getting-started-webapp.md +++ b/blazor/markdown-editor/getting-started-webapp.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.RichTextEditor + @code { @@ -189,6 +191,8 @@ Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items] {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.RichTextEditor + diff --git a/blazor/markdown-editor/getting-started-with-server-app.md b/blazor/markdown-editor/getting-started-with-server-app.md index 482730716f..fd61f34359 100644 --- a/blazor/markdown-editor/getting-started-with-server-app.md +++ b/blazor/markdown-editor/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.RichTextEditor + @code { @@ -183,6 +185,8 @@ Configure the toolbar with the tools using [RichTextEditorToolbarSettings.Items] {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.RichTextEditor + diff --git a/blazor/media-query/getting-started-webapp.md b/blazor/media-query/getting-started-webapp.md index 3f8c2914a7..671f040b7c 100644 --- a/blazor/media-query/getting-started-webapp.md +++ b/blazor/media-query/getting-started-webapp.md @@ -166,6 +166,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor +
@if (activeBreakpoint == "Small") diff --git a/blazor/media-query/getting-started-with-server-app.md b/blazor/media-query/getting-started-with-server-app.md index e8f9b2fee8..c5856bf346 100644 --- a/blazor/media-query/getting-started-with-server-app.md +++ b/blazor/media-query/getting-started-with-server-app.md @@ -160,6 +160,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor +
@if (activeBreakpoint == "Small") diff --git a/blazor/mention/getting-started-webapp.md b/blazor/mention/getting-started-webapp.md index 46cc185b4b..8e27fc0ba2 100644 --- a/blazor/mention/getting-started-webapp.md +++ b/blazor/mention/getting-started-webapp.md @@ -165,7 +165,9 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endtabs %} {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.DropDowns @@ -219,7 +221,10 @@ The `Target` property of the Mention component allows you to specify an element In the bellow example, the `Target` property of the Mention component is set to the CSS selector `#mentionTarget`, which matches the textarea element with an id of `mentionTarget`. The mention element will be appended to the textarea element as a child element, allowing the user to select or mention a specific entity within the textarea. -{% highlight razor %} +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@using Syncfusion.Blazor.DropDowns @@ -258,6 +263,7 @@ In the bellow example, the `Target` property of the Mention component is set to } {% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LNrfXCADhtJlNdUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Mention target](images/blazor-mention-target.png)" %} diff --git a/blazor/mention/getting-started-with-server-app.md b/blazor/mention/getting-started-with-server-app.md index f27329e1bb..abbeaf1a6a 100644 --- a/blazor/mention/getting-started-with-server-app.md +++ b/blazor/mention/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns +
@@ -213,8 +215,11 @@ The `Target` property of the Mention component allows you to specify an element In the bellow example, the `Target` property of the Mention component is set to the CSS selector `#mentionTarget`, which matches the textarea element with an id of `mentionTarget`. The mention element will be appended to the textarea element as a child element, allowing the user to select or mention a specific entity within the textarea. +{% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.DropDowns + @@ -252,6 +257,7 @@ In the bellow example, the `Target` property of the Mention component is set to } {% endhighlight %} +{% endtabs %} {% previewsample "https://blazorplayground.syncfusion.com/embed/LNrfXCADhtJlNdUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Mention target](images/blazor-mention-target.png)" %} diff --git a/blazor/menu-bar/getting-started-webapp.md b/blazor/menu-bar/getting-started-webapp.md index 44577fe3be..f4097bcc4d 100644 --- a/blazor/menu-bar/getting-started-webapp.md +++ b/blazor/menu-bar/getting-started-webapp.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Navigations + diff --git a/blazor/menu-bar/getting-started-with-server-app.md b/blazor/menu-bar/getting-started-with-server-app.md index df97680c27..001d52363f 100644 --- a/blazor/menu-bar/getting-started-with-server-app.md +++ b/blazor/menu-bar/getting-started-with-server-app.md @@ -161,6 +161,8 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Navigations + diff --git a/blazor/menu-bar/getting-started.md b/blazor/menu-bar/getting-started.md index ce3f8c446b..25d605db0b 100644 --- a/blazor/menu-bar/getting-started.md +++ b/blazor/menu-bar/getting-started.md @@ -148,6 +148,8 @@ Add the Syncfusion® Blazor Menu Bar compone {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Navigations + diff --git a/blazor/message/getting-started-webapp.md b/blazor/message/getting-started-webapp.md index 268a5ec377..49730fe39d 100644 --- a/blazor/message/getting-started-webapp.md +++ b/blazor/message/getting-started-webapp.md @@ -167,6 +167,8 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Notifications + Please read the comments carefully