Dynamic and version updated

Fix #691

Dockerfile

@@ -16,7 +16,7 @@ COPY RadzenBlazorDemos /app/RadzenBlazorDemos
 WORKDIR /app
 RUN docfx DocFX/docfx.json
 
-FROM mcr.microsoft.com/dotnet/sdk:6.0-focal
+FROM mcr.microsoft.com/dotnet/sdk:7.0
 
 COPY --from=0 /app/RadzenBlazorDemos /app
 WORKDIR /app

Radzen.Blazor.Tests/Radzen.Blazor.Tests.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net6</TargetFramework>
+    <TargetFramework>net7</TargetFramework>
 
     <IsPackable>false</IsPackable>
   </PropertyGroup>

Radzen.Blazor/Common.cs

@@ -79,7 +79,8 @@ namespace Radzen
         /// </summary>
         public FilterOperator SecondFilterOperator { get; set; }
     }
-
+#if NET7_0_OR_GREATER
+#else
     /// <summary>
     /// Enables "onmouseenter" and "onmouseleave" event support in Blazor. Not for public use.
     /// </summary>
@@ -88,7 +89,7 @@ namespace Radzen
     public static class EventHandlers
     {
     }
-
+#endif
     /// <summary>
     /// Represents the common <see cref="RadzenSelectBar{TValue}" /> API used by
     /// its items. Injected as a cascading property in <see cref="RadzenSelectBarItem" />.

Radzen.Blazor/DropDownBase.cs

@@ -413,17 +413,20 @@ namespace Radzen
         /// <returns>System.Object.</returns>
         public object GetItemOrValueFromProperty(object item, string property)
         {
-            if (property == TextProperty && textPropertyGetter != null)
+            if (item != null)
             {
-                return textPropertyGetter(item);
-            }
-            else if (property == ValueProperty && valuePropertyGetter != null)
-            {
-                return valuePropertyGetter(item);
-            }
-            else if (property == DisabledProperty && disabledPropertyGetter != null)
-            {
-                return disabledPropertyGetter(item);
+                if (property == TextProperty && textPropertyGetter != null)
+                {
+                    return textPropertyGetter(item);
+                }
+                else if (property == ValueProperty && valuePropertyGetter != null)
+                {
+                    return valuePropertyGetter(item);
+                }
+                else if (property == DisabledProperty && disabledPropertyGetter != null)
+                {
+                    return disabledPropertyGetter(item);
+                }
             }
 
             return item;

Radzen.Blazor/LinearScale.cs

@@ -65,7 +65,13 @@ namespace Radzen.Blazor
             if (start == end)
             {
                 start = 0;
-                end = end + NiceNumber(end / ticks, false);
+                end += NiceNumber(end / ticks, false);
+            }
+
+            if (Round && end < 0)
+            {
+                end = 0;
+                start += NiceNumber(start / ticks, false);
             }
 
             var range = end - start;

Radzen.Blazor/NotificationService.cs

@@ -1,4 +1,6 @@
-using System;
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor;
+using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Text;
@@ -35,7 +37,10 @@ namespace Radzen
                 Severity = message.Severity,
                 Summary = message.Summary,
                 Detail = message.Detail,
-                Style = message.Style
+                Style = message.Style,
+                Click = message.Click,
+                CloseOnClick = message.CloseOnClick,
+                Payload = message.Payload
             };
 
             if (!Messages.Contains(newMessage))
@@ -44,21 +49,27 @@ namespace Radzen
             }
         }
 
