documentation(855861): Added subtopics for blazor media query.

blazor-toc.html

@@ -3010,6 +3010,8 @@
 				</ul>
 			</li>
 			<li><a href="/blazor/media-query/break-points">Breakpoints</a></li>
+			<li><a href="/blazor/media-query/media-query-integration">Integration</a></li>
+			<li><a href="/blazor/media-query/media-query-reusable">Global Reuse</a></li>
 			<li>
 				<a href="/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html"> API Reference</a>
 			</li>

blazor/media-query/media-query-integration.md

@@ -0,0 +1,85 @@
+---
+layout: post
+title: Media Query component Integration with other components | Syncfusion
+description: Checkout and learn here all about how to integrate the Media Query with other component like Chart and much more details.
+platform: Blazor
+control: Media Query
+documentation: ug
+---
+
+# Media Query with other components integration
+
+The Blazor Media Query component enhances the responsiveness of web application, allowing you to perform conditional rendering or styling to achieve a dynamic UI adpatable for various screen sizes.
+
+In the following code example, showcasing the Data Grid to demonstrate the dynamic updating of adaptive functionalities based on the matched media breakpoint using [ActiveBreakpoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_ActiveBreakpoint) property.
+
+```cshtml
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Grids
+
+<SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
+
+Active media name: <b>@activeBreakpoint</b>
+
+@{
+    var renderingMode = RowDirection.Horizontal;
+    var enableAdaptiveUIMode = false;
+    var containerHeight = "100%";
+
+    if (activeBreakpoint == "Small")
+    {
+        enableAdaptiveUIMode = true;
+        renderingMode = RowDirection.Vertical;
+        containerHeight = "600px";
+    }
+    else if (activeBreakpoint == "Medium")
+    {
+        enableAdaptiveUIMode = true;
+    }
+    else
+    {
+        enableAdaptiveUIMode = false;
+    }
+}
+
+<div style="position:relative; height: @containerHeight;">
+    <SfGrid DataSource="@orders" EnableAdaptiveUI="@enableAdaptiveUIMode" RowRenderingMode="@renderingMode" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update", "Search" })" Height="100%" Width="100%">
+        <GridFilterSettings Type="@FilterType.Excel"></GridFilterSettings>
+        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>
+        <GridColumns>
+            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true"></GridColumn>
+            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name"></GridColumn>
+            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date"></GridColumn>
+            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2"></GridColumn>
+        </GridColumns>
+    </SfGrid>
+</div>
+
+@code {
+    private string activeBreakpoint { get; set; }
+    private List<Order> orders { get; set; }
+
+    protected override void OnInitialized()
+    {
+        orders = Enumerable.Range(1, 75).Select(x => new Order()
+        {
+            OrderID = 1000 + x,
+            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
+            Freight = 2.1 * x,
+            OrderDate = DateTime.Now.AddDays(-x),
+        }).ToList();
+    }
+
+    public class Order
+    {
+        public int? OrderID { get; set; }
+        public string CustomerID { get; set; }
+        public DateTime? OrderDate { get; set; }
+        public double? Freight { get; set; }
+    }
+}
+
+```
+
+![Blazor Media Query integration in Grid](images/blazor-media-query-with-grid.gif)

blazor/media-query/media-query-reusable.md

@@ -0,0 +1,86 @@
+---
+layout: post
+title: Reuse of Blazor Media Query component | Syncfusion
+description: Checkout and learn here all about how to use the Media Query component at the global level reuse on all pages and much more.
+platform: Blazor
+control: Media Query
+documentation: ug
+---
+
+# Global level reuse of Blazor Media Query component
+
+You can globally reuse the Media Query component in any `razor` pages within web application to achieve a more flexible and responsive layout design. 
+
+Define the Media Query component along with layout `Body` property within the `CascadingValue` component in **MainLayout.razor** page.
+
+{% tabs %}
+{% highlight razor %}
+
+@inherits LayoutComponentBase
+
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+    <main>
+        <div class="top-row px-4">
+            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+        </div>
+        <article class="content px-4">
+            <CascadingValue Value="@activeBreakPoint">
+                <SfMediaQuery @bind-ActiveBreakPoint="activeBreakPoint"></SfMediaQuery>
+                @Body
+            </CascadingValue>
+        </article>
+    </main>
+</div>
+
+@code {
+    [Parameter]
+    public string activeBreakPoint { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+If you are using .NET 8, configure the `@rendermode` in the `<body>` section of the **~/Components/App.razor** file, as shown below:
+
+```html
+<body>
+    ....
+    <Routes @rendermode="InteractiveServer" />
+</body>
+```
+
+In the below example, the `activeBreakPoint` was accessed in the **Home.razor** and **Counter.razor** files.
+
+{% tabs %}
+{% highlight C# tabtitle="Home" hl_lines="3 10" %}
+
+The active breakpoint is @activeBreakPointValue
+<br/><br/>
+<h5>Home Page</h5>
+
+@code {
+    [CascadingParameter]
+    public string activeBreakPointValue { get; set; }
+}
+....
+
+{% endhighlight %}
+{% highlight C# tabtitle="Counter" hl_lines="3 11" %}
+
+The active breakpoint is @activeBreakPointValue
+<br /><br />
+<h5>Counter Page</h5>
+
+@code {
+    [CascadingParameter]
+    public string activeBreakPointValue { get; set; }
+}
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+![Reusable Blazor Media Query Component](images/blazor-media-query-reusable.gif)