Merge branch 'development' of https://github.com/syncfusion-content/blazor-docs into 930500-UG

Author: Backiaraj

blazor/appearance/themes.md

@@ -1049,7 +1049,7 @@ The following example demonstrates how to change a theme dynamically in Blazor a
 * For **Blazor Web App using any interactive render mode (Server, WebAssembly, or Auto)**, the theme is changed based on query string at the **~/Components/App.razor** file
 
 {% tabs %}
-{% highlight c# tabtitle=".NET 9 & .NET 8 (~/App.razor)" %}
+{% highlight c# tabtitle=".NET 10, .NET 9 & .NET 8 (~/App.razor)" %}
 
 @using Microsoft.AspNetCore.WebUtilities;
 @inject NavigationManager UrlHelper;
@@ -1166,7 +1166,7 @@ The following example demonstrates how to change a theme dynamically in Blazor a
 1. For **Blazor Server application**, the theme is changed based on query string at the **~/Components/App.razor** file.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET 9 & .NET 8 (~/App.razor)" %}
+{% highlight c# tabtitle=".NET 10, .NET 9 & .NET 8 (~/App.razor)" %}
 
 @page "/"
 @namespace BlazorThemeSwitcher.Pages

blazor/carousel/getting-started-with-web-app.md

@@ -249,31 +249,31 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
     <SfCarousel>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/bridge.jpg" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/bridge.png" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/trees.jpg" alt="Spring Flower Trees" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/trees.png" alt="Spring Flower Trees" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Spring Flower Trees</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/waterfall.jpg" alt="Oddadalen Waterfalls, Norway" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/waterfall.png" alt="Oddadalen Waterfalls, Norway" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Oddadalen Waterfalls, Norway</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/sea.jpg" alt="Anse Source d'Argent, Seychelles" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/sea.png" alt="Anse Source d'Argent, Seychelles" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Anse Source d'Argent, Seychelles</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/rocks.jpg" alt="Stonehenge, England" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/rocks.png" alt="Stonehenge, England" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Stonehenge, England</figcaption>
             </figure>
         </CarouselItem>
@@ -309,7 +309,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVTXWhIpyDoMAim?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Carousel).
 

blazor/carousel/getting-started.md

@@ -151,31 +151,31 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel compone
     <SfCarousel>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/bridge.jpg" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/bridge.png" alt="Golden Gate Bridge, San Francisco" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Golden Gate Bridge, San Francisco</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/trees.jpg" alt="Spring Flower Trees" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/trees.png" alt="Spring Flower Trees" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Spring Flower Trees</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/waterfall.jpg" alt="Oddadalen Waterfalls, Norway" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/waterfall.png" alt="Oddadalen Waterfalls, Norway" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Oddadalen Waterfalls, Norway</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/sea.jpg" alt="Anse Source d'Argent, Seychelles" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/sea.png" alt="Anse Source d'Argent, Seychelles" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Anse Source d'Argent, Seychelles</figcaption>
             </figure>
         </CarouselItem>
         <CarouselItem>
             <figure class="img-container">
-                <img src="https://ej2.syncfusion.com/demos/src/carousel/images/rocks.jpg" alt="Stonehenge, England" style="height:100%;width:100%;" />
+                <img src="https://cdn.syncfusion.com/blazor/images/carousel/rocks.png" alt="Stonehenge, England" style="height:100%;width:100%;" />
                 <figcaption class="img-caption">Stonehenge, England</figcaption>
             </figure>
         </CarouselItem>
@@ -206,6 +206,6 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Carousel compone
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVTXWhIpyDoMAim?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthSMMhiVkQbevAP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Carousel Component.](images/blazor-carousel-getting-started.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Carousel).

blazor/common/adding-script-references.md

@@ -17,7 +17,7 @@ N> JavaScript interop files are required for features that cannot be implemented
 
 You can refer the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor scripts using the CDN resources.
 
-* For **.NET 8 and .NET 9** Blazor Web App (any render mode: Server, WebAssembly, or Auto), add scripts in `~/Components/App.razor`.
+* For **.NET 8, .NET 9 and .NET 10** Blazor Web App (any render mode: Server, WebAssembly, or Auto), add scripts in `~/Components/App.razor`.
 * For a **Blazor WebAssembly (standalone) App**, add scripts in `~/wwwroot/index.html`.
 
 Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available on the CDN per version. Ensure the version in the URLs matches the NuGet package version used in the application.

blazor/common/cdn-fallback.md

@@ -13,7 +13,7 @@ This section explains how to reference fallback [scripts](https://blazor.syncfus
 
 ## Blazor Web App
 
-For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference script and stylesheet fallback from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below.
+For **.NET 8, .NET 9 and .NET 10** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference script and stylesheet fallback from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below.
 
 ### Script fallback
 

blazor/common/content-security-policy.md

@@ -22,7 +22,7 @@ Include the following directives in the CSP policy for Syncfusion<sup style="fon
 
 These directives should be included in the `<head>` tag of the application's webpage, typically
 
-* For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), inside the `<head>` of the **~/Components/App.razor** file.
+* For **.NET 8, .NET 9 and .NET 10** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), inside the `<head>` of the **~/Components/App.razor** file.
 
 * For **Blazor WebAssembly Standalone App**, inside the `<head>` of the **wwwroot/index.html** file.
 

blazor/common/custom-resource-generator.md

@@ -47,7 +47,7 @@ N> When downloading Material or Tailwind themes (alone or with other themes), th
 
 1. Copy and paste the downloaded custom resources into the application's `~/wwwroot` folder.
 2. Manually add the custom interop script and styles:
