From 0e6714b670429d610d5a05f56104c87701a7e776 Mon Sep 17 00:00:00 2001
From: Backiaraj <backiaraj.kanagaraj@syncfusion.com>
Date: Tue, 18 Jun 2024 12:06:07 +0530
Subject: [PATCH] Updated the sample

---
 .../Pages/DataGridFeatures.razor              |  79 +++++++
 .../Pages/Index.razor                         | 123 +++++-----
 .../Pages/_Host.cshtml                        |   6 +
 .../Shared/MainLayout.razor                   | 220 ++++++++++++++++--
 .../Shared/NavMenu.razor                      |  77 +++---
 .../wwwroot/images/ToggleButton.png           | Bin 0 -> 151 bytes
 6 files changed, 405 insertions(+), 100 deletions(-)
 create mode 100644 PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/DataGridFeatures.razor
 create mode 100644 PreventQueryGeneration/Grid_PreventQueryGeneration/wwwroot/images/ToggleButton.png

diff --git a/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/DataGridFeatures.razor b/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/DataGridFeatures.razor
new file mode 100644
index 0000000..ee8cbc4
--- /dev/null
+++ b/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/DataGridFeatures.razor
@@ -0,0 +1,79 @@
+@page "/datagrid-features"
+
+@using System.ComponentModel.DataAnnotations;
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Newtonsoft.Json
+
+
+<SfGrid ID="Grid" @ref="Grid" Query="@currentQuery" TValue="Book" Toolbar="@ToolbarItems" Height="100%" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
+    <GridPageSettings PageSize="10" PageSizes="true"></GridPageSettings>
+    <SfDataManager Url="http://localhost:64956/odata/books" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
+    <GridEvents TValue="Book" OnActionBegin="OnActionBegin"/>
+    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Normal"></GridEditSettings>
+    <GridColumns>
+        <GridColumn Field=@nameof(Book.Id) IsPrimaryKey="true" Width="150"></GridColumn>
+        <GridForeignColumn TValue="Customer" Field=@nameof(Book.CustomerId)  AllowFiltering="true" ForeignKeyValue="Name" ForeignKeyField="Id" HeaderText="Name" Width="100" >
+            <SfDataManager Url="http://localhost:64956/odata/customers" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
+        </GridForeignColumn>
+        <GridColumn Field=@nameof(Book.CreditLimit) Width="200" EditType="EditType.NumericEdit"></GridColumn>
+        <GridColumn Field=@nameof(Book.Active) Width="200" EditType="EditType.BooleanEdit"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+<style>
+    .e-grid .e-gridcontent .e-rowcell.highlight {
+        color: red;
+        font-weight: bolder;
+    }
+</style>
+
+@code{
+    SfGrid<Book> Grid { get; set; }
+  
+   
+   
+    private Query currentQuery = new Query();
+    public List<string> ToolbarItems = new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" };
+ 
+    private void OnActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs<Book> args)
+    {
+        
+        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Filtering)
+        {
+
+            if (String.Equals(args.CurrentFilteringColumn, nameof(Book.CustomerId), StringComparison.OrdinalIgnoreCase))
+            {
+                args.PreventFilterQuery = true;
+                currentQuery = new Query().Where("Customer/Name", args.CurrentFilterObject.Operator.ToString().ToLower(), args.CurrentFilterObject.Value, true, true);
+            }
+        }
+    }
+
+ 
+    public class Book
+    {
+        [Key]
+        public Guid Id { get; set; }
+        public Guid CustomerId { get; set; }
+        public Guid CustomerId1 { get; set; }
+        public virtual Customer Customer { get; set; }
+        public int CreditLimit { get; set; }
+        public bool Active { get; set; }
+        public bool IsDeleted { get; set; }
+    }
+
+    public class Customer
+    {
+        [Key]
+        public Guid Id { get; set; }
+        public string Name { get; set; }
+        
+        [JsonIgnore]
+        public List<Book> CustomerBooks { get; set; }
+
+    }
+    }
\ No newline at end of file
diff --git a/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/Index.razor b/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/Index.razor
index b76c421..e2521fc 100644
--- a/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/Index.razor
+++ b/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/Index.razor
@@ -1,62 +1,75 @@
 @page "/"
 