-        /// <summary>
-        /// Notifies the specified severity.
-        /// </summary>
-        /// <param name="severity">The severity.</param>
-        /// <param name="summary">The summary.</param>
-        /// <param name="detail">The detail.</param>
-        /// <param name="duration">The duration.</param>
-        public void Notify(NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000)
+      /// <summary>
+      /// Notifies the specified severity.
+      /// </summary>
+      /// <param name="severity">The severity.</param>
+      /// <param name="summary">The summary.</param>
+      /// <param name="detail">The detail.</param>
+      /// <param name="duration">The duration.</param>
+      /// <param name="click">The click event.</param>
+      /// <param name="closeOnClick">If true, then the notification will be closed when clicked on.</param>
+      /// <param name="payload">Used to store a custom payload that can be retreived later in the click event handler.</param>
+      public void Notify(NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000, Action<NotificationMessage> click = null, bool closeOnClick = false, object payload = null)
         {
             var newMessage = new NotificationMessage()
             {
                 Duration = duration,
                 Severity = severity,
                 Summary = summary,
-                Detail = detail
+                Detail = detail,
+                Click = click,
+                CloseOnClick = closeOnClick,
+                Payload = payload
             };
 
             if (!Messages.Contains(newMessage))
@@ -98,5 +109,20 @@ namespace Radzen
         /// </summary>
         /// <value>The style.</value>
         public string Style { get; set; }
-    }
+        /// <summary>
+        /// Gets or sets the click event.
+        /// </summary>
+        /// <value>This event handler is called when the notification is clicked on.</value>
+        public Action<NotificationMessage> Click { get; set; }
+        /// <summary>
+        /// Gets or sets click on close action.
+        /// </summary>
+        /// <value>If true, then the notification will be closed when clicked on.</value>
+        public bool CloseOnClick { get; set; }
+        /// <summary>
+        /// Gets or sets notification payload.
+        /// </summary>
+        /// <value>Used to store a custom payload that can be retreived later in the click event handler.</value>
+        public object Payload { get; set; }
+   }
 }

Radzen.Blazor/PagedDataBoundComponent.cs

@@ -141,10 +141,7 @@ namespace Radzen
         [Parameter]
         public string PagingSummaryFormat { get; set; } = "Page {0} of {1} ({2} items)";
 
-        /// <summary>
-        /// The view
-        /// </summary>
-        protected IQueryable<T> _view = null;
+        internal IQueryable<T> _view = null;
         /// <summary>
         /// Gets the paged view.
         /// </summary>

Radzen.Blazor/Radzen.Blazor.csproj

@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
   <PropertyGroup>
     <NoWarn>BL9993</NoWarn>
-    <TargetFrameworks>netstandard2.1;net5.0;net6.0</TargetFrameworks>
+    <TargetFrameworks>netstandard2.1;net5.0;net6.0;net7.0</TargetFrameworks>
     <RazorLangVersion>3.0</RazorLangVersion>
     <LangVersion>7.3</LangVersion>
     <OutputType>Library</OutputType>
     <IsPackable>true</IsPackable>
     <PackageId>Radzen.Blazor</PackageId>
     <Product>Radzen.Blazor</Product>
-    <Version>4.2.3</Version>
+    <Version>4.3.2</Version>
     <Copyright>Radzen Ltd.</Copyright>
     <Authors>Radzen Ltd.</Authors>
     <Description>Radzen Blazor is a set of 70+ free native Blazor UI controls packed with DataGrid, Scheduler, Charts and robust theming including Material design and Fluent UI.</Description>
@@ -29,8 +29,10 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net5.0'" Version="5.0.0" />
 	<PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
 	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
-    <PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
-    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.12" />
+	<PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.0" />
+	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net7.0'" Version="7.0.0" />
+	<PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
+    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.22" />
   </ItemGroup>
 
   <ItemGroup>

Radzen.Blazor/RadzenAlert.razor

