Radzen.Blazor updated

Fix #177

Radzen.Blazor.Tests/BadgeTests.cs

@@ -0,0 +1,47 @@
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class BadgeTests
+    {
+        [Fact]
+        public void Badge_Renders_TextParameter()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+
+            var text = "Test";
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Text, text));
+
+            Assert.Contains(text, component.Markup);
+        }
+
+        [Fact]
+        public void Badge_Renders_ChildContent()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+
+            component.SetParametersAndRender(parameters => parameters.AddChildContent("SomeContent"));
+
+            Assert.Contains(@$"SomeContent", component.Markup);
+        }
+
+        [Fact]
+        public void Badge_Renders_BadgeStyle()
+        {
+            var badgeStyle = BadgeStyle.Danger;
+
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBadge>();
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.BadgeStyle, badgeStyle));
+
+            Assert.Contains($"badge-{badgeStyle.ToString().ToLower()}", component.Markup);
+        }
+    }
+}

Radzen.Blazor.Tests/ButtonTests.cs

@@ -51,7 +51,7 @@ namespace Radzen.Blazor.Tests
             Assert.DoesNotContain(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
 
             // renders the icon with busy spin animation
-            Assert.Contains(@"<i style=""animation: button-icon-spin", component.Markup);
+            Assert.Contains(@"<i style=""animation: rotation", component.Markup);
             Assert.Contains(">refresh</i>", component.Markup);
         }
 

Radzen.Blazor.Tests/DataGridColumnTests.cs

@@ -0,0 +1,98 @@
+using System;
+using System.Linq;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class DataGridColumnTests
+    {
+        class TestModel
+        {
+            public Guid Id { get; set; }
+            public string Name { get; set; }
+            public int Age { get; set; }
+        }
+        class Testable : RadzenDataGridColumn<TestModel>
+        {
+            public Testable()
+            {
+                Grid = new RadzenDataGrid<TestModel>();
+            }
+            public void PublicMorozov_OnInitialized()
+            {
+                OnInitialized();
+            }
+            public Type PublicMorozov_FilterPropertyType()
+            {
+                var propertyInfo = this.GetType()
+                    .GetProperties(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance)
+                    .FirstOrDefault(x => x.Name == "FilterPropertyType");
+
+                return propertyInfo?.GetValue(this) as Type;
+            }
+        }
+
+        [Fact]
+        public void FilterPropertyType_Assigned_From_Type_Parameter()
+        {
+            var column = new Testable()
+            {
+                Property = nameof(TestModel.Id),
+                Type = typeof(string),
+                FilterProperty = null
+            };
+
+            column.PublicMorozov_OnInitialized();
+
+            Assert.Equal(typeof(string), column.PublicMorozov_FilterPropertyType());
+            Assert.Equal(FilterOperator.Contains, column.FilterOperator);
+        }
+
+        [Fact]
+        public void FilterPropertyType_Assigned_From_FilterProperty_Parameter()
+        {
+            var column = new Testable()
+            {
+                Property = nameof(TestModel.Id),
+                Type = null,
+                FilterProperty = nameof(TestModel.Name)
+            };
+
+            column.PublicMorozov_OnInitialized();
+
+            Assert.Equal(typeof(string), column.PublicMorozov_FilterPropertyType());
+            Assert.Equal(FilterOperator.Contains, column.FilterOperator);
+        }
+
+        [Fact]
+        public void FilterPropertyType_Assigned_From_ColumnType()
+        {
+            var column = new Testable()
+            {
+                Property = nameof(TestModel.Id),
+                Type = null,
+                FilterProperty = null
+            };
+
+            column.PublicMorozov_OnInitialized();
+
+            Assert.Equal(typeof(Guid), column.PublicMorozov_FilterPropertyType());
+            Assert.Equal(FilterOperator.Equals, column.FilterOperator);
+        }
+
+        [Fact]
+        public void FilterPropertyType_Assigned_From_Type_If_FilterProperty_Is_Fake_Field()
+        {
+            var column = new Testable()
+            {
+                Property = nameof(TestModel.Id),
+                Type = typeof(decimal),
+                FilterProperty = "NotExistsField"
+            };
+
+            column.PublicMorozov_OnInitialized();
+
+            Assert.Equal(typeof(decimal), column.PublicMorozov_FilterPropertyType());
+        }
+    }
+}

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/CartesianSeries.cs

@@ -250,6 +250,7 @@ namespace Radzen.Blazor
                 }
 
                 Chart.Refresh(false);
+                Chart.DisplayTooltip();
             }
         }
 

Radzen.Blazor/Common.cs

@@ -1,16 +1,15 @@
-using System;
-using System.Collections;
-using System.Collections.Generic;
-using Microsoft.AspNetCore.Components;
-using System.Linq.Dynamic.Core;
-using System.Linq;
-using System.Linq.Expressions;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Radzen.Blazor;
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Linq;
+using System.Linq.Dynamic.Core;
+using System.Linq.Expressions;
+using System.Text.Encodings.Web;
 using System.Text.Json;
 using System.Threading.Tasks;
-using System.Text.Encodings.Web;
-using System.Security.Cryptography.X509Certificates;
 
 namespace Radzen
 {
@@ -173,6 +172,12 @@ namespace Radzen
         }
     }
 
+    public enum TabRenderMode
+    {
+        Server,
+        Client
+    }
+
     public enum PagerPosition
     {
         Top,
@@ -283,7 +288,8 @@ namespace Radzen
         GreaterThanOrEquals,
         Contains,
         StartsWith,
-        EndsWith
+        EndsWith,
+        DoesNotContain
     }
 
     public enum TextAlign
@@ -293,6 +299,17 @@ namespace Radzen
         Center
     }
 
+    public enum BadgeStyle
+    {
+        Primary,
+        Secondary,
+        Light,
+        Success,
+        Danger,
+        Warning,
+        Info
+    }
+
     public class DataGridColumnResizedEventArgs<T>
     {
         public RadzenDataGridColumn<T> Column { get; internal set; }
@@ -300,7 +317,7 @@ namespace Radzen
     }
 
     public class ColumnResizedEventArgs<T>
-    { 
+    {
         public RadzenGridColumn<T> Column { get; internal set; }
         public double Width { get; internal set; }
     }
@@ -462,6 +479,7 @@ namespace Radzen
 
         public static bool IsDate(Type source)
         {
+            if (source == null) return false;
             var type = source.IsGenericType ? source.GetGenericArguments()[0] : source;
 
             if (type == typeof(DateTime) || type == typeof(DateTimeOffset))

Radzen.Blazor/DialogService.cs

@@ -92,6 +92,7 @@ namespace Radzen
                 ShowClose = options != null ? options.ShowClose : true,
                 ChildContent = options?.ChildContent,
                 Style = options != null ? options.Style : "",
+                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true
             });
         }
 
@@ -108,8 +109,8 @@ namespace Radzen
             var task = tasks.LastOrDefault();
             if (task != null && task.Task != null && !task.Task.IsCompleted)
             {
-                task.SetResult(result);
                 tasks.Remove(task);
+                task.SetResult(result);
             }
         }
 
@@ -176,6 +177,7 @@ namespace Radzen
         public string Height { get; set; }
         public string Style { get; set; }
         public RenderFragment<DialogService> ChildContent { get; set; }
+        public bool AutoFocusFirstElement { get; set; } = true;
     }
 
     public class ConfirmOptions : DialogOptions

Radzen.Blazor/DropDownBase.cs

@@ -374,6 +374,8 @@ namespace Radzen
                     await LoadData.InvokeAsync(await GetLoadDataArgs());
                 }   
             }
+
+            await JSRuntime.InvokeAsync<string>("Radzen.repositionPopup", Element, PopupID);
         }
 
         protected async System.Threading.Tasks.Task OnKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

Radzen.Blazor/PagedDataBoundComponent.cs

@@ -49,6 +49,9 @@ namespace Radzen
             }
         }
 
+        [Parameter]
+        public IEnumerable<int> PageSizeOptions { get; set; }
+
         protected IQueryable<T> _view = null;
         public virtual IQueryable<T> PagedView
         {
@@ -148,6 +151,12 @@ namespace Radzen
             await InvokeAsync(Reload);
         }
 
+        protected async Task OnPageSizeChanged(int value)
+        {
+            PageSize = value;
+            await InvokeAsync(Reload);
+        }
+
         protected void CalculatePager()
         {
             if (topPager != null)

Radzen.Blazor/QueryableExtension.cs

@@ -19,7 +19,8 @@ namespace Radzen
             {"ge", ">="},
             {"startswith", "StartsWith"},
             {"endswith", "EndsWith"},
-            {"contains", "Contains"}
+            {"contains", "Contains"},
+            {"DoesNotContain", "Contains"}
         };
 
         internal static readonly IDictionary<FilterOperator, string> LinqFilterOperators = new Dictionary<FilterOperator, string>
@@ -32,7 +33,8 @@ namespace Radzen
             {FilterOperator.GreaterThanOrEquals, ">="},
             {FilterOperator.StartsWith, "StartsWith"},
             {FilterOperator.EndsWith, "EndsWith"},
-            {FilterOperator.Contains, "Contains"}
+            {FilterOperator.Contains, "Contains"},
+            {FilterOperator.DoesNotContain, "DoesNotContain"}
         };
 
         internal static readonly IDictionary<FilterOperator, string> ODataFilterOperators = new Dictionary<FilterOperator, string>
@@ -45,7 +47,8 @@ namespace Radzen
             {FilterOperator.GreaterThanOrEquals, "ge"},
             {FilterOperator.StartsWith, "startswith"},
             {FilterOperator.EndsWith, "endswith"},
-            {FilterOperator.Contains, "contains"}
+            {FilterOperator.Contains, "contains"},
+            {FilterOperator.DoesNotContain, "DoesNotContain"}
         };
 
         public static IList ToList(IQueryable query)
