Radzen.Blazor updated

* add optional SummaryTemplate to Fieldset and Panel

* add Demos for Summary of Panel and Fieldset

* Add Unit Tests that check for rendering of new SummaryTemplate

Radzen.Blazor.Tests/FieldsetTests.cs

@@ -1,4 +1,6 @@
 using Bunit;
+using Microsoft.AspNetCore.Components;
+using System.Linq;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -145,7 +147,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowCollapse, true);
                 parameters.Add(p => p.Collapse, args => { raised = true; });
             });
@@ -160,5 +163,57 @@ namespace Radzen.Blazor.Tests
 
             component.Find("a").Click();
         }
+
+        [Fact]
+        public void Fieldset_Renders_SummaryWhenCollapsed()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenFieldset>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, true);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "",
+                component.Find(".rz-fieldset-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
+
+        [Fact]
+        public void Fieldset_DontRenders_SummaryWhenOpen()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenFieldset>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, false);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "display: none",
+                component.Find(".rz-fieldset-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
     }
 }

Radzen.Blazor.Tests/PanelTests.cs

@@ -1,4 +1,6 @@
 using Bunit;
+using Microsoft.AspNetCore.Components;
+using System.Linq;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -159,7 +161,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowCollapse, true);
                 parameters.Add(p => p.Collapse, args => { raised = true; });
             });
@@ -174,5 +177,57 @@ namespace Radzen.Blazor.Tests
 
             component.Find("a").Click();
         }
+
+        [Fact]
+        public void Panel_Renders_SummaryWhenCollapsed()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenPanel>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, true);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "display: block",
+                component.Find(".rz-panel-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
+
+        [Fact]
+        public void Panel_DontRenders_SummaryWhenOpen()
+        {
+            using var ctx = new TestContext();
+            var component = ctx.RenderComponent<RadzenPanel>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<bool>(p => p.AllowCollapse, true);
+                parameters.Add<bool>(p => p.Collapsed, false);
+                parameters.Add<RenderFragment>(p => p.SummaryTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "SummaryContent");
+                    builder.CloseElement();
+                });
+
+            });
+
+            Assert.Contains("SummaryContent", component.Markup);
+            Assert.Equal(
+                "display: none",
+                component.Find(".rz-panel-content-summary").ParentElement.Attributes.First(attr => attr.Name == "style").Value
+            );
+        }
     }
 }

Radzen.Blazor/Common.cs

@@ -173,6 +173,12 @@ namespace Radzen
         }
     }
 
+    public enum TabRenderMode
+    {
+        Server,
+        Client
+    }
+
     public enum PagerPosition
     {
         Top,

Radzen.Blazor/Radzen.Blazor.csproj

@@ -8,7 +8,7 @@
     <IsPackable>true</IsPackable>
     <PackageId>Radzen.Blazor</PackageId>
     <Product>Radzen.Blazor</Product>
-    <Version>3.4.2</Version>
+    <Version>3.5.2</Version>
     <Copyright>Radzen Ltd.</Copyright>
     <Authors>Radzen Ltd.</Authors>
     <Description>Native Blazor UI components by Radzen Ltd.</Description>

Radzen.Blazor/RadzenAutoComplete.razor

@@ -191,7 +191,10 @@
     {
         base.Dispose();
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        }
     }
 
     private bool firstRender = true;

Radzen.Blazor/RadzenChart.razor

@@ -301,6 +301,8 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        await base.OnAfterRenderAsync(firstRender);
+
         this.firstRender = firstRender;
 
         if (firstRender || visibleChanged)
@@ -417,7 +419,7 @@
     {
         base.Dispose();
 
-        if (Visible)
+        if (Visible && IsJSRuntimeAvailable)
         {
             JSRuntime.InvokeVoidAsync("Radzen.destroyChart", Element);
         }

Radzen.Blazor/RadzenComponent.cs

@@ -79,6 +79,8 @@ namespace Radzen
 
         [Inject]
         protected IJSRuntime JSRuntime { get; set; }
+        
+        protected bool IsJSRuntimeAvailable { get; set; }
 
         protected override void OnInitialized()
         {
@@ -120,6 +122,8 @@ namespace Radzen
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
+            IsJSRuntimeAvailable = true;
+
             this.firstRender = firstRender;
 
             if (firstRender || visibleChanged)
@@ -178,19 +182,22 @@ namespace Radzen
             reference?.Dispose();
             reference = null;
 
-            if (ContextMenu.HasDelegate)
+            if (IsJSRuntimeAvailable)
             {
-                JSRuntime.InvokeVoidAsync("Radzen.removeContextMenu", UniqueID);
-            }
+                if (ContextMenu.HasDelegate)
+                {
+                    JSRuntime.InvokeVoidAsync("Radzen.removeContextMenu", UniqueID);
+                }
 
-            if (MouseEnter.HasDelegate)
-            {
-                JSRuntime.InvokeVoidAsync("Radzen.removeMouseEnter", UniqueID);
-            }
+                if (MouseEnter.HasDelegate)
+                {
+                    JSRuntime.InvokeVoidAsync("Radzen.removeMouseEnter", UniqueID);
+                }
 
-            if (MouseLeave.HasDelegate)
-            {
-                JSRuntime.InvokeVoidAsync("Radzen.removeMouseLeave", UniqueID);
+                if (MouseLeave.HasDelegate)
+                {
+                    JSRuntime.InvokeVoidAsync("Radzen.removeMouseLeave", UniqueID);
+                }
             }
         }
 

Radzen.Blazor/RadzenContextMenu.razor

@@ -40,8 +40,12 @@
         await InvokeAsync(() => { StateHasChanged(); });
     }
 