@@ -1,7 +1,7 @@
 @inherits RadzenComponentWithChildren
 @if (GetVisible())
 {
-    <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()" aria-live=“polite”>
+    <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()" aria-live="polite">
         <div class="rz-alert-item">
             @if (ShowIcon)
             {

Radzen.Blazor/RadzenDataGridColumn.cs

@@ -660,6 +660,16 @@ namespace Radzen.Blazor
             if (parameters.DidParameterChange(nameof(SortOrder), SortOrder))
             {
                 sortOrder = new SortOrder?[] { parameters.GetValueOrDefault<SortOrder?>(nameof(SortOrder)) };
+
+                if (Grid != null)
+                {
+                    var descriptor = Grid.sorts.Where(d => d.Property == GetSortProperty()).FirstOrDefault();
+                    if (descriptor == null)
+                    {
+                        Grid.sorts.Add(new SortDescriptor() { Property = GetSortProperty(), SortOrder = sortOrder.FirstOrDefault() });
+                        Grid._view = null;
+                    }
+                }
             }
 
             if (parameters.DidParameterChange(nameof(FilterValue), FilterValue))

Radzen.Blazor/RadzenDatePicker.razor

@@ -80,7 +80,7 @@
                                                 {
                                                     <td @attributes="@(dateArgs.Attributes)" onmouseup=@(Inline || ShowTime || dateArgs.Disabled ? "" : $"Radzen.closePopup('{PopupID}')")
                                                     @onclick="@(async () => { if (!Disabled && !dateArgs.Disabled) { await SetDay(date); } })">
-                                                        <span class=@($"rz-state-default{(DateTimeValue.HasValue && DateTimeValue.Value.Year == date.Year && DateTimeValue.Value.Month == date.Month && DateTimeValue.Value.Day == date.Day ? " rz-state-active" : "")}{(!dateArgs.Disabled ? "" : " rz-state-disabled")}")>@date.Day</span>
+                                                        <span class=@($"rz-state-default{(DateTimeValue.HasValue && DateTimeValue.Value.Date.CompareTo(date.Date)== 0 ? " rz-state-active" : "")}{(DateTime.Now.Date.CompareTo(date.Date) == 0 ? " rz-datepicker-currentday" : "")}{(!dateArgs.Disabled ? "" : " rz-state-disabled")}")>@date.Day</span>
                                                     </td>
                                                 }
                                                 else

Radzen.Blazor/RadzenLogin.razor.cs

@@ -222,7 +222,7 @@ namespace Radzen.Blazor
         /// <param name="args">The <see cref="EventArgs"/> instance containing the event data.</param>
         protected async Task OnReset(EventArgs args)
         {
-            await ResetPassword.InvokeAsync(Username);
+            await ResetPassword.InvokeAsync(username);
         }
 
         /// <summary>

Radzen.Blazor/RadzenNotificationMessage.razor

@@ -4,12 +4,12 @@
 {
     var classes = GetMessageCssClasses();
 
-    <div class="rz-notification-message rz-growl " style="width: 250px;z-index: 1002;position:static;@Style">
-        <div aria-live="polite" class="rz-growl-item-container rz-state-highlight   @classes.Item1">
+   <div class="rz-notification-message rz-growl " style="width: 250px;z-index: 1002;position:static;@(Message.Click != null || Message.CloseOnClick ? "cursor: pointer;" : "") @Style">
+        <div aria-live="polite" class="rz-growl-item-container rz-state-highlight @classes.Item1">
             <div class="rz-growl-item">
                 <div class="rz-growl-icon-close rzi rzi-times" @onclick="@Close" style="cursor:pointer"></div>
-                <span class="rz-growl-image rzi @classes.Item2"></span>
-                <div class="rz-growl-message">
+                <span class="rz-growl-image rzi @classes.Item2" @onclick="NotificationClicked"></span>
+                <div class="rz-growl-message" @onclick="NotificationClicked">
                     <span class="rz-growl-title">@((MarkupString)Message.Summary)</span>
                     <p>@((MarkupString)Message.Detail)</p>
                 </div>
@@ -19,46 +19,54 @@
     </div>
 }
 @code {
-    Tuple<string, string> GetMessageCssClasses()
-    {
-        if (Message.Severity == NotificationSeverity.Error)
-        {
-            return new Tuple<string, string>("rz-growl-message-error", "rzi-times");
-        }
-        else if (Message.Severity == NotificationSeverity.Info)
-        {
-            return new Tuple<string, string>("rz-growl-message-info", "rzi-info-circle");
-        }
-        else if (Message.Severity == NotificationSeverity.Success)
-        {
-            return new Tuple<string, string>("rz-growl-message-success", "rzi-check");
-        }
-        else if (Message.Severity == NotificationSeverity.Warning)
-        {
-            return new Tuple<string, string>("rz-growl-message-warn", "rzi-exclamation-triangle");
-        }
+   Tuple<string, string> GetMessageCssClasses()
+   {
+      if (Message.Severity == NotificationSeverity.Error)
+      {
+         return new Tuple<string, string>("rz-growl-message-error", "rzi-times");
+      }
+      else if (Message.Severity == NotificationSeverity.Info)
+      {
+         return new Tuple<string, string>("rz-growl-message-info", "rzi-info-circle");
+      }
+      else if (Message.Severity == NotificationSeverity.Success)
+      {
+         return new Tuple<string, string>("rz-growl-message-success", "rzi-check");
+      }
+      else if (Message.Severity == NotificationSeverity.Warning)
+      {
+         return new Tuple<string, string>("rz-growl-message-warn", "rzi-exclamation-triangle");
+      }
 
-        return new Tuple<string, string>("", "");
-    }
+      return new Tuple<string, string>("", "");
+   }
 
-    [Inject] private NotificationService Service { get; set; }
+   [Inject] private NotificationService Service { get; set; }
 
-    public bool Visible { get; set; } = true;
+   public bool Visible { get; set; } = true;
 
-    [Parameter]
-    public NotificationMessage Message { get; set; }
+   [Parameter]
+   public NotificationMessage Message { get; set; }
 
-    [Parameter]
-    public string Style { get; set; }
+   [Parameter]
+   public string Style { get; set; }
 
-    public void Close()
-    {
-        Service.Messages.Remove(Message);
-        System.Threading.Tasks.Task.Delay(0).ContinueWith(r => { Visible = false; });
-    }
+   public void Close()
+   {
+      Service.Messages.Remove(Message);
+      System.Threading.Tasks.Task.Delay(0).ContinueWith(r => { Visible = false; });
+   }
 
-    protected override void OnInitialized()
-    {
-        System.Threading.Tasks.Task.Delay(Convert.ToInt32(Message.Duration ?? 3000)).ContinueWith(r => InvokeAsync(Close));
-    }
+   protected override void OnInitialized()
+   {
+      System.Threading.Tasks.Task.Delay(Convert.ToInt32(Message.Duration ?? 3000)).ContinueWith(r => InvokeAsync(Close));
+   }
+
+   private void NotificationClicked()
+   {
+      if (Message.CloseOnClick)
+         Close();
+
+      Message?.Click?.Invoke(Message);
+   }
 }

Radzen.Blazor/RadzenSelectBar.razor.cs

@@ -188,7 +188,7 @@ namespace Radzen.Blazor
             {
                 var type = typeof(TValue).IsGenericType ? typeof(TValue).GetGenericArguments()[0] : typeof(TValue);
 
-                var selectedValues = Value != null ? ((IEnumerable)Value).AsQueryable().Cast(type).AsEnumerable().ToList() : new List<dynamic>();
+                var selectedValues = Value != null ? QueryableExtension.ToList(((IEnumerable)Value).AsQueryable().Cast(type)) : new List<dynamic>();
 
                 if (!selectedValues.Contains(item.Value))
                 {

Radzen.Blazor/ScaleBase.cs

@@ -89,6 +89,8 @@ namespace Radzen.Blazor
         /// <param name="round">Wether to round.</param>
         public double NiceNumber(double range, bool round)
         {
+            var sign = Math.Sign(range);
+            range = Math.Abs(range);
             var exponent = Math.Floor(Math.Log10(range));
             var fraction = range / Math.Pow(10, exponent);
 
@@ -109,7 +111,7 @@ namespace Radzen.Blazor
                 else niceFraction = 10;
             }
 
-            return niceFraction * Math.Pow(10, exponent);
+            return sign * niceFraction * Math.Pow(10, exponent);
         }
 
         /// <summary>

Radzen.Blazor/themes/components/blazor/_datepicker.scss

@@ -354,4 +354,8 @@ $timepicker-border: none !default;
 .rz-second-picker {
   background-color: var(--rz-timepicker-background-color);
   width: 4rem;
+}
+
+.rz-ampm-picker a {
+  text-decoration: none;
 }

RadzenBlazorDemos/Pages/Index.razor

@@ -69,7 +69,7 @@
 
       <div class="row no-gutters">
         <div class="col-md-12">
-          
+
           <h2 class="subtitle text-center">Why choose Radzen Blazor Components?</h2>
 
           <div class="row">
@@ -184,6 +184,7 @@
                     <li><a href="/card">Card</a><RadzenBadge Text="Updated" BadgeStyle="BadgeStyle.Info" Shade="Shade.Lighter" /></li>
                     <li><a href="/contextmenu">ContextMenu</a></li>
                     <li><a href="/dialog">Dialog</a></li>
+                    <li><a href="/layout">Layout</a><RadzenBadge BadgeStyle="BadgeStyle.Success" Text="New" /></li>
                     <li><a href="/link">Link</a></li>
                     <li><a href="/login">Login</a><RadzenBadge Text="Updated" BadgeStyle="BadgeStyle.Info" Shade="Shade.Lighter" /></li>
                     <li><a href="/menu">Menu</a><RadzenBadge Text="Updated" BadgeStyle="BadgeStyle.Info" Shade="Shade.Lighter" /></li>
@@ -309,7 +310,7 @@
         </div>
         <div class="col-md-6 col-lg-5">
           <ul>
-            <li>Authentication, authorization, user and role management are built-in. <a href="https://www.radzen.com/documentation/azure-ad/" target="_blank">Azure AD</a>, <a href="https://www.radzen.com/documentation/active-directory/" taret="_blank">Active Directory</a>, 
+            <li>Authentication, authorization, user and role management are built-in. <a href="https://www.radzen.com/documentation/azure-ad/" target="_blank">Azure AD</a>, <a href="https://www.radzen.com/documentation/active-directory/" taret="_blank">Active Directory</a>,
             <a href="https://www.radzen.com/documentation/windows-security/" target="_blank">Windows Authentication</a> or <a href="https://www.radzen.com/documentation/security/" target="_blank">ASP.NET Identity</a>.</li>
             <li>Run your Radzen Blazor application directly from <a href="https://www.radzen.com/documentation/blazor/run-with-visual-studio/" target="_blank">Visual Studio Code or Visual Studio Professional</a>.</li>
             <li>Deploy your Blazor applications to <a href="https://www.radzen.com/documentation/blazor/deploy/" target="_blank">IIS</a> and <a href="https://www.radzen.com/documentation/deploy-to-azure/" target="_blank">Azure</a> with a single click.</li>
@@ -335,7 +336,7 @@
             </p>
             <p class="mb-5">
               <RadzenLabel Text="Radzen Blazor Components, &copy; 2018-2022 Radzen."></RadzenLabel>
-              <a href="https://github.com/radzenhq/radzen-blazor" target="_blank">Source Code</a> licensed under 
+              <a href="https://github.com/radzenhq/radzen-blazor" target="_blank">Source Code</a> licensed under
               <a href="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE" target="_blank">MIT</a>
             </p>
             <Social />

RadzenBlazorDemos/Pages/LayoutPage.razor

@@ -0,0 +1,161 @@
+@page "/layout"
+
+<RadzenExample Name="Layout" Documentation="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
+<RadzenText TextStyle="TextStyle.Body2" TagName="TagName.P">
+    RadzenLayout allows you to define the global layout of your application (usually used in MainLayout.razor).
+    It has header, sidebar, body and footer sections which correspond to the RadzenHeader, RadzenSidebar, RadzenBody and RadzenFooter components.
+    Sections are optional and can be omitted.
+</RadzenText>
+<div class="row">
+    <div class="col-md-6">
+        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3">Sidebar, Header and Footer</RadzenText>
+        <RadzenLayout class="rz-shadow-3" style="height: 400px">
+            <RadzenHeader>
+                <div class="d-flex align-items-center">
+                    <RadzenSidebarToggle Click="@(() => sidebar1Expanded = !sidebar1Expanded)" />
+                    <RadzenLabel Text="Header" />
+                </div>
+            </RadzenHeader>
+            <RadzenSidebar @bind-Expanded="@sidebar1Expanded">
+                <RadzenPanelMenu>
+                    <RadzenPanelMenuItem Text="Home" Icon="home" />
+                    <RadzenPanelMenuItem Text="Users" Icon="account_box" />
+                </RadzenPanelMenu>
+                <div class="p-2">
+                    Sidebar
+                </div>
+            </RadzenSidebar>
+            <RadzenBody>
+                <div class="p-2">
+                    Body
+                </div>
+            </RadzenBody>
+            <RadzenFooter>
+                Footer
+            </RadzenFooter>
+        </RadzenLayout>
+    </div>
+    <div class="col-md-6">
+        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3">Full height Sidebar</RadzenText>
+        <RadzenLayout class="rz-shadow-3" Style="height: 400px; grid-template-areas: 'rz-sidebar rz-header' 'rz-sidebar rz-body'">
+            <RadzenHeader>
+                <div class="d-flex align-items-center">
+                    <RadzenSidebarToggle Click="@(() => sidebar2Expanded = !sidebar2Expanded)" />
+                    <RadzenLabel Text="Header" />
+                </div>
+            </RadzenHeader>
+            <RadzenSidebar @bind-Expanded="@sidebar2Expanded">
+                <RadzenPanelMenu>
+                    <RadzenPanelMenuItem Text="Home" Icon="home" />
+                    <RadzenPanelMenuItem Text="Users" Icon="account_box" />
+                </RadzenPanelMenu>
+                <div class="p-2">
+                    Sidebar
+                </div>
+            </RadzenSidebar>
+            <RadzenBody>
+                <div class="p-2">
+                    Body
+                </div>
+            </RadzenBody>
+        </RadzenLayout>
+    </div>
+</div>
+<div class="row mt-4">
+    <div class="col-md-6">
+        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3">Right Sidebar</RadzenText>
+        <RadzenLayout class="rz-shadow-3" Style="height: 400px; grid-template-columns: 1fr auto; grid-template-areas: 'rz-header rz-header' 'rz-body rz-sidebar'">
+            <RadzenHeader>
+                <div class="d-flex justify-content-end align-items-center">
+                    <RadzenLabel Text="Header" />
+                    <RadzenSidebarToggle Click="@(() => sidebar3Expanded = !sidebar3Expanded)" Style="margin:0" />
+                </div>
+            </RadzenHeader>
+            <RadzenSidebar @bind-Expanded="@sidebar3Expanded">
+                <RadzenPanelMenu>
+                    <RadzenPanelMenuItem Text="Home" Icon="home" />
+                    <RadzenPanelMenuItem Text="Users" Icon="account_box" />
+                </RadzenPanelMenu>
+                <div class="p-2">
+                    Sidebar
+                </div>
+            </RadzenSidebar>
+            <RadzenBody>
+                <div class="p-2">
+                    Body
+                </div>
+            </RadzenBody>
+        </RadzenLayout>
+    </div>
+    <div class="col-md-6">
+        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3">Right full height Sidebar</RadzenText>
+        <RadzenLayout class="rz-shadow-3" Style="height: 400px; grid-template-columns: 1fr auto; grid-template-areas: 'rz-header rz-sidebar' 'rz-body rz-sidebar'">
+            <RadzenHeader>
+                <div class="d-flex justify-content-end align-items-center">
+                    <RadzenLabel Text="Header" />
+                    <RadzenSidebarToggle Click="@(() => sidebar4Expanded = !sidebar4Expanded)" Style="margin:0" />
+                </div>
+            </RadzenHeader>
+            <RadzenSidebar @bind-Expanded="@sidebar4Expanded">
+                <RadzenPanelMenu>
+                    <RadzenPanelMenuItem Text="Home" Icon="home" />
+                    <RadzenPanelMenuItem Text="Users" Icon="account_box" />
+                </RadzenPanelMenu>
+                <div class="p-2">
+                    Sidebar
+                </div>
+            </RadzenSidebar>
+            <RadzenBody>
+                <div class="p-2">
+                    Body
+                </div>
+            </RadzenBody>
+        </RadzenLayout>
+    </div>
+</div>
+<div class="row mt-4">
+    <div class="col">
+        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3">Right and Left Sidebar</RadzenText>
+        <RadzenLayout class="rz-shadow-3" Style="height: 400px; grid-template-columns: auto 1fr auto; grid-template-areas: 'rz-header rz-header rz-header' 'rz-sidebar rz-body rz-right-sidebar'">
+            <RadzenHeader>
+                <div class="d-flex align-items-center">
+                    <RadzenSidebarToggle Click="@(() => sidebar5Expanded = !sidebar5Expanded)" />
+                    <RadzenLabel Text="Header" />
+                </div>
+            </RadzenHeader>
+            <RadzenSidebar @bind-Expanded="@sidebar5Expanded">
+                <RadzenPanelMenu>
+                    <RadzenPanelMenuItem Text="Home" Icon="home" />
+                    <RadzenPanelMenuItem Text="Users" Icon="account_box" />
+                </RadzenPanelMenu>
+                <div class="p-2">
+                    Left Sidebar
+                </div>
+            </RadzenSidebar>
+            <RadzenBody>
+                <div class="p-2">
+                    Body
+                </div>
+                <div class="p-2">
+                    <RadzenButton Text="Toggle left Sidebar" Click="@(() => sidebar5Expanded = !sidebar5Expanded)" />
+                    <RadzenButton Text="Toggle right Sidebar" Click="@(() => sidebar6Expanded = !sidebar6Expanded)" />
+                </div>
+            </RadzenBody>
+            <RadzenSidebar @bind-Expanded="@sidebar6Expanded" Style="width: 300px; grid-area: rz-right-sidebar">
+                <div class="p-2">
+                    Right Sidebar
+                </div>
+            </RadzenSidebar>
+        </RadzenLayout>
+    </div>
+</div>
+</RadzenExample>
+
+@code {
+    bool sidebar1Expanded = true;
+    bool sidebar2Expanded = true;
+    bool sidebar3Expanded = true;
+    bool sidebar4Expanded = true;
+    bool sidebar5Expanded = true;
+    bool sidebar6Expanded = true;
+}

RadzenBlazorDemos/Pages/NotificationPage.razor

@@ -44,6 +44,14 @@
                     Click=@(args => ShowNotification(new NotificationMessage { Style = "position: absolute; left: -1000px;", Severity = NotificationSeverity.Success, Summary = "Success Summary", Detail = "Success Detail", Duration = 40000 })) />
             </RadzenCard>
         </div>
+         <div class="col-lg-6 col-xl-4 p-3">
+            <RadzenCard>
+               <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Info</RadzenText>
+               <RadzenButton Text="Show notification with custom click handler" Class="w-100"
+                             ButtonStyle="ButtonStyle.Info"
+                             Click="@(args => ShowNotification(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "Info Click Summary", Detail = "Click Me", Duration = 4000, Click=NotificationClick, CloseOnClick = true, Payload = DateTime.Now }))" />
+            </RadzenCard>
+         </div>
     </div>
 </div>
 </RadzenExample>
@@ -51,12 +59,17 @@
 <EventConsole @ref=@console Class="mt-4" />
 
 @code {
-    EventConsole console;
+   EventConsole console;
 
-    void ShowNotification(NotificationMessage message)
-    {
-        NotificationService.Notify(message);
+   void ShowNotification(NotificationMessage message)
+   {
+      NotificationService.Notify(message);
 
-        console.Log($"{message.Severity} notification");
-    }
+      console.Log($"{message.Severity} notification");
+   }
+
+   void NotificationClick(NotificationMessage message)
+   {
+      console.Log($"{message.Summary} clicked, Payload = {message.Payload}");
+   }
 }

RadzenBlazorDemos/Pages/TooltipPage.razor

@@ -32,7 +32,7 @@
         <div class="col-md-6 col-lg-4 p-3 d-flex">
             <RadzenCard Class="w-100">
                 <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Show tooltip on mouse over HTML elment</RadzenText>
-                <button @ref="htmlButton" @onmouseover="@(args => ShowTooltip(htmlButton))">
+                <button @ref="htmlButton" @onmouseenter="@(args => ShowTooltip(htmlButton))">
                     Show tooltip
                 </button>
             </RadzenCard>

RadzenBlazorDemos/RadzenBlazorDemos.csproj

@@ -1,13 +1,13 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
   </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Radzen.Blazor" Version="*" Condition="'$(Configuration)' == 'Release'"/>
     <ProjectReference Include="..\Radzen.Blazor\Radzen.Blazor.csproj" Condition="'$(Configuration)' != 'Release'" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="6.0.0" />
-    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.0" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="7.0.0" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="7.0.0" />
     <PackageReference Include="DocumentFormat.OpenXml" Version="2.11.3" />
   </ItemGroup>
   <ItemGroup>

RadzenBlazorDemos/Services/ExampleService.cs

@@ -659,6 +659,14 @@ namespace RadzenBlazorDemos
                     Tags = new [] { "popup", "window" }
                 },
                 new Example()
+                {
+                    Name = "Layout",
+                    Title = "Blazor Layout component",
+                    Path = "layout",
+                    New = true,
+                    Icon = "&#xe8f1"
+                },
+                new Example()
                 {
                     Name = "Link",
                     Title = "Blazor Link component",

RadzenBlazorDemos/Shared/RadzenExample.razor

@@ -62,7 +62,7 @@
 
     string DocumentationHref => $"/docs/guides/components/{Name.ToLower()}.html";
 
-    string ComponentSourceHref => $"https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/Radzen{Name}.razor.cs";
+    string ComponentSourceHref => Source ?? $"https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/Radzen{Name}.razor.cs";
 
     [Parameter]
     public IEnumerable<string> AdditionalSourceCodePages { get; set; } = Enumerable.Empty<string>();