@@ -114,8 +117,27 @@ namespace Radzen
                 var whereList = new List<string>();
                 foreach (var column in columns.Where(canFilter))
                 {
-                    var value = (string)Convert.ChangeType(column.GetFilterValue(), typeof(string));
-                    var secondValue = (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
+                    string value = "";
+                    string secondValue = "";
+
+                    if (PropertyAccess.IsDate(column.FilterPropertyType))
+                    {
+                        var v = column.GetFilterValue();
+                        var sv = column.GetSecondFilterValue();
+                        if (v != null)
+                        {
+                            value = v is DateTime ? ((DateTime)v).ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : v is DateTimeOffset ? ((DateTimeOffset)v).UtcDateTime.ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : "";
+                        }
+                        if (sv != null)
+                        {
+                            secondValue = sv is DateTime ? ((DateTime)sv).ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : sv is DateTimeOffset ? ((DateTimeOffset)sv).UtcDateTime.ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : "";
+                        }
+                    }
+                    else
+                    {
+                        value = (string)Convert.ChangeType(column.GetFilterValue(), typeof(string));
+                        secondValue = (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
+                    }
 
                     if (!string.IsNullOrEmpty(value))
                     {
@@ -129,11 +151,11 @@ namespace Radzen
 
                         if (string.IsNullOrEmpty(secondValue))
                         {
-                            whereList.Add(GetColumnFilter(column));
+                            whereList.Add(GetColumnFilter(column, value));
                         }
                         else
                         {
-                            whereList.Add($"({GetColumnFilter(column)} {booleanOperator} {GetColumnFilter(column, true)})");
+                            whereList.Add($"({GetColumnFilter(column, value)} {booleanOperator} {GetColumnFilter(column, secondValue, true)})");
                         }
                     }
                 }
@@ -196,6 +218,10 @@ namespace Radzen
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "DoesNotContain")
+                {
+                    return $@"({property} == null ? """" : !{property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "startswith")
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.StartsWith(""{value}""{filterCaseSensitivityOperator})";
@@ -225,7 +251,7 @@ namespace Radzen
             return "";
         }
 
-        private static string GetColumnFilter<T>(RadzenDataGridColumn<T> column, bool second = false)
+        private static string GetColumnFilter<T>(RadzenDataGridColumn<T> column, string value, bool second = false)
         {
             var property = PropertyAccess.GetProperty(column.GetFilterProperty());
 
@@ -242,9 +268,6 @@ namespace Radzen
                 linqOperator = "==";
             }
 
-            var value = !second ? (string)Convert.ChangeType(column.GetFilterValue(), typeof(string)) :
-                (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
-
             if (column.FilterPropertyType == typeof(string))
             {
                 string filterCaseSensitivityOperator = column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
@@ -253,6 +276,10 @@ namespace Radzen
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.DoesNotContain)
+                {
+                    return $@"({property} == null ? """" : !{property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.StartsWith)
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.StartsWith(""{value}""{filterCaseSensitivityOperator})";
@@ -282,8 +309,9 @@ namespace Radzen
                 var dateTimeValue = DateTime.Parse(value, null, System.Globalization.DateTimeStyles.RoundtripKind);
                 var finalDate = dateTimeValue.TimeOfDay == TimeSpan.Zero ? dateTimeValue.Date : dateTimeValue;
                 var dateFormat = dateTimeValue.TimeOfDay == TimeSpan.Zero ? "yyyy-MM-dd" : "yyyy-MM-ddTHH:mm:ssZ";
+                var dateFunction = column.FilterPropertyType == typeof(DateTimeOffset) || column.FilterPropertyType == typeof(DateTimeOffset?) ? "DateTimeOffset" : "DateTime";
 
-                return $@"{property} {linqOperator} DateTime(""{finalDate.ToString(dateFormat)}"")";
+                return $@"{property} {linqOperator} {dateFunction}(""{finalDate.ToString(dateFormat)}"")";
             }
             else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
             {
@@ -334,6 +362,12 @@ namespace Radzen
                         $"contains({property}, tolower('{value}'))" : 
                         $"contains({property}, '{value}')";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "DoesNotContain")
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"not(contains({property}, tolower('{value}')))" :
+                        $"not(contains({property}, '{value}'))";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "startswith")
                 {
                     return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? 
@@ -393,6 +427,12 @@ namespace Radzen
                         $"contains({property}, tolower('{value}'))" :
                         $"contains({property}, '{value}')";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.DoesNotContain)
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"not(contains({property}, tolower('{value}')))" :
+                        $"not(contains({property}, '{value}'))";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.StartsWith)
                 {
                     return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
@@ -574,6 +614,11 @@ namespace Radzen
                             whereList.Add($@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})", new object[] { column.FilterValue });
                             index++;
                         }
+                        else if (comparison == "DoesNotContain")
+                        {
+                            whereList.Add($@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})", new object[] { column.FilterValue });
+                            index++;
+                        }
                         else
                         {
                             whereList.Add($@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}", new object[] { column.FilterValue });
@@ -584,12 +629,14 @@ namespace Radzen
                     {
                         var firstFilter = comparison == "StartsWith" || comparison == "EndsWith" || comparison == "Contains" ?
                             $@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})" :
+                            comparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
                             $@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}";
                         index++;
 
                         var secondComparison = FilterOperators[column.SecondFilterOperator];
                         var secondFilter = secondComparison == "StartsWith" || secondComparison == "EndsWith" || secondComparison == "Contains" ?
                             $@"{property}{filterCaseSensitivityOperator}.{secondComparison}(@{index}{filterCaseSensitivityOperator})" :
+                            secondComparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
                             $@"{property}{filterCaseSensitivityOperator} {secondComparison} @{index}{filterCaseSensitivityOperator}";
                         index++;
 
@@ -643,6 +690,11 @@ namespace Radzen
                             whereList.Add($@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})", new object[] { column.GetFilterValue() });
                             index++;
                         }
+                        else if (comparison == "DoesNotContain")
+                        {
+                            whereList.Add($@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})", new object[] { column.GetFilterValue() });
+                            index++;
+                        }
                         else
                         {
                             whereList.Add($@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}", new object[] { column.GetFilterValue() });
@@ -653,12 +705,14 @@ namespace Radzen
                     {
                         var firstFilter = comparison == "StartsWith" || comparison == "EndsWith" || comparison == "Contains" ?
                             $@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})" :
+                            comparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
                             $@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}";
                         index++;
 
                         var secondComparison = LinqFilterOperators[column.GetSecondFilterOperator()];
                         var secondFilter = secondComparison == "StartsWith" || secondComparison == "EndsWith" || secondComparison == "Contains" ?
                             $@"{property}{filterCaseSensitivityOperator}.{secondComparison}(@{index}{filterCaseSensitivityOperator})" :
+                            secondComparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
                             $@"{property}{filterCaseSensitivityOperator} {secondComparison} @{index}{filterCaseSensitivityOperator}";
                         index++;
 
@@ -676,5 +730,15 @@ namespace Radzen
         {
             return new ODataEnumerable<T>(source);
         }
+
+        public static IEnumerable<T> SelectManyRecursive<T>(this IEnumerable<T> source, Func<T, IEnumerable<T>> selector)
+        {
+            var result = source.SelectMany(selector);
+            if (!result.Any())
+            {
+                return result;
+            }
+            return result.Concat(result.SelectManyRecursive(selector));
+        }
     }
 }

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.7.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/RadzenBadge.razor

@@ -0,0 +1,42 @@
+@inherits RadzenComponent
+@if (Visible)
+{
+<span @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+    @if (ChildContent != null)
+    {
+        @ChildContent
+    }
+    else
+    {
+        @Text
+    }
+</span>
+}
+@code {
+    protected override string GetComponentCssClass()
+    {
+        var classList = new List<string>();
+
+        classList.Add("rz-badge");
+        classList.Add($"rz-badge-{BadgeStyle.ToString().ToLower()}");
+
+        if (IsPill)
+        {
+            classList.Add("rz-badge-pill");
+        }
+
+        return string.Join(" ", classList);
+    }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public string Text { get; set; }
+
+    [Parameter]
+    public BadgeStyle BadgeStyle { get; set; }
+
+    [Parameter]
+    public bool IsPill { get; set; }
+}

Radzen.Blazor/RadzenChart.razor

@@ -245,17 +245,27 @@
 
     RenderFragment tooltip;
     object tooltipData;
+    double mouseX;
+    double mouseY;
 
     [JSInvokable]
     public void MouseMove(double x, double y)
+    {
+        mouseX = x;
+        mouseY = y;
+
+        DisplayTooltip();
+    }
+
+    internal void DisplayTooltip()
     {
         if (Tooltip.Visible)
         {
             foreach (var series in Series)
             {
-                if (series.Visible && series.Contains(x - MarginLeft, y - MarginTop))
+                if (series.Visible && series.Contains(mouseX - MarginLeft, mouseY - MarginTop))
                 {
-                    var data = series.DataAt(x - MarginLeft, y - MarginTop);
+                    var data = series.DataAt(mouseX - MarginLeft, mouseY - MarginTop);
 
                     if (data != tooltipData)
                     {
@@ -301,6 +311,8 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        await base.OnAfterRenderAsync(firstRender);
+
         this.firstRender = firstRender;
 
         if (firstRender || visibleChanged)
@@ -417,7 +429,7 @@
     {
         base.Dispose();
 
-        if (Visible)
+        if (Visible && IsJSRuntimeAvailable)
         {
             JSRuntime.InvokeVoidAsync("Radzen.destroyChart", Element);
         }

Radzen.Blazor/RadzenColorPicker.razor

@@ -420,8 +420,12 @@
             SaturationHandleTop = 1 - HSV.Value;
             HSV.Saturation = 1;
             HSV.Value = 1;
-
             HueHandleLeft = HSV.Hue;
+
+            if (value.StartsWith("rgba"))
+            {
+                AlphaHandleLeft = HSV.Alpha;
+            }
         }
     }
 

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,10 +16,10 @@
 {
     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" />
+            <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" />
         }
 
     <div class="rz-data-grid-data">
@@ -99,8 +99,7 @@
                                                 {
                                                     @(DrawNumericFilter(column, false))
                                                 }
-                                                else if (column.FilterPropertyType == typeof(DateTime) || column.FilterPropertyType == typeof(DateTime?) ||
-                                                    column.FilterPropertyType == typeof(DateTimeOffset) || column.FilterPropertyType == typeof(DateTimeOffset?))
+                                                else if (PropertyAccess.IsDate(column.FilterPropertyType))
                                                 {
                                                     <RadzenDatePicker TValue="@object" ShowTime="true" ShowTimeOkButton="true" DateFormat="@getFilterDateFormat(column)"
                                                                       Value="@column.GetFilterValue()" Change="@(args => column.SetFilterValue(args.Value))" />
@@ -108,7 +107,7 @@
                                                 }
                                                 else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
                                                 {
-                                                    <RadzenCheckBox TriState="true" TValue="@object" Value="@column.GetFilterValue()" Change="@((args) => OnFilter(new ChangeEventArgs() { Value = args }, column))" />
+                                                    <RadzenCheckBox TriState="true" TValue="@object" Value="@column.GetFilterValue()" Change="@(args => column.SetFilterValue(args))" />
                                                 }
                                                 else
                                                 {
@@ -123,8 +122,7 @@
                                                 {
                                                     @(DrawNumericFilter(column, false, false))
                                                 }
-                                                else if (column.FilterPropertyType == typeof(DateTime) || column.FilterPropertyType == typeof(DateTime?) ||
-                                                    column.FilterPropertyType == typeof(DateTimeOffset) || column.FilterPropertyType == typeof(DateTimeOffset?))
+                                                else if (PropertyAccess.IsDate(column.FilterPropertyType))
                                                 {
                                                     <RadzenDatePicker TValue="@object"
                                                                       ShowTime="true" ShowTimeOkButton="true" DateFormat="@getFilterDateFormat(column)"
@@ -133,7 +131,7 @@
                                                 }
                                                 else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
                                                 {
-                                                    <RadzenCheckBox TriState="true" TValue="@object" Value="@column.GetSecondFilterValue()" Change="@((args) => OnFilter(new ChangeEventArgs() { Value = args }, column, false))" />
+                                                    <RadzenCheckBox TriState="true" TValue="@object" Value="@column.GetSecondFilterValue()" Change="@(args => column.SetFilterValue(args, false))"/>
                                                 }
                                                 else
                                                 {
@@ -241,7 +239,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
                                                     {
@@ -312,13 +312,18 @@
 
         @if (AllowPaging && (PagerPosition == PagerPosition.Bottom || PagerPosition == PagerPosition.TopAndBottom))
         {
-            <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" />
+            <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" />
         }
     </div>
 }
 
 @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 +346,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)
@@ -398,6 +403,7 @@
                 builder.AddAttribute(3, "Grid", this);
                 builder.AddAttribute(4, "TItem", typeof(TItem));
                 builder.AddAttribute(5, "Item", item);
+                builder.AddAttribute(6, "InEditMode", IsRowInEditMode(item));
                 builder.CloseComponent();
                 i++;
             }
@@ -446,6 +452,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);
+            }                
         }
     }
 