+    private bool IsJSRuntimeAvailable { get; set; }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        IsJSRuntimeAvailable = true;
+
         var menu = menus.LastOrDefault();
         if (menu != null)
         {
@@ -66,7 +70,10 @@
 
     public void Dispose()
     {
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", UniqueID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", UniqueID);
+        }
 
         Service.OnOpen -= OnOpen;
         Service.OnClose -= OnClose;

Radzen.Blazor/RadzenDataGrid.razor

@@ -16,7 +16,7 @@
 {
     var visibleColumns = columns.Where(c => c.Visible).ToList();
 
-    <div style="@Style" @attributes="Attributes" class="rz-data-grid @GetCssClass()" id="@GetId()">
+    <div @ref=@Element style="@Style" @attributes="Attributes" class="rz-data-grid @GetCssClass()" id="@GetId()">
         @if (AllowPaging && (PagerPosition == PagerPosition.Top || PagerPosition == PagerPosition.TopAndBottom))
         {
             <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" />
@@ -241,7 +241,9 @@
                                                     }
                                                     else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
                                                     {
+                                                        <div style="@(column.TextAlign == TextAlign.Center ? "width:100%;text-align:center" : column.TextAlign == TextAlign.Right ? "width:100%;text-align:right" : "")">
                                                         <RadzenCheckBox TriState="true" TValue="@object" Value="@column.GetFilterValue()" Change="@((args) => OnFilter(new ChangeEventArgs() { Value = args }, column))" />
+                                                        </div>
                                                     }
                                                     else
                                                     {
@@ -319,6 +321,11 @@
 
 @code {
 #if NET5
+    internal void SetAllowVirtualization(bool allowVirtualization)
+    {
+        AllowVirtualization = allowVirtualization;
+    }
+
     internal Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<TItem> virtualize;
 
     private async ValueTask<Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<TItem>> LoadItems(Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderRequest request)
@@ -341,7 +348,7 @@
             await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = request.StartIndex, Top = top, OrderBy = orderBy, Filter = IsOData() ? columns.ToODataFilterString<TItem>() : filterString });
         }
 
-        return new Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<TItem>(LoadData.HasDelegate ? Data : view.Skip(request.StartIndex).Take(top), totalItemsCount);
+        return new Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<TItem>(LoadData.HasDelegate ? Data : itemToInsert != null ? (new[] { itemToInsert }).Concat(view.Skip(request.StartIndex).Take(top)) : view.Skip(request.StartIndex).Take(top), totalItemsCount);
     }
 #endif
     RenderFragment DrawRows(IList<RadzenDataGridColumn<TItem>> visibleColumns)
@@ -446,6 +453,13 @@
         if (!columns.Contains(column))
         {
             columns.Add(column);
+
+            var descriptor = sorts.Where(d => d.Property == column?.GetSortProperty()).FirstOrDefault();
+            if (descriptor == null && column.SortOrder.HasValue)
+            {
+                descriptor = new SortDescriptor() { Property = column.Property, SortOrder = column.SortOrder.Value };
+                sorts.Add(descriptor);
+            }                
         }
     }
 
@@ -733,7 +747,7 @@
             {
                 _emptyText = value;
 
-                ChangeState();
+                ChangeState().Wait();
             }
         }
     }
@@ -780,7 +794,7 @@
 
     internal string GetOrderBy()
     {
-        return string.Join(",", sorts.Select(d => columns.Where(c => c.GetFilterProperty() == d.Property).FirstOrDefault()).Where(c => c != null).Select(c => c.GetSortOrderAsString(IsOData())));
+        return string.Join(",", sorts.Select(d => columns.Where(c => c.GetSortProperty() == d.Property).FirstOrDefault()).Where(c => c != null).Select(c => c.GetSortOrderAsString(IsOData())));
     }
 
     [Parameter]
@@ -883,7 +897,7 @@
         Reset(!IsOData() && !LoadData.HasDelegate);
     }
 
-    public void Reset(bool resetColumnFilters = true, bool resetRowState = false)
+    public void Reset(bool resetColumnState = true, bool resetRowState = false)
     {
         _view = null;
         _value = new List<TItem>();
@@ -894,10 +908,12 @@
             expandedItems.Clear();
         }
 
-        if (resetColumnFilters)
+        if (resetColumnState)
         {
             columns.ForEach(c => { c.SetFilterValue(null); c.SetSecondFilterOperator(FilterOperator.Equals); });
-        }
+            columns.ForEach(c => { c.ResetSortOrder(); });
+            sorts.Clear();
+       }
     }
 
     public async override Task Reload()