-@using System.ComponentModel.DataAnnotations;
-@using Syncfusion.Blazor
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.DropDowns
-@using Newtonsoft.Json
-
-<SfGrid ID="Grid" @ref="Grid" Query="@currentQuery" TValue="Book" Toolbar="@ToolbarItems" Height="100%" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
-    <GridPageSettings PageSize="10" PageSizes="true"></GridPageSettings>
-    <SfDataManager Url="http://localhost:64956/odata/books" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
-    <GridEvents TValue="Book" OnActionBegin="OnActionBegin" />
-    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Normal"></GridEditSettings>
-    <GridColumns>
-        <GridColumn Field=@nameof(Book.Id) IsPrimaryKey="true" Width="150"></GridColumn>
-        <GridForeignColumn TValue="Customer" Field=@nameof(Book.CustomerId) AllowFiltering="true" ForeignKeyValue="Name" ForeignKeyField="Id" HeaderText="Name" Width="100">
-            <SfDataManager Url="http://localhost:64956/odata/customers" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
-        </GridForeignColumn>
-        <GridColumn Field=@nameof(Book.CreditLimit) Width="200" EditType="EditType.NumericEdit"></GridColumn>
-        <GridColumn Field=@nameof(Book.Active) Width="200" EditType="EditType.BooleanEdit"></GridColumn>
-    </GridColumns>
-</SfGrid>
-
-@code {
-    SfGrid<Book> Grid { get; set; }
-    private Query currentQuery = new Query();
-    public List<string> ToolbarItems = new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" };
-
-    private void OnActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs<Book> args)
-    {
-        if (args.RequestType == Syncfusion.Blazor.Grids.Action.Filtering)
-        {
-            if (String.Equals(args.CurrentFilteringColumn, nameof(Book.CustomerId), StringComparison.OrdinalIgnoreCase))
-            {
-                args.PreventFilterQuery = true;
-                currentQuery = new Query().Where("Customer/Name", args.CurrentFilterObject.Operator.ToString().ToLower(), args.CurrentFilterObject.Value, true, true);
-            }
-        }
+<span class="pageheader">Selected Controls</span>
+<br />
+<p class="pagecontent">The following Syncfusion Blazor components can be set up in an application for you with the Syncfusion Blazor Template Studio. A fast, easy start with Syncfusion Blazor components lets you concentrate on the important part: learning.</p>
+<div class="controlregion">
+
+    <h5 class="productheader"> Grids</h5>
+    <ul class="ulstyle">
+        <li class="list">
+            <NavLink class="nav-link" href="datagrid-features">
+                <span class="syncfusion-blazor-index-icons syncfusion-blazor-icon-datagrid" aria-hidden="true"></span>DataGrid
+            </NavLink>
+        </li>
+
+    </ul>
+
+</div>
+<style>
+    .ulstyle {
+        margin-top: 10px;
+        margin-bottom: 20px;
+        display: inline-block;
+        list-style-type: none !important;
+        padding-left: 0px !important;
+    }
+
+    .controlregion {
+        margin-top: 50px;
+    }
+
+    .pagecontent {
+        font-family: sans-serif !important;
+font-size: 16px;
+color: #333333;
+letter-spacing: 0.34px;
+line-height: 24px;
+margin-top: 10px;
+    }
+    
+
+    .list {
+        float: left;
+        line-height: 40px;
+        min-width: 280px;
+        font-family: sans-serif !important;
+        font-size: 19px;
+        color: #0073DC;
+    }
+
+    .syncfusion-blazor-index-icons {
+        font-family: "sbicons";
+        color: #0073DC !important;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        padding-right: 13px;
+        font-size: 18px;
     }
 
-    public class Book
-    {
-        [Key]
-        public Guid Id { get; set; }
-        public Guid CustomerId { get; set; }
-        public Guid CustomerId1 { get; set; }
-        public virtual Customer Customer { get; set; }
-        public int CreditLimit { get; set; }
-        public bool Active { get; set; }
-        public bool IsDeleted { get; set; }
+    .productheader {
+        font-family: sans-serif !important;
+        font-size: 19px !important;
+        color: #333333 !important;
+        letter-spacing: 0.41px ;
     }
 
-    public class Customer
-    {
-        [Key]
-        public Guid Id { get; set; }
-        public string Name { get; set; }
-        [JsonIgnore]
-        public List<Book> CustomerBooks { get; set; }
+    .pageheader {
+        font-family: sans-serif !important;
+        font-size: 24px !important;
+        color: #333333 ;
+        font-weight: bold !important;
     }
-}
+</style>
\ No newline at end of file
diff --git a/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/_Host.cshtml b/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/_Host.cshtml
index be1403f..e10df86 100644
--- a/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/_Host.cshtml
+++ b/PreventQueryGeneration/Grid_PreventQueryGeneration/Pages/_Host.cshtml
@@ -32,5 +32,11 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script>
+        function isSidebar(x, y) {
+            var sidebarEle = document.elementFromPoint(x, y);
+            return (sidebarEle && sidebarEle.closest('.sidebar') != null) ? true : false;
+        }
+    </script>
 </body>
 </html>
diff --git a/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/MainLayout.razor b/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/MainLayout.razor
index a1533f1..29d0ab4 100644
--- a/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/MainLayout.razor
+++ b/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/MainLayout.razor
@@ -1,19 +1,213 @@
 @inherits LayoutComponentBase
+@inject IJSRuntime JS
+@using Syncfusion.Blazor.Navigations
+<SfSidebar ID="Sidebar" Type="SidebarType.Push" Width="300px" DockSize="65px" EnableDock="true" @ref="Sidebar" @bind-IsOpen="SidebarToggle">
+    <div class="sidebar" style="position:fixed;z-index:1200">
+        <div class="topnav navbar navbar-dark">
+            <button class="navbar-toggler" @onclick="ToggleNavMenu" />
+            <a class="navbar-brand" href=""><span class="displayText">SyncfusionBlazorApp303</span></a>
+        </div>
+        <div @onmouseover="MouseIn" @onmouseout="MouseOut">
+            <NavMenu />
+        </div>
+    </div>
+</SfSidebar>
 
-<PageTitle>Grid_PreventQueryGeneration</PageTitle>
+<div class="main">
+    <div class="top-row px-4" style="z-index:1111;padding-top:0px">
+        <a href="https://www.syncfusion.com/blazor-components/" target="_blank">Blazor Components</a>
+        <a href="https://blazor.syncfusion.com/documentation/" target="_blank">User Guide</a>
+        <a href="http://blazor.syncfusion.com/" target="_blank">View Demos</a>
+    </div>
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
+    <div class="content px-4">
+        @Body
     </div>
+</div>
+<style>
+    .sidebar {
+        width: 300px;
+        min-width: 300px;
+    }
 
-    <main>
-        <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
+    .navbar-toggler {
+        display: inline-block;
+        border: none;
+        width: 24px;
+        height: 24px;
+        margin-left: 15px;
+        background-image: url('./images/ToggleButton.png');
+        background-color: #05163C;
+        transform: scale(0.75);
+        transform-origin: left;
+        color: #ffffff;
+    }
 
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
-</div>
+
+    /* Content area styles */
+    .title {
+        font-size: 20px;
+    }
+
+    /* Sidebar styles */
+    .e-sidebar .e-icons::before {
+        font-size: 25px;
+    }
+    .e-sidebar:hover .e-open{
+        display:inline-block;
+    }
+    .e-sidebar:hover .e-close {
+        display: none;
+    }
+    /* dockbar icon Style */
+    .e-sidebar .home::before {
+        content: '\e102';
+    }
+
+    .e-sidebar .profile::before {
+        content: '\e10c';
+    }
+    .e-sidebar .info::before {
+        content: '\e11b';
+    }
+
+    .e-sidebar .settings::before {
+        content: '\e10b';
+    }
+
+    .e-sidebar .expand::before,
+    .e-sidebar.e-right.e-open .expand::before {
+        content: '\e10f';
+    }
+
+    .e-sidebar.e-open .expand::before,
+    .e-sidebar.e-right .expand::before {
+        content: '\e10e';
+    }
+
+    /* end of dockbar icon Style */
+
+    .e-sidebar.e-dock.e-close span.e-text {
+        display: none;
+    }
+
+    .e-sidebar.e-dock.e-close .navbar-toggler {
+        margin-left: 0.4rem;
+    }
+
+    .e-sidebar.e-dock.e-close .nav.flex-column {
+        margin-left: -8px;
+    }
+
+    .e-sidebar.e-dock.e-close .displayText {
+        display: none;
+    }
+
+    .e-sidebar.e-dock.e-close .nav-item.px-3 {
+        width: 80px;
+    }
+
+    .e-sidebar.e-dock.e-close .separator {
+        border: 1px solid #FFFFFF;
+        opacity: 0.14;
+        width: 45px;
+        margin: 1rem;
+        margin-top: 0px;
+        margin-left: 0.5rem;
+    }
+
+    .e-sidebar.e-dock.e-close .oi.oi-home {
+        margin-left: -1px;
+    }
+
+    .e-sidebar.e-dock.e-close .syncfusion-blazor-icons {
+        margin-left: -1px;
+    }
+
+    .e-sidebar.e-dock.e-open span.e-text {
+        display: inline-block;
+    }
+
+    .e-sidebar li {
+        list-style-type: none;
+        cursor: pointer;
+    }
+
+    .e-sidebar ul {
+        padding: 0px;
+    }
+
+
+    .e-sidebar span.e-icons {
+        color: #c0c2c5;
+        line-height: 2
+    }
+
+    .e-open .e-icons {
+        margin-right: 16px;
+    }
+
+    .e-open .e-text {
+        overflow: hidden;
+        font-size: 15px;
+    }
+
+    .sidebar-item {
+        text-align: center;
+        border-bottom: 1px #e5e5e58a solid;
+    }
+
+    .e-sidebar.e-open .sidebar-item {
+        text-align: left;
+        padding-left: 15px;
+        color: #c0c2c5;
+    }
+
+    .e-sidebar {
+        background: #2d323e;
+        overflow: hidden;
+    }
+
+    @@font-face {
+        font-family: 'e-icons';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    /* end of sidebar styles */
+</style>
+
+@code
+{
+    SfSidebar Sidebar;
+    public bool SidebarToggle = false;
+    public bool SidebarToggleFixed = false;
+
+    public void ToggleNavMenu()
+    {
+        SidebarToggle = !SidebarToggle;
+        SidebarToggleFixed = !SidebarToggleFixed;
+    }
+
+    public async Task MouseIn(MouseEventArgs args)
+    {
+        var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY);
+        if (!SidebarToggle && isSidebar)
+        {
+            SidebarToggle = true;
+        }
+    }
+
+    public async Task MouseOut(MouseEventArgs args)
+    {
+        var isSidebar = await JS.InvokeAsync<bool>("isSidebar", args.ClientX, args.ClientY);
+        if (SidebarToggle && !isSidebar)
+        {
+            if (!SidebarToggleFixed)
+            {
+                SidebarToggle = false;
+            }
+        }
+    }
+}
diff --git a/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/NavMenu.razor b/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/NavMenu.razor
index 122e0d0..b9cca30 100644
--- a/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/NavMenu.razor
+++ b/PreventQueryGeneration/Grid_PreventQueryGeneration/Shared/NavMenu.razor
@@ -1,39 +1,52 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">Grid_PreventQueryGeneration</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
-</div>
-
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
+<div>
+    <ul class="nav flex-column">
+        <li class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
+                <span class="oi oi-home" aria-hidden="true"></span> <span class="displayText">Syncfusion Blazor Samples</span>
             </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="fetchdata">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
-            </NavLink>
-        </div>
-    </nav>
+        </li>
+    </ul>
+    <div class="separator"></div>
+    <div class="scroller">
+        <ul class="nav flex-column">
+            <li class="nav-item px-3">
+                <NavLink class="nav-link" href="datagrid-features">
+                    <span class="syncfusion-blazor-icons syncfusion-blazor-icon-datagrid" aria-hidden="true"></span><span class="displayText">DataGrid</span>
+                </NavLink>
+            </li>
+
+        </ul>
+    </div>
 </div>
+<style>
+    .scroller {
+        height: calc(100vh - 160px) !important;
+        overflow-y: auto;
+        width: 287px;
+    }
 
-@code {
-    private bool collapseNavMenu = true;
+    .scroller::-webkit-scrollbar, scrollbar-thumb
+    .scroller::-webkit-scrollbar-thumb {
+        width: 8px;
+        height: 110px;
+        border-radius: 4px;
+        position: center;
+    }
 
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+    .scroller::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 0 10px #313C75;
+        border-radius: 4px;
+    }
 
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
+    .scroller::-webkit-scrollbar-track {
+        width: 28px;
+    }
+    .separator {
+        border: 1px solid #FFFFFF;
+        opacity: 0.14;
+        width: 247px;
+        margin: 1rem;
+        margin-top: 0px;
     }
-}
+</style>
+
diff --git a/PreventQueryGeneration/Grid_PreventQueryGeneration/wwwroot/images/ToggleButton.png b/PreventQueryGeneration/Grid_PreventQueryGeneration/wwwroot/images/ToggleButton.png
new file mode 100644
index 0000000000000000000000000000000000000000..33b793e70a8f7e59ae8bbe01467b11c57edb6e5f
GIT binary patch
literal 151
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(K9Zwg>kP61P7ae&S7&s0eU|ssd+^~sVPUSV{
qi{(NEhsu7(<?n70pCQw5lEd6rh&g0Z*55xseGHzielF{r5}E+fGbr8w

literal 0
HcmV?d00001