@@ -535,6 +548,14 @@
             builder.AddAttribute(3, "Change", eventCallbackGenericCreate.Invoke(this,
                 new object[] { this, eventCallbackGenericAction.Invoke(this, new object[] { action }) }));
 
+            if(FilterMode == FilterMode.Advanced)
+            {
+                builder.AddAttribute(4, "oninput", EventCallback.Factory.Create<ChangeEventArgs>(this, args => {
+                    var value = $"{args.Value}";
+                    column.SetFilterValue(!string.IsNullOrWhiteSpace(value) ? Convert.ChangeType(value, Nullable.GetUnderlyingType(type)) : null, isFirst);
+                } ));
+            }
+
             builder.CloseComponent();
         });
     }
@@ -694,6 +715,9 @@
     [Parameter]
     public string ContainsText { get; set; } = "Contains";
 
+    [Parameter]
+    public string DoesNotContainText { get; set; } = "Does not contain";
+
     [Parameter]
     public string StartsWithText { get; set; } = "Starts with";
 
@@ -733,7 +757,7 @@
             {
                 _emptyText = value;
 
-                ChangeState();
+                ChangeState().Wait();
             }
         }
     }
@@ -780,7 +804,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]
@@ -815,6 +839,12 @@
                 if (count != Count)
                 {
                     Count = count;
+
+                    if (skip >= Count && Count > PageSize)
+                    {
+                        skip = Count - PageSize;
+                    }
+
                     StateHasChanged();
                 }
             }
@@ -883,7 +913,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 +924,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()
@@ -940,11 +972,7 @@
                     SecondFilterOperator = c.GetSecondFilterOperator(),
                     LogicalFilterOperator = c.GetLogicalFilterOperator()
                 }),
-                Sorts = columns.Where(c => c.Sortable && c.Visible && c.GetSortOrder() != null).Select(c => new SortDescriptor()
-                {
-                    Property = c.GetSortProperty(),
-                    SortOrder = c.GetSortOrder().Value,
-                })
+                Sorts = sorts
             }); ;
         }
 
@@ -1247,12 +1275,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 +1318,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 +1358,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 +1456,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/RadzenDataGridCell.razor

@@ -1,5 +1,5 @@
 @typeparam TItem
-<td style="@Style" @attributes="@Attributes" class="@GetCssClass()" @onclick="@OnClick" @ondblclick="@OnDblClick" >
+<td @attributes="@Attributes" style="@GetStyle()" class="@GetCssClass()" @onclick="@OnClick" @ondblclick="@OnDblClick" >
     <CascadingValue Value=this>
         @ChildContent
     </CascadingValue>
@@ -118,6 +118,16 @@
             return $"{CssClass} {@class}".Trim();
         }
 
-        return CssClass;
+        return String.IsNullOrWhiteSpace(CssClass) ? null : CssClass;
+    }
+
+    string GetStyle()
+    {
+        if (Attributes != null && Attributes.TryGetValue("style", out var style) == true && !string.IsNullOrEmpty(Convert.ToString(style)))
+        {
+            return String.IsNullOrEmpty(Style) ? $"{style}" : $"{Style.TrimEnd(';')};{style}";
+        }
+
+        return Style;
     }
 }

Radzen.Blazor/RadzenDataGridColumn.razor

@@ -10,25 +10,28 @@
         {
             Grid.AddColumn(this);
 
-            var property = GetFilterProperty();
-
-            if (!string.IsNullOrEmpty(property))
+            if (!string.IsNullOrEmpty(FilterProperty) || Type == null)
             {
-                _filterPropertyType = PropertyAccess.GetPropertyType(typeof(TItem), property);
+                var property = GetFilterProperty();
 
-                if (_filterPropertyType == null)
+                if (!string.IsNullOrEmpty(property))
                 {
-                    _filterPropertyType = Type;
-                }
-                else
-                {
-                    propertyValueGetter = PropertyAccess.Getter<TItem, object>(Property);
+                    _filterPropertyType = PropertyAccess.GetPropertyType(typeof(TItem), property);
                 }
+            }
+            
+            if (_filterPropertyType == null)
+            {
+                _filterPropertyType = Type;
+            }
+            else
+            {
+                propertyValueGetter = PropertyAccess.Getter<TItem, object>(Property);
+            }
 
-                if (_filterPropertyType == typeof(string))
-                {
-                    FilterOperator = FilterOperator.Contains;
-                }
+            if (_filterPropertyType == typeof(string))
+            {
+                FilterOperator = FilterOperator.Contains;
             }
         }
     }
@@ -109,7 +112,9 @@
 
     public object GetValue(TItem item)
     {
-        return propertyValueGetter != null ? propertyValueGetter(item) : !string.IsNullOrEmpty(Property) ? PropertyAccess.GetValue(item, Property) : "";
+        var value = propertyValueGetter != null && !string.IsNullOrEmpty(Property) && !Property.Contains('.') ? propertyValueGetter(item) : !string.IsNullOrEmpty(Property) ? PropertyAccess.GetValue(item, Property) : "";
+
+        return !string.IsNullOrEmpty(FormatString) ? string.Format(FormatString, value) : value;
     }
 
     internal object GetHeader()
@@ -154,15 +159,20 @@
                 .TakeWhile((c, i) => Grid.ColumnsCollection.IndexOf(this) > i && c.Frozen)
                 .Sum(c => {
                     var w = !string.IsNullOrEmpty(c.GetWidth()) ? c.GetWidth() : Grid.ColumnWidth;
-                    return !string.IsNullOrEmpty(w) && w.Contains("px") ? int.Parse(w.Replace("px", "")) : 200;
+                    var cw = 200;
+                    if (!string.IsNullOrEmpty(w) && w.Contains("px"))
+                    {
+                        int.TryParse(w.Replace("px", ""), out cw);
+                    }
+                    return cw;
                 });
 
             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 ? 2 : 1)}");
         }
 
         return string.Join(";", style);
@@ -194,6 +204,12 @@
         sortOrder = new SortOrder?[] { order };
     }
 