@@ -1247,12 +1263,25 @@
     {
         if (object.Equals(itemToInsert, item))
         {
-            var list = this.PagedView.ToList();
-            list.Remove(item);
-            this._view = list.AsQueryable();
-            this.Count = this.View.Count();
-            itemToInsert = default(TItem);
-            StateHasChanged();
+            if(!IsVirtualizationAllowed())
+            {
+                var list = this.PagedView.ToList();
+                list.Remove(item);
+                this._view = list.AsQueryable();
+                this.Count = this.View.Count();
+                itemToInsert = default(TItem);
+                StateHasChanged();
+            }
+            else
+            {
+    #if NET5
+                itemToInsert = default(TItem);
+                if (virtualize != null)
+                {
+                    virtualize.RefreshDataAsync();
+                }
+    #endif
+            }
         }
         else
         {
@@ -1277,11 +1306,24 @@
     public async System.Threading.Tasks.Task InsertRow(TItem item)
     {
         itemToInsert = item;
-        var list = this.PagedView.ToList();
-        list.Insert(0, item);
-        this._view = list.AsQueryable();
-        this.Count = this._view.Count();
-        await EditRowInternal(item);
+        if(!IsVirtualizationAllowed())
+        {
+            var list = this.PagedView.ToList();
+            list.Insert(0, item);
+            this._view = list.AsQueryable();
+            this.Count = this._view.Count();
+        }
+        else
+        {
+#if NET5
+            if (virtualize != null)
+            {
+                await virtualize.RefreshDataAsync();
+            }
+#endif
+        }
+            
+       await EditRowInternal(item);
     }
 
     internal bool IsOData()
@@ -1304,7 +1346,7 @@
         var descriptor = sorts.Where(d => d.Property == column?.GetSortProperty()).FirstOrDefault();
         if (descriptor == null)
         {
-            descriptor = new SortDescriptor() { Property = column.Property };
+            descriptor = new SortDescriptor() { Property = column.GetSortProperty() };
         }
 
         if (column.GetSortOrder() == null)
@@ -1402,9 +1444,12 @@
 
         disposed = true;
 
-        foreach (var column in columns.Where(c => c.Visible))
+        if (IsJSRuntimeAvailable)
         {
-            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", $"{PopupID}{column.GetFilterProperty()}");
+            foreach (var column in columns.Where(c => c.Visible))
+            {
+                JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", $"{PopupID}{column.GetFilterProperty()}");
+            }
         }
     }
 }

Radzen.Blazor/RadzenDataGridColumn.razor

@@ -160,9 +160,9 @@
             style.Add($"left:{left}px");
         }
 
-        if ((isHeaderOrFooterCell && !Frozen || !isHeaderOrFooterCell && Frozen) && Grid.ColumnsCollection.Where(c => c.Visible && c.Frozen).Any())
+        if ((isHeaderOrFooterCell && Frozen || isHeaderOrFooterCell && !Frozen || !isHeaderOrFooterCell && Frozen) && Grid.ColumnsCollection.Where(c => c.Visible && c.Frozen).Any())
         {
-            style.Add("z-index:0");
+            style.Add($"z-index:{(!isHeaderOrFooterCell && Frozen ? 999 : isHeaderOrFooterCell && Frozen ? 1000 : 1)}");
         }
 
         return string.Join(";", style);
@@ -194,6 +194,12 @@
         sortOrder = new SortOrder?[] { order };
     }
 
+    internal void ResetSortOrder()
+    {
+        sortOrder = Enumerable.Empty<SortOrder?>();
+        SortOrder = null;
+    }
+
     public string GetFilterProperty()
     {
         if (!string.IsNullOrEmpty(FilterProperty))

Radzen.Blazor/RadzenDatePicker.razor

@@ -92,129 +92,30 @@
             @if (ShowTime)
             {
         <div class="rz-timepicker">
-            <RadzenNumeric Disabled="@Disabled" Value="@(HourFormat == "12" ? ((CurrentDate.Hour + 11) % 12) + 1 : CurrentDate.Hour)" Min="@(HourFormat == "12" ? 1 : -1)" Max="@(HourFormat == "12" ? 12 : 24)" TValue="double" Step="@HoursStep"
-                           Change="@(async v => {
-                                         var newHour = HourFormat == "12" && CurrentDate.Hour > 12 ? (int)v + 12 : (int)v;
-
-                                         var newValue = new DateTime(
-                                            CurrentDate.Year, 
-                                            CurrentDate.Month, 
-                                            CurrentDate.Day, 
-                                            newHour > 23 || newHour < 0 ? 0 : newHour, 
-                                            CurrentDate.Minute, 
-                                            CurrentDate.Second);
-
-                                          if(!object.Equals(newValue, Value))
-                                          {
-                                              Value = newValue;
-                                              await OnChange();
-                                          }
-                                     } )" class="rz-hour-picker" />
+            <RadzenNumeric TValue="int" Disabled="@Disabled" Value="@(HourFormat == "12" ? ((CurrentDate.Hour + 11) % 12) + 1 : CurrentDate.Hour)" 
+                           Min="@(HourFormat == "12" ? 1 : -1)" Max="@(HourFormat == "12" ? 12 : 24)" TValue="double" Step="@HoursStep"
+                           Change="@UpdateHour" class="rz-hour-picker" @oninput=@OnUpdateHourInput />
             <div class="rz-separator">
                 <span>:</span>
             </div>
