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/Release-Notes/33.2.5.md b/blazor/Release-Notes/33.2.5.md
new file mode 100644
index 0000000000..782c2578e2
--- /dev/null
+++ b/blazor/Release-Notes/33.2.5.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes - v33.2.5
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v33.2.5
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v33.2.5 Release Notes
+
+{% include release-info.html date="May 05, 2026" version="v33.2.5" passed="94733" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 257 | 257 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 463 | 463 | 0 | All Passed |
+| Appbar | 103 | 103 | 0 | All Passed |
+| Autocomplete | 484 | 484 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 241 | 241 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 177 | 177 | 0 | All Passed |
+| Charts | 6534 | 6534 | 0 | All Passed |
+| ChartWizard | 317 | 317 | 0 | All Passed |
+| ChatUI | 242 | 242 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1015 | 1015 | 0 | All Passed |
+| ColorPicker | 114 | 114 | 0 | All Passed |
+| ComboBox | 620 | 620 | 0 | All Passed |
+| DashboardLayout | 261 | 261 | 0 | All Passed |
+| DataForm | 547 | 547 | 0 | All Passed |
+| DataGrid | 10367 | 10367 | 0 | All Passed |
+| DatePicker | 580 | 580 | 0 | All Passed |
+| DateRangePicker | 368 | 368 | 0 | All Passed |
+| DateTimePicker | 475 | 475 | 0 | All Passed |
+| Diagram | 16994 | 16994 | 0 | All Passed |
+| Dialog | 487 | 487 | 0 | All Passed |
+| DropdownList | 917 | 917 | 0 | All Passed |
+| Dropdowntree | 176 | 176 | 0 | All Passed |
+| FileManager | 3109 | 3109 | 0 | All Passed |
+| FileUpload | 725 | 725 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 8534 | 8534 | 0 | All Passed |
+| HeatMap | 419 | 419 | 0 | All Passed |
+| ImageEditor | 3610 | 3610 | 0 | All Passed |
+| InPlaceEditor | 768 | 768 | 0 | All Passed |
+| InputMask | 172 | 172 | 0 | All Passed |
+| Kanban | 529 | 529 | 0 | All Passed |
+| LinearGauge | 801 | 801 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 442 | 442 | 0 | All Passed |
+| Maps | 1612 | 1612 | 0 | All Passed |
+| Mention | 154 | 154 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 903 | 903 | 0 | All Passed |
+| NumericTextbox | 466 | 466 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1525 | 1525 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 585 | 585 | 0 | All Passed |
+| RangeNavigator | 220 | 220 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 548 | 548 | 0 | All Passed |
+| RichTextEditor | 2972 | 2972 | 0 | All Passed |
+| Scheduler | 6741 | 6741 | 0 | All Passed |
+| Sidebar | 150 | 150 | 0 | All Passed |
+| Slider | 273 | 273 | 0 | All Passed |
+| SmithChart | 260 | 260 | 0 | All Passed |
+| Sparkline | 229 | 229 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 360 | 360 | 0 | All Passed |
+| Tabs | 1084 | 1084 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 684 | 684 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 420 | 420 | 0 | All Passed |
+| Toast | 234 | 234 | 0 | All Passed |
+| Toolbar | 235 | 235 | 0 | All Passed |
+| Tooltip | 107 | 107 | 0 | All Passed |
+| TreeGrid | 8085 | 8085 | 0 | All Passed |
+| TreeMap | 775 | 775 | 0 | All Passed |
+| TreeView | 1366 | 1366 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/33.2.6.md b/blazor/Release-Notes/33.2.6.md
new file mode 100644
index 0000000000..57fc652452
--- /dev/null
+++ b/blazor/Release-Notes/33.2.6.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio for Blazor Release Notes - v33.2.6
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v33.2.6
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v33.2.6 Release Notes
+
+{% include release-info.html date="May 12, 2026" version="v33.2.6" passed="94763" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.6 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 257 | 257 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 463 | 463 | 0 | All Passed |
+| Appbar | 103 | 103 | 0 | All Passed |
+| Autocomplete | 484 | 484 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 241 | 241 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 177 | 177 | 0 | All Passed |
+| Charts | 6544 | 6544 | 0 | All Passed |
+| ChartWizard | 317 | 317 | 0 | All Passed |
+| ChatUI | 243 | 243 | 0 | All Passed |
+| Chips | 214 | 214 | 0 | All Passed |
+| CircularGauge | 1015 | 1015 | 0 | All Passed |
+| ColorPicker | 114 | 114 | 0 | All Passed |
+| ComboBox | 620 | 620 | 0 | All Passed |
+| DashboardLayout | 262 | 262 | 0 | All Passed |
+| DataForm | 548 | 548 | 0 | All Passed |
+| DataGrid | 10367 | 10367 | 0 | All Passed |
+| DatePicker | 580 | 580 | 0 | All Passed |
+| DateRangePicker | 368 | 368 | 0 | All Passed |
+| DateTimePicker | 475 | 475 | 0 | All Passed |
+| Diagram | 16994 | 16994 | 0 | All Passed |
+| Dialog | 487 | 487 | 0 | All Passed |
+| DropdownList | 917 | 917 | 0 | All Passed |
+| Dropdowntree | 176 | 176 | 0 | All Passed |
+| FileManager | 3109 | 3109 | 0 | All Passed |
+| FileUpload | 725 | 725 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 8547 | 8547 | 0 | All Passed |
+| HeatMap | 419 | 419 | 0 | All Passed |
+| ImageEditor | 3610 | 3610 | 0 | All Passed |
+| InPlaceEditor | 768 | 768 | 0 | All Passed |
+| InputMask | 172 | 172 | 0 | All Passed |
+| Kanban | 529 | 529 | 0 | All Passed |
+| LinearGauge | 801 | 801 | 0 | All Passed |
+| ListBox | 139 | 139 | 0 | All Passed |
+| ListView | 442 | 442 | 0 | All Passed |
+| Maps | 1612 | 1612 | 0 | All Passed |
+| Mention | 154 | 154 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 903 | 903 | 0 | All Passed |
+| NumericTextbox | 467 | 467 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1525 | 1525 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 585 | 585 | 0 | All Passed |
+| RangeNavigator | 220 | 220 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 548 | 548 | 0 | All Passed |
+| RichTextEditor | 2972 | 2972 | 0 | All Passed |
+| Scheduler | 6741 | 6741 | 0 | All Passed |
+| Sidebar | 150 | 150 | 0 | All Passed |
+| Slider | 273 | 273 | 0 | All Passed |
+| SmithChart | 260 | 260 | 0 | All Passed |
+| Sparkline | 229 | 229 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 360 | 360 | 0 | All Passed |
+| Tabs | 1085 | 1085 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 685 | 685 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 420 | 420 | 0 | All Passed |
+| Toast | 234 | 234 | 0 | All Passed |
+| Toolbar | 235 | 235 | 0 | All Passed |
+| Tooltip | 107 | 107 | 0 | All Passed |
+| TreeGrid | 8085 | 8085 | 0 | All Passed |
+| TreeMap | 775 | 775 | 0 | All Passed |
+| TreeView | 1366 | 1366 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/accordion/animations.md b/blazor/accordion/animations.md
index 4ece2a4f96..bc51d4a5e4 100644
--- a/blazor/accordion/animations.md
+++ b/blazor/accordion/animations.md
@@ -91,4 +91,4 @@ The following example demonstrates various animation types that can be applied t
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customize Accordion expand or collapse animation behavior](./images/blazor-accordion-animation.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customize Accordion expand or collapse animation behavior](./images/blazor-accordion-animation.webp)" %}
diff --git a/blazor/accordion/data-binding.md b/blazor/accordion/data-binding.md
index dafed21659..a41004cd2c 100644
--- a/blazor/accordion/data-binding.md
+++ b/blazor/accordion/data-binding.md
@@ -74,4 +74,4 @@ The following example demonstrates how to initialize accordion items using `temp
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Data Binding](./images/blazor-accordion-data-binding.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Data Binding](./images/blazor-accordion-data-binding.webp)" %}
\ No newline at end of file
diff --git a/blazor/accordion/expand-mode.md b/blazor/accordion/expand-mode.md
index a59bb95059..e5313b442e 100644
--- a/blazor/accordion/expand-mode.md
+++ b/blazor/accordion/expand-mode.md
@@ -31,7 +31,7 @@ The property enables to expand only one Accordion item at a time. If you expand
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Single Expand Mode](./images/blazor-accordion-single-expand-mode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Single Expand Mode](./images/blazor-accordion-single-expand-mode.webp)" %}
## Multiple
@@ -54,7 +54,7 @@ The default [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Multiple Expand Mode](./images/blazor-accordion-multiple-expand-mode.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Multiple Expand Mode](./images/blazor-accordion-multiple-expand-mode.webp)" %}
## Expanding the items
@@ -121,4 +121,4 @@ By default, accordion items were in collapsed state on initial load. To expand a
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Expanding Items](./images/blazor-accordion-expand-items.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Expanding Items](./images/blazor-accordion-expand-items.webp)" %}
\ No newline at end of file
diff --git a/blazor/accordion/how-to/add-icon-to-accordion-header.md b/blazor/accordion/how-to/add-icon-to-accordion-header.md
index ebe41f66f9..d141b94318 100644
--- a/blazor/accordion/how-to/add-icon-to-accordion-header.md
+++ b/blazor/accordion/how-to/add-icon-to-accordion-header.md
@@ -195,4 +195,4 @@ You can add custom icons to the Accordion header by using the [IconCss](https://
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Header Icon](../images/blazor-accordion-header-icon.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Header Icon](../images/blazor-accordion-header-icon.webp)" %}
diff --git a/blazor/accordion/how-to/add-nested-accordion.md b/blazor/accordion/how-to/add-nested-accordion.md
index 3e3af3697b..269c4e7125 100644
--- a/blazor/accordion/how-to/add-nested-accordion.md
+++ b/blazor/accordion/how-to/add-nested-accordion.md
@@ -60,4 +60,4 @@ The Accordion component supports to render the nested level of Accordion by usin
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Nested Item](../images/blazor-accordion-with-nested-item.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Nested Item](../images/blazor-accordion-with-nested-item.webp)" %}
diff --git a/blazor/accordion/how-to/add-remove-accordion-items.md b/blazor/accordion/how-to/add-remove-accordion-items.md
index 8c07e7f0f7..dcfafb6e43 100644
--- a/blazor/accordion/how-to/add-remove-accordion-items.md
+++ b/blazor/accordion/how-to/add-remove-accordion-items.md
@@ -85,4 +85,4 @@ In the following example, the Accordion initially contains three accordion items
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing items in Blazor Accordion](../images/blazor-accordion-add-remove-item.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing items in Blazor Accordion](../images/blazor-accordion-add-remove-item.webp)" %}
diff --git a/blazor/accordion/how-to/enable-disable-accordion-item.md b/blazor/accordion/how-to/enable-disable-accordion-item.md
index ddc5cb4498..7727d60ece 100644
--- a/blazor/accordion/how-to/enable-disable-accordion-item.md
+++ b/blazor/accordion/how-to/enable-disable-accordion-item.md
@@ -37,4 +37,4 @@ In the following example, the first accordion item is enabled or disabled dynami
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Item in Blazor Accordion](../images/blazor-accordion-enable-disable-item.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Item in Blazor Accordion](../images/blazor-accordion-enable-disable-item.webp)" %}
diff --git a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
index 26dc117b64..6920579615 100644
--- a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
+++ b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
@@ -181,4 +181,4 @@ The following example shows how to render a TreeView within the Accordion.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Treeview Integration in Blazor Accordion](../images/blazor-accordion-treeview-integration.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Treeview Integration in Blazor Accordion](../images/blazor-accordion-treeview-integration.webp)" %}
diff --git a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
index 58cfd01755..e15e5f5a72 100644
--- a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
+++ b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
@@ -117,4 +117,4 @@ The following code example demonstrates how to prevent expand and collapse actio
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expanding or Collapsing Item in Blazor Accordion](../images/blazor-accordion-prevent-expand-collapse.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expanding or Collapsing Item in Blazor Accordion](../images/blazor-accordion-prevent-expand-collapse.webp)" %}
diff --git a/blazor/accordion/how-to/show-hide-accordion-item.md b/blazor/accordion/how-to/show-hide-accordion-item.md
index 8f41419f60..1ca5f32372 100644
--- a/blazor/accordion/how-to/show-hide-accordion-item.md
+++ b/blazor/accordion/how-to/show-hide-accordion-item.md
@@ -138,4 +138,4 @@ In the following example, the specified accordion item will toggle between showi
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding or showing items in Blazor Accordion](../images/blazor-accordion-show-hide-item.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding or showing items in Blazor Accordion](../images/blazor-accordion-show-hide-item.webp)" %}
diff --git a/blazor/accordion/images/Blazor-server-app-creation.png b/blazor/accordion/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/accordion/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/accordion/images/Blazor-server-app-creation.webp b/blazor/accordion/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/accordion/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/accordion/images/acrdnDatasource.png b/blazor/accordion/images/acrdnDatasource.png
deleted file mode 100644
index 5abb97d2bf..0000000000
Binary files a/blazor/accordion/images/acrdnDatasource.png and /dev/null differ
diff --git a/blazor/accordion/images/acrdnDatasource.webp b/blazor/accordion/images/acrdnDatasource.webp
new file mode 100644
index 0000000000..02a323c878
Binary files /dev/null and b/blazor/accordion/images/acrdnDatasource.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-add-remove-item.gif b/blazor/accordion/images/blazor-accordion-add-remove-item.gif
deleted file mode 100644
index e734b5f94f..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-add-remove-item.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-add-remove-item.webp b/blazor/accordion/images/blazor-accordion-add-remove-item.webp
new file mode 100644
index 0000000000..514ac31ea9
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-add-remove-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-animation.gif b/blazor/accordion/images/blazor-accordion-animation.gif
deleted file mode 100644
index b799fec6ec..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-animation.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-animation.webp b/blazor/accordion/images/blazor-accordion-animation.webp
new file mode 100644
index 0000000000..50786ce94c
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-animation.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-border-style.png b/blazor/accordion/images/blazor-accordion-border-style.png
deleted file mode 100644
index b50b3ec07a..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-border-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-border-style.webp b/blazor/accordion/images/blazor-accordion-border-style.webp
new file mode 100644
index 0000000000..01d6b30738
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-border-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-component.png b/blazor/accordion/images/blazor-accordion-component.png
deleted file mode 100644
index 92938da44c..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-component.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-component.webp b/blazor/accordion/images/blazor-accordion-component.webp
new file mode 100644
index 0000000000..02418e9528
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-component.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-data-binding.png b/blazor/accordion/images/blazor-accordion-data-binding.png
deleted file mode 100644
index a80eeb096c..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-data-binding.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-data-binding.webp b/blazor/accordion/images/blazor-accordion-data-binding.webp
new file mode 100644
index 0000000000..668ec74a9d
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-data-binding.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-enable-disable-item.gif b/blazor/accordion/images/blazor-accordion-enable-disable-item.gif
deleted file mode 100644
index 7bb11c2406..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-enable-disable-item.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-enable-disable-item.webp b/blazor/accordion/images/blazor-accordion-enable-disable-item.webp
new file mode 100644
index 0000000000..af0e175e8b
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-enable-disable-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.png b/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.png
deleted file mode 100644
index 79229aae19..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.webp b/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.webp
new file mode 100644
index 0000000000..f701a45313
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-expand-collapse-icon-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-items.png b/blazor/accordion/images/blazor-accordion-expand-items.png
deleted file mode 100644
index 3c5ffac10a..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-expand-items.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-expand-items.webp b/blazor/accordion/images/blazor-accordion-expand-items.webp
new file mode 100644
index 0000000000..b8972199eb
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-expand-items.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-header-content-style.png b/blazor/accordion/images/blazor-accordion-header-content-style.png
deleted file mode 100644
index 9c0c36d5f1..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-header-content-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-header-content-style.webp b/blazor/accordion/images/blazor-accordion-header-content-style.webp
new file mode 100644
index 0000000000..a2622e867d
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-header-content-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-header-icon.PNG b/blazor/accordion/images/blazor-accordion-header-icon.PNG
deleted file mode 100644
index b604bd76ba..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-header-icon.PNG and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-header-icon.webp b/blazor/accordion/images/blazor-accordion-header-icon.webp
new file mode 100644
index 0000000000..d5879140c5
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-header-icon.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-header-template.png b/blazor/accordion/images/blazor-accordion-header-template.png
deleted file mode 100644
index 8b10c96932..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-header-template.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-header-template.webp b/blazor/accordion/images/blazor-accordion-header-template.webp
new file mode 100644
index 0000000000..d6399843a3
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-header-template.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-item-cssclass-style.png b/blazor/accordion/images/blazor-accordion-item-cssclass-style.png
deleted file mode 100644
index 5c5ac9cd00..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-item-cssclass-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-item-cssclass-style.webp b/blazor/accordion/images/blazor-accordion-item-cssclass-style.webp
new file mode 100644
index 0000000000..dc1c8b2f80
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-item-cssclass-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-item-styles.png b/blazor/accordion/images/blazor-accordion-item-styles.png
deleted file mode 100644
index 1f8700e06d..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-item-styles.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-item-styles.webp b/blazor/accordion/images/blazor-accordion-item-styles.webp
new file mode 100644
index 0000000000..1442e75034
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-item-styles.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-multiple-expand-mode.png b/blazor/accordion/images/blazor-accordion-multiple-expand-mode.png
deleted file mode 100644
index a230b3c8ac..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-multiple-expand-mode.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-multiple-expand-mode.webp b/blazor/accordion/images/blazor-accordion-multiple-expand-mode.webp
new file mode 100644
index 0000000000..9c4b3dd66f
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-multiple-expand-mode.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.gif b/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.gif
deleted file mode 100644
index c33f74dd81..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.webp b/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.webp
new file mode 100644
index 0000000000..96e88d3278
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-prevent-expand-collapse.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-style.png b/blazor/accordion/images/blazor-accordion-selected-item-style.png
deleted file mode 100644
index d3dfb4cfec..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-selected-item-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-style.webp b/blazor/accordion/images/blazor-accordion-selected-item-style.webp
new file mode 100644
index 0000000000..5944852513
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-selected-item-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-text-style.png b/blazor/accordion/images/blazor-accordion-selected-item-text-style.png
deleted file mode 100644
index 12d44be192..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-selected-item-text-style.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-selected-item-text-style.webp b/blazor/accordion/images/blazor-accordion-selected-item-text-style.webp
new file mode 100644
index 0000000000..8a4aafcb96
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-selected-item-text-style.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-show-hide-item.gif b/blazor/accordion/images/blazor-accordion-show-hide-item.gif
deleted file mode 100644
index 8ba1180d70..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-show-hide-item.gif and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-show-hide-item.webp b/blazor/accordion/images/blazor-accordion-show-hide-item.webp
new file mode 100644
index 0000000000..cbab8040b7
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-show-hide-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-single-expand-mode.png b/blazor/accordion/images/blazor-accordion-single-expand-mode.png
deleted file mode 100644
index d0226fb4cf..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-single-expand-mode.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-single-expand-mode.webp b/blazor/accordion/images/blazor-accordion-single-expand-mode.webp
new file mode 100644
index 0000000000..7ed3f7d966
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-single-expand-mode.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-treeview-integration.png b/blazor/accordion/images/blazor-accordion-treeview-integration.png
deleted file mode 100644
index c427cd945e..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-treeview-integration.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-treeview-integration.webp b/blazor/accordion/images/blazor-accordion-treeview-integration.webp
new file mode 100644
index 0000000000..14d4d58794
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-treeview-integration.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-with-nested-item.PNG b/blazor/accordion/images/blazor-accordion-with-nested-item.PNG
deleted file mode 100644
index 97f18e74cf..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-with-nested-item.PNG and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-with-nested-item.webp b/blazor/accordion/images/blazor-accordion-with-nested-item.webp
new file mode 100644
index 0000000000..323478045a
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-with-nested-item.webp differ
diff --git a/blazor/accordion/images/blazor-accordion-wizard.png b/blazor/accordion/images/blazor-accordion-wizard.png
deleted file mode 100644
index fbcc510976..0000000000
Binary files a/blazor/accordion/images/blazor-accordion-wizard.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-accordion-wizard.webp b/blazor/accordion/images/blazor-accordion-wizard.webp
new file mode 100644
index 0000000000..799eabbe9c
Binary files /dev/null and b/blazor/accordion/images/blazor-accordion-wizard.webp differ
diff --git a/blazor/accordion/images/blazor-app-interactive-mode.png b/blazor/accordion/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/accordion/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-app-interactive-mode.webp b/blazor/accordion/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/accordion/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/accordion/images/blazor-create-web-app.png b/blazor/accordion/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/accordion/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-create-web-app.webp b/blazor/accordion/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/accordion/images/blazor-create-web-app.webp differ
diff --git a/blazor/accordion/images/blazor-wasm-app-template.png b/blazor/accordion/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/accordion/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/accordion/images/blazor-wasm-app-template.webp b/blazor/accordion/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/accordion/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/accordion/images/contenttemplate.png b/blazor/accordion/images/contenttemplate.png
deleted file mode 100644
index 43036f6849..0000000000
Binary files a/blazor/accordion/images/contenttemplate.png and /dev/null differ
diff --git a/blazor/accordion/images/contenttemplate.webp b/blazor/accordion/images/contenttemplate.webp
new file mode 100644
index 0000000000..d5ada0fa9f
Binary files /dev/null and b/blazor/accordion/images/contenttemplate.webp differ
diff --git a/blazor/accordion/images/core.png b/blazor/accordion/images/core.png
deleted file mode 100644
index 9de6c37e94..0000000000
Binary files a/blazor/accordion/images/core.png and /dev/null differ
diff --git a/blazor/accordion/images/core.webp b/blazor/accordion/images/core.webp
new file mode 100644
index 0000000000..07d01112ab
Binary files /dev/null and b/blazor/accordion/images/core.webp differ
diff --git a/blazor/accordion/images/dynamicAccordion.png b/blazor/accordion/images/dynamicAccordion.png
deleted file mode 100644
index ac0e1dcb2c..0000000000
Binary files a/blazor/accordion/images/dynamicAccordion.png and /dev/null differ
diff --git a/blazor/accordion/images/dynamicAccordion.webp b/blazor/accordion/images/dynamicAccordion.webp
new file mode 100644
index 0000000000..521fc62231
Binary files /dev/null and b/blazor/accordion/images/dynamicAccordion.webp differ
diff --git a/blazor/accordion/images/enableDisableItem.png b/blazor/accordion/images/enableDisableItem.png
deleted file mode 100644
index d07d3f3bad..0000000000
Binary files a/blazor/accordion/images/enableDisableItem.png and /dev/null differ
diff --git a/blazor/accordion/images/enableDisableItem.webp b/blazor/accordion/images/enableDisableItem.webp
new file mode 100644
index 0000000000..3494d5f980
Binary files /dev/null and b/blazor/accordion/images/enableDisableItem.webp differ
diff --git a/blazor/accordion/images/mvc.png b/blazor/accordion/images/mvc.png
deleted file mode 100644
index e54e1061bf..0000000000
Binary files a/blazor/accordion/images/mvc.png and /dev/null differ
diff --git a/blazor/accordion/images/mvc.webp b/blazor/accordion/images/mvc.webp
new file mode 100644
index 0000000000..08031a696f
Binary files /dev/null and b/blazor/accordion/images/mvc.webp differ
diff --git a/blazor/accordion/style.md b/blazor/accordion/style.md
index 934759f0ea..85aeb53ac0 100644
--- a/blazor/accordion/style.md
+++ b/blazor/accordion/style.md
@@ -23,7 +23,7 @@ Use the following CSS to customize the [Accordion](https://help.syncfusion.com/c
```
-
+
## Customizing the accordion items
@@ -38,7 +38,7 @@ Use the following CSS to customize the items of Accordion.
```
-
+
## Customizing accordion item header content
@@ -53,7 +53,7 @@ Use the following CSS to customize the header content of Accordion control.
```
-
+
## Customizing accordion expand and collapse icons
@@ -67,7 +67,7 @@ The following CSS can be viewed to customize the expand and collapse icons of th
```
-
+
## Customizing the hover state of accordion
@@ -96,7 +96,7 @@ Use the following CSS to customize the selected accordion item and focus state.
```
-
+
Use the following CSS to customize the selected accordion item text.
@@ -110,7 +110,7 @@ Use the following CSS to customize the selected accordion item text.
```
-
+
## Customize each accordion item header
@@ -144,4 +144,4 @@ You can customize each accordion item header by setting [AccordionItem.CssClass]
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Accordion Item Header Appearance Customization](./images/blazor-accordion-item-cssclass-style.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Accordion Item Header Appearance Customization](./images/blazor-accordion-item-cssclass-style.webp)" %}
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/appbar/design.md b/blazor/appbar/design.md
index 18a3f1f828..3b0be59b9b 100644
--- a/blazor/appbar/design.md
+++ b/blazor/appbar/design.md
@@ -30,7 +30,7 @@ The following example depicts the code to provide spacing between the home and p
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.webp)" %}
## Separator
@@ -65,7 +65,7 @@ The following example depicts the code to provide a vertical line between a grou
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Separator.](./images/blazor-appbar-separator.webp)" %}
## Media Query
@@ -111,7 +111,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.webp)" %}
## Designing AppBar with Menu
**SfMenu** component can be rendered as a child content of AppBar. You can inherit the AppBar component styles by setting CSS class as `e-inherit` to SfMenu component.
@@ -169,7 +169,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Menu.](./images/blazor-appbar-menu.webp)" %}
## Designing AppBar with Buttons
@@ -204,7 +204,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.webp)" %}
## Designing AppBar with SideBar
@@ -364,4 +364,4 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.webp)" %}
\ No newline at end of file
diff --git a/blazor/appbar/images/Blazor-server-app-creation.png b/blazor/appbar/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/appbar/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/appbar/images/Blazor-server-app-creation.webp b/blazor/appbar/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/appbar/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/appbar/images/blazor-app-interactive-mode.png b/blazor/appbar/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/appbar/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-app-interactive-mode.webp b/blazor/appbar/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/appbar/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-buttons.png b/blazor/appbar/images/blazor-appbar-buttons.png
deleted file mode 100644
index e48ea873fa..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-buttons.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-buttons.webp b/blazor/appbar/images/blazor-appbar-buttons.webp
new file mode 100644
index 0000000000..c71f854779
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-buttons.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-media-quary.png b/blazor/appbar/images/blazor-appbar-media-quary.png
deleted file mode 100644
index 6426293bad..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-media-quary.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-media-quary.webp b/blazor/appbar/images/blazor-appbar-media-quary.webp
new file mode 100644
index 0000000000..9a0481e289
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-media-quary.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-menu.png b/blazor/appbar/images/blazor-appbar-menu.png
deleted file mode 100644
index fd036d6732..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-menu.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-menu.webp b/blazor/appbar/images/blazor-appbar-menu.webp
new file mode 100644
index 0000000000..6dbb2670df
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-menu.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-separator.png b/blazor/appbar/images/blazor-appbar-separator.png
deleted file mode 100644
index a591ccdcce..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-separator.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-separator.webp b/blazor/appbar/images/blazor-appbar-separator.webp
new file mode 100644
index 0000000000..7ecccec0e3
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-separator.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-sidebar.png b/blazor/appbar/images/blazor-appbar-sidebar.png
deleted file mode 100644
index 9961738ebd..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-sidebar.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-sidebar.webp b/blazor/appbar/images/blazor-appbar-sidebar.webp
new file mode 100644
index 0000000000..fb54238594
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-sidebar.webp differ
diff --git a/blazor/appbar/images/blazor-appbar-spacer.png b/blazor/appbar/images/blazor-appbar-spacer.png
deleted file mode 100644
index fbd17cbea8..0000000000
Binary files a/blazor/appbar/images/blazor-appbar-spacer.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-appbar-spacer.webp b/blazor/appbar/images/blazor-appbar-spacer.webp
new file mode 100644
index 0000000000..868e2c8c4d
Binary files /dev/null and b/blazor/appbar/images/blazor-appbar-spacer.webp differ
diff --git a/blazor/appbar/images/blazor-create-web-app.png b/blazor/appbar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/appbar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-create-web-app.webp b/blazor/appbar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/appbar/images/blazor-create-web-app.webp differ
diff --git a/blazor/appbar/images/blazor-wasm-app-template.png b/blazor/appbar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/appbar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/appbar/images/blazor-wasm-app-template.webp b/blazor/appbar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/appbar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/appbar/images/bottom_appbar.webp b/blazor/appbar/images/bottom_appbar.webp
new file mode 100644
index 0000000000..c71f854779
Binary files /dev/null and b/blazor/appbar/images/bottom_appbar.webp differ
diff --git a/blazor/appbar/images/buttons_appbar.png b/blazor/appbar/images/buttons_appbar.png
deleted file mode 100644
index d0f9d28257..0000000000
Binary files a/blazor/appbar/images/buttons_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/buttons_appbar.webp b/blazor/appbar/images/buttons_appbar.webp
new file mode 100644
index 0000000000..d92040df30
Binary files /dev/null and b/blazor/appbar/images/buttons_appbar.webp differ
diff --git a/blazor/appbar/images/cssclass_appbar.png b/blazor/appbar/images/cssclass_appbar.png
deleted file mode 100644
index b1a27fa515..0000000000
Binary files a/blazor/appbar/images/cssclass_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/cssclass_appbar.webp b/blazor/appbar/images/cssclass_appbar.webp
new file mode 100644
index 0000000000..ed6d61cf30
Binary files /dev/null and b/blazor/appbar/images/cssclass_appbar.webp differ
diff --git a/blazor/appbar/images/dark_appbar.png b/blazor/appbar/images/dark_appbar.png
deleted file mode 100644
index 954b72ca2d..0000000000
Binary files a/blazor/appbar/images/dark_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/dark_appbar.webp b/blazor/appbar/images/dark_appbar.webp
new file mode 100644
index 0000000000..4f014c5887
Binary files /dev/null and b/blazor/appbar/images/dark_appbar.webp differ
diff --git a/blazor/appbar/images/dense_appbar.png b/blazor/appbar/images/dense_appbar.png
deleted file mode 100644
index 0a8900ebb2..0000000000
Binary files a/blazor/appbar/images/dense_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/dense_appbar.webp b/blazor/appbar/images/dense_appbar.webp
new file mode 100644
index 0000000000..31882dfabc
Binary files /dev/null and b/blazor/appbar/images/dense_appbar.webp differ
diff --git a/blazor/appbar/images/getting_started.png b/blazor/appbar/images/getting_started.png
deleted file mode 100644
index cdf0707f7c..0000000000
Binary files a/blazor/appbar/images/getting_started.png and /dev/null differ
diff --git a/blazor/appbar/images/getting_started.webp b/blazor/appbar/images/getting_started.webp
new file mode 100644
index 0000000000..287b3f8d99
Binary files /dev/null and b/blazor/appbar/images/getting_started.webp differ
diff --git a/blazor/appbar/images/inherit_appbar.png b/blazor/appbar/images/inherit_appbar.png
deleted file mode 100644
index db79f53403..0000000000
Binary files a/blazor/appbar/images/inherit_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/inherit_appbar.webp b/blazor/appbar/images/inherit_appbar.webp
new file mode 100644
index 0000000000..65c794a445
Binary files /dev/null and b/blazor/appbar/images/inherit_appbar.webp differ
diff --git a/blazor/appbar/images/light_appbar.png b/blazor/appbar/images/light_appbar.png
deleted file mode 100644
index 2c35e62bf5..0000000000
Binary files a/blazor/appbar/images/light_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/light_appbar.webp b/blazor/appbar/images/light_appbar.webp
new file mode 100644
index 0000000000..2b16ed3731
Binary files /dev/null and b/blazor/appbar/images/light_appbar.webp differ
diff --git a/blazor/appbar/images/primary_appbar.png b/blazor/appbar/images/primary_appbar.png
deleted file mode 100644
index 0690315a3a..0000000000
Binary files a/blazor/appbar/images/primary_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/primary_appbar.webp b/blazor/appbar/images/primary_appbar.webp
new file mode 100644
index 0000000000..fc408a025d
Binary files /dev/null and b/blazor/appbar/images/primary_appbar.webp differ
diff --git a/blazor/appbar/images/prominent_appbar.png b/blazor/appbar/images/prominent_appbar.png
deleted file mode 100644
index 812e064d94..0000000000
Binary files a/blazor/appbar/images/prominent_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/prominent_appbar.webp b/blazor/appbar/images/prominent_appbar.webp
new file mode 100644
index 0000000000..f6f810d5e1
Binary files /dev/null and b/blazor/appbar/images/prominent_appbar.webp differ
diff --git a/blazor/appbar/images/regular_appbar.png b/blazor/appbar/images/regular_appbar.png
deleted file mode 100644
index aff27c1d57..0000000000
Binary files a/blazor/appbar/images/regular_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/regular_appbar.webp b/blazor/appbar/images/regular_appbar.webp
new file mode 100644
index 0000000000..6d459af97b
Binary files /dev/null and b/blazor/appbar/images/regular_appbar.webp differ
diff --git a/blazor/appbar/images/sticky_appbar.png b/blazor/appbar/images/sticky_appbar.png
deleted file mode 100644
index cfe46e9273..0000000000
Binary files a/blazor/appbar/images/sticky_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/sticky_appbar.webp b/blazor/appbar/images/sticky_appbar.webp
new file mode 100644
index 0000000000..711b1fc1d5
Binary files /dev/null and b/blazor/appbar/images/sticky_appbar.webp differ
diff --git a/blazor/appbar/images/top_appbar.png b/blazor/appbar/images/top_appbar.png
deleted file mode 100644
index 3277f81821..0000000000
Binary files a/blazor/appbar/images/top_appbar.png and /dev/null differ
diff --git a/blazor/appbar/images/top_appbar.webp b/blazor/appbar/images/top_appbar.webp
new file mode 100644
index 0000000000..b4c51f64dd
Binary files /dev/null and b/blazor/appbar/images/top_appbar.webp differ
diff --git a/blazor/appbar/position.md b/blazor/appbar/position.md
index 9c41588da4..13e7ccb22a 100644
--- a/blazor/appbar/position.md
+++ b/blazor/appbar/position.md
@@ -58,7 +58,7 @@ The top AppBar is the default one in which it positions the AppBar at the top of
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Top Position](./images/top_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Top Position](./images/top_appbar.webp)" %}
### Bottom AppBar
@@ -103,7 +103,7 @@ This position can be set to the AppBar by setting `AppBarPosition.Bottom` to the
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Bottom Position](./images/bottom_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Bottom Position](./images/bottom_appbar.webp)" %}
### Sticky AppBar
@@ -148,4 +148,4 @@ This position can be set to the AppBar by setting `true` to the property [IsStic
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Sticky Position](./images/sticky_appbar.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Sticky Position](./images/sticky_appbar.webp)" %}
\ No newline at end of file
diff --git a/blazor/appbar/size-and-color.md b/blazor/appbar/size-and-color.md
index e8e460ba0b..b7cde81c2c 100644
--- a/blazor/appbar/size-and-color.md
+++ b/blazor/appbar/size-and-color.md
@@ -41,7 +41,7 @@ This mode is the default one in which the AppBar is displayed with the default h
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Regular Size](./images/regular_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Regular Size](./images/regular_appbar.webp)" %}
### Prominent AppBar
@@ -91,7 +91,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Prominent` to t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Prominent Size](./images/prominent_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Prominent Size](./images/prominent_appbar.webp)" %}
### Dense AppBar
@@ -117,7 +117,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Dense` to the p
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dense Size](./images/dense_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dense Size](./images/dense_appbar.webp)" %}
## Color
@@ -157,7 +157,7 @@ This color mode is the default one in which the AppBar can be displayed with a l
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Light Color](./images/light_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Light Color](./images/light_appbar.webp)" %}
### Dark AppBar
@@ -187,7 +187,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Dark` to the pr
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dark Color](./images/dark_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dark Color](./images/dark_appbar.webp)" %}
### Primary AppBar
@@ -217,7 +217,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Primary` to the
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Primary Color](./images/primary_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Primary Color](./images/primary_appbar.webp)" %}
### Inherit AppBar
@@ -248,4 +248,4 @@ This color mode can be set to the AppBar by setting `AppBarColor.Inherit` to the
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Inherit Color](./images/inherit_appbar.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Inherit Color](./images/inherit_appbar.webp)" %}
\ No newline at end of file
diff --git a/blazor/appbar/style-and-appearance.md b/blazor/appbar/style-and-appearance.md
index b8c95eba84..f264f6d7ed 100644
--- a/blazor/appbar/style-and-appearance.md
+++ b/blazor/appbar/style-and-appearance.md
@@ -45,7 +45,7 @@ CssClass is used for AppBar customization based on the custom class. In the exam
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with CssClass customization](./images/cssclass_appbar.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with CssClass customization](./images/cssclass_appbar.webp)" %}
## HtmlAttributes
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/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md
index 348502f159..f839f8cc35 100644
--- a/blazor/avatar/getting-started-with-web-app.md
+++ b/blazor/avatar/getting-started-with-web-app.md
@@ -150,6 +150,6 @@ Add the Syncfusion® Blazor Avatar component
* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in the default web browser.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Avatar)
\ No newline at end of file
diff --git a/blazor/avatar/getting-started.md b/blazor/avatar/getting-started.md
index a0b6bff5a7..f8e0d604e4 100644
--- a/blazor/avatar/getting-started.md
+++ b/blazor/avatar/getting-started.md
@@ -144,4 +144,4 @@ Add the Syncfusion® Blazor Avatar component
* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in the default web browser.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %}
diff --git a/blazor/avatar/images/blazor-avatar-component.png b/blazor/avatar/images/blazor-avatar-component.png
deleted file mode 100644
index 7ce7ad0165..0000000000
Binary files a/blazor/avatar/images/blazor-avatar-component.png and /dev/null differ
diff --git a/blazor/avatar/images/blazor-avatar-component.webp b/blazor/avatar/images/blazor-avatar-component.webp
new file mode 100644
index 0000000000..e31377d5f9
Binary files /dev/null and b/blazor/avatar/images/blazor-avatar-component.webp differ
diff --git a/blazor/avatar/images/blazor-create-web-app.png b/blazor/avatar/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/avatar/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/avatar/images/blazor-create-web-app.webp b/blazor/avatar/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/avatar/images/blazor-create-web-app.webp differ
diff --git a/blazor/avatar/images/blazor-wasm-app-template.png b/blazor/avatar/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/avatar/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/avatar/images/blazor-wasm-app-template.webp b/blazor/avatar/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/avatar/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/avatar/images/frame-work.png b/blazor/avatar/images/frame-work.png
deleted file mode 100644
index ec159d1745..0000000000
Binary files a/blazor/avatar/images/frame-work.png and /dev/null differ
diff --git a/blazor/avatar/images/frame-work.webp b/blazor/avatar/images/frame-work.webp
new file mode 100644
index 0000000000..c446a997e0
Binary files /dev/null and b/blazor/avatar/images/frame-work.webp differ
diff --git a/blazor/avatar/images/import-cdn.png b/blazor/avatar/images/import-cdn.png
deleted file mode 100644
index af6fd26e10..0000000000
Binary files a/blazor/avatar/images/import-cdn.png and /dev/null differ
diff --git a/blazor/avatar/images/import-cdn.webp b/blazor/avatar/images/import-cdn.webp
new file mode 100644
index 0000000000..34a36d7e54
Binary files /dev/null and b/blazor/avatar/images/import-cdn.webp differ
diff --git a/blazor/avatar/images/new-project.png b/blazor/avatar/images/new-project.png
deleted file mode 100644
index 057f6b0f7c..0000000000
Binary files a/blazor/avatar/images/new-project.png and /dev/null differ
diff --git a/blazor/avatar/images/new-project.webp b/blazor/avatar/images/new-project.webp
new file mode 100644
index 0000000000..6ac8098d50
Binary files /dev/null and b/blazor/avatar/images/new-project.webp differ
diff --git a/blazor/avatar/images/nuget-explorer.png b/blazor/avatar/images/nuget-explorer.png
deleted file mode 100644
index f9306f219e..0000000000
Binary files a/blazor/avatar/images/nuget-explorer.png and /dev/null differ
diff --git a/blazor/avatar/images/nuget-explorer.webp b/blazor/avatar/images/nuget-explorer.webp
new file mode 100644
index 0000000000..4353f9ac92
Binary files /dev/null and b/blazor/avatar/images/nuget-explorer.webp differ
diff --git a/blazor/avatar/images/select-nuget.png b/blazor/avatar/images/select-nuget.png
deleted file mode 100644
index cf019504c0..0000000000
Binary files a/blazor/avatar/images/select-nuget.png and /dev/null differ
diff --git a/blazor/avatar/images/select-nuget.webp b/blazor/avatar/images/select-nuget.webp
new file mode 100644
index 0000000000..8b2ec78c5f
Binary files /dev/null and b/blazor/avatar/images/select-nuget.webp differ
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/breadcrumb/breadcrumb-items.md b/blazor/breadcrumb/breadcrumb-items.md
index 6db36308f9..8fdb269872 100644
--- a/blazor/breadcrumb/breadcrumb-items.md
+++ b/blazor/breadcrumb/breadcrumb-items.md
@@ -31,7 +31,7 @@ The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-brea
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.webp)" %}
## Items based on current URL
@@ -42,7 +42,7 @@ The Breadcrumb items can be generated based on the current URL of the page when
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.webp)" %}
N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion.com/demos/breadcrumb/bind-to-location) sample.
@@ -56,7 +56,7 @@ You can generate the Breadcrumb items by providing the [Url](https://help.syncfu
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.webp)" %}
## Add or remove the Breadcrumb items
diff --git a/blazor/breadcrumb/getting-started-with-server-app.md b/blazor/breadcrumb/getting-started-with-server-app.md
index cc20b159e2..9f21e38b82 100644
--- a/blazor/breadcrumb/getting-started-with-server-app.md
+++ b/blazor/breadcrumb/getting-started-with-server-app.md
@@ -194,7 +194,7 @@ To render Breadcrumb component with items use [BreadcrumbItem](https://help.sync
N> Place list of [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) within [BreadcrumbItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItems.html) tag directive.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
## Enable or disable navigation
diff --git a/blazor/breadcrumb/getting-started-with-web-app.md b/blazor/breadcrumb/getting-started-with-web-app.md
index 86a53786cc..9d6e504e8f 100644
--- a/blazor/breadcrumb/getting-started-with-web-app.md
+++ b/blazor/breadcrumb/getting-started-with-web-app.md
@@ -200,7 +200,7 @@ To render Breadcrumb component with items use [BreadcrumbItem](https://help.sync
N> Place list of [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) within [BreadcrumbItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItems.html) tag directive.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
## Enable or disable navigation
diff --git a/blazor/breadcrumb/getting-started.md b/blazor/breadcrumb/getting-started.md
index 03335f38f2..cf45afde15 100644
--- a/blazor/breadcrumb/getting-started.md
+++ b/blazor/breadcrumb/getting-started.md
@@ -154,7 +154,7 @@ Add the Syncfusion® Blazor Breadcrumb compo
* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Breadcrumb component in the default web browser.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.webp)" %}
N> The Breadcrumb component will render based on the current URL, when the Breadcrumb items are not specified.
@@ -181,7 +181,7 @@ To render Breadcrumb component with items use [BreadcrumbItem](https://help.sync
N> Place list of [BreadcrumbItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItem.html) within [BreadcrumbItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbItems.html) tag directive.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzNCByUbgRQChk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
## Enable or disable navigation
diff --git a/blazor/breadcrumb/icons.md b/blazor/breadcrumb/icons.md
index 5992eb3bcc..beef5d293a 100644
--- a/blazor/breadcrumb/icons.md
+++ b/blazor/breadcrumb/icons.md
@@ -27,7 +27,7 @@ To place the font icon on the Breadcrumb item, set the [IconCss](https://help.sy
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
N> By default, the icon is positioned to the left side of the item.
@@ -55,7 +55,7 @@ In the Breadcrumb component, you can add images to the items using [IconCss](htt
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/image.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/image.webp)" %}
## Breadcrumb with SVG image
@@ -81,7 +81,7 @@ In the Breadcrumb component, SVG image can be added for the items using the [Ico
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/svg.PNG)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/svg.webp)" %}
## Icon only
@@ -100,7 +100,7 @@ In the following example, Breadcrumb items are demonstrated with only icons by p
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/icon-only.PNG)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/icon-only.webp)" %}
## Show icon only for first item
@@ -118,4 +118,4 @@ To show icon only for the first item in the Breadcrumb component, add icons to t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-items.webp)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/images/Blazor-server-app-creation.png b/blazor/breadcrumb/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/breadcrumb/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/Blazor-server-app-creation.webp b/blazor/breadcrumb/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/breadcrumb/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.PNG
deleted file mode 100644
index df71eb0bc1..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.webp
new file mode 100644
index 0000000000..e488185723
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-absolute-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.PNG
deleted file mode 100644
index 0a755a17a0..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.webp
new file mode 100644
index 0000000000..1047c5bddd
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-current-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.PNG
deleted file mode 100644
index ad58cee170..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.webp
new file mode 100644
index 0000000000..1efbcbb645
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-enable-navigation.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-enable.PNG
deleted file mode 100644
index 251bd9dcb4..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-enable.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-enable.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-enable.webp
new file mode 100644
index 0000000000..cdc38f75f4
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-enable.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.PNG
deleted file mode 100644
index ae931eb041..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.webp
new file mode 100644
index 0000000000..be00c2dfbd
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-item-template.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.PNG
deleted file mode 100644
index 3213a4e6f7..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.webp
new file mode 100644
index 0000000000..e1d30e57d0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-relative-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.PNG
deleted file mode 100644
index ccf30f61f6..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.webp
new file mode 100644
index 0000000000..f3c310381d
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-static-url.webp differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-tag.PNG b/blazor/breadcrumb/images/blazor-Breadcrumb-tag.PNG
deleted file mode 100644
index 1976cb2bfa..0000000000
Binary files a/blazor/breadcrumb/images/blazor-Breadcrumb-tag.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-Breadcrumb-tag.webp b/blazor/breadcrumb/images/blazor-Breadcrumb-tag.webp
new file mode 100644
index 0000000000..044bc2e4e0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-Breadcrumb-tag.webp differ
diff --git a/blazor/breadcrumb/images/blazor-app-interactive-mode.png b/blazor/breadcrumb/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/breadcrumb/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-app-interactive-mode.webp b/blazor/breadcrumb/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-component.png b/blazor/breadcrumb/images/blazor-breadcrumb-component.png
deleted file mode 100644
index 0ab2a6c833..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-component.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-component.webp b/blazor/breadcrumb/images/blazor-breadcrumb-component.webp
new file mode 100644
index 0000000000..8163805d56
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-component.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-items.png b/blazor/breadcrumb/images/blazor-breadcrumb-items.png
deleted file mode 100644
index 08a65a59bf..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-items.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-items.webp b/blazor/breadcrumb/images/blazor-breadcrumb-items.webp
new file mode 100644
index 0000000000..370f0a7b83
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-items.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-overflow.PNG b/blazor/breadcrumb/images/blazor-breadcrumb-overflow.PNG
deleted file mode 100644
index d4e02a3a4f..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-overflow.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-overflow.webp b/blazor/breadcrumb/images/blazor-breadcrumb-overflow.webp
new file mode 100644
index 0000000000..0475c428f5
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-overflow.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.PNG b/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.PNG
deleted file mode 100644
index 22b5742e64..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.webp b/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.webp
new file mode 100644
index 0000000000..f2631f92d0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-separator-temp.webp differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.png b/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.png
deleted file mode 100644
index 6fb8eff415..0000000000
Binary files a/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.webp b/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.webp
new file mode 100644
index 0000000000..e8d5c91ef0
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-breadcrumb-style-and-appearance.webp differ
diff --git a/blazor/breadcrumb/images/blazor-create-web-app.png b/blazor/breadcrumb/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/breadcrumb/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-create-web-app.webp b/blazor/breadcrumb/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-create-web-app.webp differ
diff --git a/blazor/breadcrumb/images/blazor-wasm-app-template.png b/blazor/breadcrumb/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/breadcrumb/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/blazor-wasm-app-template.webp b/blazor/breadcrumb/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/breadcrumb/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/breadcrumb/images/bread-overflow-hidden.png b/blazor/breadcrumb/images/bread-overflow-hidden.png
deleted file mode 100644
index 7b5b423999..0000000000
Binary files a/blazor/breadcrumb/images/bread-overflow-hidden.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/bread-overflow-hidden.webp b/blazor/breadcrumb/images/bread-overflow-hidden.webp
new file mode 100644
index 0000000000..9c2ea3d705
Binary files /dev/null and b/blazor/breadcrumb/images/bread-overflow-hidden.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-collapsed.png b/blazor/breadcrumb/images/breadcrumb-collapsed.png
deleted file mode 100644
index c16afac68c..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-collapsed.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-collapsed.webp b/blazor/breadcrumb/images/breadcrumb-collapsed.webp
new file mode 100644
index 0000000000..457fa446bc
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-collapsed.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-hidden.png b/blazor/breadcrumb/images/breadcrumb-hidden.png
deleted file mode 100644
index 089572fd8f..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-hidden.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-hidden.webp b/blazor/breadcrumb/images/breadcrumb-hidden.webp
new file mode 100644
index 0000000000..dbc7dee4c9
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-hidden.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-menu.png b/blazor/breadcrumb/images/breadcrumb-menu.png
deleted file mode 100644
index 55017adf1b..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-menu.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-menu.webp b/blazor/breadcrumb/images/breadcrumb-menu.webp
new file mode 100644
index 0000000000..d93dbfe30b
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-menu.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-scroll.png b/blazor/breadcrumb/images/breadcrumb-scroll.png
deleted file mode 100644
index 999b7970de..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-scroll.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-scroll.webp b/blazor/breadcrumb/images/breadcrumb-scroll.webp
new file mode 100644
index 0000000000..b8d8e42da9
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-scroll.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-specific-item-template.png b/blazor/breadcrumb/images/breadcrumb-specific-item-template.png
deleted file mode 100644
index 3121651e62..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-specific-item-template.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-specific-item-template.webp b/blazor/breadcrumb/images/breadcrumb-specific-item-template.webp
new file mode 100644
index 0000000000..de399c46ee
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-specific-item-template.webp differ
diff --git a/blazor/breadcrumb/images/breadcrumb-wrap.png b/blazor/breadcrumb/images/breadcrumb-wrap.png
deleted file mode 100644
index b609560403..0000000000
Binary files a/blazor/breadcrumb/images/breadcrumb-wrap.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/breadcrumb-wrap.webp b/blazor/breadcrumb/images/breadcrumb-wrap.webp
new file mode 100644
index 0000000000..7da2bc1699
Binary files /dev/null and b/blazor/breadcrumb/images/breadcrumb-wrap.webp differ
diff --git a/blazor/breadcrumb/images/home.png b/blazor/breadcrumb/images/home.png
deleted file mode 100644
index ec118bcb9f..0000000000
Binary files a/blazor/breadcrumb/images/home.png and /dev/null differ
diff --git a/blazor/breadcrumb/images/home.svg b/blazor/breadcrumb/images/home.svg
deleted file mode 100644
index 5c36657ca4..0000000000
--- a/blazor/breadcrumb/images/home.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
diff --git a/blazor/breadcrumb/images/home.webp b/blazor/breadcrumb/images/home.webp
new file mode 100644
index 0000000000..f33e0ffe73
Binary files /dev/null and b/blazor/breadcrumb/images/home.webp differ
diff --git a/blazor/breadcrumb/images/icon-only.PNG b/blazor/breadcrumb/images/icon-only.PNG
deleted file mode 100644
index 32e42b2983..0000000000
Binary files a/blazor/breadcrumb/images/icon-only.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/icon-only.webp b/blazor/breadcrumb/images/icon-only.webp
new file mode 100644
index 0000000000..eedd6ed889
Binary files /dev/null and b/blazor/breadcrumb/images/icon-only.webp differ
diff --git a/blazor/breadcrumb/images/image.PNG b/blazor/breadcrumb/images/image.PNG
deleted file mode 100644
index 135b2d1965..0000000000
Binary files a/blazor/breadcrumb/images/image.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/image.webp b/blazor/breadcrumb/images/image.webp
new file mode 100644
index 0000000000..516aed543b
Binary files /dev/null and b/blazor/breadcrumb/images/image.webp differ
diff --git a/blazor/breadcrumb/images/svg.PNG b/blazor/breadcrumb/images/svg.PNG
deleted file mode 100644
index 0c0ed63954..0000000000
Binary files a/blazor/breadcrumb/images/svg.PNG and /dev/null differ
diff --git a/blazor/breadcrumb/images/svg.webp b/blazor/breadcrumb/images/svg.webp
new file mode 100644
index 0000000000..859b78464d
Binary files /dev/null and b/blazor/breadcrumb/images/svg.webp differ
diff --git a/blazor/breadcrumb/navigation.md b/blazor/breadcrumb/navigation.md
index 6a355090ac..6eb211bac4 100644
--- a/blazor/breadcrumb/navigation.md
+++ b/blazor/breadcrumb/navigation.md
@@ -29,7 +29,7 @@ You can specify relative URL in the [Url](https://help.syncfusion.com/cr/blazor/
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.webp)" %}
## Absolute URL
@@ -48,7 +48,7 @@ You can specify absolute URL in the [Url](https://help.syncfusion.com/cr/blazor/
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.webp)" %}
## Enable navigation for last Breadcrumb item
@@ -67,4 +67,4 @@ Breadcrumb enables the navigation for the last item by setting the [EnableActive
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.webp)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/overflow.md b/blazor/breadcrumb/overflow.md
index 255a287b1d..3197cee680 100644
--- a/blazor/breadcrumb/overflow.md
+++ b/blazor/breadcrumb/overflow.md
@@ -44,7 +44,7 @@ Collapsed mode shows the first and last Breadcrumb items and hides the remaining
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-collapsed.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-collapsed.webp)" %}
## Menu
@@ -68,7 +68,7 @@ Menu mode shows the number of Breadcrumb items that can be accommodated within t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-menu.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-menu.webp)" %}
## Wrap
@@ -92,7 +92,7 @@ Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceed
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-wrap.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-wrap.webp)" %}
## Scroll
@@ -118,7 +118,7 @@ Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the c
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-scroll.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-scroll.webp)" %}
## Hidden
@@ -142,7 +142,7 @@ Hidden mode shows the maximum number of items possible in the container space an
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/bread-overflow-hidden.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/bread-overflow-hidden.webp)" %}
## None
diff --git a/blazor/breadcrumb/style-and-appearance.md b/blazor/breadcrumb/style-and-appearance.md
index 11ba7d5e38..f6e404fbd4 100644
--- a/blazor/breadcrumb/style-and-appearance.md
+++ b/blazor/breadcrumb/style-and-appearance.md
@@ -53,4 +53,4 @@ Use the following CSS to customize the background and text color of Breadcrumb.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.webp)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/templates.md b/blazor/breadcrumb/templates.md
index 3497a8a7f5..b6f0bd0eb4 100644
--- a/blazor/breadcrumb/templates.md
+++ b/blazor/breadcrumb/templates.md
@@ -47,7 +47,7 @@ In the following example, shopping cart details are used as Breadcrumb items and
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.webp)" %}
## Separator template
@@ -77,7 +77,7 @@ In the following example, the separators are customized with icons using [Separa
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.webp)" %}
## Customize Specific Item Template
@@ -144,4 +144,4 @@ The specific breadcrumb item can be customizable by adding the custom element as
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.png)" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.webp)" %}
\ No newline at end of file
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/card/images/Blazor-Card-Component-Content-with-Image.png b/blazor/card/images/Blazor-Card-Component-Content-with-Image.png
deleted file mode 100644
index 4d3b87c5e3..0000000000
Binary files a/blazor/card/images/Blazor-Card-Component-Content-with-Image.png and /dev/null differ
diff --git a/blazor/card/images/Blazor-Card-Component-Content-with-Image.webp b/blazor/card/images/Blazor-Card-Component-Content-with-Image.webp
new file mode 100644
index 0000000000..4f3adb12ef
Binary files /dev/null and b/blazor/card/images/Blazor-Card-Component-Content-with-Image.webp differ
diff --git a/blazor/card/images/Blazor-server-app-creation.png b/blazor/card/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/card/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/card/images/Blazor-server-app-creation.webp b/blazor/card/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/card/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/card/images/blazor-app-interactive-mode.png b/blazor/card/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/card/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/card/images/blazor-app-interactive-mode.webp b/blazor/card/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/card/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/card/images/blazor-card-component.png b/blazor/card/images/blazor-card-component.png
deleted file mode 100644
index 4780101f81..0000000000
Binary files a/blazor/card/images/blazor-card-component.png and /dev/null differ
diff --git a/blazor/card/images/blazor-card-component.webp b/blazor/card/images/blazor-card-component.webp
new file mode 100644
index 0000000000..9238e54471
Binary files /dev/null and b/blazor/card/images/blazor-card-component.webp differ
diff --git a/blazor/card/images/blazor-card-with-horizontal-orientation.PNG b/blazor/card/images/blazor-card-with-horizontal-orientation.PNG
deleted file mode 100644
index 875b65d74c..0000000000
Binary files a/blazor/card/images/blazor-card-with-horizontal-orientation.PNG and /dev/null differ
diff --git a/blazor/card/images/blazor-card-with-horizontal-orientation.webp b/blazor/card/images/blazor-card-with-horizontal-orientation.webp
new file mode 100644
index 0000000000..77532bb1f9
Binary files /dev/null and b/blazor/card/images/blazor-card-with-horizontal-orientation.webp differ
diff --git a/blazor/card/images/blazor-create-web-app.png b/blazor/card/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/card/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/card/images/blazor-create-web-app.webp b/blazor/card/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/card/images/blazor-create-web-app.webp differ
diff --git a/blazor/card/images/blazor-wasm-app-template.png b/blazor/card/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/card/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/card/images/blazor-wasm-app-template.webp b/blazor/card/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/card/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/carousel/images/Blazor-server-app-creation.png b/blazor/carousel/images/Blazor-server-app-creation.png
deleted file mode 100644
index 02e4a025bf..0000000000
Binary files a/blazor/carousel/images/Blazor-server-app-creation.png and /dev/null differ
diff --git a/blazor/carousel/images/Blazor-server-app-creation.webp b/blazor/carousel/images/Blazor-server-app-creation.webp
new file mode 100644
index 0000000000..0d820ce3eb
Binary files /dev/null and b/blazor/carousel/images/Blazor-server-app-creation.webp differ
diff --git a/blazor/carousel/images/blazor-app-interactive-mode.png b/blazor/carousel/images/blazor-app-interactive-mode.png
deleted file mode 100644
index 9edcc0e351..0000000000
Binary files a/blazor/carousel/images/blazor-app-interactive-mode.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-app-interactive-mode.webp b/blazor/carousel/images/blazor-app-interactive-mode.webp
new file mode 100644
index 0000000000..44f2080745
Binary files /dev/null and b/blazor/carousel/images/blazor-app-interactive-mode.webp differ
diff --git a/blazor/carousel/images/blazor-carousel-getting-started.png b/blazor/carousel/images/blazor-carousel-getting-started.png
deleted file mode 100644
index 47465c172b..0000000000
Binary files a/blazor/carousel/images/blazor-carousel-getting-started.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-carousel-getting-started.webp b/blazor/carousel/images/blazor-carousel-getting-started.webp
new file mode 100644
index 0000000000..77a614a9bd
Binary files /dev/null and b/blazor/carousel/images/blazor-carousel-getting-started.webp differ
diff --git a/blazor/carousel/images/blazor-create-web-app.png b/blazor/carousel/images/blazor-create-web-app.png
deleted file mode 100644
index 7dd6e612d2..0000000000
Binary files a/blazor/carousel/images/blazor-create-web-app.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-create-web-app.webp b/blazor/carousel/images/blazor-create-web-app.webp
new file mode 100644
index 0000000000..199356f771
Binary files /dev/null and b/blazor/carousel/images/blazor-create-web-app.webp differ
diff --git a/blazor/carousel/images/blazor-wasm-app-template.png b/blazor/carousel/images/blazor-wasm-app-template.png
deleted file mode 100644
index 8cf1737d81..0000000000
Binary files a/blazor/carousel/images/blazor-wasm-app-template.png and /dev/null differ
diff --git a/blazor/carousel/images/blazor-wasm-app-template.webp b/blazor/carousel/images/blazor-wasm-app-template.webp
new file mode 100644
index 0000000000..6824d1db62
Binary files /dev/null and b/blazor/carousel/images/blazor-wasm-app-template.webp differ
diff --git a/blazor/carousel/images/carousel.jpg b/blazor/carousel/images/carousel.jpg
deleted file mode 100644
index 3e54b1b295..0000000000
Binary files a/blazor/carousel/images/carousel.jpg and /dev/null differ
diff --git a/blazor/carousel/images/carousel.webp b/blazor/carousel/images/carousel.webp
new file mode 100644
index 0000000000..8357578509
Binary files /dev/null and b/blazor/carousel/images/carousel.webp differ
diff --git a/blazor/carousel/images/custom_animation.gif b/blazor/carousel/images/custom_animation.gif
deleted file mode 100644
index c921b87228..0000000000
Binary files a/blazor/carousel/images/custom_animation.gif and /dev/null differ
diff --git a/blazor/carousel/images/custom_animation.webp b/blazor/carousel/images/custom_animation.webp
new file mode 100644
index 0000000000..99d1c7a349
Binary files /dev/null and b/blazor/carousel/images/custom_animation.webp differ
diff --git a/blazor/carousel/images/fade_animation.gif b/blazor/carousel/images/fade_animation.gif
deleted file mode 100644
index ac4f178fc8..0000000000
Binary files a/blazor/carousel/images/fade_animation.gif and /dev/null differ
diff --git a/blazor/carousel/images/fade_animation.webp b/blazor/carousel/images/fade_animation.webp
new file mode 100644
index 0000000000..bd271bf949
Binary files /dev/null and b/blazor/carousel/images/fade_animation.webp differ
diff --git a/blazor/carousel/images/indicator-default.png b/blazor/carousel/images/indicator-default.png
deleted file mode 100644
index 3a213b3ea8..0000000000
Binary files a/blazor/carousel/images/indicator-default.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-default.webp b/blazor/carousel/images/indicator-default.webp
new file mode 100644
index 0000000000..31f6f8c4f8
Binary files /dev/null and b/blazor/carousel/images/indicator-default.webp differ
diff --git a/blazor/carousel/images/indicator-dynamic.png b/blazor/carousel/images/indicator-dynamic.png
deleted file mode 100644
index 4512567b88..0000000000
Binary files a/blazor/carousel/images/indicator-dynamic.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-dynamic.webp b/blazor/carousel/images/indicator-dynamic.webp
new file mode 100644
index 0000000000..af11aa1cb2
Binary files /dev/null and b/blazor/carousel/images/indicator-dynamic.webp differ
diff --git a/blazor/carousel/images/indicator-fraction.png b/blazor/carousel/images/indicator-fraction.png
deleted file mode 100644
index a2beba0c26..0000000000
Binary files a/blazor/carousel/images/indicator-fraction.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-fraction.webp b/blazor/carousel/images/indicator-fraction.webp
new file mode 100644
index 0000000000..24c86a07b9
Binary files /dev/null and b/blazor/carousel/images/indicator-fraction.webp differ
diff --git a/blazor/carousel/images/indicator-progress.png b/blazor/carousel/images/indicator-progress.png
deleted file mode 100644
index 7a85e2e398..0000000000
Binary files a/blazor/carousel/images/indicator-progress.png and /dev/null differ
diff --git a/blazor/carousel/images/indicator-progress.webp b/blazor/carousel/images/indicator-progress.webp
new file mode 100644
index 0000000000..a0cee5e757
Binary files /dev/null and b/blazor/carousel/images/indicator-progress.webp differ
diff --git a/blazor/carousel/images/indicator-size.jpg b/blazor/carousel/images/indicator-size.jpg
deleted file mode 100644
index 7a34733b8b..0000000000
Binary files a/blazor/carousel/images/indicator-size.jpg and /dev/null differ
diff --git a/blazor/carousel/images/indicator-size.webp b/blazor/carousel/images/indicator-size.webp
new file mode 100644
index 0000000000..c804815dbf
Binary files /dev/null and b/blazor/carousel/images/indicator-size.webp differ
diff --git a/blazor/carousel/images/indicators-outside.jpg b/blazor/carousel/images/indicators-outside.jpg
deleted file mode 100644
index 4f43b9b95e..0000000000
Binary files a/blazor/carousel/images/indicators-outside.jpg and /dev/null differ
diff --git a/blazor/carousel/images/indicators-outside.webp b/blazor/carousel/images/indicators-outside.webp
new file mode 100644
index 0000000000..35a77d08dd
Binary files /dev/null and b/blazor/carousel/images/indicators-outside.webp differ
diff --git a/blazor/carousel/images/indicators.jpg b/blazor/carousel/images/indicators.jpg
deleted file mode 100644
index 88b2c0ac91..0000000000
Binary files a/blazor/carousel/images/indicators.jpg and /dev/null differ
diff --git a/blazor/carousel/images/indicators.webp b/blazor/carousel/images/indicators.webp
new file mode 100644
index 0000000000..9924b201da
Binary files /dev/null and b/blazor/carousel/images/indicators.webp differ
diff --git a/blazor/carousel/images/indicators_hidden.png b/blazor/carousel/images/indicators_hidden.png
deleted file mode 100644
index 08204363eb..0000000000
Binary files a/blazor/carousel/images/indicators_hidden.png and /dev/null differ
diff --git a/blazor/carousel/images/indicators_hidden.webp b/blazor/carousel/images/indicators_hidden.webp
new file mode 100644
index 0000000000..b0c4a9ea8c
Binary files /dev/null and b/blazor/carousel/images/indicators_hidden.webp differ
diff --git a/blazor/carousel/images/indicators_preview.png b/blazor/carousel/images/indicators_preview.png
deleted file mode 100644
index 78f19d8819..0000000000
Binary files a/blazor/carousel/images/indicators_preview.png and /dev/null differ
diff --git a/blazor/carousel/images/indicators_preview.webp b/blazor/carousel/images/indicators_preview.webp
new file mode 100644
index 0000000000..c69aaf816b
Binary files /dev/null and b/blazor/carousel/images/indicators_preview.webp differ
diff --git a/blazor/carousel/images/indicators_template.png b/blazor/carousel/images/indicators_template.png
deleted file mode 100644
index 186dd6d44e..0000000000
Binary files a/blazor/carousel/images/indicators_template.png and /dev/null differ
diff --git a/blazor/carousel/images/indicators_template.webp b/blazor/carousel/images/indicators_template.webp
new file mode 100644
index 0000000000..9afacd7ab6
Binary files /dev/null and b/blazor/carousel/images/indicators_template.webp differ
diff --git a/blazor/carousel/images/looping_slides.png b/blazor/carousel/images/looping_slides.png
deleted file mode 100644
index 58235bc9e4..0000000000
Binary files a/blazor/carousel/images/looping_slides.png and /dev/null differ
diff --git a/blazor/carousel/images/looping_slides.webp b/blazor/carousel/images/looping_slides.webp
new file mode 100644
index 0000000000..fcc85c64b7
Binary files /dev/null and b/blazor/carousel/images/looping_slides.webp differ
diff --git a/blazor/carousel/images/navigators-position.jpg b/blazor/carousel/images/navigators-position.jpg
deleted file mode 100644
index 0e0ff877db..0000000000
Binary files a/blazor/carousel/images/navigators-position.jpg and /dev/null differ
diff --git a/blazor/carousel/images/navigators-position.webp b/blazor/carousel/images/navigators-position.webp
new file mode 100644
index 0000000000..5a8254169f
Binary files /dev/null and b/blazor/carousel/images/navigators-position.webp differ
diff --git a/blazor/carousel/images/navigators-size-color.jpg b/blazor/carousel/images/navigators-size-color.jpg
deleted file mode 100644
index 931d17bb3a..0000000000
Binary files a/blazor/carousel/images/navigators-size-color.jpg and /dev/null differ
diff --git a/blazor/carousel/images/navigators-size-color.webp b/blazor/carousel/images/navigators-size-color.webp
new file mode 100644
index 0000000000..edb453563b
Binary files /dev/null and b/blazor/carousel/images/navigators-size-color.webp differ
diff --git a/blazor/carousel/images/navigators_hidden.png b/blazor/carousel/images/navigators_hidden.png
deleted file mode 100644
index 1a32fa9122..0000000000
Binary files a/blazor/carousel/images/navigators_hidden.png and /dev/null differ
diff --git a/blazor/carousel/images/navigators_hidden.webp b/blazor/carousel/images/navigators_hidden.webp
new file mode 100644
index 0000000000..2521ffeeda
Binary files /dev/null and b/blazor/carousel/images/navigators_hidden.webp differ
diff --git a/blazor/carousel/images/navigators_onhover.gif b/blazor/carousel/images/navigators_onhover.gif
deleted file mode 100644
index 644ef82c5d..0000000000
Binary files a/blazor/carousel/images/navigators_onhover.gif and /dev/null differ
diff --git a/blazor/carousel/images/navigators_onhover.webp b/blazor/carousel/images/navigators_onhover.webp
new file mode 100644
index 0000000000..8b6aeb7d26
Binary files /dev/null and b/blazor/carousel/images/navigators_onhover.webp differ
diff --git a/blazor/carousel/images/navigators_template.png b/blazor/carousel/images/navigators_template.png
deleted file mode 100644
index 0dbcd85d23..0000000000
Binary files a/blazor/carousel/images/navigators_template.png and /dev/null differ
diff --git a/blazor/carousel/images/navigators_template.webp b/blazor/carousel/images/navigators_template.webp
new file mode 100644
index 0000000000..8e78c715a1
Binary files /dev/null and b/blazor/carousel/images/navigators_template.webp differ
diff --git a/blazor/carousel/images/partial-slide-size.jpg b/blazor/carousel/images/partial-slide-size.jpg
deleted file mode 100644
index c2217e9395..0000000000
Binary files a/blazor/carousel/images/partial-slide-size.jpg and /dev/null differ
diff --git a/blazor/carousel/images/partial-slide-size.webp b/blazor/carousel/images/partial-slide-size.webp
new file mode 100644
index 0000000000..2f354e12b4
Binary files /dev/null and b/blazor/carousel/images/partial-slide-size.webp differ
diff --git a/blazor/carousel/images/partial-visible.jpg b/blazor/carousel/images/partial-visible.jpg
deleted file mode 100644
index 8ed088b05c..0000000000
Binary files a/blazor/carousel/images/partial-visible.jpg and /dev/null differ
diff --git a/blazor/carousel/images/partial-visible.webp b/blazor/carousel/images/partial-visible.webp
new file mode 100644
index 0000000000..9ae98cf47f
Binary files /dev/null and b/blazor/carousel/images/partial-visible.webp differ
diff --git a/blazor/carousel/images/play_button.png b/blazor/carousel/images/play_button.png
deleted file mode 100644
index 581bc59069..0000000000
Binary files a/blazor/carousel/images/play_button.png and /dev/null differ
diff --git a/blazor/carousel/images/play_button.webp b/blazor/carousel/images/play_button.webp
new file mode 100644
index 0000000000..5713beab19
Binary files /dev/null and b/blazor/carousel/images/play_button.webp differ
diff --git a/blazor/carousel/images/play_button_template.png b/blazor/carousel/images/play_button_template.png
deleted file mode 100644
index e01181d6d8..0000000000
Binary files a/blazor/carousel/images/play_button_template.png and /dev/null differ
diff --git a/blazor/carousel/images/play_button_template.webp b/blazor/carousel/images/play_button_template.webp
new file mode 100644
index 0000000000..e955a947da
Binary files /dev/null and b/blazor/carousel/images/play_button_template.webp differ
diff --git a/blazor/carousel/images/previous-next.jpg b/blazor/carousel/images/previous-next.jpg
deleted file mode 100644
index 9fe3254aa6..0000000000
Binary files a/blazor/carousel/images/previous-next.jpg and /dev/null differ
diff --git a/blazor/carousel/images/previous-next.webp b/blazor/carousel/images/previous-next.webp
new file mode 100644
index 0000000000..905fbbba40
Binary files /dev/null and b/blazor/carousel/images/previous-next.webp differ
diff --git a/blazor/carousel/images/selected_index.png b/blazor/carousel/images/selected_index.png
deleted file mode 100644
index 755ca98510..0000000000
Binary files a/blazor/carousel/images/selected_index.png and /dev/null differ
diff --git a/blazor/carousel/images/selected_index.webp b/blazor/carousel/images/selected_index.webp
new file mode 100644
index 0000000000..2e9cc360ca
Binary files /dev/null and b/blazor/carousel/images/selected_index.webp differ
diff --git a/blazor/carousel/images/swipe.gif b/blazor/carousel/images/swipe.gif
deleted file mode 100644
index f7bf95f636..0000000000
Binary files a/blazor/carousel/images/swipe.gif and /dev/null differ
diff --git a/blazor/carousel/images/swipe.webp b/blazor/carousel/images/swipe.webp
new file mode 100644
index 0000000000..6ba0b64e77
Binary files /dev/null and b/blazor/carousel/images/swipe.webp differ
diff --git a/blazor/carousel/images/without-loop.jpg b/blazor/carousel/images/without-loop.jpg
deleted file mode 100644
index aecdea1fea..0000000000
Binary files a/blazor/carousel/images/without-loop.jpg and /dev/null differ
diff --git a/blazor/carousel/images/without-loop.webp b/blazor/carousel/images/without-loop.webp
new file mode 100644
index 0000000000..8c5073eb96
Binary files /dev/null and b/blazor/carousel/images/without-loop.webp differ
diff --git a/blazor/carousel/styles-and-appearance.md b/blazor/carousel/styles-and-appearance.md
index 88898a22cf..d25e2eb352 100644
--- a/blazor/carousel/styles-and-appearance.md
+++ b/blazor/carousel/styles-and-appearance.md
@@ -27,7 +27,7 @@ The following content provides the exact CSS structure that can be used to modif
|.e-carousel .e-carousel-navigators .e-play-pause|To customize the play and pause button
|.e-carousel.e-partial .e-carousel-slide-container|To customize the partial visible slides
-
+
## Customizing the indicators
@@ -41,7 +41,7 @@ Use the following CSS to customize the space between indicators by overriding th
```
-
+
Use the following CSS to customize the indicators appearance by overriding the `.e-indicator` CSS class.
@@ -54,7 +54,7 @@ Use the following CSS to customize the indicators appearance by overriding the `
```
-
+
Use the following CSS to render the indicators outside the carousel items by overriding the `.e-carousel-indicators` CSS class.
@@ -66,7 +66,7 @@ Use the following CSS to render the indicators outside the carousel items by ove
```
-
+
## Customizing the navigators
@@ -83,7 +83,7 @@ Use the following CSS to customize the previous and next icon size and colors.
```
-
+
Use the following CSS to customize the navigators position to bottom by overriding the `.e-carousel-navigators` CSS class.
@@ -95,7 +95,7 @@ Use the following CSS to customize the navigators position to bottom by overridi
```
-
+
Use the following CSS to render the previous and next icon to outside the carousel items by overriding the `.e-previous` and `.e-next` CSS class.
@@ -110,7 +110,7 @@ Use the following CSS to render the previous and next icon to outside the carous
```
-
+
## Customizing partial slides size
@@ -124,4 +124,4 @@ You can customize the partial slide size by overriding the `.e-carousel-slide-co
```
-
\ No newline at end of file
+
\ No newline at end of file
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
+
® Blazor Chart component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.
+This section explains you through the step-by-step process of integrating the [Syncfusion® Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/).
> **Ready to streamline your Syncfusion® Blazor development?** Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
@@ -37,15 +37,26 @@ To use the MAUI project templates, install the Mobile development with the .NET
Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation.
+Alternatively, create a MAUI application by using the following command in the integrated terminal (Ctrl+`).
+
+{% tabs %}
+{% highlight c# tabtitle="Blazor MAUI App" %}
+
+dotnet new maui-blazor -o MauiBlazorApp
+cd MauiBlazorApp
+
+{% endhighlight %}
+{% endtabs %}
+
{% endtabcontent %}
{% endtabcontents %}
## Install Syncfusion® Blazor packages
-Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
+Install [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`).
-Alternatively, run the following commands in the Package Manager Console to achieve the same.
+Alternatively, run the following command in the Package Manager Console to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -57,7 +68,7 @@ Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }}
N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
-## Add Import Namespaces
+## Add import namespaces
After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces.
@@ -70,40 +81,27 @@ After the package is installed, open the **~/_Imports.razor** file and import th
{% endhighlight %}
{% endtabs %}
-## Register Syncfusion® Blazor Service
+## Register Syncfusion® Blazor service
-Register the Syncfusion® Blazor Service in the **~/MauiProgram.cs** file.
+Register the Syncfusion® Blazor service in the **~/MauiProgram.cs** file.
{% tabs %}
-{% highlight c# tabtitle="~/MauiProgram.cs" hl_lines="2 19" %}
+{% highlight c# tabtitle="~/MauiProgram.cs" %}
-using Microsoft.Extensions.Logging;
+....
using Syncfusion.Blazor;
-namespace MauiBlazorWindow;
+....
- public static class MauiProgram
+public static class MauiProgram
+{
+ public static MauiApp CreateMauiApp()
{
- public static MauiApp CreateMauiApp()
- {
- var builder = MauiApp.CreateBuilder();
- builder
- .UseMauiApp()
- .ConfigureFonts(fonts =>
- {
- fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
- });
-
- builder.Services.AddMauiBlazorWebView();
- builder.Services.AddSyncfusionBlazor();
-#if DEBUG
- builder.Services.AddBlazorWebViewDeveloperTools();
- builder.Logging.AddDebug();
-#endif
-
- return builder.Build();
- }
+ ....
+ builder.Services.AddSyncfusionBlazor();
+ ....
}
+}
{% endhighlight %}
{% endtabs %}
@@ -113,23 +111,19 @@ namespace MauiBlazorWindow;
The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file.
```html
-
- ....
-
- //Blazor Chart Component script reference.
-
-
+
+
```
-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.
+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 your Blazor application.
-## Add Blazor Chart component
+## Add Syncfusion® Blazor Chart component
Add the Syncfusion® Blazor Chart component in the **~/Pages/Home.razor** file.
{% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
@@ -138,13 +132,13 @@ Add the Syncfusion® Blazor Chart component
{% endhighlight %}
{% endtabs %}
-### How to Run the Sample on Windows
+### How to run the sample on windows
Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows.
-### How to Run the Sample on Android
+### How to run the sample on android
To run the Blazor Chart in a Blazor Android MAUI application using the Android emulator, follow these steps:
diff --git a/blazor/chart/getting-started.md b/blazor/chart/getting-started.md
index 7cdd4e9a0b..a6f7a909c4 100644
--- a/blazor/chart/getting-started.md
+++ b/blazor/chart/getting-started.md
@@ -144,7 +144,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 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
deleted file mode 100644
index 0a68a4deb9..0000000000
--- a/blazor/common/authentication/blazor-asp-net-core-identity.md
+++ /dev/null
@@ -1,571 +0,0 @@
----
-title: Blazor Interactive Server with ASP.NET Core Identity | Syncfusion
-description: Guide to configure ASP.NET Core Identity in an Interactive Server Blazor app and protect Syncfusion components (DataGrid, Charts).
-platform: blazor
-component: common
-documentation: ug
----
-
-# Blazor Web App (Interactive Server) with ASP.NET Core Identity
-
-This guide explains how to configure ASP.NET Core Identity in a **Blazor Web App using Interactive Server render mode** and protect Syncfusion® Blazor components such as **[DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** and **[Charts](https://www.syncfusion.com/blazor-components/blazor-charts)**.
-
-## What is ASP.NET Core Identity?
-
-[ASP.NET Core Identity](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-10.0&tabs=visual-studio) is the built-in membership system for ASP.NET Core apps. It provides UI and APIs for registration, login, logout, password management, roles, claims, and more. In Blazor Web Apps, Microsoft recommends using the Identity Razor Pages for authentication tasks and using Blazor authorization for your components.
-
-## When should I use it in Blazor?
-
-Use Identity when your app needs cookie-based, server-side authentication and you want the standard login/registration experience without building it from scratch. In a Blazor Web App using Interactive Server render mode, all authorization checks happen on the server. This gives strong security because the UI is not shown to the user until authentication is complete.
-
-## Create the sample app
-
-The steps below help you build a secure Blazor Web App using Interactive Server mode. You will set up ASP.NET Core Identity with SQLite and add Syncfusion Blazor components such as the [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) and [Charts](https://www.syncfusion.com/blazor-components/blazor-charts) to pages that require the `[Authorize]` attribute.
-
-### 1. Create a Blazor Web App with Interactive Server
-
-Create a new Blazor Web App configured to use **Interactive Server render mode**. In this mode, the app runs on the server and updates the UI in the browser through a real-time connection, which helps keep your data secure.
-
-`BlazorIdentitySyncfusion` is used as the sample project name in the following commands. Replace it with any project name you prefer.
-
-Run the following commands in your **command-line interface (CLI)**.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet new blazor -o BlazorIdentitySyncfusion --interactivity Server
-cd BlazorIdentitySyncfusion
-
-{% endhighlight %}
-{% endtabs %}
-
-### 2. Install Identity and database packages
-
-Install the necessary NuGet packages that provide ASP.NET Core Identity features and database connectivity. These packages allow your app to store user accounts, manage authentication, and connect to a SQLite database.
-
-**Package overview**
-
-| Package | What it does |
-|---------|--------------|
-| [Microsoft.AspNetCore.Identity.EntityFrameworkCore](https://www.nuget.org/packages/Microsoft.AspNetCore.Identity.EntityFrameworkCore) | Connects Identity to your database via [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/), enabling storage of users, passwords (hashed), and roles |
-| [Microsoft.AspNetCore.Identity.UI](https://www.nuget.org/packages/Microsoft.AspNetCore.Identity.UI) | Provides ready-made login, registration, and account management pages (Razor Pages) so you don't have to build them from scratch |
-| [Microsoft.EntityFrameworkCore.Sqlite](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Sqlite) | SQLite database provider. A lightweight database stored as a single file, perfect for development and small applications |
-| [Microsoft.EntityFrameworkCore.Design](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Design) | Tools for creating and managing database schema changes (migrations) |
-| [Microsoft.EntityFrameworkCore.Tools](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Tools) | Adds the `dotnet ef` command-line tool for running migration commands |
-| [Microsoft.VisualStudio.Web.CodeGeneration.Design](https://www.nuget.org/packages/Microsoft.VisualStudio.Web.CodeGeneration.Design) | Scaffolding tool for customizing Identity Razor Pages (e.g., to override the default login page design) |
-
-Run the following commands inside your project folder.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore
-dotnet add package Microsoft.AspNetCore.Identity.UI
-dotnet add package Microsoft.EntityFrameworkCore.Sqlite
-dotnet add package Microsoft.EntityFrameworkCore.Design
-dotnet add package Microsoft.EntityFrameworkCore.Tools
-dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
-
-{% endhighlight %}
-{% endtabs %}
-
-### 3. Install Syncfusion® Blazor component packages
-
-Add Syncfusion Blazor packages to your project. These packages provide UI components like DataGrid and Charts that you'll use on protected pages.
-
-Run the following commands in the project folder (where the `.csproj` file is located).
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Syncfusion.Blazor.Grid
-dotnet add package Syncfusion.Blazor.Charts
-dotnet add package Syncfusion.Blazor.Themes
-
-{% endhighlight %}
-{% endtabs %}
-
-### 4. Create the database context for Identity users
-
-Create the **ApplicationDbContext** class that connects ASP.NET Core Identity to your database. This class tells [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) how to store and manage Identity data such as users, passwords, and roles.
-
-Create a folder named `Data` in the project root (same level as `Program.cs`). Inside that folder, create a file named `ApplicationDbContext.cs` and add the following code.
-
-{% tabs %}
-{% highlight c# tabtitle="Data/ApplicationDbContext.cs" %}
-
-using Microsoft.AspNetCore.Identity;
-using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
-using Microsoft.EntityFrameworkCore;
-
-namespace BlazorIdentitySyncfusion.Data;
-
-// Database context for ASP.NET Core Identity (users, roles, claims, etc.)
-public class ApplicationDbContext : IdentityDbContext
-{
- public ApplicationDbContext(DbContextOptions options)
- : base(options) { }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> `IdentityDbContext` uses the default `IdentityUser` class. You can replace `IdentityUser` with a custom user class (e.g., `ApplicationUser : IdentityUser`) if you need additional properties like `FullName` or `Department`.
-
-### 5. Configure the SQLite connection string
-
-Set up the connection string that tells your app where the `SQLite` database should be created. Entity Framework Core uses this connection string to store Identity data.
-
-Open `appsettings.json` and add the `ConnectionStrings` section.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-{
- "ConnectionStrings": {
- "DefaultConnection": "Data Source=blazor_identity.db"
- },
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*"
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> SQLite is a simple, file-based database that stores all data in one `.db` file. It is easy to use and works well for development, testing, and learning. For production apps with many users or heavy traffic, consider switching to SQL Server, PostgreSQL, or MySQL.
-
-**Security Warning**: Add `*.db` to your `.gitignore` file to avoid committing the database file (which contains hashed passwords and personal data) to source control.
-
-### 6. Configure application services and middleware
-
-Configure your application by registering essential services and middleware in `Program.cs`. This is the central configuration file where you:
-- Connect to the database.
-- Enable Identity authentication.
-- Register Syncfusion components.
-- Configure the request processing pipeline.
-
-Open `Program.cs` and replace its contents with the following snippets where appropriate.
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-
-...
-using BlazorIdentitySyncfusion.Data;
-using Microsoft.AspNetCore.Identity;
-using Microsoft.EntityFrameworkCore;
-using Syncfusion.Blazor;
-...
-// Configure EF Core to use SQLite for Identity data.
-builder.Services.AddDbContext(options =>
- options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));
-
-// Configure Identity with the default UI.
-builder.Services
- .AddDefaultIdentity(options =>
- {
- // Email confirmation is disabled for demo purposes; enable and configure an email sender in production.
- options.SignIn.RequireConfirmedAccount = false;
- })
- .AddEntityFrameworkStores();
-
-// Add Razor Pages (includes Identity UI).
-builder.Services.AddRazorPages();
-
-// Enable Blazor authentication state support for CascadingAuthenticationState and AuthorizeRouteView.
-builder.Services.AddCascadingAuthenticationState();
-
-// Register Syncfusion Blazor services.
-builder.Services.AddSyncfusionBlazor();
-...
-
-// Serve static files and enable endpoint routing.
-app.UseStaticFiles();
-app.UseRouting();
-
-// Enable authentication and authorization middleware (order matters).
-app.UseAuthentication();
-app.UseAuthorization();
-
-// Enable antiforgery middleware (required for Identity Razor Pages login/logout forms in .NET 8+).
-app.UseAntiforgery();
-
-// Map Razor Pages endpoints (includes Identity UI).
-app.MapRazorPages();
-...
-
-{% endhighlight %}
-{% endtabs %}
-
-### 7. Import authorization and Syncfusion® namespaces
-
-Add the required namespaces in `Components/_Imports.razor`. These namespaces allow you to use authorization features such as `[Authorize]` and ``, and they enable Syncfusion components in your Blazor pages.
-
-{% tabs %}
-{% highlight razor tabtitle="Components/_Imports.razor" %}
-
-@using Microsoft.AspNetCore.Authorization
-@using Microsoft.AspNetCore.Components.Authorization
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Charts
-
-{% endhighlight %}
-{% endtabs %}
-
-### 8. Add Syncfusion® styles and script resources
-
-Before adding the Syncfusion theme stylesheet, ensure that no other Syncfusion theme CSS (e.g., `material.css`, `fluent.css`) is already referenced to avoid styling conflicts.
-
-Open `App.razor` and add the following to the `` and `` sections.
-
-{% tabs %}
-{% highlight razor tabtitle="App.razor" %}
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### 9. Create the `_LoginPartial.cshtml` file for Identity UI
-
-The `_LoginPartial.cshtml` file displays login, logout, register, and account management links for ASP.NET Core Identity. It appears in the navigation bar and automatically updates based on the user's sign-in status.
-
-In the project root (next to `Program.cs`), create a `Pages` folder and add a `Shared` subfolder. Inside the `Shared` folder, create a file named `_LoginPartial.cshtml` and add the following content.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Pages/Shared/_LoginPartial.cshtml" %}
-
-@using Microsoft.AspNetCore.Identity
-@inject SignInManager SignInManager
-@inject UserManager UserManager
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-Create a file named `_ViewImports.cshtml` inside the `Pages` folder and add the following code. This enables Tag Helpers for all Razor Pages, including the Identity UI pages.
-
-{% tabs %}
-{% highlight cshtml tabtitle="Pages/_ViewImports.cshtml" %}
-
-@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
-
-{% endhighlight %}
-{% endtabs %}
-
-### 10. Configure the Blazor router with authorization support
-
-To apply authorization for Blazor components, update the router in `App.razor`. This ensures that pages marked with `[Authorize]` require authentication before rendering.
-
-Replace the existing `` section in `App.razor` with the following:
-
-* Wrap the router in `` so Blazor can pass authentication information to all components.
-* Replace `` with `` so pages can show different content based on the user's sign-in status.
-* Keep the `` and `` sections to display messages to the user when needed.
-
-{% tabs %}
-{% highlight razor tabtitle="App.razor" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ...
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> `` is a custom component for handling SignalR reconnection UI. If your template does not include it, you can omit this line.
-
-### 11. Add authentication UI to the main layout
-
-Update your main layout to display authentication options in the header. The `` component will display different links depending on whether the user is signed in. This gives users an easy way to access login, logout, register, or manage account pages.
-
-Open `Components/Layout/MainLayout.razor` and replace its content with the following.
-
-N> This example uses Bootstrap classes (`d-flex`, `ms-auto`, `gap-3`). If your project uses different styling, adjust the CSS classes accordingly.
-
-{% tabs %}
-{% highlight razor tabtitle="MainLayout.razor" %}
-
-@inherits LayoutComponentBase
-@using Microsoft.AspNetCore.Components.Authorization
-
-
-
-
-
-
-
-
-
-
-@code {
- public List Data { get; set; } = new()
- {
- new("Jan", 42500), new("Feb", 39100), new("Mar", 45900),
- new("Apr", 54400), new("May", 49350), new("Jun", 61200)
- };
-
- public record Point(string Month, double Amount);
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### 13. Add secure links to the left navigation menu
-
-Update the navigation menu to include links to the secured pages. This makes them easily accessible from any page in the application. When users click these links, they'll be able to access the pages if logged in, or will be prompted to log in if they're not authenticated.
-
-Open `Components/Layout/NavMenu.razor` and add the following navigation items after the existing menu links.
-
-{% tabs %}
-{% highlight razor tabtitle="Layout/NavMenu.razor" %}
-...
-
-
-
- Secure Grid
-
-
-
-
-
- Secure Chart
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### 14. Generate and apply EF Core migrations
-
-Create the database tables required for ASP.NET Core Identity by running Entity Framework Core migrations. Migrations generate the schema and apply it to your SQLite database.
-
-If you have not installed the EF Core command-line tools, install them first.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet tool install --global dotnet-ef
-
-{% endhighlight %}
-{% endtabs %}
-
-Then create the migration and update the database.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet ef migrations add CreateIdentitySchema
-dotnet ef database update
-
-{% endhighlight %}
-{% endtabs %}
-
-After these commands run, the SQLite database will include the Identity tables such as `AspNetUsers`, `AspNetRoles`, and others used for authentication.
-
-N> If you receive an error that a migration with this name already exists, you can either delete the existing migration or choose a different name such as `InitialIdentitySetup`.
-
-### 15. Run the application and validate authentication flow
-
-Run the application and verify the authentication flow.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet run
-
-{% endhighlight %}
-{% endtabs %}
-
-1. Open a browser and navigate to the URL shown in the terminal output (typically `https://localhost:5001` or `https://localhost:7xxx`).
-2. Click **Secure Grid** or **Secure Chart** in the left navigation.
-3. You will be redirected to the Identity login page (`/Identity/Account/Login`) because you are not authenticated.
-4. Click **Register** and create a new account (email and password).
-5. After registration, you will be automatically logged in.
-6. Navigate back to **Secure Grid** or **Secure Chart** - the pages should now render successfully with Syncfusion components.
-7. Click **Logout** to end the session and verify that accessing the secure pages redirects back to the login page.
-
-**Output:**
-
-
-## See also
-
-* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
-* [Getting started with Syncfusion Blazor Charts](https://blazor.syncfusion.com/documentation/chart/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/authentication/blazor-aws-cognito.md b/blazor/common/authentication/blazor-aws-cognito.md
deleted file mode 100644
index 91298cf502..0000000000
--- a/blazor/common/authentication/blazor-aws-cognito.md
+++ /dev/null
@@ -1,447 +0,0 @@
----
-layout: post
-title: Blazor with AWS Cognito Authentication | Syncfusion
-description: Authenticate a Blazor Server app with AWS Cognito (OIDC Hosted UI) and secure Syncfusion components.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Blazor Authentication with AWS Cognito using Syncfusion® Components
-
-This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with a [Syncfusion Blazor components](https://www.syncfusion.com/blazor-components).
-
-## What is AWS?
-
-[Amazon Web Services (AWS)](https://aws.amazon.com/what-is-aws/) is a cloud platform providing compute, storage, and identity services. For Blazor developers, its key identity service is Amazon Cognito, which handles sign-up, sign-in, Multi-Factor Authentication (MFA), token issuance, and issuing temporary AWS credentials through AWS Identity and Access Management (IAM). Cognito also exposes a managed login interface (Hosted UI) and standard OpenID Connect (OIDC) endpoints.
-
-## Why Amazon Cognito for Blazor?
-
-* Standard OIDC integrates directly with ASP.NET Core's built-in OpenID Connect middleware for Blazor Server. This is the Microsoft recommended approach and requires no third-party authentication libraries.
-* Supports login with MFA and password policies, reducing custom auth UI work.
-* Emits `cognito:groups` in tokens for role-based authorization in your app and API.
-* Identity pools can exchange a user's ID token for time limited AWS credentials to call S3, DynamoDB, etc.
-
-## Cognito building blocks
-
-* **User pools:** Managed user directory + OIDC authorization server (tokens, hosted UI, MFA, groups). Use this to authenticate users and obtain ID/Access tokens for your app and APIs.
-* **Identity pools (Federated Identities):** Optional service that exchanges a trusted identity for example user pool ID token for temporary AWS credentials through IAM roles. Use this when the server must call AWS services (such as Amazon S3 and Amazon DynamoDB) on behalf of the user.
-
-## Password policies
-
-In **user pool → sign-in experience**:
-* Configure **password policy** (length, complexity, expiration).
-* Set MFA to Off, Optional, or Required. Choose **SMS** or **TOTP** enrollment.
-* Hosted UI prompts users according to your policy.
-
-## Role-based authorization with Cognito groups
-
-* Create groups (e.g., `Admin`) in **user pool → Groups** and add users.
-* Ensure **Group membership** is included in tokens.
-* Map roles using `RoleClaimType = "cognito:groups"` and protect pages/endpoints with `[Authorize(Roles="Admin")]`.
-
-## Prerequisites
-
-* [.NET SDK](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks) 8.0 or later (this guide uses .NET 10)
-* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
-* [AWS Account with permission to manage Cognito](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html)
-
-## Integrating Cognito with Blazor
-
-### Create a Blazor project
-
-If you already have a Blazor project, proceed to the **Install required packages** section. Otherwise, create one using Syncfusion getting started guides for [Blazor Server](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) or [Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app).
-
-### Install required packages
-
-To enable authentication and use Syncfusion Blazor components, install the required packages through NuGet Package Manager (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*).
-
-**Syncfusion packages**
-
-* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid)
-* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes)
-
-**Microsoft package**
-
-* [Microsoft.AspNetCore.Authentication.OpenIdConnect](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.OpenIdConnect)
-
-Alternatively, you can install the required packages by using the following .NET CLI commands.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet add package Microsoft.AspNetCore.Authentication.OpenIdConnect
-dotnet add package Syncfusion.Blazor.Grid -v {{ site.releaseversion }}
-dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add required namespaces
-
-Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.Grids` namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-
-{% endhighlight %}
-{% endtabs %}
-
-## Register Syncfusion® Blazor service
-
-Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application.
-
-{% tabs %}
-{% highlight razor tabtitle="~/Program.cs" %}
-
-...
-using Syncfusion.Blazor;
-...
-builder.Services.AddSyncfusionBlazor();
-...
-
-{% endhighlight %}
-{% endtabs %}
-
-### Create a Cognito user pool
-
-Before building the Blazor app, set up an AWS Cognito user pool:
-
-1. Go to **AWS Management Console** > **Amazon Cognito**.
-2. Click **Create user pool**.
-3. Choose application type as **Traditional Web Application** (even though this is a Blazor app, Cognito categorizes web-based apps here).
-4. Set your application name.
-5. Choose authentication method: **Email** or **Phone number** (or both).
-6. Continue through the setup wizard and confirm your settings. Once ready, click the button to **Create User Directory**.
-7. Go to **Amazon Cognito** > **User pools**. Note the **User pool ID** and **User pool name**.
-8. Go to **App integration** > **App clients**.
-9. Click **Create app client**:
- - **App type:** Choose **Public client** (for PKCE without a secret).
- - **Client name:** (for example, `MyBlazorServer`).
- - **Authentication flows:** Ensure **Authorization code flow** is selected.
- - Under **Allowed redirect URIs**, add: `https://localhost:7000/signin-oidc` (adjust port if different; check `Properties/launchSettings.json`).
- - Under **Allowed sign-out URIs**, add: `https://localhost:7000/signout-callback-oidc`.
-10. Verify that in **App integration** → **hosted UI**:
- - "Hosted UI" is **enabled**
- - "Callback URLs" includes your app redirect URI
-
-You now have the values to add to `appsettings.json`.
-
-### Update `appsettings.json` file
-
-This stores your Cognito hosted UI domain and app client ID so the app can read them at startup. The `Authority` is the base URL of your Cognito user pool domain, and `ClientId` identifies your web app in Cognito. Keep these out of code to simplify environment changes. Replace the placeholders with your actual Cognito values.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-{
- "Cognito": {
- "Authority": "https://your-domain.auth.{REGION}.amazoncognito.com",
- "ClientId": "YOUR_APP_CLIENT_ID"
- },
- "AllowedHosts": "*"
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Replace **{REGION}** with your AWS region (e.g., `us-east-1`), and **YOUR_APP_CLIENT_ID** with your Cognito app client ID.
-
-N> This sample uses Authorization Code + PKCE with a public client (no client secret). If you created a confidential client, add ClientSecret to configuration and set `options.ClientSecret` in the OIDC options.
-
-### Configure OIDC and Cookie authentication
-
-This wires OpenID Connect against Cognito’s hosted UI using the Authorization Code flow (PKCE) and uses cookies for the authenticated session. `SaveTokens = true` keeps ID/Access tokens available for downstream API calls. `RoleClaimType = "cognito:groups"` turns Cognito groups into ASP.NET Core roles.
-
-{% tabs %}
-{% highlight csharp tabtitle="Program.cs" %}
-
-using Microsoft.AspNetCore.Authentication;
-using Microsoft.AspNetCore.Authentication.Cookies;
-using Microsoft.AspNetCore.Authentication.OpenIdConnect;
-using Microsoft.IdentityModel.Tokens;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-// Add services to the container.
-builder.Services.AddRazorComponents()
- .AddInteractiveServerComponents();
-builder.Services.AddSyncfusionBlazor();
-builder.Services.AddHttpContextAccessor();
-
-var cognitoAuthority = builder.Configuration["Cognito:Authority"];
-var cognitoClientId = builder.Configuration["Cognito:ClientId"];
-
-bool TryGetAuthorityUri(string? authority, out Uri? uri)
-{
- uri = null;
- if (string.IsNullOrWhiteSpace(authority)) return false;
- if (authority.Contains("your-domain")) return false;
- // Require a valid absolute URI (e.g. https://your-domain.auth.region.amazoncognito.com)
- if (!Uri.TryCreate(authority, UriKind.Absolute, out var parsed)) return false;
- // only http or https are acceptable here for dev detection; production will require https
- if (parsed.Scheme != Uri.UriSchemeHttp && parsed.Scheme != Uri.UriSchemeHttps) return false;
- uri = parsed;
- return true;
-}
-
-// Decide whether to enable OIDC (Cognito) or fall back to cookie-only auth in Development.
-bool useOidc = false;
-if (!string.IsNullOrWhiteSpace(cognitoAuthority)
- && !cognitoAuthority.Contains("your-domain")
- && !string.Equals(cognitoAuthority, "Test user", StringComparison.OrdinalIgnoreCase)
- && !string.IsNullOrWhiteSpace(cognitoClientId)
- && !cognitoClientId.Contains("YOUR_APP_CLIENT_ID"))
-{
- if (Uri.TryCreate(cognitoAuthority, UriKind.Absolute, out var u))
- {
- // Allow only HTTPS authority generally
- if (string.Equals(u.Scheme, Uri.UriSchemeHttps, StringComparison.OrdinalIgnoreCase))
- {
- useOidc = true;
- }
- else if (string.Equals(u.Scheme, Uri.UriSchemeHttp, StringComparison.OrdinalIgnoreCase)
- && u.IsLoopback
- && builder.Environment.IsDevelopment())
- {
- // Allow HTTP for localhost in development only
- useOidc = true;
- }
- }
-}
-
-if (useOidc)
-{
- builder.Services.AddAuthentication(options =>
- {
- options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
- options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
- })
- .AddCookie()
- .AddOpenIdConnect(options =>
- {
- options.Authority = cognitoAuthority!; // Cognito hosted UI domain
- options.ClientId = cognitoClientId!; // App client ID
- options.ResponseType = "code"; // Authorization Code + PKCE
- options.SaveTokens = true; // Persist ID/Access tokens in session for use in API calls or as Bearer tokens
-
- // If the authority is http and we're in Development, allow non-https metadata.
- options.RequireHttpsMetadata = !(builder.Environment.IsDevelopment()
- && Uri.TryCreate(cognitoAuthority, UriKind.Absolute, out var uu)
- && string.Equals(uu.Scheme, Uri.UriSchemeHttp, StringComparison.OrdinalIgnoreCase));
-
- options.Scope.Clear();
- options.Scope.Add("openid");
- options.Scope.Add("email");
- options.Scope.Add("profile");
-
- options.TokenValidationParameters = new TokenValidationParameters
- {
- NameClaimType = "cognito:username",
- RoleClaimType = "cognito:groups"
- };
-
- options.CallbackPath = "/signin-oidc";
- options.SignedOutCallbackPath = "/signout-callback-oidc";
- });
-}
-else
-{
- // Cookie-only auth for development/test when Cognito isn't configured.
- builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
- .AddCookie();
-}
-
-// In Production require a valid HTTPS Cognito authority.
-if (!builder.Environment.IsDevelopment())
-{
- if (!TryGetAuthorityUri(cognitoAuthority, out var prodUri) || prodUri!.Scheme != Uri.UriSchemeHttps || string.IsNullOrWhiteSpace(cognitoClientId) || cognitoClientId.Contains("YOUR_APP_CLIENT_ID"))
- {
- throw new InvalidOperationException(
- "Cognito configuration is invalid. Set 'Cognito:Authority' to your Cognito hosted UI domain (https://.auth..amazoncognito.com) and 'Cognito:ClientId' to your app client id.");
- }
-}
-
-builder.Services.AddAuthorization(o =>
-{
- o.AddPolicy("AdminOnly", p => p.RequireRole("Admin"));
-});
-
-var app = builder.Build();
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
-{
- app.UseExceptionHandler("/Error");
- // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
- app.UseHsts();
-}
-
-app.UseHttpsRedirection();
-app.MapStaticAssets();
-app.UseRouting();
-app.UseAuthentication();
-app.UseAuthorization();
-app.UseAntiforgery();
-app.MapRazorComponents()
- .AddInteractiveServerRenderMode();
-app.MapGet("/signin", async (HttpContext ctx) =>
-{
- if (useOidc)
- {
- await ctx.ChallengeAsync(OpenIdConnectDefaults.AuthenticationScheme, new AuthenticationProperties { RedirectUri = "/" });
- return Results.Empty;
- }
-
- // Dev fallback: create a local cookie user and redirect home
- var claims = new[] {
- new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.NameIdentifier, "devuser"),
- new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.Name, "Developer User"),
- new System.Security.Claims.Claim(System.Security.Claims.ClaimTypes.Email, "dev@example.local")
- };
- var identity = new System.Security.Claims.ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
- var user = new System.Security.Claims.ClaimsPrincipal(identity);
- await ctx.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, user);
- ctx.Response.Redirect("/");
- return Results.Empty;
-});
-
-app.MapGet("/signout", async (HttpContext ctx) =>
-{
- if (useOidc)
- {
- await ctx.SignOutAsync(OpenIdConnectDefaults.AuthenticationScheme, new AuthenticationProperties { RedirectUri = "/" });
- return Results.Empty;
- }
-
- await ctx.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
- ctx.Response.Redirect("/");
- return Results.Empty;
-});
-app.Run();
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add Syncfusion® theme and script references
-
-Add the Syncfusion Blazor theme CSS and script references to your application's `App.razor` file (or `_Host.cshtml` depending on your project template).
-
-{% tabs %}
-{% highlight html tabtitle="App.razor" %}
-
-
- ...
-
-
-
- ...
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Syncfusion provides multiple theme variants, allowing selection of the theme that best aligns with the application's UI design. Additional theme options and customization details are available in the [theming documentation](https://blazor.syncfusion.com/documentation/appearance/themes).
-
-### Syncfusion® DataGrid on an authenticated page
-
-This page demonstrates how to protect a [Syncfusion DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) using ASP.NET Core authorization. When unauthenticated, a `Sign in` link is displayed. Once authenticated, the grid renders with sample data.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@page "/"
-@using Microsoft.AspNetCore.Components.Authorization
-@using Syncfusion.Blazor.Grids
-
-
-
-@code {
- private record Order(int Id, string Item, int Qty, decimal Price);
-
- private readonly List _orders = new()
- {
- new Order(1, "Laptop", 1, 1299.00m),
- new Order(2, "Mouse", 2, 49.99m),
- new Order(3, "Keyboard", 3, 89.99m),
- new Order(4, "Monitor", 1, 349.99m)
- };
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> In this example, sample data is defined inline for demonstration purposes. In production applications, load data from a secure API endpoint that validates the user's JWT token or authentication cookie.
-
-### Run the application
-
-Run the application using the following command:
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet run
-
-{% endhighlight %}
-{% endtabs %}
-
-N> By default, the app runs on `https://localhost:7000` (or similar port defined in `Properties/launchSettings.json`). Older project templates may use `https://localhost:5001`. Ensure your Cognito app client **Allowed redirect URIs** match your actual localhost URL.
-
-**Expected behavior**
-
-* Unauthenticated users see the sign-in prompt.
-* Clicking "Sign in with AWS Cognito" redirects to the Cognito hosted UI.
-* After entering credentials, the user is redirected back to the app.
-* The Syncfusion DataGrid appears with sample data.
-* Clicking "Sign out" clears the session and returns to the sign in page.
-
-**Output:**
-
-
-
-## See also
-
-* [Blazor with JWT authentication](https://blazor.syncfusion.com/documentation/common/authentication/blazor-jwt-authentication)
-* [Blazor with GitHub OAuth 2.0](https://blazor.syncfusion.com/documentation/common/authentication/blazor-oauth-authentication)
-* [AWS Cognito user pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html)
-* [ASP.NET Core authentication overview](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/)
-* [Syncfusion Blazor Server getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio)
-
diff --git a/blazor/common/authentication/blazor-jwt-authentication.md b/blazor/common/authentication/blazor-jwt-authentication.md
deleted file mode 100644
index b6301dac29..0000000000
--- a/blazor/common/authentication/blazor-jwt-authentication.md
+++ /dev/null
@@ -1,399 +0,0 @@
----
-layout: post
-title: Blazor with JWT Authentication | Syncfusion®
-description: Guide to setting up JWT authentication for Syncfusion® Blazor DataGrid with secure API access and token handling.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Securing Syncfusion® Blazor DataGrid with JWT Authentication
-
-This guide shows how to secure the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in a **Blazor Web App** with **Interactive Server** using **JWT (JSON Web Token)** authentication.
-
-## What is JWT (JSON Web Token)?
-
-A JSON Web Token (JWT) is a compact, digitally signed string that identifies a user and authorizes API calls. It has three parts:
-
-- **Header** – specifies the token type and the signing algorithm used.
-- **Payload** – contains claims (e.g., `sub`, `name`, `role`, `exp`).
-- **Signature** – computed using the header, payload, and secret (or private key) to prevent tampering.
-
-## Why use JWT in Blazor?
-
-Syncfusion® Blazor components make HTTP requests to your API internally. JWT allows each request to carry a trusted identity and prevents unauthorized access without relying on server-side session state.
-
-**Benefits of using JWT in Blazor applications**
-
-JWT allows users to log in once and securely access APIs, controls features based on user roles, maintain authentication while navigating between pages, ensure secure communication between client and server, and supports large‑scale applications without storing login sessions on the server.
-
-## Implementing JWT Authorization for Syncfusion® Blazor DataGrid
-
-Configure JWT based authorization to secure backend APIs used by the Syncfusion® Blazor DataGrid in a Blazor App, ensuring that each DataGrid request includes a valid bearer token for authorized access.
-
-### Create a Blazor project
-
-If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**.
-
-Otherwise, create a new Blazor application by following the Syncfusion getting started guides [Blazor Web App (Interactive Server)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
-Ensure that **HTTPS is enabled** during project creation, as JWT based authorization requires secure communication.
-
-### Install required packages
-
-Open the NuGet Package Manager in Visual Studio from (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), and install the required package.
-
-**Syncfusion packages:**
-
-- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
-- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-**JWT package:**
-
-- [Microsoft.AspNetCore.Authentication.JwtBearer](https://www.nuget.org/packages/Microsoft.AspNetCore.Authentication.JwtBearer)
-
-### Add Syncfusion® namespaces
-
-Open the `~/_Imports.razor` file and import the Syncfusion® namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Data
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add stylesheet and script resources
-
-Include the theme stylesheet and script references in the `App.razor` file.
-
-{% tabs %}
-{% highlight html %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Configuring JWT in appsettings.json
-
-The JWT configuration specifies how the server signs and validates authentication tokens.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-{
- "Jwt": {
- "Key": "REPLACE_WITH_A_LONG_RANDOM_SECRET_32+_CHARS",
- "Issuer": "BlazorJWT",
- "Audience": "BlazorJWTClient"
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> For production environments, do not store secrets directly in `appsettings.json`. Use environment variables or a secure secret store such as **Azure Key Vault** to protect sensitive information.
-
-### Generating a JWT token
-
-This section demonstrates how to generate a JWT token on the server by using a custom **TokenService** class.
-
-{% tabs %}
-{% highlight c# tabtitle="Services/TokenService.cs" %}
-
-using System.IdentityModel.Tokens.Jwt;
-using System.Security.Claims;
-using System.Text;
-using Microsoft.IdentityModel.Tokens;
-using Microsoft.Extensions.Configuration;
-
-namespace YourProjectName.Services
-{
- public class TokenService
- {
- private readonly IConfiguration _config;
- public TokenService(IConfiguration config) => _config = config;
-
- public string IssueToken(string subjectUserId, string? name = null)
- {
- var issuer = _config["Jwt:Issuer"]!;
- var audience = _config["Jwt:Audience"]!;
- var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_config["Jwt:Key"]!));
- var creds = new SigningCredentials(key, SecurityAlgorithms.HmacSha256);
-
- var claims = new List
- {
- new(JwtRegisteredClaimNames.Sub, subjectUserId),
- new(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
- };
-
- if (!string.IsNullOrWhiteSpace(name))
- {
- claims.Add(new Claim(ClaimTypes.Name, name));
- }
-
- var token = new JwtSecurityToken(
- issuer: issuer,
- audience: audience,
- claims: claims,
- notBefore: DateTime.UtcNow.AddMinutes(-1),
- expires: DateTime.UtcNow.AddMinutes(30),
- signingCredentials: creds);
- return new JwtSecurityTokenHandler().WriteToken(token);
- }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Getting the token
-
-This section describes how the application issues a JSON Web Token (JWT) for authenticated access. The **AuthController** class provides an API endpoint that generates and returns a JWT for the requesting user.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Controllers/AuthController.cs" %}
-
-using YourProjectName.Services;
-using Microsoft.AspNetCore.Mvc;
-
-namespace YourProjectName.Controllers;
-
-[ApiController]
-[Route("api/[controller]")]
-public class AuthController : ControllerBase
-{
- private readonly TokenService _tokenService;
- public AuthController(TokenService tokenService) => _tokenService = tokenService;
-
- [HttpPost("token")]
- public IActionResult Token([FromQuery] string user = "user123")
- {
- var jwt = _tokenService.IssueToken(user, name: user);
- return Ok(new { token = jwt });
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Adding JWT middleware
-
-Register JWT authentication and authorization middleware to validate incoming API requests. Add these configurations in `Program.cs`.
-
-{% tabs %}
-{% highlight razor tabtitle="~/Program.cs" %}
-
-using System.Text;
-using YourProjectName.Components;
-using YourProjectName.Services;
-using Microsoft.AspNetCore.Authentication.JwtBearer;
-using Microsoft.IdentityModel.Tokens;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-builder.Services.AddRazorComponents()
- .AddInteractiveServerComponents();
-builder.Services.AddControllers();
-builder.Services.AddHttpClient();
-
-// Register the Syncfusion® Blazor service
-builder.Services.AddSyncfusionBlazor();
-
-var jwtKey = builder.Configuration["Jwt:Key"] ?? throw new InvalidOperationException("Jwt:Key missing");
-
-builder.Services
- .AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
- .AddJwtBearer(options =>
- {
- options.TokenValidationParameters = new TokenValidationParameters
- {
- ValidateIssuer = true,
- ValidateAudience = true,
- ValidateIssuerSigningKey = true,
- ValidateLifetime = true,
- ClockSkew = TimeSpan.FromMinutes(5),
- ValidIssuer = builder.Configuration["Jwt:Issuer"],
- ValidAudience = builder.Configuration["Jwt:Audience"],
- IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(jwtKey))
- };
- });
-
-builder.Services.AddAuthorization();
-builder.Services.AddSingleton();
-
-var app = builder.Build();
-
-app.UseHttpsRedirection();
-app.UseStaticFiles();
-app.UseAuthentication();
-app.UseAuthorization();
-app.UseAntiforgery();
-app.MapControllers();
-app.MapRazorComponents()
- .AddInteractiveServerRenderMode();
-app.Run();
-
-{% endhighlight %}
-{% endtabs %}
-
-### Create sample data model
-
-Create sample records for the DataGrid in `~/Models/OrdersDetails.cs` file.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Models/OrdersDetails.cs" %}
-
-namespace YourProjectName.Models;
-
-public class OrdersDetails
-{
- public int OrderID { get; set; }
- public string? CustomerID { get; set; }
- public string? ShipCity { get; set; }
- public string? ShipCountry { get; set; }
- private static List? _data;
- public static List GetAllRecords()
- {
- if (_data is null)
- {
- _data = Enumerable.Range(1, 50).Select(i => new OrdersDetails
- {
- OrderID = i,
- CustomerID = $"CUST-{i:000}",
- ShipCity = i % 2 == 0 ? "Chennai" : "Bengaluru",
- ShipCountry = "India"
- }).ToList();
- }
- return _data;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Protecting the Syncfusion® Blazor DataGrid API
-
-This section explains how the Syncfusion® Blazor DataGrid API endpoint is secured to allow access only to authenticated requests. The `Authorize` attribute enforces token based access to Grid data.
-
-{% tabs %}
-{% highlight c# tabtitle="~/Controllers/GridController.cs" %}
-
-using YourProjectName.Models;
-using Microsoft.AspNetCore.Authorization;
-using Microsoft.AspNetCore.Mvc;
-using Syncfusion.Blazor.Data;
-
-namespace YourProjectName.Controllers;
-
-[ApiController]
-[Route("api/[controller]")]
-[Authorize]
-[IgnoreAntiforgeryToken] // DataManager uses bearer token authentication; antiforgery tokens are not applicable for API endpoints using JWT.
-public class GridController : ControllerBase
-{
- [HttpPost]
- public IActionResult Post([FromBody] DataManagerRequest dm)
- {
- var data = OrdersDetails.GetAllRecords().AsQueryable();
- var total = data.Count();
- return Ok(new { result = data.ToList(), count = total });
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Adding JWT to Syncfusion® Blazor DataManager headers
-
-Attach the JWT token to HTTP headers so the **DataManager** can send authenticated requests.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Data
-@using YourProjectName.Models
-@inject HttpClient Http
-@inject NavigationManager Nav
-
-
JWT + Syncfusion DataGrid (Click to Load)
-
-
-
-
- // Only render the DataManager after the token is fetched.
- @if (isDataManagerEnabled)
- {
-
- }
-
-
-
-
-
-
-
-@code {
- private SfGrid? grid;
- // DataManager is enabled only after token is retrieved.
- private bool isDataManagerEnabled = false;
- private string? jwt;
- private string? error;
- private IDictionary HeaderData => new Dictionary
- {
- ["Authorization"] = string.IsNullOrEmpty(jwt) ? "" : $"Bearer {jwt}"
- };
- // Ensure jwt is set before the DataManager is rendered; otherwise headers may be empty.
- private async Task LoadGridWithToken()
- {
- error = null;
- try
- {
- var baseUri = new Uri(Nav.BaseUri);
- var tokenRes = await Http.PostAsync(new Uri(baseUri, "api/auth/token?user=username"), content: null);
- tokenRes.EnsureSuccessStatusCode();
- var json = await tokenRes.Content.ReadFromJsonAsync>();
- jwt = json!["token"];
- isDataManagerEnabled = true;
- StateHasChanged();
- await Task.Yield();
- if (grid is not null)
- {
- await grid.Refresh(); // Triggers the first data request using the DataManager and headers.
- }
- }
- catch (Exception ex)
- {
- error = ex.Message;
- isDataManagerEnabled = false;
- }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-The complete application flow ensures the **DataGrid** loads only after the user is authenticated using a valid JWT.
-
-## See also
-
-- [Configure JWT bearer authentication in ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/configure-jwt-bearer-authentication?view=aspnetcore-10.0)
-- [Getting started with Syncfusion® Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/authentication/blazor-microsoft-entra-id.md b/blazor/common/authentication/blazor-microsoft-entra-id.md
deleted file mode 100644
index a9e51de684..0000000000
--- a/blazor/common/authentication/blazor-microsoft-entra-id.md
+++ /dev/null
@@ -1,277 +0,0 @@
----
-layout: post
-title: Blazor with Microsoft Entra ID Authentication | Syncfusion®
-description: Step-by-step guide to integrating Microsoft Entra ID authentication with Syncfusion® Blazor components in a Blazor Web App.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Securing Syncfusion® Blazor DataGrid with Microsoft Entra ID
-
-This document explains how to build a **Blazor Web App (Interactive Server)** that uses **Microsoft Entra ID** (formerly Azure Active Directory) for user authentication. Once users log in with their Microsoft account, they will be able to access a protected page that includes the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component.
-
-## What is Microsoft Entra ID?
-
-Microsoft Entra ID is Microsoft’s identity platform that allows users to securely sign in to applications using their Microsoft account.
-
-**Benefits of using Entra ID in Blazor applications**
-
-Entra ID enables secure Microsoft account sign-in for your Blazor App with Single Sign‑On (SSO) and token based authentication, so your app never stores passwords. It also supports role and group based authorization and provides enterprise grade security managed by Microsoft, so you don’t need to write or maintain authentication logic yourself.
-
-## Implementing Microsoft Entra ID Authentication for Syncfusion® Blazor DataGrid
-
-This section explains how to connect **Microsoft Entra ID login** to a Blazor Web App and show the **Syncfusion® Blazor DataGrid** only after a user signs in.
-
-### Create a Blazor project
-
-If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**.
-
-Otherwise, create a new Blazor application by following the Syncfusion getting started guides [Blazor Web App (Interactive Server)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
-Ensure that **HTTPS is enabled** during project creation, as Microsoft Entra ID based authorization requires secure communication.
-
-### Install required packages
-
-Open the NuGet Package Manager in Visual Studio from (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), and install the required package.
-
-**Syncfusion packages:**
-
-- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
-- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-**Microsoft Identity packages:**
-
-- [Microsoft.Identity.Web](https://www.nuget.org/packages/Microsoft.Identity.Web)
-- [Microsoft.Identity.Web.UI](https://www.nuget.org/packages/Microsoft.Identity.Web.UI)
-
-### Add Syncfusion® namespaces
-
-Open the `~/_Imports.razor` file and import the Syncfusion® namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add stylesheet and script resources
-
-Include the theme stylesheet and script references in the `App.razor` file.
-
-{% tabs %}
-{% highlight html %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Register your app in Microsoft Entra ID (Azure Portal)
-
-This step registers the Blazor application in Azure so Microsoft Entra ID can authenticate users.
-
-1. Open [Azure Portal](https://portal.azure.com).
-2. Go to **Microsoft Entra ID** → **App registrations**.
-3. Click **New registration**.
-4. Enter **App name** and under **Supported account types**, select:
- - **Single tenant** - if the app is for users in your organization only.
- - **Multi tenant** - if the app should support users from any Microsoft Entra organization.
- - **Multi tenant and personal Microsoft accounts** - for the broadest access.
- For this tutorial, select **Single tenant**.
-5. Click **Register**.
-
-After registration, note the following values:
-- **Application (Client) ID**
-- **Directory (Tenant) ID**
-
-These values are required in the application configuration.
-
-### Configure redirect URLs
-
-Redirect URLs specify where Microsoft Entra ID should return the user after a successful login.
-
-1. Open the registered application in Azure Portal.
-2. Navigate to **Authentication**.
-3. Click **Add a platform** and select **Web**.
-4. Add the redirect URL: `https://localhost:5001/signin-oidc` *(Replace `5001` with your application's actual HTTPS port number from `launchSettings.json` if different)*.
-5. Enable **ID tokens**.
-6. Save the changes.
-
-### Configure Azure AD settings in appsettings.json
-
-This step stores Microsoft Entra ID configuration values so the Blazor App can read them at runtime.
-After copying the **Tenant ID** and **Client ID**, update the `appsettings.json` file as shown below.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-"AzureAd": {
- "Instance": "https://login.microsoftonline.com/",
- "TenantId": "",
- "ClientId": "",
- "CallbackPath": "/signin-oidc"
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Configure Microsoft Entra ID authentication in Blazor
-
-This step enables OpenID Connect authentication in the Blazor application by configuring Microsoft Entra ID settings in the `Program.cs` file.
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-
-using Microsoft.Identity.Web;
-using Microsoft.Identity.Web.UI;
-using Microsoft.AspNetCore.Authentication.OpenIdConnect;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Configure authentication with Microsoft Entra ID (Azure AD)
-builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
- .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));
-
-builder.Services.AddAuthorization();
-
-builder.Services.AddRazorComponents()
- .AddInteractiveServerComponents();
-
-// Register the Syncfusion® Blazor service
-builder.Services.AddSyncfusionBlazor();
-
-// Add controllers with UI endpoints for Microsoft Identity (SignIn/SignOut)
-builder.Services.AddControllersWithViews().AddMicrosoftIdentityUI();
-
-var app = builder.Build();
-
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
-{
- app.UseExceptionHandler("/Error", createScopeForErrors: true);
- app.UseHsts();
-}
-
-app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
-app.UseHttpsRedirection();
-app.MapStaticAssets();
-app.UseAuthentication();
-app.UseAuthorization();
-app.UseAntiforgery();
-app.MapControllers();
-app.MapRazorComponents()
- .AddInteractiveServerRenderMode();
-app.Run();
-
-{% endhighlight %}
-{% endtabs %}
-
-### Enabling authentication state in Blazor
-
-This step allows Blazor components to access the current user’s authentication state by configuring the `~/Components/Routes.razor` file.
-
-{% tabs %}
-{% highlight razor tabtitle="Routes.razor" %}
-
-@using Microsoft.AspNetCore.Components.Authorization
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Connect Syncfusion® Blazor DataGrid
-
-Create a protected page that displays the Syncfusion® **DataGrid** only after the user successfully signs in with **Microsoft Entra ID**.
-
-{% tabs %}
-{% highlight razor %}
-
-@page "/"
-@rendermode InteractiveServer
-@using Microsoft.AspNetCore.Components.Authorization
-
-Home
-
-
-
-
-
Welcome!
-
- Click the Login button below to sign in with Microsoft Entra ID.
- Once you’re logged in, the Syncfusion Blazor DataGrid will be displayed below.
-
-
-
-
-
-
-
-
-
-
- @code {
- public List Orders { get; set; } = new List();
-
- protected override void OnInitialized()
- {
- var customerIds = new[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" };
- Orders = Enumerable.Range(1, 5).Select(x => new Order
- {
- OrderID = x,
- CustomerID = customerIds[Random.Shared.Next(5)]
- }).ToList();
- }
-
- public class Order
- {
- public int OrderID { get; set; }
- public string? CustomerID { get; set; }
- }
- }
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-This example demonstrates how to integrate Microsoft Entra ID authentication into a Blazor Web App using the Microsoft Identity platform.
-
-
-
-The application securely signs users in through Entra ID and manages the authentication lifecycle using OpenID Connect. After successfully signing in, authenticated users can access protected pages and interact with the **Syncfusion® Blazor DataGrid** component.
-
-This approach provides a secure, enterprise ready foundation for building modern Blazor applications with controlled access to data and UI components.
-
-## See also
-
-- [Secure an ASP.NET Core Blazor WebAssembly Standalone App with Microsoft Accounts](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-microsoft-accounts)
-- [Getting started with Syncfusion® Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/authentication/blazor-oauth-authentication.md b/blazor/common/authentication/blazor-oauth-authentication.md
deleted file mode 100644
index a2e134ca21..0000000000
--- a/blazor/common/authentication/blazor-oauth-authentication.md
+++ /dev/null
@@ -1,338 +0,0 @@
----
-layout: post
-title: Syncfusion® Blazor DataGrid with GitHub OAuth 2.0
-description: Step-by-step guide to integrate GitHub OAuth 2.0 authentication with Syncfusion® Blazor components in a Blazor Web App.
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Securing Syncfusion® Blazor DataGrid with GitHub OAuth 2.0
-
-This guide explains how to integrate **OAuth 2.0 authentication** into a **Blazor Web App (Interactive Server)** using **GitHub OAuth**. Once authenticated, the user can access protected pages featuring the **[Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)** component.
-
-## What is OAuth 2.0?
-
-OAuth 2.0 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service (such as **GitHub**, **Google**, and **Microsoft**). It uses tokens instead of credentials and is widely used for secure authentication in modern applications.
-
-**Benefits of using OAuth in Blazor applications**
-
-OAuth enables secure user authentication by allowing sign‑in through trusted external providers. It removes the need to store username and password in the application, reducing security risks. OAuth uses short lived access tokens to protect APIs and user data. This approach minimizes developer side security responsibilities.
-
-## Implementing OAuth 2.0 Authentication for Syncfusion® Blazor DataGrid
-
-This section explains how to secure the Syncfusion® Blazor DataGrid using OAuth 2.0 authentication in a Blazor Web App. It demonstrates integrating GitHub as an OAuth provider to authenticate users, restrict access to protected pages, and render the DataGrid only for authorized users.
-
-### Create a Blazor project
-
-If you already have a Blazor project configured, you can skip this section and proceed to **Install required packages**.
-
-Otherwise, create a new Blazor application by following the Syncfusion getting started guides [Blazor Web App (Interactive Server)](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-
-Ensure that **HTTPS is enabled** during project creation, as GitHub OAuth based authorization requires secure communication.
-
-### Install required packages
-
-Open the NuGet Package Manager in Visual Studio from (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), and install the required package.
-
-**Syncfusion packages:**
-
-- [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/)
-- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
-
-### Add Syncfusion® namespaces
-
-Open the `~/_Imports.razor` file and import the Syncfusion® namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-
-{% endhighlight %}
-{% endtabs %}
-
-### Add stylesheet and script resources
-
-Include the theme stylesheet and script references in the `App.razor` file.
-
-{% tabs %}
-{% highlight html %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Create a GitHub OAuth application
-
-1. Go to [GitHub Developer Settings](https://github.com/settings/developers).
-2. Click **OAuth Apps → New OAuth App**.
-3. Configure the application:
- - **Homepage URL:** `https://localhost:5001/` *(Replace `5001` with your application's actual HTTPS port number from `launchSettings.json` if different)*.
- - **Authorization callback URL:** `https://localhost:5001/signin-github`.
-4. Copy the generated **Client ID** and **Client Secret**.
-5. In your Blazor project, open **appsettings.json** and add the following configuration.
-
-{% tabs %}
-{% highlight json tabtitle="appsettings.json" %}
-
-"Authentication": {
- "GitHub": {
- "ClientId": "",
- "ClientSecret": ""
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Configure OAuth 2.0 authentication in Blazor
-
-Add OAuth authentication using GitHub and enable cookie based sign‑in in `Program.cs`.
-
-{% tabs %}
-{% highlight c# tabtitle="Program.cs" %}
-
-using Microsoft.AspNetCore.Authentication.Cookies;
-using Microsoft.AspNetCore.Authentication;
-using Syncfusion.Blazor;
-
-var builder = WebApplication.CreateBuilder(args);
-
-builder.Services.AddRazorComponents()
- .AddInteractiveServerComponents();
-
-// Register the Syncfusion® Blazor service
-builder.Services.AddSyncfusionBlazor();
-
-// Configure authentication (Cookies + GitHub OAuth).
-builder.Services.AddAuthentication(options =>
-{
- options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
- options.DefaultChallengeScheme = "GitHub";
-})
- .AddCookie()
- .AddOAuth("GitHub", options =>
- {
- options.ClientId = builder.Configuration["Authentication:GitHub:ClientId"] ?? throw new InvalidOperationException("GitHub ClientId is not configured. Set 'Authentication:GitHub:ClientId' in appsettings or user secrets.");
- options.ClientSecret = builder.Configuration["Authentication:GitHub:ClientSecret"] ?? throw new InvalidOperationException("GitHub ClientSecret is not configured. Set 'Authentication:GitHub:ClientSecret' in appsettings or user secrets.");
- options.CallbackPath = "/signin-github";
- options.AuthorizationEndpoint = "https://github.com/login/oauth/authorize";
- options.TokenEndpoint = "https://github.com/login/oauth/access_token";
- options.UserInformationEndpoint = "https://api.github.com/user";
- options.Scope.Add("user:email");
- options.SaveTokens = true;
-
- options.ClaimActions.MapJsonKey("urn:github:login", "login");
- options.ClaimActions.MapJsonKey("urn:github:id", "id");
- options.ClaimActions.MapJsonKey("urn:github:url", "html_url");
- options.ClaimActions.MapJsonKey("urn:github:avatar", "avatar_url");
-
- options.Events = new Microsoft.AspNetCore.Authentication.OAuth.OAuthEvents
- {
- OnCreatingTicket = async context =>
- {
- // GitHub requires a user-agent header.
- var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);
- request.Headers.Accept.ParseAdd("application/json");
- request.Headers.UserAgent.ParseAdd("OAuthApp");
- request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", context.AccessToken);
-
- var response = await context.Backchannel.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, context.HttpContext.RequestAborted);
- response.EnsureSuccessStatusCode();
- using var payload = System.Text.Json.JsonDocument.Parse(await response.Content.ReadAsStringAsync());
- context.RunClaimActions(payload.RootElement);
- }
- };
- });
-
-builder.Services.AddAuthorization();
-// Add support for API controllers (used to proxy calls to protected APIs).
-builder.Services.AddControllers();
-// Register IHttpClientFactory for outbound HTTP calls
-builder.Services.AddHttpClient();
-
-var app = builder.Build();
-
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
-{
- app.UseExceptionHandler("/Error", createScopeForErrors: true);
- app.UseHsts();
-}
-app.UseHttpsRedirection();
-app.UseRouting();
-app.UseAuthentication();
-app.UseAuthorization();
-app.UseAntiforgery();
-app.MapControllers();
-app.MapStaticAssets();
-app.MapRazorComponents()
- .AddInteractiveServerRenderMode();
-app.Run();
-
-{% endhighlight %}
-{% endtabs %}
-
-This configuration redirects users to GitHub for authentication, stores the authenticated session in a secure cookie, and retrieves the user's profile information from GitHub after a successful login.
-
-### Implement login and logout endpoints
-
-Create a new folder **Controllers** in the project root, then add `AccountController.cs` with the following code to handle OAuth redirection.
-
-{% tabs %}
-{% highlight c# tabtitle="AccountController.cs" %}
-
-using Microsoft.AspNetCore.Authentication;
-using Microsoft.AspNetCore.Authentication.Cookies;
-using Microsoft.AspNetCore.Mvc;
-
-namespace OAuth.Controllers
-{
- [Route("account")]
- public class AccountController : Controller
- {
- [HttpGet("login")]
- public IActionResult Login(string? returnUrl = "/")
- {
- return Challenge( new AuthenticationProperties { RedirectUri = returnUrl }, "GitHub" );
- }
-
- [HttpGet("logout")]
- public async Task Logout()
- {
- await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
- return Redirect("/");
- }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Enabling authentication state in Blazor
-
-To allow components to receive authentication state, wrap the router inside **CascadingAuthenticationState** under `~/Components/Routes.razor` file.
-
-{% tabs %}
-{% highlight razor tabtitle="Routes.razor" %}
-
-@using Microsoft.AspNetCore.Components.Authorization
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Connect Syncfusion® Blazor DataGrid
-
-Create `SecureGrid.razor` page and render the Syncfusion® Blazor DataGrid on a secured Blazor page using the `[Authorize]` attribute, allowing access only to authenticated users.
-
-{% tabs %}
-{% highlight razor tabtitle="Pages/SecureGrid.razor" %}
-
-@page "/secure-grid"
-@rendermode InteractiveServer
-@attribute [Microsoft.AspNetCore.Authorization.Authorize]
-
-@using Syncfusion.Blazor.Grids
-@using Microsoft.AspNetCore.Components.Authorization
-
-Secure Data Grid
-
-
-
-
-
-
-
-@code {
- public List Orders { get; set; } = new();
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 5).Select(x => new Order()
- {
- OrderID = x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string? CustomerID { get; set; }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-### Display content based on authentication status
-
-This section demonstrates how to dynamically render UI content based on the user’s authentication state. The `Home.razor` page uses the `` component to show different content for authenticated and unauthenticated users.
-
-{% tabs %}
-{% highlight razor tabtitle="Pages/Home.razor" %}
-
-@page "/"
-@using Microsoft.AspNetCore.Components.Authorization
-
-Home
-
-
-
-
-
-
DataGrid
-
-
-
-
-
-
-
-
-
Welcome!
-
-
- Click the Login button below to sign in with GitHub.
- Once you’re logged in, the Syncfusion Blazor DataGrid will be displayed.
-
-
-{% endhighlight %}
-{% endtabs %}
-
-This example demonstrates how to integrate **GitHub OAuth** into a Blazor Web App and authenticate users using secure cookie based sign‑in. After authentication, the user can access protected pages and view the Syncfusion® Blazor **DataGrid**.
-
-
-
-## See also
-
-- [OAuth 2.0 and OIDC authentication in the Microsoft identity platform](https://learn.microsoft.com/en-us/entra/identity-platform/v2-protocols)
-- [Getting started with Syncfusion® Blazor DataGrid in Web App](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app)
\ No newline at end of file
diff --git a/blazor/common/authentication/images/aws-cognito.webp b/blazor/common/authentication/images/aws-cognito.webp
deleted file mode 100644
index 830d92a0c9..0000000000
Binary files a/blazor/common/authentication/images/aws-cognito.webp and /dev/null differ
diff --git a/blazor/common/authentication/images/jwt-authentication.webp b/blazor/common/authentication/images/jwt-authentication.webp
deleted file mode 100644
index 236a444c17..0000000000
Binary files a/blazor/common/authentication/images/jwt-authentication.webp and /dev/null differ
diff --git a/blazor/common/integration/blazor-azure-functions.md b/blazor/common/integration/blazor-azure-functions.md
deleted file mode 100644
index 5ce9fc56f6..0000000000
--- a/blazor/common/integration/blazor-azure-functions.md
+++ /dev/null
@@ -1,547 +0,0 @@
----
-layout: post
-title: Blazor WebAssembly with Azure Functions | Syncfusion
-description: Step-by-step guide to integrate Azure Functions as a serverless backend for Blazor WebAssembly with Syncfusion components (Grid, Scheduler, DatePicker).
-platform: Blazor
-control: Common
-documentation: ug
----
-
-# Integrating Syncfusion® Blazor Components with Azure Functions
-
-This guide shows how to build a Blazor WebAssembly app that uses [Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/functions-overview) as a serverless backend and integrates Syncfusion Blazor components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler), [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker). It covers local development setup, security options such as Function keys, calling functions from Blazor, CORS configuration, error handling, and a complete working example with an orders list and a scheduler view.
-
-## What is Azure Functions?
-
-Azure Functions is a serverless compute service designed to run small pieces of code (functions) without managing infrastructure. Azure automatically handles hosting, scaling, and execution. Functions run on demand triggered by HTTP requests, timers, queues, or other Azure events, making them ideal for lightweight APIs, background tasks, and event-driven workflows.
-
-## Why use Azure Functions with Blazor?
-
-Azure Functions scale independently from the UI and require minimal operational overhead, making them ideal for small backend APIs to serve Blazor WebAssembly. They integrate well with Syncfusion components like DataGrid and Scheduler by exposing lightweight HTTP endpoints that return JSON.
-
-## Secure Azure Functions
-
-For production applications, use **Microsoft Entra ID** for token based, per user authorization and auditing. Function keys are intended for development, testing, and trusted internal workflows, and should not be used in production client authentication.
-
-Azure Functions supports two authorization approaches:
-* **Function-level authorization (Function Keys):** Simple shared secrets passed via query parameters or headers and is suitable for development and internal automation only.
-* **Microsoft Entra ID / EasyAuth:** Token based authentication with per user authorization, auditing, and managed identities and is recommended for production environments.
-
-EasyAuth (App Service Authentication) lets Azure validate tokens for you. For server-side validation in isolated worker functions use `Microsoft.IdentityModel.Tokens`. EasyAuth can validate tokens at platform level so your functions don't need to parse JWTs.
-
-### Function-level authorization
-
-Function keys are simple shared secrets passed via `?code=` or the `x-functions-key` header, but they offer no user identity or fine-grained access control, so they shouldn’t be used as production level authorization. Reserve Function Keys for trusted server-to-server or internal automation workflows.
-
-**Examples: How Function Keys are sent to Azure Functions**
-
-When calling an Azure Function that uses Function-level authorization, the Function Key must be sent with every request. Azure Functions supports two common ways to send the key:
-
-* Query string
-* HTTP header
-
-**1. Using a Query String**
-
- In this approach, the Function Key is added directly to the URL using the code `query` parameter.
-
-```c#
-
- GET "/api/orders?code=YOUR_FUNCTION_KEY"
-
-```
-
-**2. Using an HTTP Header**
-
-In this approach, the Function Key is sent in a request header called `x-functions-key`.
-
-{% tabs %}
-{% highlight cs tabtitle="Program.cs" %}
-
-builder.Services.AddScoped(sp => {
- var client = new HttpClient { BaseAddress = new Uri("http://localhost:7071/") };
- client.DefaultRequestHeaders.Add("x-functions-key", Environment.GetEnvironmentVariable("FUNCTION_KEY") ?? "YOUR_FUNCTION_KEY");
- return client;
-});
-
-{% endhighlight %}
-{% endtabs %}
-
-**Blazor HttpClient: Add HTTP Header before a request**
-
-Instead of configuring it globally, you can add the Function Key only when making a specific request.
-
-```c#
-
-var req = new HttpRequestMessage(HttpMethod.Get, "/api/orders?...");
-req.Headers.Add("x-functions-key", "YOUR_FUNCTION_KEY");
-await Http.SendAsync(req);
-
-```
-
-For production, Microsoft Entra ID and managed identities provide better security than Function Keys.
-
-### EasyAuth / Microsoft Entra ID
-
-Register an application in Microsoft Entra ID and configure the Function App Authentication provider (EasyAuth) to require tokens, or keep EasyAuth off and validate JWTs inside functions with `Microsoft.IdentityModel.Tokens`. For production, Microsoft Entra ID and managed identities provide better security than Function Keys.
-
-Use EasyAuth (platform) for standard token validation and validate JWTs in function when you need custom claims or fine‑grained checks.
-
-## Working with Function Apps in a real‑world Blazor app
-
-This sample exposes `GET /api/orders` and `POST /api/orders`. The Blazor page uses `DatePicker` to select date ranges, `DataGrid` to list orders, `Scheduler` to show order events. Keep functions single purpose, persist real data in storage, and enable Application Insights for telemetry.
-
-### Prerequisites
-
-* [.NET SDK](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks) (version 8.0 or later, this guide uses .NET 10.0)
-* [Azure Functions Core Tools](https://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local) (version 4.x or later)
-* [Azure CLI](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli-windows?view=azure-cli-latest&pivots=msi#install-or-update)
-* [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension
-
-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
-
-In this section, you will create a single solution that contains:
-
-* 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.
-
-**Step 1: Create the Blazor WebAssembly client project**
-
-Run the following command to create a Blazor WebAssembly application named Client.
-
-{% tabs %}
-{% highlight bash tabtitle=".NET CLI" %}
-
-dotnet new blazorwasm -o Client -f net10.0
-
-{% endhighlight %}
-{% endtabs %}
-
-**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.
-
-{% tabs %}
-{% highlight bash tabtitle="CLI" %}
-
-func init Functions --worker-runtime dotnet-isolated
-cd Functions
-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.
-
-* [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.
-
-{% 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.
-
-* [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.
-
-{% 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 %}
-
-### Add required namespaces
-
-Open the `Client/_Imports.razor` file from WASM project and import the below namespaces.
-
-{% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
-
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Calendars
-@using Syncfusion.Blazor.Schedule
-
-{% endhighlight %}
-{% endtabs %}
-
-### Register Syncfusion® Blazor service
-
-Add the Syncfusion Blazor service to the `Client/Program.cs` file to enable Syncfusion components in the application.
-
-{% tabs %}
-{% highlight cs tabtitle="Program.cs" %}
-
-using Syncfusion.Blazor;
-
-...
-builder.Services.AddSyncfusionBlazor();
-// For production: read base address from configuration
-// builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.Configuration["FunctionsBaseUrl"]!) });
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("http://localhost:7071/") });
-
-{% endhighlight %}
-{% endtabs %}
-
-N> The `BaseAddress` is set to `http://localhost:7071/` for local development. In production, update this to your Azure Function App URL (e.g., `https://myapp.azurewebsites.net`). Consider reading this from configuration.
-
-### Add stylesheet and script resources
-
-Add the Syncfusion theme CSS and required scripts to the `wwwroot/index.html` file from WASM project.
-
-{% tabs %}
-{% highlight html %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-### Implement simple Azure Functions endpoints
-
-This example shows two minimal HTTP triggered functions: GET `/api/orders` returns demo orders filtered by optional from/to query parameters (format yyyy‑MM‑dd), and POST `/api/orders` accepts and echoes a JSON payload. These functions include development-only CORS handling and basic logging. Configure CORS and authentication in Azure for production.
-
-Add the following file to your Azure Functions project (e.g., `OrdersApi.cs`):
-
-{% tabs %}
-{% highlight cs tabtitle="OrdersApi.cs" %}
-
-using System.Text.Json;
-using Microsoft.Extensions.Logging;
-using Microsoft.Azure.Functions.Worker;
-using Microsoft.Azure.Functions.Worker.Http;
-using System.Globalization;
-using System.Net;
-
-public static class OrdersApi
-{
- [Function("GetOrders")]
- public static async Task GetOrders(
- [HttpTrigger(AuthorizationLevel.Function, "get", "options", Route = "orders")] HttpRequestData req,
- FunctionContext ctx)
- {
- // Handle CORS preflight
- if (req.Method.Equals("OPTIONS", StringComparison.OrdinalIgnoreCase))
- {
- var preflight = req.CreateResponse(HttpStatusCode.NoContent);
- preflight.Headers.Add("Access-Control-Allow-Origin", "*");//For local testing only; configure precise origins in production.
- preflight.Headers.Add("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
- preflight.Headers.Add("Access-Control-Allow-Headers", "Content-Type,Authorization");
- return preflight;
- }
-
- var baseDate = DateTime.UtcNow.Date;
- // Generate demo orders
- var allOrders = Enumerable.Range(1, 10).Select(i => new OrderDto
- {
- Id = i,
- Date = baseDate.AddDays(-(i % 7)),
- Customer = i % 3 == 0 ? "Contoso" : i % 2 == 0 ? "Tailspin" : "ACME",
- Total = Math.Round(20 + i * 15.75, 2)
- }).ToArray();
-
- // Parse optional query parameters (expected yyyy-MM-dd)
- DateTime? from = null; DateTime? to = null;
- try
- {
- var query = (req.Url.Query ?? string.Empty).TrimStart('?');
- if (!string.IsNullOrEmpty(query))
- {
- var pairs = query.Split('&', StringSplitOptions.RemoveEmptyEntries);
- foreach (var p in pairs)
- {
- var kv = p.Split('=', 2);
- if (kv.Length == 0) continue;
- var key = WebUtility.UrlDecode(kv[0]).Trim();
- var val = kv.Length > 1 ? WebUtility.UrlDecode(kv[1]).Trim() : string.Empty;
- if (string.Equals(key, "from", StringComparison.OrdinalIgnoreCase) && DateTime.TryParseExact(val, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out var f))
- from = f.Date;
- if (string.Equals(key, "to", StringComparison.OrdinalIgnoreCase) && DateTime.TryParseExact(val, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out var t))
- to = t.Date;
- }
- }
- }
- catch
- {
- // ignore parse errors and return unfiltered results
- }
-
- var orders = allOrders.Where(o =>
- (!from.HasValue || o.Date.Date >= from.Value) &&
- (!to.HasValue || o.Date.Date <= to.Value)).ToArray();
-
- try
- {
- var logger = ctx.GetLogger("GetOrders");
- logger.LogInformation($"Returning {orders.Length} orders (from={from?.ToString("yyyy-MM-dd") ?? ""}, to={to?.ToString("yyyy-MM-dd") ?? ""})");
- }
- catch
- {
- // ignore logging failures
- }
-
- var resp = req.CreateResponse(HttpStatusCode.OK);
- resp.Headers.Add("Content-Type", "application/json; charset=utf-8");
- resp.Headers.Add("Access-Control-Allow-Origin", "*");
- await resp.WriteStringAsync(JsonSerializer.Serialize(orders));
- return resp;
- }
-
- [Function("PostOrder")]
- public static async Task PostOrder(
- [HttpTrigger(AuthorizationLevel.Function, "post", "options", Route = "orders/add")] HttpRequestData req,
- FunctionContext ctx)
- {
- if (req.Method.Equals("OPTIONS", StringComparison.OrdinalIgnoreCase))
- {
- var preflight = req.CreateResponse(HttpStatusCode.NoContent);
- preflight.Headers.Add("Access-Control-Allow-Origin", "*");
- preflight.Headers.Add("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
- preflight.Headers.Add("Access-Control-Allow-Headers", "Content-Type,Authorization");
- return preflight;
- }
-
- var body = await new StreamReader(req.Body).ReadToEndAsync();
- object? order = null;
- try
- {
- order = JsonSerializer.Deserialize