+    internal void ResetSortOrder()
+    {
+        sortOrder = Enumerable.Empty<SortOrder?>();
+        SortOrder = null;
+    }
+
     public string GetFilterProperty()
     {
         if (!string.IsNullOrEmpty(FilterProperty))
@@ -299,7 +315,7 @@
 
     internal void SetFilterValue(object value, bool isFirst = true)
     {
-        if (FilterPropertyType == typeof(DateTimeOffset) && value != null && value is DateTime?)
+        if ((FilterPropertyType == typeof(DateTimeOffset) || FilterPropertyType == typeof(DateTimeOffset?)) && value != null && value is DateTime?)
         {
             DateTimeOffset? offset = DateTime.SpecifyKind((DateTime)value, DateTimeKind.Utc);
             value = offset;
@@ -350,7 +366,7 @@
     internal IEnumerable<FilterOperator> GetFilterOperators()
     {
         return Enum.GetValues(typeof(FilterOperator)).Cast<FilterOperator>().Where(o => {
-            var isStringOperator = o == FilterOperator.Contains || o == FilterOperator.StartsWith || o == FilterOperator.EndsWith;
+            var isStringOperator = o == FilterOperator.Contains ||  o == FilterOperator.DoesNotContain || o == FilterOperator.StartsWith || o == FilterOperator.EndsWith;
             return FilterPropertyType == typeof(string) ? isStringOperator || o == FilterOperator.Equals || o == FilterOperator.NotEquals : !isStringOperator;
         });
     }
@@ -361,6 +377,8 @@
         {
             case FilterOperator.Contains:
                 return Grid?.ContainsText;
+            case FilterOperator.DoesNotContain:
+                return Grid?.DoesNotContainText;
             case FilterOperator.EndsWith:
                 return Grid?.EndsWithText;
             case FilterOperator.Equals:

Radzen.Blazor/RadzenDataGridRow.razor

@@ -52,60 +52,26 @@
                 Grid.rowSpans.Add(j, (int)Convert.ChangeType(rowspan, TypeCode.Int32));
             }
 
-            if (Grid.IsRowInEditMode(Item))
-            {
-                <CascadingValue Value=Grid.editContexts[Item]>
-                    <td style="@column.GetStyle(true)" @attributes="@(cellAttr)" class="@Grid.getFrozenColumnClass(column, Columns)">
-                        <span class="rz-cell-data">
-                            @if (column.EditTemplate != null)
-                            {
-                                @column.EditTemplate(Item)
-                            }
-                            else if (column.Template != null)
-                            {
-                                @column.Template(Item)
-                            }
-                            else if (!string.IsNullOrEmpty(column.Property))
-                            {
-                                @if (!string.IsNullOrEmpty(column.FormatString))
-                                {
-                                    @(String.Format(column.FormatString, PropertyAccess.GetValue(Item, column.Property)));
-                                }
-                                else if (!string.IsNullOrEmpty(column.Property))
-                                {
-                                    @(PropertyAccess.GetValue(Item, column.Property));
-                                }
-                            }
-                        </span>
-                    </td>
-                </CascadingValue>
-            }
-            else
-            {
-                <RadzenDataGridCell Grid="@this.Grid" Item="@Item"
-                                    Style="@column.GetStyle(true)" CssClass="@(column.CssClass + " " + Grid.getFrozenColumnClass(column, Columns))" Attributes="@(cellAttr)">
-                    <span class="rz-cell-data">
-                        @if (Item != null)
+            <RadzenDataGridCell Grid="@this.Grid" Item="@Item"
+                                Style="@column.GetStyle(true)" CssClass="@(column.CssClass + " " + Grid.getFrozenColumnClass(column, Columns))" Attributes="@(cellAttr)">
+                <span class="rz-cell-data" title="@(column.Template == null ? column.GetValue(Item) : "")">
+                    @if (Item != null)
+                    {
+                        @if (Grid.IsRowInEditMode(Item) && column.EditTemplate != null)
                         {
-                            @if (column.Template != null)
-                            {
-                                @column.Template(Item)
-                            }
-                            else if (!string.IsNullOrEmpty(column.Property))
-                            {
-                                @if (!string.IsNullOrEmpty(column.FormatString))
-                                {
-                                    @(String.Format(column.FormatString, PropertyAccess.GetValue(Item, column.Property)));
-                                }
-                                else if (!string.IsNullOrEmpty(column.Property))
-                                {
-                                    @(PropertyAccess.GetValue(Item, column.Property));
-                                }
-                            }
+                            @column.EditTemplate(Item)
+                        } 
+                        else if (column.Template != null)
+                        {
+                            @column.Template(Item)
                         }
-                    </span>
-                </RadzenDataGridCell>
-            }
+                        else
+                        {
+                            @column.GetValue(Item)
+                        }
+                    }
+                </span>
+            </RadzenDataGridCell>
         }
     </CascadingValue>
 </tr>

Radzen.Blazor/RadzenDataList.razor

@@ -6,7 +6,7 @@
     <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
         @if (AllowPaging && (PagerPosition == PagerPosition.Top || PagerPosition == PagerPosition.TopAndBottom))
         {
-       <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" />
+       <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" />
         }
         @if (Data != null)
         {
@@ -47,7 +47,7 @@
         }
         @if (AllowPaging && (PagerPosition == PagerPosition.Bottom || PagerPosition == PagerPosition.TopAndBottom))
         {
-       <RadzenPager @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" class="rz-paginator-bottom" />
+       <RadzenPager @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" class="rz-paginator-bottom" />
         }
     </div>
 }

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/RadzenDialog.razor

@@ -20,7 +20,7 @@
 
         await InvokeAsync(() => { StateHasChanged(); });
 
-        await JSRuntime.InvokeAsync<string>("Radzen.openDialog");
+        await JSRuntime.InvokeAsync<string>("Radzen.openDialog", options);
     }
 
     public async Task Close(dynamic result)

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)
@@ -455,6 +455,7 @@
                  StateHasChanged();
                  grid.FirstPage(true).Wait();
 
+                 JSRuntime.InvokeAsync<string>("Radzen.repositionPopup", Element, PopupID);
             });
         }
     }
@@ -510,6 +511,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/RadzenFileInput.razor

@@ -21,7 +21,7 @@
                         <div>
                             @if (IsImage)
                             {
-                                <img style="width:100px;" src="@Value">
+                                <img style="@ImageStyle" src="@Value">
                             }
                         </div>
                         <div>
@@ -152,4 +152,7 @@
 
     [Parameter]
     public int MaxFileSize { get; set; } = 5 * 1024 * 1024;
+    
+    [Parameter]
+     public string ImageStyle { get; set; } = "width:100px;";
 }

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

@@ -20,7 +20,7 @@
 <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
     @if (AllowPaging && (PagerPosition == PagerPosition.Top || PagerPosition == PagerPosition.TopAndBottom))
     {
-        <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" />
+        <RadzenPager @ref="topPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" />
     }
     <div class="rz-datatable-scrollable-wrapper rz-helper-clearfix" style="">
         <div class="rz-datatable-scrollable-view">
@@ -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>
                                                 }
@@ -477,7 +477,7 @@
 
         @if (AllowPaging && (PagerPosition == PagerPosition.Bottom || PagerPosition == PagerPosition.TopAndBottom))
         {
-            <RadzenPager @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" class="rz-paginator-bottom" />
+            <RadzenPager @ref="bottomPager" Count="@Count" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" PageChanged="@OnPageChanged" PageSizeChanged="@OnPageSizeChanged" PageSizeOptions="@PageSizeOptions" class="rz-paginator-bottom" />
         }
     </div>
     }
@@ -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/RadzenMenuItem.razor

@@ -15,7 +15,14 @@
                     {
                         <img class="rz-navigation-item-icon" src="@Image" />
                     }
-                    <span class="rz-navigation-item-text">@Text</span>
+                    @if(Template != null)
+                    {
+                        @Template
+                    }
+                    else
+                    {
+                        <span class="rz-navigation-item-text">@Text</span>
+                    }
                     @if (ChildContent != null)
                     {
                         <i class="rzi rz-navigation-item-icon-children">keyboard_arrow_down</i>
@@ -33,7 +40,14 @@
                     {
                         <img class="rz-navigation-item-icon" src="@Image" />
                     }
-                    <span class="rz-navigation-item-text">@Text</span>
+                    @if(Template != null)
+                    {
+                        @Template
+                    }
+                    else
+                    {
+                        <span class="rz-navigation-item-text">@Text</span>
+                    }
                     @if (ChildContent != null)
                     {
                         <i class="rzi rz-navigation-item-icon-children">keyboard_arrow_down</i>
@@ -73,6 +87,9 @@
     [Parameter]
     public string Image { get; set; }
 
+    [Parameter]
+    public RenderFragment Template { get; set; }
+
     [Parameter]
     public RenderFragment ChildContent { get; set; }
 

Radzen.Blazor/RadzenNumeric.razor

@@ -152,10 +152,20 @@
         await InternalValueChanged(args.Value);
     }
 
+    private string RemoveNonNumericCharacters(object value)
+    {
+        string valueStr = value as string;
+        if (valueStr == null)
+        {
+            valueStr = value.ToString();
+        }
+        return new string(valueStr.Where(c => char.IsDigit(c) || char.IsPunctuation(c)).ToArray());
+    }
+
     private async System.Threading.Tasks.Task InternalValueChanged(object value)
     {
         TValue newValue;
-        BindConverter.TryConvertTo<TValue>($"{value}", System.Globalization.CultureInfo.CurrentCulture, out newValue);
+        BindConverter.TryConvertTo<TValue>(RemoveNonNumericCharacters(value), System.Globalization.CultureInfo.CurrentCulture, out newValue);
 
         decimal? newValueAsDecimal = newValue == null ? default(decimal?) : (decimal)ConvertType.ChangeType(newValue, typeof(decimal));
 
@@ -191,4 +201,30 @@
 
     [Parameter]
     public decimal? Max { get; set; }
+
+    public override async Task SetParametersAsync(ParameterView parameters)
+    {
+        bool minChanged = parameters.DidParameterChange(nameof(Min), Min);
+        bool maxChanged = parameters.DidParameterChange(nameof(Max), Max);
+
+        await base.SetParametersAsync(parameters);
+
+        if (minChanged && Min.HasValue && Value != null && IsJSRuntimeAvailable)
+        {
+            decimal decimalValue = (decimal)Convert.ChangeType(Value, typeof(decimal));
+            if (decimalValue < Min.Value)
+            {
+                await InternalValueChanged(Min.Value);
+            }
+        }
+
+        if (maxChanged && Max.HasValue && Value != null && IsJSRuntimeAvailable)
+        {
+            decimal decimalValue = (decimal)Convert.ChangeType(Value, typeof(decimal));
+            if (decimalValue > Max.Value)
+            {
+                await InternalValueChanged(Max.Value);
+            }
+        }
+    }
 }

Radzen.Blazor/RadzenPager.razor

@@ -4,19 +4,19 @@
     <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
         @if (skip > 0)
         {
-            <a class="rz-paginator-first rz-paginator-element" href="javascript:void(0)" tabindex="-1" @onclick="@(() => FirstPage())">
+            <a class="rz-paginator-first rz-paginator-element" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => FirstPage())">
                 <span class="rz-paginator-icon rzi rzi-step-backward"></span>
             </a>
-            <a class="rz-paginator-prev rz-paginator-element" href="javascript:void(0)" tabindex="-1" @onclick="@(() => PrevPage())">
+            <a class="rz-paginator-prev rz-paginator-element" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => PrevPage())">
                 <span class="rz-paginator-icon rzi rzi-caret-left"></span>
             </a>
         }
         else
         {
-            <a class="rz-paginator-first rz-paginator-element rz-state-disabled" href="javascript:void(0)" tabindex="-1" @onclick="@(() => FirstPage())">
+            <a class="rz-paginator-first rz-paginator-element rz-state-disabled" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => FirstPage())">
                 <span class="rz-paginator-icon rzi rzi-step-backward"></span>
             </a>
-            <a class="rz-paginator-prev rz-paginator-element   rz-state-disabled" href="javascript:void(0)" tabindex="-1" @onclick="@(() => PrevPage())">
+            <a class="rz-paginator-prev rz-paginator-element   rz-state-disabled" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => PrevPage())">
                 <span class="rz-paginator-icon rzi rzi-caret-left"></span>
             </a>
         }