-            <RadzenNumeric Disabled="@Disabled" Value="CurrentDate.Minute" TValue="double" Step="@MinutesStep" Min="0" Max="59"
-                           Change="@(async v => {
-                                                var newValue = new DateTime(
-                                                    CurrentDate.Year, 
-                                                    CurrentDate.Month, 
-                                                    CurrentDate.Day, 
-                                                    CurrentDate.Hour, 
-                                                    (int)v, 
-                                                    CurrentDate.Second);
-
-                                                if(!object.Equals(newValue, Value))
-                                                {
-                                                   Value = newValue;
-                                                   await OnChange();
-                                                }
-                                             } )" class="rz-minute-picker" />
+            <RadzenNumeric TValue="int" Disabled="@Disabled" Value="CurrentDate.Minute" TValue="double" Step="@MinutesStep" Min="0" Max="59"
+                           Change="@UpdateMinutes" class="rz-minute-picker" @oninput=@OnUpdateHourMinutes />
             @if (ShowSeconds)
             {
                 <div class="rz-separator">
                     <span>:</span>
                 </div>
-                <RadzenNumeric Disabled="@Disabled" Value="CurrentDate.Second" TValue="double" Step="@SecondsStep" Min="0" Max="59"
-                               Change="@(async v => {
-                                                 var newValue = new DateTime(
-                                                    CurrentDate.Year, 
-                                                    CurrentDate.Month, 
-                                                    CurrentDate.Day, 
-                                                    CurrentDate.Hour, 
-                                                    CurrentDate.Minute, 
-                                                    (int)v);
-
-                                                 if(!object.Equals(newValue, Value))
-                                                 {
-                                                   Value = newValue;
-                                                   await OnChange();
-                                                 }
-                                             } )" class="rz-second-picker" />
+                <RadzenNumeric TValue="int" Disabled="@Disabled" Value="CurrentDate.Second" TValue="double" Step="@SecondsStep" Min="0" Max="59"
+                               Change="@UpdateSeconds" class="rz-second-picker" @oninput=@OnUpdateHourSeconds />
             }
             @if (HourFormat == "12")
             {
                 <div class="rz-ampm-picker">
-                    <a href="javascript:void(0)" @onclick="@(async() => { 
-                        if (amPm == "am" && !Disabled) 
-                        { 
-                            amPm = "pm"; 
-                            
-                            var currentHour = ((CurrentDate.Hour + 11) % 12) + 1;
-
-                            var newHour = currentHour - 12;
-
-                            if(newHour < 1)
-                            {
-                                newHour = currentHour;
-                            }
-
-                            var newValue = new DateTime(
-                                CurrentDate.Year, 
-                                CurrentDate.Month, 
-                                CurrentDate.Day, 
-                                newHour, 
-                                CurrentDate.Minute, 
-                                CurrentDate.Second);
-
-                            if(!object.Equals(newValue, Value))
-                            {
-                                Value = newValue;
-                                await OnChange();
-                            } 
-                        } 
-                    })">
+                    <a href="javascript:void(0)" @onclick="@AmToPm">
                         <span class="rzi rzi-chevron-up"></span>
                     </a>
                     <span>@CurrentDate.ToString("tt")</span>
-                    <a href="javascript:void(0)" @onclick="@(async() => { 
-                        if (amPm == "pm" && !Disabled) 
-                        { 
-                            amPm = "am"; 
-
-                            var currentHour = ((CurrentDate.Hour + 11) % 12) + 1;
-
-                            var newHour = currentHour + 12;
-
-                            if(newHour > 23)
-                            {
-                                newHour = 0;
-                            }
-
-                            var newValue = new DateTime(
-                                CurrentDate.Year, 
-                                CurrentDate.Month, 
-                                CurrentDate.Day, 
-                                newHour, 
-                                CurrentDate.Minute, 
-                                CurrentDate.Second);
-
-                            if(!object.Equals(newValue, Value))
-                            {
-                                Value = newValue;
-                                await OnChange();
-                            } 
-                        } 
-                    })">
+                    <a href="javascript:void(0)" @onclick="@PmToAm">
                         <span class="rzi rzi-chevron-down"></span>
                     </a>
                 </div>
@@ -222,7 +123,7 @@
             @if (ShowTimeOkButton)
             {
                 <button type="button" class="rz-button rz-button-md btn-secondary" style="width:60px;padding:0px;margin-left:10px;"
-                        @onclick="@(async() => { if (!Disabled) { Value = CurrentDate; await OnChange(); if(monthDropDown != null){ await monthDropDown?.ClosePopup();} if(yearDropDown != null) { await yearDropDown?.ClosePopup();} } })"
+                        @onclick="@OkClick"
                         onmouseup="@($"Radzen.closePopup('{PopupID}')")">
                     <span class="rz-button-text">Ok</span>
                 </button>
@@ -236,6 +137,162 @@
     RadzenDropDown<int> monthDropDown;
     RadzenDropDown<int> yearDropDown;
 
+    async Task AmToPm()
+    {
+        if (amPm == "am" && !Disabled) 
+        { 
+            amPm = "pm"; 
+                            
+            var currentHour = ((CurrentDate.Hour + 11) % 12) + 1;
+
+            var newHour = currentHour - 12;
+
+            if(newHour < 1)
+            {
+                newHour = currentHour;
+            }
+
+            var newValue = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, newHour, CurrentDate.Minute, CurrentDate.Second);
+
+            if(!object.Equals(newValue, Value))
+            {
+                Value = newValue;
+                await OnChange();
+            } 
+        } 
+    }
+
+    async Task PmToAm()
+    {
+        if (amPm == "pm" && !Disabled) 
+        { 
+            amPm = "am"; 
+
+            var currentHour = ((CurrentDate.Hour + 11) % 12) + 1;
+
+            var newHour = currentHour + 12;
+
+            if(newHour > 23)
+            {
+                newHour = 0;
+            }
+
+            var newValue = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, newHour, CurrentDate.Minute, CurrentDate.Second);
+
+            if(!object.Equals(newValue, Value))
+            {
+                Value = newValue;
+                await OnChange();
+            } 
+        } 
+    }
+    
+    int? hour;
+    void OnUpdateHourInput(ChangeEventArgs args)
+    {
+        var value = $"{args.Value}";
+        if(!string.IsNullOrWhiteSpace(value))
+        {
+            hour = (int)Convert.ChangeType(value, typeof(int));
+        }
+    }
+
+    int? minutes;
+    void OnUpdateHourMinutes(ChangeEventArgs args)
+    {
+        var value = $"{args.Value}";
+        if(!string.IsNullOrWhiteSpace(value))
+        {
+            minutes = (int)Convert.ChangeType(value, typeof(int));
+        }
+    }
+
+    int? seconds;
+    void OnUpdateHourSeconds(ChangeEventArgs args)
+    {
+        var value = $"{args.Value}";
+        if(!string.IsNullOrWhiteSpace(value))
+        {
+            seconds = (int)Convert.ChangeType(value, typeof(int));
+        }
+    }
+
+    async Task UpdateHour(int v)
+    {
+        var newHour = HourFormat == "12" && CurrentDate.Hour > 12 ? v + 12 : v;
+
+        var newValue = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, newHour > 23 || newHour < 0 ? 0 : newHour, CurrentDate.Minute, CurrentDate.Second);
+
+        if(!object.Equals(newValue, Value))
+        {
+            hour = newValue.Hour;
+            Value = newValue;
+            await OnChange();
+        }
+    }
+
+    async Task UpdateMinutes(int v)
+    {
+        var newValue = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, CurrentDate.Hour, v, CurrentDate.Second);
+
+        if(!object.Equals(newValue, Value))
+        {
+            minutes = newValue.Minute;
+            Value = newValue;
+            await OnChange();
+        }
+    }
+
+    async Task UpdateSeconds(int v)
+    {
+        var newValue = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, CurrentDate.Hour, CurrentDate.Minute, v);
+
+        if(!object.Equals(newValue, Value))
+        {
+            seconds = newValue.Second;
+            Value = newValue;
+            await OnChange();
+        }
+    }
+
+    async Task OkClick()
+    {
+        if (!Disabled) 
+        { 
+            DateTime date = CurrentDate;
+
+            if(CurrentDate.Hour != hour && hour != null)
+            {
+                var newHour = HourFormat == "12" && CurrentDate.Hour > 12 ? hour.Value + 12 : hour.Value;
+                date = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, newHour > 23 || newHour < 0 ? 0 : newHour, CurrentDate.Minute, CurrentDate.Second);
+            }
+
+            if(CurrentDate.Minute != minutes && minutes != null)
+            {
+                date = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, CurrentDate.Hour, minutes.Value, CurrentDate.Second);
+            }
+
+            if(CurrentDate.Second != seconds && seconds != null)
+            {
+                date = new DateTime(CurrentDate.Year, CurrentDate.Month, CurrentDate.Day, CurrentDate.Hour, CurrentDate.Minute, seconds.Value);
+            }
+
+            Value = date;
+
+            await OnChange(); 
+        
+            if(monthDropDown != null)
+            {
+                await monthDropDown.ClosePopup();
+            } 
+        
+            if(yearDropDown != null) 
+            { 
+                await yearDropDown.ClosePopup();
+            } 
+        }
+    }
+
     class NameValue
     {
         public string Name { get; set; }
@@ -732,7 +789,10 @@
 
         Form?.RemoveComponent(this);
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        }
     }
 
     public object GetValue()