-    * For **.NET 8 and .NET 9** Blazor Web App (any render mode: Server, WebAssembly, or Auto), reference the custom interop script in `~/Components/App.razor` file.
+    * For **.NET 8, .NET 9 and .NET 10** Blazor Web App (any render mode: Server, WebAssembly, or Auto), reference the custom interop script in `~/Components/App.razor` file.
     * For a **Blazor WebAssembly (standalone) app**, reference the custom interop script in `~/wwwroot/index.html` file.
 
     ```html

blazor/common/data-binding/bind-entity-framework.md

@@ -7,7 +7,7 @@ component: Common
 documentation: ug
 ---
 
-# Bind Data from SQL Server to Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Components
+# Bind Data from SQL Server to Syncfusion® Blazor Components
 
 In this section, you can learn how to retrieve data from SQL database using [Entity Framework](https://learn.microsoft.com/en-us/ef/core/) to bind it to the Grid component and perform CRUD operations.
 Entity Framework is an open-source object-relational mapper (O/RM) from Microsoft. Entity Framework works with many databases. But here, we are going to discuss the step-by-step procedure to create an Entity Framework using the [MS SQL Server](https://en.wikipedia.org/wiki/Microsoft_SQL_Server) database and connect it to the Syncfusion<sup style="font-size:70%">&reg;</sup> component to perform CRUD operations in a Blazor Server Application.
@@ -508,7 +508,7 @@ Themes provide life to components. Syncfusion<sup style="font-size:70%">&reg;</s
 
 In this demo application, the latest theme will be used.
 
-  * For **Blazor Web App**,  refer stylesheet inside the `<head>` of **~/Components/App.razor** file for .NET 9 and .NET 8.
+  * For **Blazor Web App**,  refer stylesheet inside the `<head>` of **~/Components/App.razor** file for .NET 10, .NET 9 and .NET 8.
 
   * For **Blazor WebAssembly application**, refer stylesheet inside the `<head>` element of **wwwroot/index.html** file.
   * For **Blazor Server application**, refer stylesheet inside the `<head>` element of

blazor/common/data-binding/sql-server-data-binding.md

@@ -413,7 +413,7 @@ Themes provide life to components. Syncfusion<sup style="font-size:70%">&reg;</s
 
 In this demo application, the latest theme will be used.
 
-  * For **.NET 8 and .NET 9**  Blazor Web Apps using any render mode (Server, WebAssembly, or Auto),  refer stylesheet inside the `<head>` of **~/Components/App.razor** .
+  * For **.NET 8, .NET 9 and .NET 10** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto),  refer stylesheet inside the `<head>` of **~/Components/App.razor** .
 
   * For **Blazor WebAssembly application**, refer stylesheet inside the `<head>` element of **wwwroot/index.html** file.
 
@@ -456,7 +456,7 @@ If you have set the interactivity location to `Per page/component` in the web ap
 
 ## Binding SQL data to the Blazor DataGrid Component
 
-Now, get the SQL data from the SQL server and bind it to the DataGrid component as a datasource by using the Custom adaptor feature. The Custom Adaptor can be created as a [Component](https://blazor.syncfusion.com/documentation/datagrid/custom-binding#custom-adaptor-as-component). Refer the [Grid Custom Binding](https://blazor.syncfusion.com/documentation/datagrid/custom-binding) and [Custom adaptor as component](https://blazor.syncfusion.com/documentation/datagrid/custom-binding#custom-adaptor-as-component) documentation for more details on the Custom adaptor.
+Now, get the SQL data from the SQL server and bind it to the DataGrid component as a datasource by using the Custom adaptor feature. The Custom Adaptor can be created as a [Component](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor). Refer the [Grid Custom Binding](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor#data-binding) and [Custom adaptor as component](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/custom-adaptor) documentation for more details on the Custom adaptor.
 
 Grid columns can be defined using the [GridColumn](https://blazor.syncfusion.com/documentation/datagrid/columns) component. Create columns using the following code. The properties used and their usage are discussed below.
 

blazor/common/data-binding/webapi-service-binding.md

@@ -19,7 +19,7 @@ To enable the OData query option for Web API, Refer to this [documentation](http
 
 The following software are required:
 * Visual Studio 2022
-* .NET 7.0 or .NET 8.0 or .NET 9.0
+* .NET 7.0 or .NET 8.0 or .NET 9.0 or .NET 10
 
 ## Create the database
 
@@ -218,7 +218,7 @@ namespace WebAPICRUDServerApp
 * Now, open **Program.cs** file and add **AddControllers & MapControllers** method as follows.
 
 {% tabs %}
-{% highlight c# tabtitle=".NET 9 & .NET 8 (~/Program.cs)" %}
+{% highlight c# tabtitle=".NET 10, .NET 9 & .NET 8 (~/Program.cs)" %}
 
 ......
 builder.Services.AddControllers();
@@ -472,7 +472,7 @@ Themes provide life to components. Syncfusion<sup style="font-size:70%">&reg;</s
 
 In this demo application, the latest theme is used.
 
-* For **Blazor Web App**,  refer stylesheet inside the `<head>` of **~/Components/App.razor** file for .NET 9 and .NET 8.
+* For **Blazor Web App**,  refer stylesheet inside the `<head>` of **~/Components/App.razor** file for .NET 10, .NET 9 and .NET 8.
 * For **Blazor WebAssembly application**, refer stylesheet inside the `<head>` element of **wwwroot/index.html** file.
 * For **Blazor Server application**, refer stylesheet inside the `<head>` element of
     * **~/Pages/_Host.cshtml** file for .NET 7.