@@ -25,32 +25,36 @@
             {
                 @if (i == CurrentPage)
                 {
-                    <a class="rz-paginator-page rz-paginator-element rz-state-active" href="javascript:void(0)" @onclick="@(() => GoToPage(i))">@(i + 1)</a>
+                    <a class="rz-paginator-page rz-paginator-element rz-state-active" href="javascript:void(0)" @onclick:preventDefault="true" @onclick="@(() => GoToPage(i))">@(i + 1)</a>
                 }
                 else
                 {
-                    <a class="rz-paginator-page rz-paginator-element" href="javascript:void(0)" @onclick="@(() => GoToPage(i))">@(i + 1)</a>
+                    <a class="rz-paginator-page rz-paginator-element" href="javascript:void(0)" @onclick:preventDefault="true" @onclick="@(() => GoToPage(i))">@(i + 1)</a>
                 }
             }
         </span>
         @if (CurrentPage != numberOfPages - 1)
         {
-            <a class="rz-paginator-next rz-paginator-element" href="javascript:void(0)" tabindex="0" @onclick="@(() => NextPage())">
+            <a class="rz-paginator-next rz-paginator-element" href="javascript:void(0)" tabindex="0" @onclick:preventDefault="true" @onclick="@(() => NextPage())">
                 <span class="rz-paginator-icon rzi rzi-caret-right"></span>
             </a>
-            <a class="rz-paginator-last rz-paginator-element" href="javascript:void(0)" tabindex="0" @onclick="@(() => LastPage())">
+            <a class="rz-paginator-last rz-paginator-element" href="javascript:void(0)" tabindex="0" @onclick:preventDefault="true" @onclick="@(() => LastPage())">
                 <span class="rz-paginator-icon rzi rzi-step-forward"></span>
             </a>
         }
         else
         {
-            <a class="rz-paginator-next rz-paginator-element rz-state-disabled" href="javascript:void(0)" tabindex="0" @onclick="@(() => NextPage())">
+            <a class="rz-paginator-next rz-paginator-element rz-state-disabled" href="javascript:void(0)" tabindex="0" @onclick:preventDefault="true" @onclick="@(() => NextPage())">
                 <span class="rz-paginator-icon rzi rzi-caret-right"></span>
             </a>
-            <a class="rz-paginator-last rz-paginator-element rz-state-disabled" href="javascript:void(0)" tabindex="0" @onclick="@(() => LastPage())">
+            <a class="rz-paginator-last rz-paginator-element rz-state-disabled" href="javascript:void(0)" tabindex="0" @onclick:preventDefault="true" @onclick="@(() => LastPage())">
                 <span class="rz-paginator-icon rzi rzi-step-forward"></span>
             </a>
         }
+        @if(PageSizeOptions != null && PageSizeOptions.Any())
+        {
+            <RadzenDropDown TValue="int" Data="@PageSizeOptions" Value="@PageSize" Change="@OnPageSizeChanged" />
+        }
     </div>
 }
 @code {
@@ -62,6 +66,12 @@
     [Parameter]
     public int PageSize { get; set; } = 10;
 
+    [Parameter]
+    public EventCallback<int> PageSizeChanged { get; set; }
+
+    [Parameter]
+    public IEnumerable<int> PageSizeOptions { get; set; }
+
     [Parameter]
     public int PageNumbersCount { get; set; } = 5;
 
@@ -94,6 +104,13 @@
         return base.OnParametersSetAsync();
     }
 
+    protected async Task OnPageSizeChanged(object value)
+    {
+        PageSize = (int)value;
+        await InvokeAsync(Reload);
+        await PageSizeChanged.InvokeAsync((int)value);
+    }
+
     protected int skip;
     protected int numberOfPageLinks = 5;
     protected int startPage;
@@ -139,7 +156,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/RadzenPanelMenuItem.razor

@@ -15,7 +15,14 @@
                     {
                         <img class="rz-navigation-item-icon" src="@Image" />
                     }
-                    <span class="rz-navigation-item-text" @onclick="@Toggle">@Text</span>
+                    @if(Template != null)
+                    {
+                        @Template
+                    }
+                    else
+                    {
+                        <span class="rz-navigation-item-text" @onclick="@Toggle">@Text</span>
+                    }
                     @if (items.Any())
                     {
                         <i class="rzi rz-navigation-item-icon-children" style="@getStyle()" @onclick="@Toggle">keyboard_arrow_down</i>
@@ -33,7 +40,14 @@
                     {
                         <img class="rz-navigation-item-icon" src="@Image" />
                     }
-                    <span class="rz-navigation-item-text">@Text</span>
+                    @if(Template != null)
+                    {
+                        @Template
+                    }
+                    else
+                    {
+                        <span class="rz-navigation-item-text">@Text</span>
+                    }
                     @if (items.Any())
                     {
                         <i class="rzi rz-navigation-item-icon-children" style="@getStyle()">keyboard_arrow_down</i>
@@ -78,6 +92,9 @@
     [Parameter]
     public string Image { get; set; }
 
+    [Parameter]
+    public RenderFragment Template { get; set; }
+
     [Parameter]
     public bool Expanded { get; set; } = false;
 

Radzen.Blazor/RadzenRating.razor

@@ -3,73 +3,73 @@
 @inherits FormComponent<int>
 @if (Visible)
 {
-    @if (Disabled)
-    {
-        <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
-            <a href="javascript:void(0)" class="rz-rating-cancel">
-                <span class="rz-rating-icon rzi rzi-ban"></span>
-            </a>
-            @foreach (var index in Enumerable.Range(1, Stars))
-            {
-                @if (index <= Value)
-                {
-                    <a href="javascript:void(0)">
-                        <span class="rz-rating-icon rzi rzi-star"></span>
-                    </a>
-                }
-                else
-                {
-                    <a href="javascript:void(0)">
-                        <span class="rz-rating-icon rzi rzi-star-o"></span>
-                    </a>
-                }
-
-            }
-        </div>
-    }
-    else
-    {
-        <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+        @if (!ReadOnly)
+        {
             <a href="javascript:void(0)" class="rz-rating-cancel" tabindex="@TabIndex" @onclick="@(args => SetValue(0))" @onkeypress="@(async args => { if (args.Code == "Space") { await SetValue(0); } })">
                 <span class="rz-rating-icon rzi rzi-ban"></span>
             </a>
-            @foreach (var index in Enumerable.Range(1, Stars))
+        }
+        @foreach (var index in Enumerable.Range(1, Stars))
+        {
+
+            @if (index <= Value)
             {
-
-                @if (index <= Value)
-                {
-                    <a href="javascript:void(0)" tabindex="@TabIndex" @onclick="@(args => SetValue(index))" @onkeypress="@(async args => { if (args.Code == "Space") { await SetValue(index); } })">
-                        <span class="rz-rating-icon rzi rzi-star"></span>
-                    </a>
-                }
-                else
-                {
-                    <a href="javascript:void(0)" tabindex="@TabIndex" @onclick="@(args => SetValue(index))" @onkeypress="@(async args => { if (args.Code == "Space") { await SetValue(index); } })">
-                        <span class="rz-rating-icon rzi rzi-star-o"></span>
-                    </a>
-                }
-
+                <a href="javascript:void(0)" tabindex="@TabIndex" @onclick="@(args => SetValue(index))" @onkeypress="@(async args => { if (args.Code == "Space") { await SetValue(index); } })">
+                    <span class="rz-rating-icon rzi rzi-star"></span>
+                </a>
             }
-        </div>
-    }
+            else
+            {
+                <a href="javascript:void(0)" tabindex="@TabIndex" @onclick="@(args => SetValue(index))" @onkeypress="@(async args => { if (args.Code == "Space") { await SetValue(index); } })">
+                    <span class="rz-rating-icon rzi rzi-star-o"></span>
+                </a>
+            }
+        }
+    </div>
 }
 @code {
     protected override string GetComponentCssClass()
     {
         var fieldCssClass = FieldIdentifier.FieldName != null ? EditContext?.FieldCssClass(FieldIdentifier) : "";
 
-        return $"rz-rating {(Disabled ? "rz-state-disabled" : "")} {fieldCssClass}";
+        var classList = new List<string>();
+
+        classList.Add("rz-rating");
+
+        if (Disabled)
+        {
+            classList.Add("rz-state-disabled");
+        }
+
+        if (ReadOnly)
+        {
+            classList.Add("rz-state-readonly");
+        }
+
+        if (!string.IsNullOrEmpty(fieldCssClass))
+        {
+            classList.Add(fieldCssClass);
+        }
+
+        return string.Join(" ", classList);
     }
 
     [Parameter]
     public int Stars { get; set; } = 5;
 
+    [Parameter]
+    public bool ReadOnly { get; set; }
+
     private async System.Threading.Tasks.Task SetValue(int value)
     {
-        Value = value;
+        if (!Disabled && !ReadOnly)
+        {
+            Value = value;
 
-        await ValueChanged.InvokeAsync(value);
-       if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-        await Change.InvokeAsync(value);
+            await ValueChanged.InvokeAsync(value);
+            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
+            await Change.InvokeAsync(value);
+        }
     }
 }

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/RadzenTree.razor

@@ -48,7 +48,52 @@
     [Parameter]
     public EventCallback<object> ValueChanged { get; set; }
 
-    void RenderTreeItem(RenderTreeBuilder builder, object data, RenderFragment<RadzenTreeItem> template, Func<object,
+    [Parameter]
+    public bool AllowCheckBoxes { get; set; }
+
+    [Parameter]
+    public bool AllowCheckChildren { get; set; } = true;
+
+    [Parameter]
+    public bool AllowCheckParents { get; set; } = true;
+
+    [Parameter]
+    public IEnumerable<object> CheckedValues { get; set; } = Enumerable.Empty<object>();
+
+    internal List<RadzenTreeItem> items = new List<RadzenTreeItem>();
+
+    internal void AddItem(RadzenTreeItem item)
+    {
+        if (items.IndexOf(item) == -1)
+        {
+            items.Add(item);
+        }
+    }
+
+    internal void RemoveItem(RadzenTreeItem item)
+    {
+        if (items.IndexOf(item) != -1)
+        {
+            items.Remove(item);
+        }
+    }
+
+    internal async Task SetCheckedValues(IEnumerable<object> values)
+    {
+        CheckedValues = values.ToList();
+        await CheckedValuesChanged.InvokeAsync(CheckedValues);
+    }
+
+    internal IEnumerable<object> UncheckedValues { get; set; } = Enumerable.Empty<object>();
+    internal void SetUncheckedValues(IEnumerable<object> values)
+    {
+        UncheckedValues = values.ToList();
+    }
+
+    [Parameter]
+    public EventCallback<IEnumerable<object>> CheckedValuesChanged { get; set; }
+
+    void RenderTreeItem(RadzenTreeItem parent, RenderTreeBuilder builder, object data, RenderFragment<RadzenTreeItem> template, Func<object,
     string> text,
     Func<object, bool> hasChildren, Func<object, bool> expanded, Func<object, bool> selected)
     {
@@ -59,6 +104,12 @@
         builder.AddAttribute(4, nameof(RadzenTreeItem.Template), template);
         builder.AddAttribute(5, nameof(RadzenTreeItem.Expanded), expanded(data));
         builder.AddAttribute(6, nameof(RadzenTreeItem.Selected), Value == data || selected(data));
+
+        if (parent != null)
+        {
+            builder.AddAttribute(7, nameof(RadzenTreeItem.ParentItem), parent);
+        }
+
         builder.SetKey(data);
     }
 
@@ -77,7 +128,7 @@
                     text = level.Text ?? Getter<string>(data, level.TextProperty);
                 }
 
-                RenderTreeItem(builder, data, level.Template, text, level.HasChildren, level.Expanded, level.Selected);
+                RenderTreeItem(null, builder, data, level.Template, text, level.HasChildren, level.Expanded, level.Selected);
 
                 var hasChildren = level.HasChildren(data);
 
@@ -144,12 +195,24 @@
                         text = children.Text ?? Getter<string>(data, children.TextProperty);
                     }
 
-                    RenderTreeItem(builder, data, children.Template, text, children.HasChildren, children.Expanded, children.Selected);
+                    RenderTreeItem(item, builder, data, children.Template, text, children.HasChildren, children.Expanded, children.Selected);
                     builder.CloseComponent();
                 }
             });
 
             item.RenderChildContent(childContent);