Radzen.Blazor/RadzenDropDown.razor

@@ -250,7 +250,10 @@
     {
         base.Dispose();
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        }
     }
 
     internal async System.Threading.Tasks.Task ClosePopup()

Radzen.Blazor/RadzenDropDownDataGrid.razor

@@ -196,7 +196,7 @@
 #if NET5
             if (grid != null)
             {
-                grid.AllowVirtualization = AllowVirtualization;
+                grid.SetAllowVirtualization(AllowVirtualization);
             }
 #endif            
             if(Visible && LoadData.HasDelegate && Data == null)
@@ -397,7 +397,7 @@
 
                 if (item != null && (!Multiple ? selectedItem != item : true))
                 {
-                    grid.OnRowSelect(item, false);
+                    await grid.OnRowSelect(item, false);
                 }
             }
             catch (Exception)
@@ -510,6 +510,9 @@
     {
         base.Dispose();
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        }
     }
 }

Radzen.Blazor/RadzenFieldset.razor

@@ -46,6 +46,14 @@
                 @ChildContent
             </div>
         </div>
+        @if (SummaryTemplate != null)
+        {
+            <div class="rz-fieldset-content-wrapper" role="region" aria-hidden="false" style="@summaryContentStyle">
+                <div class="rz-fieldset-content rz-fieldset-content-summary">
+                    @SummaryTemplate
+                </div>
+            </div>
+        }
     </fieldset>
 }
 @code {
@@ -73,6 +81,9 @@
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 
+    [Parameter]
+    public RenderFragment SummaryTemplate { get; set; } = null;
+
     [Parameter]
     public EventCallback Expand { get; set; }
 
@@ -80,11 +91,13 @@
     public EventCallback Collapse { get; set; }
 
     string contentStyle = "";
+    string summaryContentStyle = "display: none";
 
     async System.Threading.Tasks.Task Toggle(EventArgs args)
     {
         collapsed = !collapsed;
         contentStyle = collapsed ? "display: none;" : "";
+        summaryContentStyle = !collapsed ? "display: none" : "";
 
         if (collapsed)
         {
@@ -116,6 +129,7 @@
     protected override Task OnParametersSetAsync()
     {
         contentStyle = collapsed ? "display: none;" : "";
+        summaryContentStyle = !collapsed ? "display: none" : "";
 
         return base.OnParametersSetAsync();
     }

Radzen.Blazor/RadzenGoogleMap.razor

@@ -75,6 +75,8 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        await base.OnAfterRenderAsync(firstRender);
+
         var data = Data != null ? Data : markers;
 
         if (firstRender)
@@ -93,6 +95,9 @@
     {
         base.Dispose();
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyMap",  UniqueID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyMap",  UniqueID);
+        }
     }
 }

Radzen.Blazor/RadzenGrid.razor