+
+            if(AllowCheckBoxes && AllowCheckChildren && args.Children.Data != null)
+            {
+                if (CheckedValues != null && CheckedValues.Contains(item.Value))
+                {
+                    await SetCheckedValues(CheckedValues.Union(args.Children.Data.Cast<object>().Except(UncheckedValues)));
+                }
+                else
+                {
+                    await SetCheckedValues(CheckedValues.Except(args.Children.Data.Cast<object>()));
+                }
+            }
         }
     }
 

Radzen.Blazor/RadzenTreeItem.razor

@@ -1,11 +1,15 @@
 @using Radzen
-
+@implements IDisposable
 <li class="rz-treenode">
     <div class="@($"rz-treenode-content {(selected ? "rz-treenode-content-selected" : "")}")" @onclick="@Select">
         @if (ChildContent != null || HasChildren)
         {
             <span class="@($"rz-tree-toggler rzi {(expanded ? "rzi-caret-down" : "rzi-caret-right")}")" @onclick="@Toggle" @onclick:stopPropagation></span>
         }
+        @if(Tree != null && Tree.AllowCheckBoxes)
+        {
+            <RadzenCheckBox TValue="bool?" Value="@IsChecked()" Change="@CheckedChange" Style="@(ParentItem != null && !HasChildren ? "margin-left:25px;margin-right:5px;" : "margin-right:5px;")" />
+        }
         @if (Template != null)
         {
             @Template(this)
@@ -51,6 +55,59 @@
     [CascadingParameter]
     public RadzenTree Tree { get; set; }
 
+    RadzenTreeItem _parentItem;
+
+    [Parameter]
+    public RadzenTreeItem ParentItem
+    {
+        get
+        {
+            return _parentItem;
+        }
+        set
+        {
+            if (_parentItem != value)
+            {
+                _parentItem = value;
+
+                if (_parentItem != null)
+                {
+                    _parentItem.AddItem(this);
+                }
+            }
+        }
+    }
+
+    internal List<RadzenTreeItem> items = new List<RadzenTreeItem>();
+
+    internal void AddItem(RadzenTreeItem item)
+    {
+        if (items.IndexOf(item) == -1)
+        {
+            items.Add(item);
+        }
+    }
+
+    internal void RemoveItem(RadzenTreeItem item)
+    {
+        if (items.IndexOf(item) != -1)
+        {
+            items.Remove(item);
+        }
+    }
+
+    public void Dispose()
+    {
+        if (ParentItem != null)
+        {
+            ParentItem.RemoveItem(this);
+        }
+        else if(Tree != null)
+        {
+            Tree.RemoveItem(this);
+        }
+    }
+
     async Task Toggle()
     {
         expanded = !expanded;
@@ -93,6 +150,11 @@
         {
             Tree?.SelectItem(this);
         }
+
+        if (Tree != null && ParentItem == null)
+        {
+            Tree.AddItem(this);
+        }
     }
 
     public override async Task SetParametersAsync(ParameterView parameters)
@@ -130,4 +192,123 @@
 
         await base.SetParametersAsync(parameters);
     }
+
+    async Task CheckedChange(bool? value)
+    {
+        if (Tree != null)
+        {
+            var checkedValues = GetCheckedValues();
+
+            if (Tree.AllowCheckChildren)
+            {
+                if (value == true)
+                {
+                    var valueAndChildren = GetValueAndAllChildValues();
+                    checkedValues = checkedValues.Union(valueAndChildren);
+                    Tree.SetUncheckedValues(Tree.UncheckedValues.Except(valueAndChildren));
+                }
+                else
+                {
+                    var valueAndChildren = GetValueAndAllChildValues();
+                    checkedValues = checkedValues.Except(valueAndChildren);
+                    Tree.SetUncheckedValues(valueAndChildren.Union(Tree.UncheckedValues));
+                }
+            }
+            else
+            {
+                if (value == true)
+                {
+                    var valueWithoutChildren = new[] { Value };
+                    checkedValues = checkedValues.Union(valueWithoutChildren);
+                    Tree.SetUncheckedValues(Tree.UncheckedValues.Except(valueWithoutChildren));
+                }
+                else
+                {
+                    var valueWithoutChildren = new[] { Value };
+                    checkedValues = checkedValues.Except(valueWithoutChildren);
+                    Tree.SetUncheckedValues(valueWithoutChildren.Union(Tree.UncheckedValues));
+                }
+            }
+
+            if (Tree.AllowCheckParents)
+            {
+                checkedValues = UpdateCheckedValuesWithParents(checkedValues, value);
+            }
+
+            await Tree.SetCheckedValues(checkedValues);
+        }
+    }
+
+    bool? IsChecked()
+    {
+        var checkedValues = GetCheckedValues();
+
+        if(HasChildren && IsOneChildUnchecked() && IsOneChildChecked())
+        {
+            return null;
+        }
+
+        return checkedValues.Contains(Value);
+    }
+
+    IEnumerable<object> GetCheckedValues()
+    {
+        return Tree.CheckedValues != null ? Tree.CheckedValues : Enumerable.Empty<object>();
+    }
+
+    IEnumerable<object> GetAllChildValues(Func<object, bool> predicate = null)
+    {
+        var children = items.Concat(items.SelectManyRecursive(i => i.items)).Select(i => i.Value);
+
+        return predicate != null ? children.Where(predicate) : children;
+    }
+
+    IEnumerable<object> GetValueAndAllChildValues()
+    {
+        return new object[] { Value }.Concat(GetAllChildValues());
+    }
+
+    bool AreAllChildrenChecked(Func<object, bool> predicate = null)
+    {
+        var checkedValues = GetCheckedValues();
+        return GetAllChildValues(predicate).All(i => checkedValues.Contains(i));
+    }
+
+    bool AreAllChildrenUnchecked(Func<object, bool> predicate = null)
+    {
+        var checkedValues = GetCheckedValues();
+        return GetAllChildValues(predicate).All(i => !checkedValues.Contains(i));
+    }
+
+    bool IsOneChildUnchecked()
+    {
+        var checkedValues = GetCheckedValues();
+        return GetAllChildValues().Any(i => !checkedValues.Contains(i));
+    }
+
+    bool IsOneChildChecked()
+    {
+        var checkedValues = GetCheckedValues();
+        return GetAllChildValues().Any(i => checkedValues.Contains(i));
+    }
+
+    IEnumerable<object> UpdateCheckedValuesWithParents(IEnumerable<object> checkedValues, bool? value)
+    {
+        var p = ParentItem;
+        while (p != null)
+        {
+            if (value == false && p.AreAllChildrenUnchecked(i => !object.Equals(i, Value)))
+            {
+                checkedValues = checkedValues.Except(new object[] { p.Value });
+            }
+            else if (value == true && p.AreAllChildrenChecked(i => !object.Equals(i, Value)))
+            {
+                checkedValues = checkedValues.Union(new object[] { p.Value });
+            }
+
+            p = p.ParentItem;
+        }
+
+        return checkedValues;
+    }
 }

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.scss

@@ -2,6 +2,7 @@
 @import 'components/blazor/icons';
 @import 'components/blazor/common';
 @import 'components/blazor/button';
+@import 'components/blazor/badge';
 @import 'components/blazor/input';
 @import 'components/blazor/header';
 @import 'components/blazor/footer';

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

@@ -0,0 +1,57 @@
+$badge-pill-border-radius: $border-radius !default;
+
+$badge-styles: () !default;
+
+$badge-styles: map-merge(
+  (
+    primary: (
+      background-color: $primary
+    ),
+    light: (
+      background-color: $light,
+      color: $charcoal-grey
+    ),
+    secondary: (
+      background-color: $secondary
+    ),
+    info: (
+      background-color: $info
+    ),
+    warning: (
+      background-color: $warning
+    ),
+    error: (
+      background-color: $danger
+    ),
+    danger: (
+      background-color: $danger
+    ),
+    success: (
+      background-color: $success
+    )
+  ),
+  $badge-styles
+);
+
+.rz-badge {
+    color: $white;
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+}
+
+@each $style, $badge in $badge-styles {
+    .rz-badge-#{$style} {
+        @each $name, $value in $badge {
+            #{$name}: #{$value};
+        }
+    }
+}
+
+.rz-badge-pill {
+    border-radius: $badge-pill-border-radius;
+}

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

@@ -113,7 +113,7 @@ $dialog-border-radius: $border-radius !default;
   height: 100%;
   top: 0;
   bottom: 0;
-  z-index: 1000;
+  z-index: 1001;
   align-items: center;
   justify-content: center;
 

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;
 }
@@ -776,6 +775,6 @@ $grid-button-line-height: $grid-button-height !default;
     }
 }
 
-.rz-grid-table tbody > ::deep div {
+.rz-grid-table tbody > div {
     display: table-row;
 }

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

@@ -14,6 +14,7 @@ $rating-disabled-color: $cool-grey !default;
 
   a {
     text-decoration: none;
+    cursor: default;
     outline: none;
   }
 
@@ -44,8 +45,9 @@ $rating-disabled-color: $cool-grey !default;
   }
 }
 
-.rz-rating:not(.rz-state-disabled) {
+.rz-rating:not(.rz-state-disabled):not(.rz-state-readonly) {
   .rzi-star-o {
+    cursor: pointer;
     &:hover {
       color: $rating-selected-color;
 

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);
@@ -590,10 +592,33 @@ window.Radzen = {
     }
     return popups;
   },
+  repositionPopup: function (parent, id) {
+      var popup = document.getElementById(id);
+      if (!popup) return;
+
+      var rect = popup.getBoundingClientRect();
+      var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 };
+
+      if (/Edge/.test(navigator.userAgent)) {
+          var scrollTop = document.body.scrollTop;
+      } else {
+          var scrollTop = document.documentElement.scrollTop;
+      }
+
+      var top = parentRect.bottom + scrollTop;
+
+      if (top + rect.height > window.innerHeight && parentRect.top > rect.height) {
+          top = parentRect.top - rect.height + scrollTop;
+      }
+
+      popup.style.top = top + 'px';
+  },
   openPopup: function (parent, id, syncWidth, position, x, y, instance, callback) {
     var popup = document.getElementById(id);
     if (!popup) return;
 
+    Radzen.activeElement = document.activeElement;
+
     var parentRect = parent ? parent.getBoundingClientRect() : { top: y || 0, bottom: 0, left: x || 0, right: 0, width: 0, height: 0 };
 
     if (/Edge/.test(navigator.userAgent)) {
@@ -693,7 +718,7 @@ window.Radzen = {
     Radzen[id] = function (e) {
         if (!e.defaultPrevented) {
           if (parent) {
-            if (!parent.contains(e.target) && !popup.contains(e.target)) {
+            if (e.type == 'click' && !parent.contains(e.target) && !popup.contains(e.target)) {
               Radzen.closePopup(id, instance, callback);
             }
           } else {
@@ -704,10 +729,32 @@ window.Radzen = {
         }
     };
 
+    if (!Radzen.closePopupsOnScroll) {
+        Radzen.closePopupsOnScroll = function (e) {
+            for (var i = 0; i < Radzen.popups.length; i++) {
+                var p = Radzen.popups[i];
+                Radzen.closePopup(p.id, p.instance, p.callback);
+            }
+            Radzen.popups = [];
+        };
+        Radzen.popups = [];
+    }
+
+    Radzen.popups.push({id, instance, callback});
+
     document.body.appendChild(popup);
     document.removeEventListener('click', Radzen[id]);
     document.addEventListener('click', Radzen[id]);
 
+    var p = parent;
+    while (p && p != document.body) {
+        if (p.scrollWidth > p.clientWidth || p.scrollHeight > p.clientHeight) {
+            p.removeEventListener('scroll', Radzen.closePopupsOnScroll);
+            p.addEventListener('scroll', Radzen.closePopupsOnScroll);
+        }
+        p = p.parentElement;
+    }
+
     if (!parent) {
         document.removeEventListener('contextmenu', Radzen[id]);
         document.addEventListener('contextmenu', Radzen[id]);
@@ -715,6 +762,9 @@ window.Radzen = {
   },
   closePopup: function (id, instance, callback) {
     var popup = document.getElementById(id);
+    if (!popup) return;
+    if (popup.style.display == 'none') return;
+
     if (popup) {
       popup.style.display = 'none';
     }
@@ -724,6 +774,11 @@ window.Radzen = {
     if (instance) {
       instance.invokeMethodAsync(callback);
     }
+
+    if (Radzen.activeElement) {
+        Radzen.activeElement.focus();
+        Radzen.activeElement = null;
+    }
   },
   togglePopup: function (parent, id, syncWidth, instance, callback) {
     var popup = document.getElementById(id);
@@ -761,13 +816,29 @@ window.Radzen = {
         }
     }
   },
-  openDialog: function () {
+  openDialog: function (options) {
     if (
       document.documentElement.scrollHeight >
       document.documentElement.clientHeight
     ) {
       document.body.classList.add('no-scroll');
     }
+
+    if (options.autoFocusFirstElement) {
+        setTimeout(function () {
+            var dialogs = document.querySelectorAll('.rz-dialog-content');
+            if (dialogs.length == 0) return;
+            var lastDialog = dialogs[dialogs.length - 1];
+
+            if (lastDialog) {
+                var focusable = lastDialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                var firstFocusable = focusable[0];
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            }
+        }, 500);
+    }
   },
   closeDialog: function () {
     document.body.classList.remove('no-scroll');

RadzenBlazorDemos/Pages/BadgePage.razor

@@ -0,0 +1,42 @@
+@page "/badge"
+
+<RadzenExample Name="Badge" Documentation="false">
+    <h3>Badges</h3>
+    <RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="Primary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Secondary" Text="Secondary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Light" Text="Light" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Success" Text="Success" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="Danger" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Warning" Text="Warning" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Info" Text="Info" />
+
+    <h3 style="margin-top:20px">Pills</h3>
+    <RadzenBadge BadgeStyle="BadgeStyle.Primary" IsPill="true" Text="Primary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Secondary" IsPill="true" Text="Secondary" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Light" IsPill="true" Text="Light" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Success" IsPill="true" Text="Success" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Danger" IsPill="true" Text="Danger" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="Warning" />
+    <RadzenBadge BadgeStyle="BadgeStyle.Info" IsPill="true" Text="Info" />
+
+    <h3 style="margin-top:20px">In Button</h3>
+    <RadzenButton ButtonStyle="ButtonStyle.Info">
+        Button
+        <RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="15" />
+    </RadzenButton>
+
+    <RadzenButton ButtonStyle="ButtonStyle.Light">
+        Button
+        <RadzenBadge BadgeStyle="BadgeStyle.Primary" IsPill="@true" Text="15" />
+    </RadzenButton>
+
+    <h3 style="margin-top:20px">Child Content</h3>
+    <RadzenBadge BadgeStyle="BadgeStyle.Primary">
+        Childcontent
+    </RadzenBadge>
+</RadzenExample>
+
+
+@code {
+
+}

RadzenBlazorDemos/Pages/DataGridAdvancedFilterPage.razor

@@ -8,7 +8,7 @@
 
 <h1>DataGrid <strong>Advanced Filter Mode</strong></h1>
 
-<RadzenExample Name="DataGridAdvancedFilter" Heading="false">
+<RadzenExample Name="DataGridAdvancedFilter" Heading="false" Documentation="false">
     <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" 
         FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" 
         FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
@@ -17,7 +17,7 @@
             <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" >
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
             </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />

RadzenBlazorDemos/Pages/DataGridColumnResizingPage.razor

@@ -10,13 +10,13 @@
 
 <p>Enable column resizing by setting the AllowColumnResizing property to true.</p
 
-<RadzenExample Name="DataGridColumnResizing" Heading="false">
+<RadzenExample Name="DataGridColumnResizing" Heading="false" Documentation="false">
     <RadzenDataGrid Data="@employees" TItem="Employee" ColumnWidth="300px" AllowColumnResize="true" ColumnResized=@OnColumnResized>
         <Columns>
             <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="ID" Width="50px" TextAlign="TextAlign.Center" />
             <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Width="200px" >
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
             </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />

RadzenBlazorDemos/Pages/DataGridColumnTemplatePage.razor

@@ -32,7 +32,7 @@
         <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
         <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
             <Template Context="order">
-                <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 @order.Employee?.FirstName @order.Employee?.LastName
             </Template>
         </RadzenDataGridColumn>

RadzenBlazorDemos/Pages/DataGridFilterApiPage.razor

@@ -10,7 +10,7 @@
 
 <p>Set the initial filter of your RadzenDataGrid via the <code>FilterValue</code> and <code>FilterOperator</code> column properties.</p>
 
-<RadzenExample Name="DataGridFilterApi" Heading="false">
+<RadzenExample Name="DataGridFilterApi" Heading="false" Documentation="false">
     <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" 
         FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" 
         FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
@@ -19,7 +19,7 @@
             <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" >
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
             </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" FilterValue=@("Nan") FilterOperator="FilterOperator.StartsWith" />

RadzenBlazorDemos/Pages/DataGridFrozenColumnsPage.razor

@@ -10,17 +10,29 @@
 
 <p>Lock columns to prevent them from scrolling out of view via the <code>Frozen</code> property.</p>
 
-<RadzenExample Name="DataGridFrozenColumns" Heading="false">
-    <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
+<RadzenExample Name="DataGridFrozenColumns" Heading="false" Documentation="false">
+    <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" FilterMode="FilterMode.Advanced" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" 
+        ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" Style="height:300px">
         <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%;" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
             </RadzenDataGridColumn>
-            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Frozen="true" />
-            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Frozen="true">
+                <FooterTemplate>
+                    Total employees: <b>@employees.Count()</b>
+                </FooterTemplate>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px">
+                 <FooterTemplate>
+                    Footer
+                </FooterTemplate>
+            </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
             <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
             <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
@@ -38,6 +50,7 @@
 </RadzenExample>
 @code {
     IEnumerable<Employee> employees;
+    bool frozen;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/DataGridInLineEditPage.razor

@@ -23,13 +23,13 @@
             </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee" Width="300px">
                 <Template Context="order">
-                    <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                    <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                     @order.Employee?.FirstName @order.Employee?.LastName
                 </Template>
                 <EditTemplate Context="order">
                     <RadzenDropDown @bind-Value="order.EmployeeID" Data="@employees" ValueProperty="EmployeeID" Style="width:100%">
                         <Template>
-                            <RadzenImage Path="@context.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                            <RadzenImage Path="@context.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                             @context.FirstName @context.LastName
                         </Template>
                     </RadzenDropDown>

RadzenBlazorDemos/Pages/DataGridLoadDataPage.razor

@@ -10,12 +10,13 @@
 <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" >
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
             </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
@@ -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/DataGridMultipleSelectionPage.razor

@@ -24,7 +24,7 @@
             <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
             <RadzenDataGridColumn TItem="Employee" Property="Photo" Title="Employee" Sortable="false" Filterable="false">
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                     @data.FirstName @data.LastName
                 </Template>
             </RadzenDataGridColumn>

RadzenBlazorDemos/Pages/DataGridODataPage.razor

@@ -14,7 +14,7 @@
         <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" >
             <Template Context="data">
-                <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
             </Template>
         </RadzenDataGridColumn>
         <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />

RadzenBlazorDemos/Pages/DataGridPage.razor

@@ -16,7 +16,7 @@
             <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" >
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
             </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />

RadzenBlazorDemos/Pages/DataGridPagerApiPage.razor

@@ -8,13 +8,13 @@
 
 <h1>DataGrid <strong>Pager API</strong></h1>
 
-<RadzenExample Name="DataGridPagerApi" Heading="false">
+<RadzenExample Name="DataGridPagerApi" Heading="false" Documentation="false">
     <div style="margin-bottom: 16px">
         <RadzenButton Click="@FirstPage" Text="First page" />
         <RadzenButton Click="@TenthPage" Text="10th page" />
         <RadzenButton Click="@LastPage" Text="Last page" />
     </div>
-   <RadzenDataGrid @ref=@dataGrid Data="@orderDetails" TItem="OrderDetail" AllowPaging="true" AllowSorting="true">
+   <RadzenDataGrid @ref=@dataGrid Data="@orderDetails" TItem="OrderDetail" AllowPaging="true" AllowSorting="true" PageSizeOptions="@pageSizeOptions">
         <Columns>
             <RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
             <RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
@@ -35,7 +35,7 @@
 
 @code {
     RadzenDataGrid<OrderDetail> dataGrid;
-
+    IEnumerable<int> pageSizeOptions = new int[] { 10, 20, 30 };
     IEnumerable<OrderDetail> orderDetails;
 
     async Task FirstPage()

RadzenBlazorDemos/Pages/DataGridPagerPositionPage.razor

@@ -8,7 +8,7 @@
 
 <h1>DataGrid <strong>Pager Position</strong></h1>
 
-<RadzenExample Name="DataGridPagerPosition" Heading="false">
+<RadzenExample Name="DataGridPagerPosition" Heading="false" Documentation="false">
     <div style="display: flex; align-items: center; margin-bottom: 16px">
     <div style="white-space:nowrap; margin-right: 16px">Pager Position:</div>
     <RadzenDropDown @bind-Value="@pagerPosition" TextProperty="Text" ValueProperty="Value" 

RadzenBlazorDemos/Pages/DataGridSimpleFilterPage.razor

@@ -8,7 +8,7 @@
 
 <h1>DataGrid <strong>Simple Filter Mode</strong></h1>
 
-<RadzenExample Name="DataGridSimpleFilter" Heading="false">
+<RadzenExample Name="DataGridSimpleFilter" Heading="false" Documentation="false">
     <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" 
         FilterMode="FilterMode.Simple" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" 
         FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
@@ -17,7 +17,7 @@
             <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" >
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
             </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />

RadzenBlazorDemos/Pages/DataGridSingleSelectionPage.razor

@@ -25,7 +25,7 @@
             <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
             <RadzenDataGridColumn TItem="Employee" Property="Photo" Title="Employee" Sortable="false" Filterable="false">
                 <Template Context="data">
-                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                     @data.FirstName @data.LastName
                 </Template>
             </RadzenDataGridColumn>

RadzenBlazorDemos/Pages/DataGridSortApiPage.razor

@@ -10,7 +10,7 @@
 
 <p>Set the initial sort order of your RadzenDataGrid via the <code>SortOrder</code> column property.</p>
 
-<RadzenExample Name="DataGridSortApi" Heading="false">
+<RadzenExample Name="DataGridSortApi" Heading="false" Documentation="false">
     <RadzenDataGrid AllowColumnResize="true" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px">
         <Columns>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" SortOrder="SortOrder.Descending"  />

RadzenBlazorDemos/Pages/DataGridSortPage.razor

@@ -8,7 +8,7 @@
 
 <h1>DataGrid <strong>Sorting</strong></h1>
 
-<RadzenExample Name="DataGridSort" Heading="false">
+<RadzenExample Name="DataGridSort" Heading="false" Documentation="false">
     <RadzenDataGrid PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px">
         <Columns>
             <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />

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/MasterDetailHierarchyOnDemandPage.razor

@@ -37,7 +37,7 @@
             <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
             <RadzenDataGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                 <Template Context="order">
-                    <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                    <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                     @order.Employee?.FirstName @order.Employee?.LastName
                 </Template>
             </RadzenDataGridColumn>

RadzenBlazorDemos/Pages/MasterDetailHierarchyPage.razor

@@ -57,7 +57,7 @@
             <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
             <RadzenDataGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                 <Template Context="order">
-                    <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                    <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                     @order.Employee?.FirstName @order.Employee?.LastName
                 </Template>
             </RadzenDataGridColumn>

RadzenBlazorDemos/Pages/MasterDetailPage.razor

@@ -25,7 +25,7 @@ else
                     <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
                     <RadzenDataGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                         <Template Context="order">
-                            <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                            <RadzenImage Path="@order.Employee?.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                             @order.Employee?.FirstName @order.Employee?.LastName
                         </Template>
                     </RadzenDataGridColumn>

RadzenBlazorDemos/Pages/NumericPage.razor

@@ -17,6 +17,7 @@
             <RadzenNumeric ShowUpDown="false" TValue="int?" @bind-Value=@value Placeholder="Enter or clear value" Change="@(args => OnChange(args, "Without Up/Down"))" />
             <h3 style="margin-top: 2rem">Formatted Value</h3>
             <RadzenNumeric TValue="double" Format="0.0000" @bind-Value=@dblValue Placeholder="Enter or clear value" Change="@(args => OnChange(args, "Formatted numeric"))" />
+            <RadzenNumeric TValue="double" Format="c" @bind-Value=@dblValue Placeholder="Enter or clear value" Change="@(args => OnChange(args, "Formatted numeric"))" />
         </div>
         <div class="col-xl-6">
             <EventConsole @ref=@console />

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/RatingPage.razor

@@ -9,6 +9,8 @@
         <RadzenRating Stars="10" Change=@(args => OnChange(args, "Rating with 10 stars")) />
         <h3 style="margin-top: 2rem">Disabled Rating with 10 stars</h3>
         <RadzenRating Disabled="true" Stars="10" />
+        <h3 style="margin-top: 2rem">ReadOnly Rating</h3>
+        <RadzenRating ReadOnly="true" Stars="5" Value="4" />
     </div>
     <div class="col-xl-6">
         <EventConsole @ref=@console />

RadzenBlazorDemos/Pages/StylingGaugePage.razor

@@ -82,7 +82,7 @@
         {
             var now = DateTime.Now;
 
-            hours = now.Hour + now.Minute / 60.0;
+            hours = now.Hour % 12 + now.Minute / 60.0;
 
             minutes = now.Minute * minorStep + now.Second * 12 / 3600.0;
             seconds = now.Second * minorStep;

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">
@@ -46,7 +46,7 @@
                             <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
                             <RadzenDataGridColumn TItem="Employee" Property="Photo" Title="Photo" Sortable="false" Filterable="false">
                                 <Template Context="data">
-                                    <RadzenImage Path="@data?.Photo" />
+                                    <RadzenImage Path="@data?.Photo" Style="width: 40px; height: 40px; border-radius: 8px;" />
                                 </Template>
                             </RadzenDataGridColumn>
                             <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" />

RadzenBlazorDemos/Pages/TreePage.razor

@@ -55,7 +55,7 @@
             </div>
             <div class="col-md-4" style="margin-bottom: 16px">
                 <h3>Files and directories</h3>
-                <RadzenTree Change=@OnChange Data=@entries Expand=@LoadFiles Style="width: 100%; height: 300px">
+                <RadzenTree AllowCheckBoxes="true" @bind-CheckedValues="@CheckedValues" Change=@OnChange Data=@entries Expand=@LoadFiles Style="width: 100%; height: 300px">
                     <RadzenTreeLevel Text=@GetTextForNode Template=@FileOrFolderTemplate />
                 </RadzenTree>
             </div>
@@ -71,6 +71,23 @@
     // The value of a RadzenTree component must be of type "object" as different levels could be of different type.
     object selectedCategory = null;
 
+    IEnumerable<object> _checkedValues;
+    IEnumerable<object> CheckedValues 
+    {
+        get
+        {
+            return _checkedValues;
+        }
+        set
+        {
+            if(_checkedValues != value)
+            {
+                _checkedValues = value;
+                Log("CheckedValues Changed", $"Checked items: {string.Join(Environment.NewLine, CheckedValues.Cast<string>())}");
+            }
+        }
+    }
+
     IEnumerable<string> entries = null;
     EventConsole console;
 
@@ -109,6 +126,9 @@
 
                                return !name.StartsWith(".") && name != "bin" && name != "obj";
                            });
+
+        _checkedValues = entries.Where(entry => entry.Contains("Models"));
+
         employees = Northwind.Employees.Include(e => e.Employees1).ToList();
         rootEmployees = employees.Where(e => e.ReportsTo == null);
         categories = Northwind.Categories.Include(c => c.Products);
@@ -127,10 +147,6 @@
 
         builder.OpenComponent<RadzenIcon>(0);
         builder.AddAttribute(1, "Icon", isDirectory ? "folder" : "insert_drive_file");
-        if (!isDirectory)
-        {
-            builder.AddAttribute(2, "Style", "margin-left: 24px");
-        }
         builder.CloseComponent();
         builder.AddContent(3, context.Text);
     };

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.7.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" />

RadzenBlazorDemos/Services/ExampleService.cs

@@ -1,7 +1,6 @@
 using System;
-using System.Linq;
-using System.Linq.Expressions;
 using System.Collections.Generic;
+using System.Linq;
 
 namespace RadzenBlazorDemos
 {
@@ -34,7 +33,7 @@ namespace RadzenBlazorDemos
             Path = "/support",
             Icon = "&#xe94c"
         },
-   
+
         new Example()
         {
             Name="DataGrid",
@@ -613,7 +612,7 @@ namespace RadzenBlazorDemos
                 }
             }
         },
-   
+
         new Example()
         {
             Name="Containers",
@@ -803,6 +802,13 @@ namespace RadzenBlazorDemos
                     Path = "example-upload",
                     Icon = "&#xe2c6",
                     Tags = new [] { "upload", "file"}
+                },
+                new Example()
+                {
+                    Name = "Badge",
+                    Path = "badge",
+                    Icon = "&#xea67",
+                    Tags = new[] { "badge", "link"}
                 }
             }
         },