@@ -64,11 +64,11 @@
                                             </span>
                                             @if (AllowSorting && column.Sortable)
                                             {
-                                                @if (!string.IsNullOrEmpty(orderBy) && orderBy.Contains($"{column.GetSortProperty()} asc"))
+                                                @if (column.SortOrder == SortOrder.Ascending)
                                                 {
                                                     <span class="rz-sortable-column-icon rzi-grid-sort rzi-sort rzi-sort-asc"></span>
                                                 }
-                                                else if (!string.IsNullOrEmpty(orderBy) && orderBy.Contains($"{column.GetSortProperty()} desc"))
+                                                else if (column.SortOrder == SortOrder.Descending)
                                                 {
                                                     <span class="rz-sortable-column-icon rzi-grid-sort rzi-sort rzi-sort-desc"></span>
                                                 }
@@ -634,7 +634,7 @@
             {
                 _emptyText = value;
 
-                ChangeState();
+                ChangeState().Wait();
             }
         }
     }
@@ -1277,6 +1277,7 @@
 
     public void OrderBy(string property)
     {
+        SetColumnSortOrder(property);
         var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);
         orderBy = orderBy == $"{p} desc" || orderBy == null || orderBy.IndexOf(p) == -1 ? $"{p} asc" : $"{p} desc";
         InvokeAsync(Reload);
@@ -1284,11 +1285,32 @@
 
     public void OrderByDescending(string property)
     {
+        SetColumnSortOrder(property);
         var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);
         orderBy = $"{p} desc";
         InvokeAsync(Reload);
     }
 
+    internal void SetColumnSortOrder(string property)
+    {
+        var column = columns.Where(c => c.GetSortProperty() == property).FirstOrDefault();
+        if(column != null)
+        {
+            if (column.SortOrder == null)
+            {
+                column.SortOrder = SortOrder.Ascending;
+            }
+            else if (column.SortOrder == SortOrder.Ascending)
+            {
+                column.SortOrder = SortOrder.Descending;
+            }
+            else if (column.SortOrder == SortOrder.Descending)
+            {
+                column.SortOrder = null;
+            }
+        }
+    }
+
     protected override string GetComponentCssClass()
     {
         var additionalClasses = new List<string>();

Radzen.Blazor/RadzenGridColumn.razor

@@ -31,7 +31,9 @@
                 _title = value;
 
                 if (Grid != null)
-                    Grid.ChangeState();
+                {
+                    Grid.ChangeState().Wait();
+                }
             }
         }
     }
@@ -279,6 +281,8 @@
         }
     }
 
+    internal SortOrder? SortOrder { get; set; }
+
     public string GetFilterProperty()
     {
         if (!string.IsNullOrEmpty(FilterProperty))

Radzen.Blazor/RadzenHtmlEditor.razor

@@ -138,6 +138,8 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        await base.OnAfterRenderAsync(firstRender);
+
         this.firstRender = firstRender;
 
         if (firstRender || visibleChanged)
@@ -214,7 +216,7 @@
     {
         base.Dispose();
 
-        if (Visible)
+        if (Visible && IsJSRuntimeAvailable)
         {
             JSRuntime.InvokeVoidAsync("Radzen.destroyEditor", ContentEditable);
         }

Radzen.Blazor/RadzenLogin.razor

@@ -7,14 +7,14 @@
             <div class="row form-group">
                 <label class="col-sm-3 col-form-label" for="username">@UserText</label>
                 <div class="col">
-                    <RadzenTextBox style="display: block" Name="Username" @bind-Value=@Username />
+                    <RadzenTextBox AutoComplete=@AutoComplete style="display: block" Name="Username" @bind-Value=@Username />
                     <RadzenRequiredValidator Component="Username" Text=@UserRequired style="position: absolute" />
                 </div>
             </div>
             <div class="row form-group">
                 <label class="col-sm-3 col-form-label" for="password">@PasswordText</label>
                 <div class="col">
-                    <RadzenPassword style="display: block" Name="Password" @bind-Value=@Password />
+                    <RadzenPassword AutoComplete=@AutoComplete style="display: block" Name="Password" @bind-Value=@Password />
                     <RadzenRequiredValidator Component="Password" Text=@PasswordRequired style="position: absolute" />
                 </div>
             </div>
@@ -37,7 +37,10 @@
         }
     </div>
 }
-@code {
+@code {  
+    [Parameter]
+    public bool AutoComplete { get; set; } = true;
+
     protected override string GetComponentCssClass()
     {
         return "login";

Radzen.Blazor/RadzenPager.razor

@@ -139,7 +139,7 @@
         }
     }
 
-    internal async void SetCurrentPage(int page)
+    internal void SetCurrentPage(int page)
     {
         if (CurrentPage != page)
         {

Radzen.Blazor/RadzenPanel.razor

@@ -38,6 +38,14 @@
                 </div>
             }
         </div>
+        @if (SummaryTemplate != null)
+        {
+            <div class="rz-panel-content-wrapper" role="region" aria-hidden="false" style="@summaryContentStyle">
+                <div class="rz-panel-content rz-panel-content-summary">
+                    @SummaryTemplate
+                </div>
+            </div>
+        }
     </div>
 }
 @code {
@@ -63,6 +71,9 @@
     [Parameter]
     public RenderFragment HeaderTemplate { get; set; }
 
+    [Parameter]
+    public RenderFragment SummaryTemplate { get; set; } = null;
+
     [Parameter]
     public RenderFragment FooterTemplate { get; set; }
 
@@ -73,11 +84,13 @@
     public EventCallback Collapse { get; set; }
 
     string contentStyle = "display: block;";
+    string summaryContentStyle = "display: none";
 
     async System.Threading.Tasks.Task Toggle(MouseEventArgs args)
     {
         collapsed = !collapsed;
         contentStyle = collapsed ? "display: none;" : "display: block;";
+        summaryContentStyle = !collapsed ? "display: none" : "display: block";
 
         if (collapsed)
         {
@@ -109,6 +122,7 @@
     protected override Task OnParametersSetAsync()
     {
         contentStyle = collapsed ? "display: none;" : "display: block;";
+        summaryContentStyle = !collapsed ? "display: none" : "display: block";
 
         return base.OnParametersSetAsync();
     }

Radzen.Blazor/RadzenScheduler.razor

@@ -307,6 +307,8 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        await base.OnAfterRenderAsync(firstRender);
+
         if (firstRender)
         {
             var rect = await JSRuntime.InvokeAsync<Rect>("Radzen.createScheduler", Element, Reference);
@@ -339,7 +341,11 @@
     public override void Dispose()
     {
         base.Dispose();
-        JSRuntime.InvokeVoidAsync("Radzen.destroyScheduler", Element);
+
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyScheduler", Element);
+        }
     }
 
     private bool heightIsSet = false;

Radzen.Blazor/RadzenSlider.razor

@@ -99,7 +99,11 @@
     public override void Dispose()
     {
         base.Dispose();
-        JSRuntime.InvokeVoidAsync("Radzen.destroySlider", UniqueID, Element);
+
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroySlider", UniqueID, Element);
+        }
     }
 
     [JSInvokable("RadzenSlider.OnValueChange")]

Radzen.Blazor/RadzenTabs.razor

@@ -9,11 +9,23 @@
             @Tabs
         </ul>
         <div class="rz-tabview-panels">
-            @if (SelectedTab?.Visible == true)
+            @if(RenderMode == TabRenderMode.Client)
             {
-                <div class="rz-tabview-panel" role="tabpanel" id="@($"{Id}-tabpanel-{selectedIndex}")" aria-hidden="false" aria-labelledby="@($"{Id}-tabpanel-{selectedIndex}-label")">
-                    @SelectedTab.ChildContent
-                </div>
+                for (var i = 0; i < tabs.Count; i++)
+                {
+                <div class="rz-tabview-panel" role="tabpanel" id="@($"{Id}-tabpanel-{i}")" style="@(tabs[i] == SelectedTab ? "" : "display:none")" aria-hidden="@(tabs[i] == SelectedTab ? "false" : "true")" aria-labelledby="@($"{Id}-tabpanel-{i}-label")">
+                    @tabs[i].ChildContent
+                </div>                            
+                }
+            }
+            else
+            {
+                @if (SelectedTab?.Visible == true)
+                {
+                    <div class="rz-tabview-panel" role="tabpanel" id="@($"{Id}-tabpanel-{selectedIndex}")" aria-hidden="false" aria-labelledby="@($"{Id}-tabpanel-{selectedIndex}-label")">
+                        @SelectedTab.ChildContent
+                    </div>
+                }
             }
         </div>
     </div>
@@ -21,6 +33,9 @@
 </CascadingValue>
 
 @code {
+    [Parameter]
+    public TabRenderMode RenderMode { get; set; } = TabRenderMode.Server;
+
     [Parameter]
     public int SelectedIndex { get; set; } = -1;
 

Radzen.Blazor/RadzenTooltip.razor

@@ -40,13 +40,14 @@
         await InvokeAsync(() => { StateHasChanged(); });
     }
 
-    bool firstRender = true;
+    bool IsJSRuntimeAvailable { get; set; }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        this.firstRender = firstRender;
+        IsJSRuntimeAvailable = true;
 
         var tooltip = tooltips.LastOrDefault();
+
         if (tooltip != null)
         {
             await JSRuntime.InvokeVoidAsync("Radzen.openTooltip",
@@ -71,7 +72,7 @@
 
     public void Dispose()
     {
-        if (!firstRender)
+        if (!IsJSRuntimeAvailable)
         {
             JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", UniqueID);
         }

Radzen.Blazor/Rendering/DaySlotEvents.razor

@@ -4,6 +4,7 @@
 <div class="rz-events">
 @{
     var eventGroups = AppointmentGroups(); 
+    var lefts = new Dictionary<AppointmentData, double>();
 }
 @for (var date = StartDate; date < EndDate; date = date.AddMinutes(30))
 {
@@ -11,11 +12,19 @@
     var end = start.AddMinutes(30);
 
     var appointments = AppointmentsInSlot(start, end);
+    var existingLefts = ExistingLefts(lefts, appointments);
 
     @foreach (var item in appointments)
     {
         var width = 90.0 / appointments.Max(data => eventGroups[Appointments.IndexOf(data)]);
-        var left = Array.IndexOf(appointments, item) * width;
+
+        if (!lefts.TryGetValue(item, out var left))
+        {
+            left = DetermineLeft(existingLefts, width);
+            lefts.Add(item, left);
+            existingLefts.Add(left);
+        }
+
         var eventStart = item.Start < StartDate ? StartDate : item.Start;
         var eventEnd = item.End > EndDate ? EndDate : item.End;
         var length = eventStart.Subtract(StartDate).TotalMinutes / 30;
@@ -62,6 +71,32 @@
         return Appointments.Where(item => Scheduler.IsAppointmentInRange(item, start, end)).OrderBy(item => item.Start).ThenByDescending(item => item.End).ToArray();
     }
 
+    double DetermineLeft(HashSet<double> existingLefts, double width)
+    {
+        double left = 0;
+
+        while (existingLefts.Contains(left))
+        {
+            left += width;
+        }
+
+        return left;
+    }
+
+    HashSet<double> ExistingLefts(IDictionary<AppointmentData, double> lefts, IEnumerable<AppointmentData> appointments)
+    {
+        var existingLefts = new HashSet<double>();
+
+        foreach (var appointment in appointments)
+        {
+            if (lefts.TryGetValue(appointment, out var existingLeft))
+            {
+                existingLefts.Add(existingLeft);
+            }
+        }
+
+        return existingLefts;
+    }
     private IDictionary<int, int> AppointmentGroups()
     {
         var groups = new Dictionary<int, int>();

Radzen.Blazor/Rendering/Popup.razor

@@ -44,6 +44,9 @@
     {
         base.Dispose();
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", GetId());
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", GetId());
+        }
     }
 }

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

@@ -712,7 +712,6 @@ $grid-button-line-height: $grid-button-height !default;
 }
 
 .rz-data-grid {
-    border: 1px solid #ccc;
     display: flex;
     flex-direction: column;
 }

Radzen.Blazor/wwwroot/Radzen.Blazor.js

@@ -129,7 +129,9 @@ window.Radzen = {
         return false;
       }
     };
-    el.addEventListener('keydown', preventDefault, false);
+    if (el) {
+       el.addEventListener('keydown', preventDefault, false);
+    }
   },
   loadGoogleMaps: function (defaultView, apiKey, resolve, reject) {
     resolveCallbacks.push(resolve);

RadzenBlazorDemos/Pages/DataGridFrozenColumnsPage.razor

@@ -14,7 +14,10 @@
     <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
         <Columns>
             <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
-            <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
+            <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" Frozen="@frozen">
+                <HeaderTemplate>
+                    <RadzenCheckBox @bind-Value="frozen" title="Pin/Unpin this column" />
+                </HeaderTemplate>
                 <Template Context="data">
                     <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
                 </Template>
@@ -38,6 +41,7 @@
 </RadzenExample>
 @code {
     IEnumerable<Employee> employees;
+    bool frozen;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/DataGridLoadDataPage.razor

@@ -10,7 +10,8 @@
 <p>The <code>LoadData</code> event allows you to perform custom paging, sorting and filtering.</p>
 
 <RadzenExample Name="DataGridLoadData" Heading="false" Documentation="false">
-    <RadzenDataGrid Count="@count" Data="@employees" LoadData="@LoadData" AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="4" TItem="Employee" ColumnWidth="200px">
+    <RadzenButton Text="Reset" Click="@Reset" Style="margin-bottom: 20px;" />
+    <RadzenDataGrid @ref="grid" Count="@count" Data="@employees" LoadData="@LoadData" AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="4" TItem="Employee" ColumnWidth="200px">
         <Columns>
             <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
             <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
@@ -70,9 +71,16 @@ void LoadData(LoadDataArgs args)
     </li>
 </ol>
 @code {
+    RadzenDataGrid<Employee> grid;
     int count;
     IEnumerable<Employee> employees;
 
+    async Task Reset()
+    {
+        grid.Reset(true); 
+        await grid.FirstPage(true);
+    }
+
     void LoadData(LoadDataArgs args)
     {
         // This demo is using https://dynamic-linq.net

RadzenBlazorDemos/Pages/DropDownPage.razor

@@ -12,10 +12,10 @@
     <div class="col-xl-6">
         <div class="row">
             <div class="col-xl-6 mb-5">
-                <h3>DropDown</h3>
+                <h3>Binding to simple collection</h3>
                 <RadzenDropDown AllowClear="true" TValue="string" Style="width:300px" 
-                                Data=@(customers.Select(c => new { CustomerID = c.CustomerID, CompanyName = c.CompanyName }).Distinct())
-                                TextProperty="CompanyName" ValueProperty="CustomerID" Change=@(args => OnChange(args, "DropDown")) />
+                                Data=@(customers.Select(c => c.CompanyName).Distinct())
+                                Change=@(args => OnChange(args, "DropDown")) />
             </div>
             <div class="col-xl-6 mb-5">
                 <h3>Disabled DropDown</h3>

RadzenBlazorDemos/Pages/FieldsetPage.razor

@@ -47,6 +47,11 @@
                     </Template>
                 </RadzenDataList>
             </ChildContent>
+            <SummaryTemplate>
+                <span>
+                    @orders.Count() Orders
+                </span>
+            </SummaryTemplate>
         </RadzenFieldset>
     </div>
     <div class="col-xl-6">

RadzenBlazorDemos/Pages/PanelPage.razor

@@ -47,6 +47,11 @@
                     </Template>
                 </RadzenDataList>
             </ChildContent>
+            <SummaryTemplate>
+                <RadzenCard>
+                    @orders.Count() Orders
+                </RadzenCard>
+            </SummaryTemplate>
         </RadzenPanel>
     </div>
     <div class="col-xl-6">

RadzenBlazorDemos/Pages/TabsPage.razor

@@ -9,7 +9,7 @@
 <RadzenExample Name="Tabs">
     <div class="row">
         <div class="col-xl-6">
-        <RadzenTabs Change=@OnChange style="height: 880px">
+        <RadzenTabs Change=@OnChange style="height: 880px" RenderMode="TabRenderMode.Client">
             <Tabs>
                 <RadzenTabsItem Text="Orders">
                     <RadzenDataList PageSize="2" WrapItems="true" AllowPaging="true" Data="@orders" TItem="Order">

RadzenBlazorDemos/RadzenBlazorDemos.csproj

@@ -5,7 +5,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Radzen.Blazor" Version="3.4.2" Condition="'$(Configuration)' == 'Release'"/>
+    <PackageReference Include="Radzen.Blazor" Version="3.5.2" Condition="'$(Configuration)' == 'Release'"/>
     <ProjectReference Include="..\Radzen.Blazor\Radzen.Blazor.csproj" Condition="'$(Configuration)' != 'Release'" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="5.0.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="5.0.0" />