Radzen.Blazor updated

Fix #165

Radzen.Blazor.Tests/ButtonTests.cs

@@ -33,6 +33,28 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
         }
 
+        [Fact]
+        public void Button_Renders_BusySpinner()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenButton>();
+
+            var icon = "account_circle";
+
+            component.SetParametersAndRender(parameters => parameters
+                .Add(p => p.Icon, icon)
+                .Add(p => p.IsBusy, true)
+            );
+
+            // does not render the actual icon when busy
+            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(">refresh</i>", component.Markup);
+        }
+
         [Fact]
         public void Button_Renders_IconAndTextParameters()
         {
@@ -43,9 +65,10 @@ namespace Radzen.Blazor.Tests
             var text = "Test";
             var icon = "account_circle";
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.Text, text);
-                parameters.Add(p => p.Icon, icon); 
+                parameters.Add(p => p.Icon, icon);
             });
 
             Assert.Contains(@$"<i class=""rz-button-icon-left rzi"">{icon}</i>", component.Markup);
@@ -76,7 +99,8 @@ namespace Radzen.Blazor.Tests
             var text = "Test";
             var image = "test.png";
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add(p => p.Text, text);
                 parameters.Add(p => p.Image, image);
             });

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

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 
 namespace Radzen.Blazor
 {
@@ -8,5 +9,19 @@ namespace Radzen.Blazor
         public DateTime End { get; set; }
         public string Text { get; set; }
         public object Data { get; set; }
+
+        public override bool Equals(object obj)
+        {
+            return obj is AppointmentData data &&
+                   Start == data.Start &&
+                   End == data.End &&
+                   Text == data.Text &&
+                   EqualityComparer<object>.Default.Equals(Data, data.Data);
+        }
+
+        public override int GetHashCode()
+        {
+            return HashCode.Combine(Start, End, Text, Data);
+        }
     }
 }

Radzen.Blazor/CartesianSeries.cs

@@ -250,6 +250,7 @@ namespace Radzen.Blazor
                 }
 
                 Chart.Refresh(false);
+                Chart.DisplayTooltip();
             }
         }
 
@@ -431,6 +432,16 @@ namespace Radzen.Blazor
             return Items.ElementAtOrDefault(index);
         }
 
+        protected string PickColor(int index, IEnumerable<string> colors, string defaultValue = null)
+        {
+            if (colors == null || !colors.Any())
+            {
+                return defaultValue;
+            }
+
+            return colors.ElementAt(index % colors.Count());
+        }
+
         public void Dispose()
         {
             Chart?.RemoveSeries(this);

Radzen.Blazor/Common.cs

@@ -71,11 +71,28 @@ namespace Radzen
         public bool FirstRender { get; internal set; }
     }
 
+    public class DataGridRenderEventArgs<T>
+    {
+        public RadzenDataGrid<T> Grid { get; internal set; }
+        public bool FirstRender { get; internal set; }
+    }
+
     public class CellRenderEventArgs<T> : RowRenderEventArgs<T>
     {
         public Blazor.RadzenGridColumn<T> Column { get; internal set; }
     }
 
+    public class DataGridCellRenderEventArgs<T> : RowRenderEventArgs<T>
+    {
+        public Blazor.RadzenDataGridColumn<T> Column { get; internal set; }
+    }
+
+
+    public class DataGridRowMouseEventArgs<T> : Microsoft.AspNetCore.Components.Web.MouseEventArgs
+    {
+        public T Data { get; internal set; }
+    }
+
     public class UploadChangeEventArgs
     {
         public IEnumerable<FileInfo> Files { get; set; }
@@ -156,6 +173,12 @@ namespace Radzen
         }
     }
 
+    public enum TabRenderMode
+    {
+        Server,
+        Client
+    }
+
     public enum PagerPosition
     {
         Top,
@@ -201,6 +224,12 @@ namespace Radzen
         Vertical
     }
 
+    public enum SortOrder
+    {
+        Ascending,
+        Descending
+    }
+
     public enum ButtonType
     {
         Button,
@@ -250,6 +279,19 @@ namespace Radzen
         EndsWith
     }
 
+    public enum FilterOperator
+    {
+        Equals,
+        NotEquals,
+        LessThan,
+        LessThanOrEquals,
+        GreaterThan,
+        GreaterThanOrEquals,
+        Contains,
+        StartsWith,
+        EndsWith
+    }
+
     public enum TextAlign
     {
         Left,
@@ -257,11 +299,32 @@ namespace Radzen
         Center
     }
 
+    public class DataGridColumnResizedEventArgs<T>
+    {
+        public RadzenDataGridColumn<T> Column { get; internal set; }
+        public double Width { get; internal set; }
+    }
+
     public class ColumnResizedEventArgs<T>
     { 
         public RadzenGridColumn<T> Column { get; internal set; }
         public double Width { get; internal set; }
     }
+    public class FilterDescriptor
+    {
+        public string Property { get; set; }
+        public object FilterValue { get; set; }
+        public FilterOperator FilterOperator { get; set; }
+        public object SecondFilterValue { get; set; }
+        public FilterOperator SecondFilterOperator { get; set; }
+        public LogicalFilterOperator LogicalFilterOperator { get; set; }
+    }
+
+    public class SortDescriptor
+    {
+        public string Property { get; set; }
+        public SortOrder SortOrder { get; set; }
+    }
 
     public class LoadDataArgs
     {
@@ -269,6 +332,8 @@ namespace Radzen
         public int? Top { get; set; }
         public string OrderBy { get; set; }
         public string Filter { get; set; }
+        public IEnumerable<FilterDescriptor> Filters { get; set; }
+        public IEnumerable<SortDescriptor> Sorts { get; set; }
     }
 
     public class PagerEventArgs
@@ -388,13 +453,22 @@ namespace Radzen
         public static Func<TItem, TValue> Getter<TItem, TValue>(string propertyName)
         {
             var arg = Expression.Parameter(typeof(TItem));
-            var body = Expression.Convert(Expression.Property(arg, propertyName), typeof(TValue));
+
+            Expression body = arg;
+
+            foreach (var member in propertyName.Split("."))
+            {
+                body = Expression.PropertyOrField(body, member);
+            }
+
+            body = Expression.Convert(body, typeof(TValue));
 
             return Expression.Lambda<Func<TItem, TValue>>(body, arg).Compile();
         }
 
         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))
@@ -483,6 +557,9 @@ namespace Radzen
 
         public static bool IsNumeric(Type source)
         {
+            if (source == null)
+                return false;
+
             var type = source.IsGenericType ? source.GetGenericArguments()[0] : source;
 
             switch (Type.GetTypeCode(type))

Radzen.Blazor/DialogService.cs

@@ -92,24 +92,25 @@ namespace Radzen
                 ShowClose = options != null ? options.ShowClose : true,
                 ChildContent = options?.ChildContent,
                 Style = options != null ? options.Style : "",
+                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true
             });
         }
 
         public void Close(dynamic result = null)
         {
-            OnClose?.Invoke(result);
-
             var dialog = dialogs.LastOrDefault();
+
             if (dialog != null)
             {
+                OnClose?.Invoke(result);
                 dialogs.Remove(dialog);
             }
 
             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

@@ -6,6 +6,7 @@ using System.Linq.Dynamic.Core;
 using System.Threading;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.JSInterop;
 using Radzen.Blazor;
 
@@ -13,6 +14,84 @@ namespace Radzen
 {
     public class DropDownBase<T> : DataBoundFormComponent<T>
     {
+#if NET5
+        internal Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object> virtualize;
+
+        private async ValueTask<Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<object>> LoadItems(Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderRequest request)
+        {
+            var data = Data != null ? Data.Cast<object>() : Enumerable.Empty<object>();
+            var view = (LoadData.HasDelegate ? data : View).Cast<object>().AsQueryable();
+            var totalItemsCount = LoadData.HasDelegate ? Count : view.Count();
+            var top = Math.Min(request.Count, totalItemsCount - request.StartIndex);
+
+            if (LoadData.HasDelegate)
+            {
+                await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = request.StartIndex, Top = top, Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) });
+            }
+
+            return new Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<object>(LoadData.HasDelegate ? Data.Cast<object>() : view.Skip(request.StartIndex).Take(top), totalItemsCount);
+        }
+
+        [Parameter]
+        public int Count { get; set; }
+
+        [Parameter]
+        public bool AllowVirtualization { get; set; }
+
+        [Parameter]
+        public int PageSize { get; set; } = 5;
+#endif
+        internal bool IsVirtualizationAllowed()
+        {
+#if NET5
+            return AllowVirtualization;
+#else
+            return false;
+#endif
+        }
+
+        internal virtual RenderFragment RenderItems()
+        {
+            return new RenderFragment(builder =>
+            {
+#if NET5
+                if (AllowVirtualization)
+                {
+                    builder.OpenComponent(0, typeof(Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object>));
+                    builder.AddAttribute(1, "ItemsProvider", new Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderDelegate<object>(LoadItems));
+                    builder.AddAttribute(2, "ChildContent", (RenderFragment<object>)((context) =>
+                    {
+                        return (RenderFragment)((b) =>
+                        {
+                            RenderItem(b, context);
+                        });
+                    }));
+
+                    builder.AddComponentReferenceCapture(7, c => { virtualize = (Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object>)c; });
+
+                    builder.CloseComponent();
+                }
+                else
+                {
+                    foreach (var item in LoadData.HasDelegate ? Data : View)
+                    {
+                        RenderItem(builder, item);
+                    }
+                }
+#else
+                foreach (var item in LoadData.HasDelegate ? Data : View)
+                {
+                    RenderItem(builder, item);
+                }
+#endif
+            });
+        }
+
+        internal virtual void RenderItem(RenderTreeBuilder builder, object item)
+        {
+            //
+        }
+
         [Parameter]
         public virtual bool AllowFiltering { get; set; }
 
@@ -189,7 +268,7 @@ namespace Radzen
             if (Disabled)
                 return;
 
-            var items = (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).OfType<object>();
+            var items = (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).Cast<object>();
 
             var key = args.Code != null ? args.Code : args.Key;
 
@@ -240,6 +319,11 @@ namespace Radzen
                     selectedIndex = -1;
                     await OnSelectItem(null, true);
                 }
+
+                if (AllowFiltering && isFilter)
+                {
+                    Debounce(DebounceFilter, FilterDelay);
+                }
             }
             else if(AllowFiltering && isFilter)
             {
@@ -258,12 +342,40 @@ namespace Radzen
             {
                 searchText = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
                 _view = null;
-                await InvokeAsync(() => { StateHasChanged(); });
+                if (IsVirtualizationAllowed())
+                {
+#if NET5
+                    if (virtualize != null)
+                    {
+                        await virtualize.RefreshDataAsync();
+                    }
+                    await InvokeAsync(() => { StateHasChanged(); });
+#endif 
+                }
+                else
+                {
+                    await InvokeAsync(() => { StateHasChanged(); });
+                }
             }
             else
             {
-                await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) });
+                if (IsVirtualizationAllowed())
+                {
+#if NET5
+                    if (virtualize != null)
+                    {
+                        await InvokeAsync(virtualize.RefreshDataAsync);
+                    }
+                    await InvokeAsync(() => { StateHasChanged(); });
+#endif 
+                }
+                else
+                {
+                    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)
@@ -278,16 +390,23 @@ namespace Radzen
 
         protected virtual async System.Threading.Tasks.Task OnFilter(ChangeEventArgs args)
         {
-            if (!LoadData.HasDelegate)
+            await DebounceFilter();
+        }
+
+        internal virtual async System.Threading.Tasks.Task<LoadDataArgs> GetLoadDataArgs()
+        {
+#if NET5
+            if (AllowVirtualization)
             {
-                searchText = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
-                _view = null;
-                StateHasChanged();
+                return new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize, Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) };
             }
             else
             {
-                await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) });
+                return new Radzen.LoadDataArgs() { Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) };
             }
+#else
+            return new Radzen.LoadDataArgs() { Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) };
+#endif
         }
 
         private bool firstRender = true;
@@ -339,7 +458,7 @@ namespace Radzen
             Value = args.Value;
         }
 
-        protected bool isSelected(object item)
+        internal bool isSelected(object item)
         {
             if (Multiple)
             {
@@ -372,7 +491,50 @@ namespace Radzen
         {
             get
             {
-                return (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).OfType<object>();
+                return (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).Cast<object>();
+            }
+        }
+
+        protected override IEnumerable View
+        {
+            get
+            {
+                if (_view == null && Query != null)
+                {
+                    if (!string.IsNullOrEmpty(searchText))
+                    {
+                        var ignoreCase = FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive;
+
+                        var query = new List<string>();
+
+                        if (!string.IsNullOrEmpty(TextProperty))
+                        {
+                            query.Add(TextProperty);
+                        }
+
+                        if (ignoreCase)
+                        {
+                            query.Add("ToLower()");
+                        }
+
+                        query.Add($"{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)");
+
+                        _view = Query.Where(String.Join(".", query), ignoreCase ? searchText.ToLower() : searchText);
+                    }
+                    else
+                    {
+                        if (IsVirtualizationAllowed())
+                        {
+                            _view = Query;
+                        }
+                        else
+                        {
+                            _view = (typeof(IQueryable).IsAssignableFrom(Data.GetType())) ? Query.Cast<object>().ToList().AsQueryable() : Query;
+                        }
+                    }
+                }
+
+                return _view;
             }
         }
 
@@ -380,10 +542,13 @@ namespace Radzen
         {
             if (selectedItem != null)
             {
-                var result = Items.Select((x, i) => new { Item = x, Index = i }).FirstOrDefault(itemWithIndex => object.Equals(itemWithIndex.Item, selectedItem));
-                if (result != null)
+                if (typeof(EnumerableQuery).IsAssignableFrom(View.GetType()))
                 {
-                    selectedIndex = result.Index;
+                    var result = Items.Select((x, i) => new { Item = x, Index = i }).FirstOrDefault(itemWithIndex => object.Equals(itemWithIndex.Item, selectedItem));
+                    if (result != null)
+                    {
+                        selectedIndex = result.Index;
+                    }
                 }
             }
             else
@@ -392,6 +557,11 @@ namespace Radzen
             }
         }
 
+        internal async System.Threading.Tasks.Task SelectItemInternal(object item, bool raiseChange = true)
+        {
+            await SelectItem(item, raiseChange);
+        }
+
         protected async System.Threading.Tasks.Task SelectItem(object item, bool raiseChange = true)
         {
             if (!Multiple)

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
         {
@@ -97,6 +100,18 @@ namespace Radzen
 
         }
 
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            bool pageSizeChanged = parameters.DidParameterChange(nameof(PageSize), PageSize);
+
+            await base.SetParametersAsync(parameters);
+
+            if (pageSizeChanged && !firstRender)
+            {
+               await InvokeAsync(Reload);
+            }
+        }
+
         protected override Task OnParametersSetAsync()
         {
             if (Visible && !LoadData.HasDelegate)
@@ -111,8 +126,10 @@ namespace Radzen
             return base.OnParametersSetAsync();
         }
 
+        bool firstRender = true;
         protected override Task OnAfterRenderAsync(bool firstRender)
         {
+            this.firstRender = firstRender;
             if (firstRender && Visible && (LoadData.HasDelegate && Data == null))
             {
                 InvokeAsync(Reload);
@@ -134,18 +151,22 @@ namespace Radzen
             await InvokeAsync(Reload);
         }
 
+        protected async Task OnPageSizeChanged(int value)
+        {
+            PageSize = value;
+            await InvokeAsync(Reload);
+        }
+
         protected void CalculatePager()
         {
             if (topPager != null)
             {
-                topPager.GoToPage(CurrentPage).Wait();
-                InvokeAsync(topPager.Reload);
+                topPager.SetCurrentPage(CurrentPage);
             }
 
             if (bottomPager != null)
             {
-                bottomPager.GoToPage(CurrentPage).Wait();
-                InvokeAsync(bottomPager.Reload);
+                bottomPager.SetCurrentPage(CurrentPage);
             }
         }
 

Radzen.Blazor/QueryableExtension.cs

@@ -9,7 +9,7 @@ namespace Radzen
 {
     public static class QueryableExtension
     {
-        private static readonly IDictionary<string, string> FilterOperators = new Dictionary<string, string>
+        internal static readonly IDictionary<string, string> FilterOperators = new Dictionary<string, string>
         {
             {"eq", "="},
             {"ne", "!="},
@@ -22,6 +22,32 @@ namespace Radzen
             {"contains", "Contains"}
         };
 
+        internal static readonly IDictionary<FilterOperator, string> LinqFilterOperators = new Dictionary<FilterOperator, string>
+        {
+            {FilterOperator.Equals, "="},
+            {FilterOperator.NotEquals, "!="},
+            {FilterOperator.LessThan, "<"},
+            {FilterOperator.LessThanOrEquals, "<="},
+            {FilterOperator.GreaterThan, ">"},
+            {FilterOperator.GreaterThanOrEquals, ">="},
+            {FilterOperator.StartsWith, "StartsWith"},
+            {FilterOperator.EndsWith, "EndsWith"},
+            {FilterOperator.Contains, "Contains"}
+        };
+
+        internal static readonly IDictionary<FilterOperator, string> ODataFilterOperators = new Dictionary<FilterOperator, string>
+        {
+            {FilterOperator.Equals, "eq"},
+            {FilterOperator.NotEquals, "ne"},
+            {FilterOperator.LessThan, "lt"},
+            {FilterOperator.LessThanOrEquals, "le"},
+            {FilterOperator.GreaterThan, "gt"},
+            {FilterOperator.GreaterThanOrEquals, "ge"},
+            {FilterOperator.StartsWith, "startswith"},
+            {FilterOperator.EndsWith, "endswith"},
+            {FilterOperator.Contains, "contains"}
+        };
+
         public static IList ToList(IQueryable query)
         {
             var genericToList = typeof(Enumerable).GetMethod("ToList")
@@ -75,6 +101,68 @@ namespace Radzen
             return "";
         }
 
+        public static string ToFilterString<T>(this IEnumerable<RadzenDataGridColumn<T>> columns)
+        {
+            Func<RadzenDataGridColumn<T>, bool> canFilter = (c) => c.Filterable && c.FilterPropertyType != null &&
+                !(c.GetFilterValue() == null || c.GetFilterValue() as string == string.Empty) && c.GetFilterProperty() != null;
+
+            if (columns.Where(canFilter).Any())
+            {
+                var gridLogicalFilterOperator = columns.FirstOrDefault()?.Grid?.LogicalFilterOperator;
+                var gridBooleanOperator = gridLogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
+
+                var whereList = new List<string>();
+                foreach (var column in columns.Where(canFilter))
+                {
+                    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))
+                    {
+                        var linqOperator = LinqFilterOperators[column.GetFilterOperator()];
+                        if (linqOperator == null)
+                        {
+                            linqOperator = "==";
+                        }
+
+                        var booleanOperator = column.LogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
+
+                        if (string.IsNullOrEmpty(secondValue))
+                        {
+                            whereList.Add(GetColumnFilter(column, value));
+                        }
+                        else
+                        {
+                            whereList.Add($"({GetColumnFilter(column, value)} {booleanOperator} {GetColumnFilter(column, secondValue, true)})");
+                        }
+                    }
+                }
+
+                return string.Join($" {gridBooleanOperator} ", whereList.Where(i => !string.IsNullOrEmpty(i)));
+            }
+
+            return "";
+        }
+
         private static string GetColumnFilter<T>(RadzenGridColumn<T> column, bool second = false)
         {
             var property = PropertyAccess.GetProperty(column.GetFilterProperty());
@@ -137,7 +225,11 @@ namespace Radzen
                 }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "eq")
                 {
-                    return $@"{property} == null ? """" : {property}{filterCaseSensitivityOperator} == {value}{filterCaseSensitivityOperator}";
+                    return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator} == ""{value}""{filterCaseSensitivityOperator}";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "ne")
+                {
+                    return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator} != ""{value}""{filterCaseSensitivityOperator}";
                 }
             }
             else if (columnType == "number" || columnType == "integer")
@@ -152,6 +244,76 @@ namespace Radzen
             return "";
         }
 
+        private static string GetColumnFilter<T>(RadzenDataGridColumn<T> column, string value, bool second = false)
+        {
+            var property = PropertyAccess.GetProperty(column.GetFilterProperty());
+
+            if (property.IndexOf(".") != -1)
+            {
+                property = $"({property})";
+            }
+
+            var columnFilterOperator = !second ? column.GetFilterOperator() : column.GetSecondFilterOperator();
+
+            var linqOperator = LinqFilterOperators[columnFilterOperator];
+            if (linqOperator == null)
+            {
+                linqOperator = "==";
+            }
+
+            if (column.FilterPropertyType == typeof(string))
+            {
+                string filterCaseSensitivityOperator = column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
+
+                if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.Contains)
+                {
+                    return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.StartsWith)
+                {
+                    return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.StartsWith(""{value}""{filterCaseSensitivityOperator})";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.EndsWith)
+                {
+                    return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.EndsWith(""{value}""{filterCaseSensitivityOperator})";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.Equals)
+                {
+                    return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator} == ""{value}""{filterCaseSensitivityOperator}";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.NotEquals)
+                {
+                    return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator} != ""{value}""{filterCaseSensitivityOperator}";
+                }
+            }
+            else if (PropertyAccess.IsNumeric(column.FilterPropertyType))
+            {
+                return $"{property} {linqOperator} {value}";
+            }
+            else if (column.FilterPropertyType == typeof(DateTime) || 
+                    column.FilterPropertyType == typeof(DateTime?) ||
+                    column.FilterPropertyType == typeof(DateTimeOffset) || 
+                    column.FilterPropertyType == typeof(DateTimeOffset?))
+            {
+                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} {dateFunction}(""{finalDate.ToString(dateFormat)}"")";
+            }
+            else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
+            {
+                return $"{property} == {value}";
+            }
+            else if (column.FilterPropertyType == typeof(Guid) || column.FilterPropertyType == typeof(Guid?))
+            {
+                return $@"{property} {linqOperator} Guid(""{value}"")";
+            }
+
+            return "";
+        }
+
         private static string GetColumnODataFilter<T>(RadzenGridColumn<T> column, bool second = false)
         {
             var columnType = column.Type;
@@ -203,7 +365,15 @@ namespace Radzen
                 }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "eq")
                 {
-                    return $"{property} eq {value}";
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"{property} eq tolower('{value}')" :
+                        $"{property} eq '{value}'";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "ne")
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"{property} ne tolower('{value}')" :
+                        $"{property} ne '{value}'";
                 }
             }
             else if (columnType == "number" || columnType == "integer")
@@ -218,6 +388,76 @@ namespace Radzen
             return "";
         }
 
+        private static string GetColumnODataFilter<T>(RadzenDataGridColumn<T> column, bool second = false)
+        {
+            var property = column.GetFilterProperty().Replace('.', '/');
+
+            var columnFilterOperator = !second ? column.GetFilterOperator() : column.GetSecondFilterOperator();
+
+            var value = !second ? (string)Convert.ChangeType(column.GetFilterValue(), typeof(string)) :
+                (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
+
+            if (column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive && column.FilterPropertyType == typeof(string))
+            {
+                property = $"tolower({property})";
+            }
+
+            if (column.FilterPropertyType == typeof(string))
+            {
+                if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.Contains)
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"contains({property}, tolower('{value}'))" :
+                        $"contains({property}, '{value}')";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.StartsWith)
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"startswith({property}, tolower('{value}'))" :
+                        $"startswith({property}, '{value}')";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.EndsWith)
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"endswith({property}, tolower('{value}'))" :
+                        $"endswith({property}, '{value}')";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.Equals)
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"{property} eq tolower('{value}')" :
+                        $"{property} eq '{value}'";
+                }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.NotEquals)
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"{property} ne tolower('{value}')" :
+                        $"{property} ne '{value}'";
+                }
+            }
+            else if (PropertyAccess.IsNumeric(column.FilterPropertyType))
+            {
+                return $"{property} {ODataFilterOperators[columnFilterOperator]} {value}";
+            }
+            else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
+            {
+                return $"{property} eq {value.ToLower()}";
+            }
+            else if (column.FilterPropertyType == typeof(DateTime) ||
+                    column.FilterPropertyType == typeof(DateTime?) ||
+                    column.FilterPropertyType == typeof(DateTimeOffset) ||
+                    column.FilterPropertyType == typeof(DateTimeOffset?))
+            {
+                return $"{property} {ODataFilterOperators[columnFilterOperator]} {DateTime.Parse(value, null, System.Globalization.DateTimeStyles.RoundtripKind).ToString("yyyy-MM-ddTHH:mm:ss.fffZ")}";
+            }
+            else if (column.FilterPropertyType == typeof(Guid) || column.FilterPropertyType == typeof(Guid?))
+            {
+                return $"{property} {ODataFilterOperators[columnFilterOperator]} {value}";
+            }
+
+            return "";
+        }
+
         public static string ToODataFilterString<T>(this IEnumerable<RadzenGridColumn<T>> columns)
         {
             Func<RadzenGridColumn<T>, bool> canFilter = (c) => c.Filterable && !string.IsNullOrEmpty(c.Type) &&
@@ -266,6 +506,51 @@ namespace Radzen
             return "";
         }
 
+        public static string ToODataFilterString<T>(this IEnumerable<RadzenDataGridColumn<T>> columns)
+        {
+            Func<RadzenDataGridColumn<T>, bool> canFilter = (c) => c.Filterable && c.FilterPropertyType != null &&
+                !(c.GetFilterValue() == null || c.GetFilterValue() as string == string.Empty) && c.GetFilterProperty() != null;
+
+            if (columns.Where(canFilter).Any())
+            {
+                var gridLogicalFilterOperator = columns.FirstOrDefault()?.Grid?.LogicalFilterOperator;
+                var gridBooleanOperator = gridLogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
+
+                var whereList = new List<string>();
+                foreach (var column in columns.Where(canFilter))
+                {
+                    var property = column.GetFilterProperty().Replace('.', '/');
+
+                    var value = (string)Convert.ChangeType(column.GetFilterValue(), typeof(string));
+                    var secondValue = (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
+
+                    if (!string.IsNullOrEmpty(value))
+                    {
+                        var linqOperator = ODataFilterOperators[column.GetFilterOperator()];
+                        if (linqOperator == null)
+                        {
+                            linqOperator = "==";
+                        }
+
+                        var booleanOperator = column.LogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
+
+                        if (string.IsNullOrEmpty(secondValue))
+                        {
+                            whereList.Add(GetColumnODataFilter(column));
+                        }
+                        else
+                        {
+                            whereList.Add($"({GetColumnODataFilter(column)} {booleanOperator} {GetColumnODataFilter(column, true)})");
+                        }
+                    }
+                }
+
+                return string.Join($" {gridBooleanOperator} ", whereList.Where(i => !string.IsNullOrEmpty(i)));
+            }
+
+            return "";
+        }
+
         public static IQueryable<T> Where<T>(this IQueryable<T> source, IEnumerable<RadzenGridColumn<T>> columns)
         {
             Func<RadzenGridColumn<T>, bool> canFilter = (c) => c.Filterable && !string.IsNullOrEmpty(c.Type) &&
@@ -335,9 +620,88 @@ namespace Radzen
             return source;
         }
 
+        public static IQueryable<T> Where<T>(this IQueryable<T> source, IEnumerable<RadzenDataGridColumn<T>> columns)
+        {
+            Func<RadzenDataGridColumn<T>, bool> canFilter = (c) => c.Filterable && c.FilterPropertyType != null &&
+                !(c.GetFilterValue() == null || c.GetFilterValue() as string == string.Empty) && c.GetFilterProperty() != null;
+
+            if (columns.Where(canFilter).Any())
+            {
+                var gridLogicalFilterOperator = columns.FirstOrDefault()?.Grid?.LogicalFilterOperator;
+                var gridBooleanOperator = gridLogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
+
+                var index = 0;
+                var whereList = new Dictionary<string, IEnumerable<object>>();
+                foreach (var column in columns.Where(canFilter))
+                {
+                    var property = PropertyAccess.GetProperty(column.GetFilterProperty());
+
+                    if (property.IndexOf(".") != -1)
+                    {
+                        property = $"({property})";
+                    }
+
+                    if (column.FilterPropertyType == typeof(string))
+                    {
+                        property = $@"({property} == null ? """" : {property})";
+                    }
+
+                    string filterCaseSensitivityOperator = column.FilterPropertyType == typeof(string) &&
+                        column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
+
+                    var comparison = LinqFilterOperators[column.GetFilterOperator()];
+
+                    var booleanOperator = column.LogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
+
+                    if (column.GetSecondFilterValue() == null)
+                    {
+                        if (comparison == "StartsWith" || comparison == "EndsWith" || comparison == "Contains")
+                        {
+                            whereList.Add($@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})", new object[] { column.GetFilterValue() });
+                            index++;
+                        }
+                        else
+                        {
+                            whereList.Add($@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}", new object[] { column.GetFilterValue() });
+                            index++;
+                        }
+                    }
+                    else
+                    {
+                        var firstFilter = comparison == "StartsWith" || comparison == "EndsWith" || comparison == "Contains" ?
+                            $@"{property}{filterCaseSensitivityOperator}.{comparison}(@{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})" :
+                            $@"{property}{filterCaseSensitivityOperator} {secondComparison} @{index}{filterCaseSensitivityOperator}";
+                        index++;
+
+                        whereList.Add($@"({firstFilter} {booleanOperator} {secondFilter})", new object[] { column.GetFilterValue(), column.GetSecondFilterValue() });
+                    }
+                }
+
+                return source.Where(string.Join($" {gridBooleanOperator} ", whereList.Keys), whereList.Values.SelectMany(i => i.ToArray()).ToArray());
+            }
+
+            return source;
+        }
+
         public static ODataEnumerable<T> AsODataEnumerable<T>(this IEnumerable<T> source)
         {
             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.2.2</Version>
+    <Version>3.6.6</Version>
     <Copyright>Radzen Ltd.</Copyright>
     <Authors>Radzen Ltd.</Authors>
     <Description>Native Blazor UI components by Radzen Ltd.</Description>
@@ -19,7 +19,9 @@
     <Title>Radzen Components for Blazor</Title>
     <RepositoryUrl>https://github.com/radzenhq/radzen-blazor</RepositoryUrl>
   </PropertyGroup>
-
+  <PropertyGroup Condition="'$(TargetFramework)' == 'net5.0'">
+    <DefineConstants>NET5</DefineConstants>
+  </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'netstandard2.1'" Version="3.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'netstandard2.1'" Version="3.1.0" />

Radzen.Blazor/RadzenArcGauge.razor

@@ -3,7 +3,7 @@
 
 @if (Visible)
 {
-    <div @ref="Element" class=@GetCssClass() @attributes=@Attributes style=@Style id="@GetId()">
+    <div @ref="Element" style=@Style @attributes=@Attributes class=@GetCssClass() id="@GetId()">
     @if (Width.HasValue && Height.HasValue)
     {
         <svg style="width: 100%; height: 100%">

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

@@ -13,9 +13,15 @@
    [Parameter]
    public string Fill { get; set; }
 
+   [Parameter]
+   public IEnumerable<string> Fills { get; set; }
+
    [Parameter]
    public string Stroke { get; set; }
 
+   [Parameter]
+   public IEnumerable<string> Strokes { get; set; }
+
    [Parameter]
    public double StrokeWidth { get; set; }
 
@@ -177,8 +183,10 @@
                 {
                     path = $"M {x0.ToInvariantString()} {y.ToInvariantString()} L {(x+radius).ToInvariantString()} {y.ToInvariantString()} A {r} {r} 0 0 0 {x.ToInvariantString()} {(y+radius).ToInvariantString()} L {x.ToInvariantString()} {(y+height-radius).ToInvariantString()} A {r} {r} 0 0 0 {(x+radius).ToInvariantString()} {(y + height).ToInvariantString()} L {x0.ToInvariantString()} {(y+height).ToInvariantString()} Z";
                 }
+                var fill = PickColor(Items.IndexOf(data), Fills, Fill);
+                var stroke = PickColor(Items.IndexOf(data), Strokes, Stroke);
 
-                <Path @key="@path" D="@path" Stroke="@Stroke" StrokeWidth="@StrokeWidth" Fill="@Fill" LineType="@LineType" Style="@style" />
+                <Path @key="@path" D="@path" Stroke="@stroke" StrokeWidth="@StrokeWidth" Fill="@fill" LineType="@LineType" Style="@style" />
             }
         </g>;
     }

Radzen.Blazor/RadzenButton.razor

@@ -2,7 +2,7 @@
 
 @if (Visible)
 {
-    <button @ref="@Element" style="@Style" disabled="@Disabled"
+    <button @ref="@Element" style="@Style" disabled="@IsDisabled"
             type="@Enum.GetName(typeof(ButtonType), ButtonType).ToLower()"
             @attributes="Attributes" class="@GetCssClass()" id="@GetId()"
             @onclick="@((args) => OnClick(args))">
@@ -12,17 +12,28 @@
         }
         else
         {
-            @if (!string.IsNullOrEmpty(@Icon))
+            @if (IsBusy)
             {
-                <i class="rz-button-icon-left rzi">@((MarkupString)Icon)</i>
+                <RadzenIcon Icon="refresh" Style="animation: rotation 700ms linear infinite" />
+                @if (!string.IsNullOrEmpty(BusyText))
+                {
+                    <span class="rz-button-text">@BusyText</span>
+                }
             }
-            @if (!string.IsNullOrEmpty(Image))
+            else
             {
-                <img class="rz-button-icon-left rzi" src="@Image" />
-            }
-            @if (!string.IsNullOrEmpty(Text))
-            {
-                <span class="rz-button-text">@Text</span>
+                @if (!string.IsNullOrEmpty(@Icon))
+                {
+                    <i class="rz-button-icon-left rzi">@((MarkupString)Icon)</i>
+                }
+                @if (!string.IsNullOrEmpty(Image))
+                {
+                    <img class="rz-button-icon-left rzi" src="@Image" />
+                }
+                @if (!string.IsNullOrEmpty(Text))
+                {
+                    <span class="rz-button-text">@Text</span>
+                }
             }
         }
     </button>
@@ -60,13 +71,36 @@
     [Parameter]
     public EventCallback<MouseEventArgs> Click { get; set; }
 
-    public async System.Threading.Tasks.Task OnClick(MouseEventArgs args)
+    [Parameter]
+    public bool IsBusy { get; set; }
+
+    [Parameter]
+    public string BusyText { get; set; } = "";
+
+    public bool IsDisabled { get => Disabled || IsBusy; }
+
+    bool clicking;
+    public async Task OnClick(MouseEventArgs args)
     {
-        await Click.InvokeAsync(args);
+        if (clicking)
+        {
+            return;
+        }
+
+        try
+        {
+            clicking = true;
+
+            await Click.InvokeAsync(args);
+        }
+        finally
+        {
+            clicking = false;
+        }
     }
 
     protected override string GetComponentCssClass()
     {
-        return $"rz-button rz-button-{getButtonSize()} btn-{Enum.GetName(typeof(ButtonStyle), ButtonStyle).ToLower()}{(Disabled ? " rz-state-disabled" : "")}{(string.IsNullOrEmpty(Text) && !string.IsNullOrEmpty(Icon) ? " rz-button-icon-only" : "")}";
+        return $"rz-button rz-button-{getButtonSize()} btn-{Enum.GetName(typeof(ButtonStyle), ButtonStyle).ToLower()}{(IsDisabled ? " rz-state-disabled" : "")}{(string.IsNullOrEmpty(Text) && !string.IsNullOrEmpty(Icon) ? " rz-button-icon-only" : "")}";
     }
 }

Radzen.Blazor/RadzenChart.razor

@@ -8,7 +8,7 @@
 <CascadingValue Value="@this">
 @ChildContent
 </CascadingValue>
-<div @ref="Element" class="@GetCssClass()" @attributes="@Attributes" style="@Style" id="@GetId()">
+<div @ref="Element" @attributes="@Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
 @if (Width.HasValue && Height.HasValue)
 {
     <CascadingValue Value="@this">
@@ -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

@@ -5,7 +5,7 @@
 
 @if (Visible)
 {
-    <div class=@GetCssClass() @ref=@Element @onclick=@Toggle @attributes=@Attributes style=@Style id=@GetId()>
+    <div @ref=@Element style=@Style @onclick=@Toggle @attributes=@Attributes class=@GetCssClass() id=@GetId()>
         @if(Icon != null)
         {
             <i class="rzi">@Icon</i>
@@ -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/RadzenColumnSeries.razor

@@ -12,9 +12,15 @@
    [Parameter]
    public string Fill { get; set; }
 
+   [Parameter]
+   public IEnumerable<string> Fills { get; set; }
+
    [Parameter]
    public string Stroke { get; set; }
 
+   [Parameter]
+   public IEnumerable<string> Strokes { get; set; }
+
    [Parameter]
    public double StrokeWidth { get; set; }
 
@@ -159,8 +165,10 @@
                 {
                     path = $"M {x.ToInvariantString()} {y0.ToInvariantString()} L {(x+width).ToInvariantString()} {y0.ToInvariantString()} L {(x+width).ToInvariantString()} {(y-radius).ToInvariantString()} A {radius.ToInvariantString()} {radius.ToInvariantString()} 0 0 1 {(x + width - radius).ToInvariantString()} {y.ToInvariantString()} L {(x + radius).ToInvariantString()} {y.ToInvariantString()} A {radius.ToInvariantString()} {radius.ToInvariantString()} 0 0 1 {x.ToInvariantString()} {(y-radius).ToInvariantString()} L {x.ToInvariantString()} {y0.ToInvariantString()} Z";
                 }
+                var fill = PickColor(Items.IndexOf(data), Fills, Fill);
+                var stroke = PickColor(Items.IndexOf(data), Strokes, Stroke);
 
-                <Path @key="@path" D="@path" Stroke="@Stroke" StrokeWidth="@StrokeWidth" Fill="@Fill" LineType="@LineType" Style="@style" />
+                <Path @key="@path" D="@path" Stroke="@stroke" StrokeWidth="@StrokeWidth" Fill="@fill" LineType="@LineType" Style="@style" />
             }
         </g>;
     }

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

@@ -0,0 +1,133 @@
+@typeparam TItem
+<td @attributes="@Attributes" style="@GetStyle()" class="@GetCssClass()" @onclick="@OnClick" @ondblclick="@OnDblClick" >
+    <CascadingValue Value=this>
+        @ChildContent
+    </CascadingValue>
+</td>
+@code {
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IReadOnlyDictionary<string, object> Attributes { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public string CssClass { get; set; }
+
+    [Parameter]
+    public string Style { get; set; }
+
+    [Parameter]
+    public TItem Item { get; set; }
+
+    [Parameter]
+    public RadzenDataGrid<TItem> Grid { get; set; }
+
+    async Task OnClick(MouseEventArgs args)
+    {
+        if (Grid != null)
+        {
+#if NET5
+            await Grid.OnRowClick(new DataGridRowMouseEventArgs<TItem>
+            {
+                Data = Item,
+                AltKey = args.AltKey,
+                Button = args.Button,
+                Buttons = args.Buttons,
+                ClientX = args.ClientX,
+                ClientY = args.ClientY,
+                CtrlKey = args.CtrlKey,
+                Detail = args.Detail,
+                MetaKey = args.MetaKey,
+                OffsetX = args.OffsetX,
+                OffsetY = args.OffsetY,
+                ScreenX = args.ScreenX,
+                ScreenY = args.ScreenY,
+                ShiftKey = args.ShiftKey,
+                Type = args.Type
+            });
+#else
+            await Grid.OnRowClick(new DataGridRowMouseEventArgs<TItem>
+            {
+                Data = Item,
+                AltKey = args.AltKey,
+                Button = args.Button,
+                Buttons = args.Buttons,
+                ClientX = args.ClientX,
+                ClientY = args.ClientY,
+                CtrlKey = args.CtrlKey,
+                Detail = args.Detail,
+                MetaKey = args.MetaKey,
+                ScreenX = args.ScreenX,
+                ScreenY = args.ScreenY,
+                ShiftKey = args.ShiftKey,
+                Type = args.Type
+            });
+#endif
+        }
+    }
+
+    async Task OnDblClick(MouseEventArgs args)
+    {
+        if (Grid != null)
+        {
+#if NET5
+            await Grid.OnRowDblClick(new DataGridRowMouseEventArgs<TItem>
+            {
+                Data = Item,
+                AltKey = args.AltKey,
+                Button = args.Button,
+                Buttons = args.Buttons,
+                ClientX = args.ClientX,
+                ClientY = args.ClientY,
+                CtrlKey = args.CtrlKey,
+                Detail = args.Detail,
+                MetaKey = args.MetaKey,
+                OffsetX = args.OffsetX,
+                OffsetY = args.OffsetY,
+                ScreenX = args.ScreenX,
+                ScreenY = args.ScreenY,
+                ShiftKey = args.ShiftKey,
+                Type = args.Type
+            });
+#else
+            await Grid.OnRowDblClick(new DataGridRowMouseEventArgs<TItem>
+            {
+                Data = Item,
+                AltKey = args.AltKey,
+                Button = args.Button,
+                Buttons = args.Buttons,
+                ClientX = args.ClientX,
+                ClientY = args.ClientY,
+                CtrlKey = args.CtrlKey,
+                Detail = args.Detail,
+                MetaKey = args.MetaKey,
+                ScreenX = args.ScreenX,
+                ScreenY = args.ScreenY,
+                ShiftKey = args.ShiftKey,
+                Type = args.Type
+            });
+#endif
+        }
+    }
+
+    string GetCssClass()
+    {
+        if (Attributes != null && Attributes.TryGetValue("class", out var @class) && !string.IsNullOrEmpty(Convert.ToString(@class)))
+        {
+            return $"{CssClass} {@class}".Trim();
+        }
+
+        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

@@ -0,0 +1,402 @@
+@implements IDisposable
+@typeparam TItem
+@code {
+    [CascadingParameter]
+    public RadzenDataGrid<TItem> Grid { get; set; }
+
+    protected override void OnInitialized()
+    {
+        if (Grid != null)
+        {
+            Grid.AddColumn(this);
+
+            var property = GetFilterProperty();
+
+            if (!string.IsNullOrEmpty(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;
+                }
+            }
+        }
+    }
+
+    [Parameter]
+    public SortOrder? SortOrder { get; set; }
+
+    [Parameter]
+    public bool Visible { get; set; } = true;
+
+    [Parameter]
+    public string Title { get; set; }
+
+    [Parameter]
+    public string Property { get; set; }
+
+    [Parameter]
+    public string SortProperty { get; set; }
+
+    [Parameter]
+    public string FilterProperty { get; set; }
+
+    [Parameter]
+    public object FilterValue { get; set; }
+
+    [Parameter]
+    public object SecondFilterValue { get; set; }
+
+    [Parameter]
+    public string Width { get; set; }
+
+    [Parameter]
+    public string FormatString { get; set; }
+
+    [Parameter]
+    public string CssClass { get; set; }
+
+    [Parameter]
+    public string HeaderCssClass { get; set; }
+
+    [Parameter]
+    public string FooterCssClass { get; set; }
+
+    [Parameter]
+    public bool Filterable { get; set; } = true;
+
+    [Parameter]
+    public bool Sortable { get; set; } = true;
+
+    [Parameter]
+    public bool Frozen { get; set; }
+
+    [Parameter]
+    public TextAlign TextAlign { get; set; } = TextAlign.Left;
+
+    [Parameter]
+    public RenderFragment<TItem> Template { get; set; }
+
+    [Parameter]
+    public RenderFragment<TItem> EditTemplate { get; set; }
+
+    [Parameter]
+    public RenderFragment HeaderTemplate { get; set; }
+
+    [Parameter]
+    public RenderFragment FooterTemplate { get; set; }
+
+    [Parameter]
+    public RenderFragment<RadzenDataGridColumn<TItem>> FilterTemplate { get; set; }
+
+    [Parameter]
+    public LogicalFilterOperator LogicalFilterOperator { get; set; } = LogicalFilterOperator.And;
+
+    [Parameter]
+    public Type Type { get; set; }
+
+    Func<TItem, object> propertyValueGetter;
+
+    public object GetValue(TItem item)
+    {
+        var value = propertyValueGetter != null ? propertyValueGetter(item) : !string.IsNullOrEmpty(Property) ? PropertyAccess.GetValue(item, Property) : "";
+
+        return !string.IsNullOrEmpty(FormatString) ? string.Format(FormatString, value) : value;
+    }
+
+    internal object GetHeader()
+    {
+        if (HeaderTemplate != null)
+        {
+            return HeaderTemplate;
+        }
+        else if (!string.IsNullOrEmpty(Title))
+        {
+            return Title;
+        }
+        else
+        {
+            return Property;
+        }
+    }
+
+    public string GetStyle(bool forCell = false, bool isHeaderOrFooterCell = false)
+    {
+        var style = new List<string>();
+
+        var width = GetWidth();
+
+        if (width != null)
+        {
+            style.Add($"width:{width}");
+        }
+        else if (Grid != null && Grid.ColumnWidth != null)
+        {
+            style.Add($"width:{Grid.ColumnWidth}");
+        }
+
+        if (forCell && TextAlign != TextAlign.Left)
+        {
+            style.Add($"text-align:{Enum.GetName(typeof(TextAlign), TextAlign).ToLower()};");
+        }
+
+        if (forCell && Frozen)
+        {
+            var left = Grid.ColumnsCollection
+                .TakeWhile((c, i) => Grid.ColumnsCollection.IndexOf(this) > i && c.Frozen)
+                .Sum(c => {
+                    var w = !string.IsNullOrEmpty(c.GetWidth()) ? c.GetWidth() : Grid.ColumnWidth;
+                    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 || !isHeaderOrFooterCell && Frozen) && Grid.ColumnsCollection.Where(c => c.Visible && c.Frozen).Any())
+        {
+            style.Add($"z-index:{(isHeaderOrFooterCell && Frozen ? 2 : 1)}");
+        }
+
+        return string.Join(";", style);
+    }
+
+    public string GetSortProperty()
+    {
+        if (!string.IsNullOrEmpty(SortProperty))
+        {
+            return SortProperty;
+        }
+        else
+        {
+            return Property;
+        }
+    }
+
+    internal string GetSortOrderAsString(bool isOData)
+    {
+        var property = GetSortProperty();
+        if (string.IsNullOrEmpty(property))
+            return "";
+        var p = isOData ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);
+        return $"{p} {(GetSortOrder() == Radzen.SortOrder.Ascending ? "asc" : "desc")}";
+    }
+
+    internal void SetSortOrder(SortOrder? order)
+    {
+        sortOrder = new SortOrder?[] { order };
+    }
+
+    internal void ResetSortOrder()
+    {
+        sortOrder = Enumerable.Empty<SortOrder?>();
+        SortOrder = null;
+    }
+
+    public string GetFilterProperty()
+    {
+        if (!string.IsNullOrEmpty(FilterProperty))
+        {
+            return FilterProperty;
+        }
+        else
+        {
+            return Property;
+        }
+    }
+
+    Type _filterPropertyType;
+
+    internal Type FilterPropertyType
+    {
+        get
+        {
+            return _filterPropertyType;
+        }
+    }
+
+    IEnumerable<SortOrder?> sortOrder = Enumerable.Empty<SortOrder?>();
+    object filterValue;
+    FilterOperator? filterOperator;
+    object secondFilterValue;
+    FilterOperator? secondFilterOperator;
+    LogicalFilterOperator? logicalFilterOperator;
+
+    public override async Task SetParametersAsync(ParameterView parameters)
+    {
+        if (parameters.DidParameterChange(nameof(Visible), Visible) ||
+            parameters.DidParameterChange(nameof(Title), Title))
+        {
+            if (Grid != null)
+            {
+                await Grid.ChangeState();
+            }
+        }
+
+        if (parameters.DidParameterChange(nameof(SortOrder), SortOrder))
+        {
+            sortOrder = new SortOrder?[] { parameters.GetValueOrDefault<SortOrder>(nameof(SortOrder)) };
+        }
+
+        if (parameters.DidParameterChange(nameof(FilterValue), FilterValue))
+        {
+            filterValue = parameters.GetValueOrDefault<object>(nameof(FilterValue));
+        }
+
+        if (parameters.DidParameterChange(nameof(FilterOperator), FilterOperator))
+        {
+            filterOperator = parameters.GetValueOrDefault<FilterOperator>(nameof(FilterOperator));
+        }
+
+        if (parameters.DidParameterChange(nameof(SecondFilterValue), SecondFilterValue))
+        {
+            secondFilterValue = parameters.GetValueOrDefault<object>(nameof(SecondFilterValue));
+        }
+
+        if (parameters.DidParameterChange(nameof(SecondFilterOperator), SecondFilterOperator))
+        {
+            secondFilterOperator = parameters.GetValueOrDefault<FilterOperator>(nameof(SecondFilterOperator));
+        }
+
+        if (parameters.DidParameterChange(nameof(LogicalFilterOperator), LogicalFilterOperator))
+        {
+            logicalFilterOperator = parameters.GetValueOrDefault<LogicalFilterOperator>(nameof(LogicalFilterOperator));
+        }
+
+        await base.SetParametersAsync(parameters);
+    }
+
+    internal SortOrder? GetSortOrder()
+    {
+        return sortOrder.Any() ? sortOrder.FirstOrDefault() : SortOrder;
+    }
+
+    internal object GetFilterValue()
+    {
+        return filterValue ?? FilterValue;
+    }
+
+    internal FilterOperator GetFilterOperator()
+    {
+        return filterOperator ?? FilterOperator;
+    }
+
+    internal object GetSecondFilterValue()
+    {
+        return secondFilterValue ?? SecondFilterValue;
+    }
+
+    internal FilterOperator GetSecondFilterOperator()
+    {
+        return secondFilterOperator ?? SecondFilterOperator;
+    }
+
+    internal LogicalFilterOperator GetLogicalFilterOperator()
+    {
+        return logicalFilterOperator ?? LogicalFilterOperator;
+    }
+
+    internal void SetFilterValue(object value, bool isFirst = true)
+    {
+        if ((FilterPropertyType == typeof(DateTimeOffset) || FilterPropertyType == typeof(DateTimeOffset?)) && value != null && value is DateTime?)
+        {
+            DateTimeOffset? offset = DateTime.SpecifyKind((DateTime)value, DateTimeKind.Utc);
+            value = offset;
+        }
+
+        if (isFirst)
+        {
+            filterValue = value;
+        }
+        else
+        {
+            secondFilterValue = value;
+        }
+    }
+
+    [Parameter]
+    public FilterOperator FilterOperator { get; set; }
+
+    [Parameter]
+    public FilterOperator SecondFilterOperator { get; set; }
+
+    internal void SetFilterOperator(FilterOperator? value)
+    {
+        filterOperator = value;
+    }
+
+    internal void SetSecondFilterOperator(FilterOperator? value)
+    {
+        secondFilterOperator = value;
+    }
+
+    internal void SetLogicalFilterOperator(LogicalFilterOperator value)
+    {
+        LogicalFilterOperator = value;
+    }
+
+    string runtimeWidth;
+    internal void SetWidth(string value)
+    {
+        runtimeWidth = value;
+    }
+
+    internal string GetWidth()
+    {
+        return !string.IsNullOrEmpty(runtimeWidth) ? runtimeWidth : Width;
+    }
+
+    internal IEnumerable<FilterOperator> GetFilterOperators()
+    {
+        return Enum.GetValues(typeof(FilterOperator)).Cast<FilterOperator>().Where(o => {
+            var isStringOperator = o == FilterOperator.Contains || o == FilterOperator.StartsWith || o == FilterOperator.EndsWith;
+            return FilterPropertyType == typeof(string) ? isStringOperator || o == FilterOperator.Equals || o == FilterOperator.NotEquals : !isStringOperator;
+        });
+    }
+
+    internal string GetFilterOperatorText(FilterOperator filterOperator)
+    {
+        switch (filterOperator)
+        {
+            case FilterOperator.Contains:
+                return Grid?.ContainsText;
+            case FilterOperator.EndsWith:
+                return Grid?.EndsWithText;
+            case FilterOperator.Equals:
+                return Grid?.EqualsText;
+            case FilterOperator.GreaterThan:
+                return Grid?.GreaterThanText;
+            case FilterOperator. GreaterThanOrEquals:
+                return Grid?.GreaterThanOrEqualsText;
+            case FilterOperator.LessThan:
+                return Grid?.LessThanText;
+            case FilterOperator.LessThanOrEquals:
+                return Grid?.LessThanOrEqualsText;
+            case FilterOperator.StartsWith:
+                return Grid?.StartsWithText;
+            case FilterOperator.NotEquals:
+                return Grid?.NotEqualsText;
+            default:
+                return $"{filterOperator}";
+        }
+    }
+
+    public void Dispose()
+    {
+        Grid?.RemoveColumn(this);
+    }
+}

Radzen.Blazor/RadzenDataGridRow.razor

@@ -0,0 +1,180 @@
+@typeparam TItem
+@implements IRadzenForm
+@implements IDisposable
+@{var rowArgs = Grid?.RowAttributes(Item); }
+<tr class="@(Grid.RowStyle(Item, Index))" @attributes="@rowArgs.Item2">
+
+    @if (Grid.Template != null)
+    {
+        <td class="rz-col-icon">
+            <span class="rz-column-title"></span>
+            @if (rowArgs.Item1.Expandable)
+            {
+                <a href="javascript:void(0)" @onclick="@(_ => Grid.ExpandItem(Item))">
+                    <span class="@(Grid.ExpandedItemStyle(Item))"></span>
+                </a>
+            }
+        </td>
+    }
+    <CascadingValue Value=this>
+        @for (var j = 0; j < Columns.Count; j++)
+        {
+            if (Grid.rowSpans.ContainsKey(j))
+            {
+                Grid.rowSpans[j] = Grid.rowSpans[j] - 1;
+
+                if (Grid.rowSpans[j] <= 0)
+                {
+                    Grid.rowSpans.Remove(j);
+                }
+                else
+                {
+                    continue;
+                }
+            }
+
+            var column = Columns[j];
+            var cellAttr = Grid.CellAttributes(Item, column);
+
+            object colspan;
+            cellAttr.TryGetValue("colspan", out colspan);
+
+            if (colspan != null)
+            {
+                j = j + (int)Convert.ChangeType(colspan, TypeCode.Int32) - 1;
+            }
+
+            object rowspan;
+            cellAttr.TryGetValue("rowspan", out rowspan);
+
+            if (rowspan != null)
+            {
+                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
+                            {
+                                @column.GetValue(Item)
+                            }
+                        </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" title="@(column.Template == null ? column.GetValue(Item) : "")">
+                        @if (Item != null)
+                        {
+                            @if (column.Template != null)
+                            {
+                                @column.Template(Item)
+                            }
+                            else
+                            {
+                                @column.GetValue(Item)
+                            }
+                        }
+                    </span>
+                </RadzenDataGridCell>
+            }
+        }
+    </CascadingValue>
+</tr>
+@if (Grid.Template != null && Grid.expandedItems.Keys.Contains(Item))
+{
+    <tr class="rz-expanded-row-content">
+        <td colspan="@(Columns.Count + 1)">
+            <div class="rz-expanded-row-template" style="position:sticky">
+                @Grid.Template(Item)
+            </div>
+        </td>
+    </tr>
+}
+@code {
+        [Parameter]
+        public IList<RadzenDataGridColumn<TItem>> Columns { get; set; }
+
+        [Parameter]
+        public TItem Item { get; set; }
+
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public RadzenDataGrid<TItem> Grid { get; set; }
+
+        [Parameter(CaptureUnmatchedValues = true)]
+        public IReadOnlyDictionary<string, object> Attributes { get; set; }
+
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        [Parameter]
+        public string CssClass { get; set; }
+
+        [Parameter]
+        public bool InEditMode { get; set; }
+
+        List<IRadzenFormComponent> components;
+
+        public void AddComponent(IRadzenFormComponent component)
+        {
+            if (components != null)
+            {
+                if (components.IndexOf(component) == -1)
+                {
+                    components.Add(component);
+                }
+            }
+        }
+        public void RemoveComponent(IRadzenFormComponent component)
+        {
+            components?.Remove(component);
+        }
+
+    public override Task SetParametersAsync(ParameterView parameters)
+    {
+        if (InEditMode != parameters.GetValueOrDefault<bool>("InEditMode"))
+        {
+            components = new List<IRadzenFormComponent>();
+        }
+
+        return base.SetParametersAsync(parameters);
+    }
+
+    public IRadzenFormComponent FindComponent(string name)
+    {
+        return components.Where(component => component.Name == name).FirstOrDefault();
+    }
+
+    protected override void OnInitialized()
+    {
+        if (Grid.IsVirtualizationAllowed() && Item != null)
+        {
+            Index = Grid.GetItemIndex(Item);
+        }
+    }
+
+    public void Dispose()
+    {
+        if (Grid.IsVirtualizationAllowed() && Item != null)
+        {
+            Grid?.RemoveItem(Item);
+        }
+    }
+}

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

@@ -37,10 +37,10 @@
                             <span class="rz-datepicker-next-icon rzi rzi-chevron-right"></span>
                         </a>
                         <div class="rz-datepicker-title" style="height:40px;">
-                            <RadzenDropDown Style="height:auto;width:120px;margin-top:5px;text-align:left;" TabIndex="-1"
+                            <RadzenDropDown @ref="monthDropDown" Style="height:auto;width:120px;margin-top:5px;text-align:left;" TabIndex="-1"
                                             TValue="int" Value="@CurrentDate.Month" Disabled="@Disabled" Data="@months" TextProperty="Name" ValueProperty="Value"
                                             Change="@(async (args) => { await SetMonth(int.Parse(args.ToString())); })" />
-                            <RadzenDropDown Style="height:auto;width:80px;margin-top:5px;text-align:left;" TabIndex="-1"
+                            <RadzenDropDown @ref="yearDropDown" Style="height:auto;width:80px;margin-top:5px;text-align:left;" TabIndex="-1"
                                             TValue="int" Value="@CurrentDate.Year" Disabled="@Disabled" Data="@years" TextProperty="Name" ValueProperty="Value"
                                             Change="@(async (args) => { await SetYear(int.Parse(args.ToString())); })" />
                         </div>
@@ -92,86 +92,30 @@
             @if (ShowTime)
             {
         <div class="rz-timepicker">
-            <RadzenNumeric Disabled="@Disabled" Value="@(HourFormat == "12" ? ((CurrentDate.Hour + 11) % 12) + 1 : CurrentDate.Hour)" TValue="double" Step="@HoursStep"
-                           Change="@(async v => {
-                                         var step = getStep(StepType.Hours);
-                                         if (v == CurrentDate.Hour - step || v == CurrentDate.Hour + step)
-                                         {
-                                             if (v > CurrentDate.Hour)
-                                             {
-                                                 Value = CurrentDate.AddHours(step);
-                                             }
-                                             else
-                                             {
-                                                 Value = CurrentDate.AddHours(-step);
-                                             }
-                                         }
-                                         else 
-                                         { 
-                                            Value = CurrentDate.AddHours(v - CurrentDate.Hour);
-                                         }
-
-                                         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"
-                           Change="@(async v => {
-                                                 var step = getStep(StepType.Minutes);
-                                                 if (v == CurrentDate.Minute - step || v == CurrentDate.Minute + step)
-                                                 {
-                                                     if (v > CurrentDate.Minute)
-                                                     {
-                                                         Value = CurrentDate.AddMinutes(step);
-                                                     }
-                                                     else
-                                                     {
-                                                         Value = CurrentDate.AddMinutes(-step);
-                                                     }
-                                                 }
-                                                 else 
-                                                 { 
-                                                    Value = CurrentDate.AddMinutes(v - CurrentDate.Minute);
-                                                 }
-
-                                                 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"
-                               Change="@(async v => {
-                                                 var step = getStep(StepType.Seconds);
-                                                 if (v == CurrentDate.Second - step || v == CurrentDate.Second + step)
-                                                 {
-                                                     if (v > CurrentDate.Second)
-                                                     {
-                                                         Value = CurrentDate.AddSeconds(step);
-                                                     }
-                                                     else
-                                                     {
-                                                         Value = CurrentDate.AddSeconds(-step);
-                                                     }
-                                                 }
-                                                 else 
-                                                 { 
-                                                    Value = CurrentDate.AddSeconds(v - CurrentDate.Second);
-                                                 }
-
-                                                 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) { Value = CurrentDate.AddDays(1).AddHours(-12); amPm = "pm"; 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) { Value = CurrentDate.AddDays(-1).AddHours(12); amPm = "am"; await OnChange(); } })">
+                    <a href="javascript:void(0)" @onclick="@PmToAm">
                         <span class="rzi rzi-chevron-down"></span>
                     </a>
                 </div>
@@ -179,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(); } })"
+                        @onclick="@OkClick"
                         onmouseup="@($"Radzen.closePopup('{PopupID}')")">
                     <span class="rz-button-text">Ok</span>
                 </button>
@@ -190,6 +134,165 @@
     </div>
 }
 @code {
+    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; }
@@ -686,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

@@ -1,72 +1,16 @@
 @implements IDisposable
 @using Microsoft.JSInterop
+@using Radzen.Blazor.Rendering
 @inject IJSRuntime JSRuntime
 
 @foreach (var dialog in dialogs)
 {
-    <div class="rz-dialog-wrapper">
-        <div class="rz-dialog"
-             role="dialog" aria-labelledby="rz-dialog-0-label"
-             style="@getStyle(dialog)">
-            @if (dialog.Options.ShowTitle)
-            {
-                <div class="rz-dialog-titlebar rz-helper-clearfix ">
-                    <span class="rz-dialog-title" id="rz-dialog-0-label">@dialog.Title</span>
-                    @if (dialog.Options.ShowClose)
-                    {
-                        <a href="javascript:void(0)" @onclick="@((args) => Service.Close())" role="button" class="rz-dialog-titlebar-icon rz-dialog-titlebar-close ">
-                            <span class="rzi rzi-times"></span>
-                        </a>
-                    }
-                </div>
-            }
-            <div class="rz-dialog-content ">
-                @if (dialog.Options.ChildContent != null)
-                {
-                    @dialog.Options.ChildContent(Service)
-                }
-                else
-                {
-                    @DrawComponent(dialog)
-                }
-            </div>
-        </div>
-        <div class="-overlay rz-dialog-mask" style="z-index: 1000;"></div>
-    </div>
+    <DialogContainer Dialog=@dialog />
 }
 
 @code {
-    string getStyle(Dialog dialog)
-    {
-        var baseStyle = "min-width: 150px; min-height: 150px; z-index: 1001; opacity: 1;position:absolute;";
-        var widthStyle = string.IsNullOrEmpty(dialog.Options.Width) ? "" : $"width: {dialog.Options.Width};";
-        var heightStyle = string.IsNullOrEmpty(dialog.Options.Height) ? "" : $"height: {dialog.Options.Height};";
-        var topStyle = string.IsNullOrEmpty(dialog.Options.Top) ? "" : $"top: {dialog.Options.Top};";
-        var leftStyle = string.IsNullOrEmpty(dialog.Options.Left) ? "" : $"left: {dialog.Options.Left};";
-
-        return $"{baseStyle}{widthStyle}{heightStyle}{topStyle}{leftStyle}{dialog.Options.Style}";
-    }
-
-    [Inject] private DialogService Service { get; set; }
-
-    RenderFragment DrawComponent(Dialog dialog)
-    {
-        return new RenderFragment(builder =>
-        {
-            var i = 0;
-            builder.OpenComponent(i, dialog.Type);
-
-            if (dialog.Parameters != null)
-            {
-                foreach (var parameter in dialog.Parameters)
-                {
-                    builder.AddAttribute(i++, parameter.Key, parameter.Value);
-                }
-            }
-
-            builder.CloseComponent();
-        });
-    }
+    [Inject] 
+    DialogService Service { get; set; }
 
     List<Dialog> dialogs = new List<Dialog>();
 
@@ -76,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)
@@ -88,7 +32,10 @@
             await JSRuntime.InvokeAsync<string>("Radzen.closeDialog");
         }
 
-        await InvokeAsync(() => { StateHasChanged(); });
+        await InvokeAsync(() => 
+        { 
+            StateHasChanged(); 
+        });
     }
 
     public void Dispose()

Radzen.Blazor/RadzenDropDown.razor

@@ -1,17 +1,19 @@
 @using Radzen
+@using System.Linq
 @using System.Linq.Dynamic.Core
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.JSInterop
+@using Microsoft.AspNetCore.Components.Rendering
 @typeparam TValue
 @inherits DropDownBase<TValue>
 
 @if (Visible)
 {
-    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" @onmousedown="@(args => OpenPopup("ArrowDown", false, true))" style="@Style" tabindex="@TabIndex" 
-        @onkeydown="@((args) => OnKeyPress(args))" id="@GetId()">
+    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" @onmousedown="@(args => OpenPopup("ArrowDown", false, true))" style="@Style" tabindex="@TabIndex"
+         @onkeydown="@((args) => OnKeyPress(args))" id="@GetId()">
         <div class="rz-helper-hidden-accessible">
             <input disabled="@Disabled" style="width:100%" aria-haspopup="listbox" readonly="" type="text" tabindex="-1"
-                   name="@Name" value="@(Value != null ? Value : "")" 
+                   name="@Name" value="@(Value != null ? Value : "")"
                    aria-label="@(!Multiple && Value != null ? PropertyAccess.GetItemOrValueFromProperty(Value, TextProperty) : "")" />
         </div>
 
@@ -39,7 +41,7 @@
                     else
                     {
                         foreach (var item in selectedItems)
-                        { 
+                        {
                             @Template(item)@(",")
                         }
                     }
@@ -72,14 +74,14 @@
             @if (AllowFiltering && !Multiple)
             {
                 <div class="rz-dropdown-filter-container">
-                    <input id="@SearchID"  @ref="@search" tabindex="@TabIndex" class="rz-dropdown-filter rz-inputtext   " autocomplete="off" type="text"
+                    <input id="@SearchID" @ref="@search" tabindex="@TabIndex" class="rz-dropdown-filter rz-inputtext   " autocomplete="off" type="text"
                            @onchange="@((ChangeEventArgs args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText" />
                     <span class="rz-dropdown-filter-icon rzi rzi-search"></span>
                 </div>
             }
             @if (Multiple)
             {
-                <div class=" rz-multiselect-header rz-helper-clearfix" @onclick="@SelectAll">
+                <div class=" rz-multiselect-header rz-helper-clearfix" @onclick="@SelectAll" @onclick:preventDefault>
                     <div class="rz-chkbox" title="@(!AllowFiltering ? "" : SelectAllText)">
                         <div class="rz-helper-hidden-accessible">
                             <input readonly="readonly" type="checkbox">
@@ -89,7 +91,7 @@
                         </div>
                     </div>
                     @if (!AllowFiltering && !string.IsNullOrEmpty(SelectAllText))
-                    { 
+                    {
                         @SelectAllText
                     }
                     @if (AllowFiltering)
@@ -111,45 +113,7 @@
                 <ul @ref="list" class="@(Multiple ? "rz-multiselect-items rz-multiselect-list    " : "rz-dropdown-items rz-dropdown-list    ")" role="listbox">
                     @if (View != null)
                     {
-                        @foreach (var item in View)
-                        {
-                            @if (Multiple)
-                            {
-                                <li class="@(isSelected(item) ? "rz-multiselect-item  rz-state-highlight" : "rz-multiselect-item ")" 
-                                    aria-label="@PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)" style="display: block;white-space: nowrap;" @onclick:preventDefault @onclick="@(() => OnSelectItem(item))">
-                                    <div class="rz-chkbox ">
-                                        <div class="@(isSelected(item) ? "rz-chkbox-box    rz-state-active" : "rz-chkbox-box   ")">
-                                            <span class="@(isSelected(item) ? "rz-chkbox-icon  rzi rzi-check" : "rz-chkbox-icon ")"></span>
-                                        </div>
-                                    </div>
-                                    <span>
-                                        @if (Template != null)
-                                        {
-                                            @Template(item)
-                                        }
-                                        else
-                                        {
-                                            @PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)
-                                        }
-                                    </span>
-                                </li>
-                            }
-                            else
-                            {
-                                <li role="option" class="@(isSelected(item) ? "rz-dropdown-item  rz-state-highlight" : "rz-dropdown-item ")" aria-label=">@PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)" @onclick:preventDefault @onclick="@(() => OnSelectItem(item))">
-                                    <span>
-                                        @if (Template != null)
-                                        {
-                                            @Template(item)
-                                        }
-                                        else
-                                        {
-                                            @PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)
-                                        }
-                                    </span>
-                                </li>
-                            }
-                        }
+                        @RenderItems()
                     }
                 </ul>
             </div>
@@ -161,6 +125,15 @@
     </div>
 }
 @code {
+    internal override void RenderItem(RenderTreeBuilder builder, object item)
+    {
+        builder.OpenComponent(0, typeof(RadzenDropDownItem<TValue>));
+        builder.AddAttribute(1, "DropDown", this);
+        builder.AddAttribute(2, "Item", item);
+        builder.SetKey(item);
+        builder.CloseComponent();
+    }
+
     [Parameter]
     public int MaxSelectedLabels { get; set; } = 4;
 
@@ -206,7 +179,7 @@
                 bool reload = false;
                 if (LoadData.HasDelegate && Data == null)
                 {
-                    await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { });
+                    await LoadData.InvokeAsync(await GetLoadDataArgs());
                     reload = true;
                 }
 
@@ -234,6 +207,11 @@
         await SelectItem(item);
     }
 
+    internal async System.Threading.Tasks.Task OnSelectItemInternal(object item, bool isFromKey = false)
+    {
+        await OnSelectItem(item, isFromKey);
+    }
+
     protected override string GetComponentCssClass()
     {
         var classList = new List<string>();
@@ -272,6 +250,14 @@
     {
         base.Dispose();
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        }
+    }
+
+    internal async System.Threading.Tasks.Task ClosePopup()
+    {
+        await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
     }
 }

Radzen.Blazor/RadzenDropDownDataGrid.razor

@@ -1,4 +1,6 @@
 @using Radzen
+@using System.Collections
+@using System.Collections.Generic
 @using System.Linq.Dynamic.Core
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.JSInterop
@@ -21,12 +23,6 @@
                 @Template(selectedItem)
             </label>
         }
-        else if (SelectedValue != null)
-        {
-            <label class="rz-dropdown-label rz-inputtext rz-corner-all" onclick="@OpenPopupScript()" style="width:100%;">
-                @PropertyAccess.GetItemOrValueFromProperty(SelectedValue, TextProperty)
-            </label>
-        }
         else if (selectedItem != null)
         {
             <label class="rz-dropdown-label rz-inputtext " onclick="@OpenPopupScript()" style="width:100%;">
@@ -45,7 +41,7 @@
                     else
                     {
                         foreach (var item in selectedItems)
-                        { 
+                        {
                             @Template(item)@(",")
                         }
                     }
@@ -56,6 +52,12 @@
                 }
             </label>
         }
+        else if (SelectedValue != null)
+        {
+            <label class="rz-dropdown-label rz-inputtext rz-corner-all" onclick="@OpenPopupScript()" style="width:100%;">
+                @PropertyAccess.GetItemOrValueFromProperty(SelectedValue, TextProperty)
+            </label>
+        }
         else if (!string.IsNullOrEmpty(Placeholder))
         {
             <label class="rz-dropdown-label rz-inputtext  rz-placeholder" onclick="@OpenPopupScript()" style="width:100%;">
@@ -72,51 +74,66 @@
         <div class="rz-dropdown-trigger  rz-corner-right" onclick="@OpenPopupScript()">
             <span class="rz-dropdown-trigger-icon  rzi rzi-chevron-down"></span>
         </div>
-        <div id="@PopupID" class="@(Multiple ? "rz-multiselect-panel    " : "rz-dropdown-panel    ")"
+        <div id="@PopupID" class="@(Multiple ? "rz-multiselect-panel" : "rz-dropdown-panel")"
              style="display:none;min-width:320px;padding:0px;">
             <div class="rz-lookup-panel">
                 @if (AllowFiltering)
                 {
                     <div class="rz-lookup-search">
-                        <input id="@SearchID" @ref="@search" tabindex="-1" placeholder="@SearchText"  
+                        <input id="@SearchID" @ref="@search" tabindex="-1" placeholder="@SearchText"
                                @onchange="@((args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText" style="@(ShowSearch ? "" : "margin-right:0px;")" />
                         @if (ShowSearch)
                         {
-                        <button class="rz-button rz-button-md    btn-primary rz-button-icon-only" type="button" title="">
-                            <i class="rz-button-icon-left rzi">search</i>
-                        </button>
+                            <button class="rz-button rz-button-md    btn-primary rz-button-icon-only" type="button" title="">
+                                <i class="rz-button-icon-left rzi">search</i>
+                            </button>
                         }
                     </div>
                 }
                 @if (Template != null)
                 {
-                    <RadzenGrid Responsive="@Responsive" ColumnWidth="@ColumnWidth" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData" 
-                                TItem="object" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="true" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect">
+                    <RadzenDataGrid ColumnWidth="@ColumnWidth" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
+                                    TItem="object" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")">
                         <Columns>
-                            <RadzenGridColumn TItem="object" Property="@TextProperty" Title="@TextProperty" Type="string">
+                            <RadzenDataGridColumn TItem="object" Property="@TextProperty" Title="@TextProperty" Type="typeof(string)">
                                 <Template>
                                     @Template(context)
                                 </Template>
-                            </RadzenGridColumn>
+                            </RadzenDataGridColumn>
                         </Columns>
-                    </RadzenGrid>
+                    </RadzenDataGrid>
                 }
                 else
                 {
-                    <RadzenGrid Responsive="@Responsive" ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData" 
-                                TItem="object" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="true" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect">
-                        <Columns>
-                            @if (Columns != null)
-                            {
-                                @Columns
-                            }
-                            else
-                            {
-                            <RadzenGridColumn TItem="object" Property="@TextProperty" Title="@TextProperty" Type="string">
-                            </RadzenGridColumn>
-                            }
-                        </Columns>
-                    </RadzenGrid>
+                    if (!string.IsNullOrEmpty(TextProperty) || Columns != null)
+                    {
+                        <RadzenDataGrid ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
+                                        TItem="object" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")">
+                            <Columns>
+                                @if (Columns != null)
+                                {
+                                    @Columns
+                                }
+                                else
+                                {
+                                    <RadzenDataGridColumn TItem="object" Property="@TextProperty" Title="@TextProperty" Type="typeof(string)" />
+                                }
+                            </Columns>
+                        </RadzenDataGrid>
+                    }
+                    else
+                    {
+                        <RadzenDataGrid ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData"
+                                        TItem="object" PageSize="@PageSize" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")">
+                            <Columns>
+                                <RadzenDataGridColumn TItem="object" Property="it" Title="Item" Type="typeof(string)">
+                                    <Template>
+                                        @context
+                                    </Template>
+                                </RadzenDataGridColumn>
+                            </Columns>
+                        </RadzenDataGrid>
+                    }
                 }
             </div>
         </div>
@@ -148,13 +165,10 @@
     [Parameter]
     public object SelectedValue { get; set; }
 
-    [Parameter]
-    public int Count { get; set; }
-
     [Parameter]
     public RenderFragment Columns { get; set; }
 
-    RadzenGrid<object> grid;
+    RadzenDataGrid<object> grid;
 
     IEnumerable<object> pagedData;
     int count;
@@ -162,6 +176,14 @@
     [Parameter]
     public int MaxSelectedLabels { get; set; } = 4;
 
+#if !NET5
+    [Parameter]
+    public int PageSize { get; set; } = 5;
+
+    [Parameter]
+    public int Count { get; set; }
+#endif
+
     [Parameter]
     public string SelectedItemsText { get; set; } = "items selected";
 
@@ -169,9 +191,19 @@
 
     protected override Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender && Visible && (LoadData.HasDelegate && Data == null))
+        if (firstRender)
         {
-            LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize });
+#if NET5
+            if (grid != null)
+            {
+                grid.SetAllowVirtualization(AllowVirtualization);
+            }
+#endif            
+            if(Visible && LoadData.HasDelegate && Data == null)
+            {
+                LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize });
+            }
+
             StateHasChanged();
         }
 
@@ -197,10 +229,15 @@
 
     private string GetPropertyFilterExpression(string property, string filterCaseSensitivityOperator)
     {
-        return $"{property}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)";
+        if (property == null)
+        {
+            property = "it";
+        }
+        var p = $@"({property} == null ? """" : {property})";
+        return $"{p}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)";
     }
 
-    private bool IsColumnFilterPropertyTypeString(RadzenGridColumn<object> column)
+    private bool IsColumnFilterPropertyTypeString(RadzenDataGridColumn<object> column)
     {
         var property = column.GetFilterProperty();
         var itemType = Data != null ? Data.AsQueryable().ElementType : typeof(object);
@@ -224,7 +261,7 @@
 
                 if (AllowFilteringByAllStringColumns)
                 {
-                    query = query.Where(string.Join(" || ", grid.ColumnsCollection.Where(c => IsColumnFilterPropertyTypeString(c))
+                    query = query.Where(string.Join(" || ", grid.ColumnsCollection.Where(c => c.Filterable && IsColumnFilterPropertyTypeString(c))
                         .Select(c => GetPropertyFilterExpression(c.GetFilterProperty(), filterCaseSensitivityOperator))),
                             FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? searchText.ToLower() : searchText);
                 }
@@ -240,9 +277,11 @@
                 query = query.OrderBy(args.OrderBy);
             }
 
+            _internalView = query;
+
             count = query.Count();
 
-            pagedData = QueryableExtension.ToList(query.Skip(args.Skip.HasValue ? args.Skip.Value : 0).Take(PageSize)).Cast<object>();
+            pagedData = QueryableExtension.ToList(query.Skip(args.Skip.HasValue ? args.Skip.Value : 0).Take(args.Top.HasValue ? args.Top.Value : PageSize)).Cast<object>();
         }
         else
         {
@@ -250,6 +289,15 @@
         }
     }
 
+    IEnumerable _internalView = Enumerable.Empty<object>();
+    public new IEnumerable View
+    {
+        get
+        {
+            return _internalView;
+        }
+    }
+
     protected override IEnumerable<object> Items
     {
         get
@@ -335,7 +383,8 @@
         {
             try
             {
-                if (key == "ArrowDown" && selectedIndex < items.Count - 1) {
+                if (key == "ArrowDown" && selectedIndex < items.Count - 1)
+                {
                     selectedIndex++;
                 }
 
@@ -385,22 +434,35 @@
 
             await InvokeAsync(() =>
             {
-                StateHasChanged();
-                grid.FirstPage(true).Wait();
+#if NET5
+                if (grid?.virtualize != null)
+                {
+                    if(string.IsNullOrEmpty(searchText))
+                    {
+                        if(LoadData.HasDelegate)
+                        {
+                            Data = null;
+                        }
+                        else
+                        {
+                            pagedData = null;
+                            StateHasChanged();
+                        }
+                    }
+                    grid.virtualize.RefreshDataAsync().Wait();
+                }
+#endif 
+                 StateHasChanged();
+                 grid.FirstPage(true).Wait();
+
+                 JSRuntime.InvokeAsync<string>("Radzen.repositionPopup", Element, PopupID);
             });
         }
     }
 
     protected override async Task OnFilter(ChangeEventArgs args)
     {
-        searchText = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
-        if (searchText != previousSearch)
-        {
-            previousSearch = searchText;
-            _view = null;
-            StateHasChanged();
-            await grid.FirstPage(true);
-        }
+        await DebounceFilter();
     }
 
     [Parameter]
@@ -412,10 +474,6 @@
     [Parameter]
     public bool AllowFilteringByAllStringColumns { get; set; }
 
-    [Parameter]
-    public int PageSize { get; set; } = 5;
-
-
     async Task OnRowSelect(object item)
     {
         await SelectItem(item);
@@ -453,6 +511,9 @@
     {
         base.Dispose();
 
-        JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        if (IsJSRuntimeAvailable)
+        {
+            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+        }
     }
 }

Radzen.Blazor/RadzenDropDownDataGridColumn.razor

@@ -1 +1 @@
-@inherits RadzenGridColumn<dynamic>
+@inherits RadzenDataGridColumn<dynamic>

Radzen.Blazor/RadzenDropDownItem.razor

@@ -0,0 +1,49 @@
+@using Radzen
+@using System.Linq.Dynamic.Core
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.JSInterop
+@typeparam TValue
+
+@if (DropDown.Multiple)
+{
+    <li class="@(DropDown.isSelected(Item) ? "rz-multiselect-item  rz-state-highlight" : "rz-multiselect-item ")"
+        aria-label="@PropertyAccess.GetItemOrValueFromProperty(Item, DropDown.TextProperty)" style="display: block;white-space: nowrap;" @onclick:preventDefault @onclick="@(() => DropDown.OnSelectItemInternal(Item))">
+        <div class="rz-chkbox ">
+            <div class="@(DropDown.isSelected(Item) ? "rz-chkbox-box    rz-state-active" : "rz-chkbox-box   ")">
+                <span class="@(DropDown.isSelected(Item) ? "rz-chkbox-icon  rzi rzi-check" : "rz-chkbox-icon ")"></span>
+            </div>
+        </div>
+        <span>
+            @if (DropDown.Template != null)
+            {
+                @DropDown.Template(Item)
+            }
+            else
+            {
+                @PropertyAccess.GetItemOrValueFromProperty(Item, DropDown.TextProperty)
+            }
+        </span>
+    </li>
+}
+else
+{
+    <li role="option" class="@(DropDown.isSelected(Item) ? "rz-dropdown-item  rz-state-highlight" : "rz-dropdown-item ")" aria-label=">@PropertyAccess.GetItemOrValueFromProperty(Item, DropDown.TextProperty)" @onclick:preventDefault @onclick="@(() => DropDown.OnSelectItemInternal(Item))">
+        <span>
+            @if (DropDown.Template != null)
+            {
+                @DropDown.Template(Item)
+            }
+            else
+            {
+                @PropertyAccess.GetItemOrValueFromProperty(Item, DropDown.TextProperty)
+            }
+        </span>
+    </li>
+}
+@code {
+    [Parameter]
+    public RadzenDropDown<TValue> DropDown { get; set; }
+
+    [Parameter]
+    public object Item { get; set; }
+}

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>
                                                 }
@@ -179,7 +179,7 @@
                                                         }
                                                         else
                                                         {
-                                                            <label style="height:35px">
+                                                            <label class="rz-cell-filter-label" style="height:35px">
                                                                 @if (column.Type == "string" && column.Format == "date-time")
                                                                 {
                                                                     <i onclick="@($"Radzen.togglePopup(this.parentNode, '{PopupID}{column.GetFilterProperty()}')")"
@@ -189,7 +189,7 @@
                                                                         <span class="rz-current-filter">@column.FilterValue</span>
                                                                         <i @onclick="@((args) => ClearFilter(column))" class="rzi rz-cell-filter-clear">close</i>
                                                                     }
-                                                                    <div id="@($"{PopupID}{column.GetFilterProperty()}")" class="rz-overlaypanel    "
+                                                                    <div id="@($"{PopupID}{column.GetFilterProperty()}")" class="rz-overlaypanel"
                                                                          style="display:none;width:550px;" tabindex="0">
                                                                         <div class="rz-overlaypanel-content">
 
@@ -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();
             }
         }
     }
@@ -819,7 +819,27 @@
 
         if (LoadData.HasDelegate)
         {
-            await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = skip, Top = PageSize, OrderBy = orderBy, Filter = IsOData() ? columns.ToODataFilterString<TItem>() : filterString });
+            await LoadData.InvokeAsync(new Radzen.LoadDataArgs()
+            {
+                Skip = skip,
+                Top = PageSize,
+                OrderBy = orderBy,
+                Filter = IsOData() ? columns.ToODataFilterString<TItem>() : filterString,
+                Filters = columns.Where(c => c.Filterable && c.Visible && c.FilterValue != null).Select(c => new FilterDescriptor()
+                {
+                    Property = c.GetFilterProperty(),
+                    FilterValue = c.FilterValue,
+                    FilterOperator = (FilterOperator)Enum.Parse(typeof(FilterOperator), QueryableExtension.FilterOperators[c.FilterOperator]),
+                    SecondFilterValue = c.SecondFilterValue,
+                    SecondFilterOperator = (FilterOperator)Enum.Parse(typeof(FilterOperator), QueryableExtension.FilterOperators[c.SecondFilterOperator]),
+                    LogicalFilterOperator = c.LogicalFilterOperator
+                }),
+                Sorts = columns.Where(c => c.Sortable && c.Visible && (orderBy.Contains($"{c.GetSortProperty()} asc") || orderBy.Contains($"{c.GetSortProperty()} desc"))).Select(c => new SortDescriptor()
+                {
+                    Property = c.GetSortProperty(),
+                    SortOrder = orderBy.Contains($"{c.GetSortProperty()} asc") ? SortOrder.Ascending : SortOrder.Descending,
+                })
+            });
         }
 
         CalculatePager();
@@ -946,6 +966,12 @@
             {
                 expandedItems.Remove(itemToCollapse);
                 await RowCollapse.InvokeAsync(itemToCollapse);
+
+                if(object.Equals(item,itemToCollapse))
+                {
+                    return;
+                }
+
             }
         }
 
@@ -977,6 +1003,7 @@
         column.SetFilterValue(null);
         column.SetFilterValue(null, false);
         skip = 0;
+        CurrentPage = 0;
         await InvokeAsync(Reload);
     }
 
@@ -1079,6 +1106,16 @@
     Dictionary<TItem, EditContext> editContexts = new Dictionary<TItem, EditContext>();
 
     public async System.Threading.Tasks.Task EditRow(TItem item)
+    {
+        if(itemToInsert != null)
+        {
+            CancelEditRow(itemToInsert);
+        }
+
+        await EditRowInternal(item);
+    }
+
+    async System.Threading.Tasks.Task EditRowInternal(TItem item)
     {
         if (EditMode == DataGridEditMode.Single && editedItems.Keys.Any())
         {
@@ -1167,7 +1204,7 @@
         list.Insert(0, item);
         this._view = list.AsQueryable();
         this.Count = this._view.Count();
-        await EditRow(item);
+        await EditRowInternal(item);
     }
 
     protected void OnSort(EventArgs args, RadzenGridColumn<TItem> column)
@@ -1202,6 +1239,7 @@
             {
                 column.SetFilterValue(args.Value, isFirst);
                 skip = 0;
+                CurrentPage = 0;
                 InvokeAsync(Reload);
             }
         }
@@ -1239,20 +1277,40 @@
 
     public void OrderBy(string property)
     {
+        SetColumnSortOrder(property);
         var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);
-        skip = 0;
         orderBy = orderBy == $"{p} desc" || orderBy == null || orderBy.IndexOf(p) == -1 ? $"{p} asc" : $"{p} desc";
         InvokeAsync(Reload);
     }
 
     public void OrderByDescending(string property)
     {
+        SetColumnSortOrder(property);
         var p = IsOData() ? property.Replace('.', '/') : PropertyAccess.GetProperty(property);
-        skip = 0;
         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/RadzenGridCell.razor

@@ -1,5 +1,5 @@
 @typeparam TItem
-<td style="@Style" class="@CssClass" @attributes="@Attributes" @onclick="@OnClick" @ondblclick="@OnDblClick" >
+<td style="@Style" @attributes="@Attributes" class="@GetCssClass()" @onclick="@OnClick" @ondblclick="@OnDblClick" >
     <CascadingValue Value=this>
         @ChildContent
     </CascadingValue>
@@ -38,4 +38,14 @@
             await Grid.OnRowDblClick(Item);
         }
     }
+
+    string GetCssClass()
+    {
+        if (Attributes != null && Attributes.TryGetValue("class", out var @class) && !string.IsNullOrEmpty(Convert.ToString(@class)))
+        {
+            return $"{CssClass} {@class}".Trim();
+        }
+
+        return CssClass;
+    }
 }

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

@@ -6,7 +6,7 @@
 
 @if(Visible)
 {
-    <div @ref=Element class=@GetCssClass() @attributes=@Attributes style=@Style id=@GetId()>
+    <div @ref=Element style=@Style @attributes=@Attributes class=@GetCssClass() id=@GetId()>
         <div class="rz-html-editor-toolbar">
             <CascadingValue Value=@this>
             @if (ChildContent != null)
@@ -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/RadzenHtmlEditorLink.razor

@@ -12,6 +12,7 @@
     class LinkAttributes
     {
         public string InnerText { get; set; }
+        public string InnerHtml { get; set; }
         public string Href { get; set; }
         public string Target { get; set; }
     }
@@ -53,10 +54,13 @@
                 <label>@UrlText</label>
                 <RadzenTextBox @bind-Value=@attributes.Href style="width: 100%" />
             </div>
+            @if (string.IsNullOrEmpty(attributes.InnerHtml))
+            {
             <div class="rz-html-editor-dialog-item">
                 <label>@LinkText</label>
                 <RadzenTextBox @bind-Value=@attributes.InnerText style="width: 100%" />
             </div>
+            }
             <div class="rz-html-editor-dialog-item">
                 <RadzenCheckBox @bind-Value=@blank />
                 <label>@OpenInNewWindowText</label>
@@ -78,7 +82,8 @@
             {
                 html.Append(" target=\"_blank\"");
             }
-            html.AppendFormat(">{0}</a>", attributes.InnerText);
+
+            html.AppendFormat(">{0}</a>", string.IsNullOrEmpty(attributes.InnerText) ? attributes.InnerHtml : attributes.InnerText);
 
             await Editor.ExecuteCommandAsync("insertHTML", html.ToString());
         }

Radzen.Blazor/RadzenIcon.razor

@@ -2,7 +2,7 @@
 
 @if (Visible)
 {
-    <i @ref="@Element" style="@Style" class="@GetCssClass()" @attributes="Attributes" id="@GetId()">@((MarkupString)Icon)</i>
+    <i @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">@((MarkupString)Icon)</i>
 }
 @code {
     [Parameter]

Radzen.Blazor/RadzenListBox.razor

@@ -2,6 +2,7 @@
 @using System.Linq.Dynamic.Core
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.JSInterop
+@using Microsoft.AspNetCore.Components.Rendering
 @typeparam TValue
 @inherits DropDownBase<TValue>
 @if (Visible)
@@ -24,7 +25,7 @@
                         </div>
                     </div>
                     @if (!AllowFiltering && !string.IsNullOrEmpty(Placeholder))
-                    { 
+                    {
                         <label for="@($"{UniqueID}sa")" class="rz-dropdown-label rz-inputtext " style="width:100%;">@Placeholder</label>
                     }
                 }
@@ -42,35 +43,23 @@
         {
             <div class="rz-listbox-list-wrapper">
                 <ul @ref="list" class="rz-listbox-list">
-                    @foreach (var item in View)
-                    {
-                        <li class="@(isSelected(item) ? "rz-multiselect-item  rz-state-highlight" : "rz-multiselect-item ")" aria-label="@PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)" style="display: block;" @onclick="@(async () => { if (!Disabled) { await SelectItem(item); } })">
-                            @if (Multiple)
-                            {
-                                <div class="rz-chkbox ">
-                                    <div class="@(isSelected(item) ? "rz-chkbox-box    rz-state-active" : "rz-chkbox-box   ")">
-                                        <span class="@(isSelected(item) ? "rz-chkbox-icon  rzi rzi-check" : "rz-chkbox-icon ")"></span>
-                                    </div>
-                                </div>
-                            }
-                            <span>
-                                @if (Template != null)
-                                {
-                                    @Template(item)
-                                }
-                                else
-                                {
-                                    @PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)
-                                }
-                            </span>
-                        </li>
-                    }
+                    @RenderItems()
                 </ul>
             </div>
         }
     </div>
 }
 @code {
+
+    internal override void RenderItem(RenderTreeBuilder builder, object item)
+    {
+        builder.OpenComponent(0, typeof(RadzenListBoxItem<TValue>));
+        builder.AddAttribute(1, "ListBox", this);
+        builder.AddAttribute(2, "Item", item);
+        builder.SetKey(item);
+        builder.CloseComponent();
+    }
+
     protected async System.Threading.Tasks.Task OnKeyDown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
     {
         if (Disabled)
@@ -123,7 +112,7 @@
                 bool reload = false;
                 if (LoadData.HasDelegate && Data == null)
                 {
-                    await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { });
+                    await LoadData.InvokeAsync(await GetLoadDataArgs());
                     reload = true;
                 }
 

Radzen.Blazor/RadzenListBoxItem.razor

@@ -0,0 +1,34 @@
+@using Radzen
+@using System.Linq.Dynamic.Core
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.JSInterop
+@typeparam TValue
+
+<li class="@(ListBox.isSelected(Item) ? "rz-multiselect-item  rz-state-highlight" : "rz-multiselect-item ")" aria-label="@PropertyAccess.GetItemOrValueFromProperty(Item, ListBox.TextProperty)" style="display: block;" @onclick="@(async () => { if (!ListBox.Disabled) { await ListBox.SelectItemInternal(Item); } })">
+    @if (ListBox.Multiple)
+    {
+        <div class="rz-chkbox ">
+            <div class="@(ListBox.isSelected(Item) ? "rz-chkbox-box    rz-state-active" : "rz-chkbox-box   ")">
+                <span class="@(ListBox.isSelected(Item) ? "rz-chkbox-icon  rzi rzi-check" : "rz-chkbox-icon ")"></span>
+            </div>
+        </div>
+    }
+    <span>
+        @if (ListBox.Template != null)
+        {
+            @ListBox.Template(Item)
+        }
+        else
+        {
+            @PropertyAccess.GetItemOrValueFromProperty(Item, ListBox.TextProperty)
+        }
+    </span>
+</li>
+
+@code {
+    [Parameter]
+    public RadzenListBox<TValue> ListBox { get; set; }
+
+    [Parameter]
+    public object Item { get; set; }
+}

Radzen.Blazor/RadzenLogin.razor

@@ -3,59 +3,44 @@
 @if (Visible)
 {
     <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
-        <div class="rz-form" novalidate="">
+        <div class="rz-form">
             <div class="row form-group">
                 <label class="col-sm-3 col-form-label" for="username">@UserText</label>
                 <div class="col">
-                    <input name="userName" class="rz-textbox" @bind="@Username" />
-                    @if ((loginClicked || resetClicked) && string.IsNullOrEmpty(Username))
-                    {
-                        <div class="md-inputfield">
-                            <div class="rz-message rz-messages-error ">
-                                @UserRequired
-                            </div>
-                        </div>
-                    }
+                    <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">
-                    <input name="password" class="rz-textbox" type="password" @bind="@Password" @oninput="@(args => Password = $"{args.Value}")" @onkeypress="@OnPwdKeyPress" />
-                    @if (loginClicked && string.IsNullOrEmpty(Password))
-                    {
-                        <div class="md-inputfield">
-                            <div class="rz-message rz-messages-error ">
-                                @PasswordRequired
-                            </div>
-                        </div>
-                    }
+                    <RadzenPassword AutoComplete=@AutoComplete style="display: block" Name="Password" @bind-Value=@Password />
+                    <RadzenRequiredValidator Component="Password" Text=@PasswordRequired style="position: absolute" />
                 </div>
             </div>
             <div class="row form-group">
                 <div class="offset-sm-3 col login-buttons">
-                    <button class="rz-button rz-button-md btn-primary" type="@(!string.IsNullOrEmpty(Username) && !string.IsNullOrEmpty(Password) ? "submit" : "button")" @onclick="@OnLogin">
-                        <span class="rz-button-text" style="">@LoginText</span>
-                    </button>
+                    <RadzenButton ButtonStyle="ButtonStyle.Primary" ButtonType="ButtonType.Submit" Text=@LoginText Click=@OnLogin />
                     @if (AllowResetPassword)
                     {
-                        <a @onclick="@OnReset">@ResetPasswordText</a>
+                        <a @onclick=@OnReset>@ResetPasswordText</a>
                     }
                 </div>
             </div>
         </div>
         @if (AllowRegister)
         {
-            <div class="register" style="">
+            <div class="register">
                 @RegisterMessageText
-                <button class="rz-button rz-button-md    btn-secondary" type="button" @onclick="@OnRegister">
-                    <span class="rz-button-text">@RegisterText</span>
-                </button>
+                <RadzenButton ButtonType="ButtonType.Button" ButtonStyle="ButtonStyle.Primary" Text=@RegisterText Click=@OnRegister />
             </div>
         }
     </div>
 }
-@code {
+@code {  
+    [Parameter]
+    public bool AutoComplete { get; set; } = true;
+
     protected override string GetComponentCssClass()
     {
         return "login";
@@ -134,37 +119,24 @@
     [Parameter]
     public string PasswordRequired { get; set; } = "Password is required";
 
-    bool loginClicked = false;
-    protected async System.Threading.Tasks.Task OnLogin(EventArgs args)
+    protected async Task OnLogin()
     {
-        loginClicked = true;
         if (!string.IsNullOrEmpty(Username) && !string.IsNullOrEmpty(Password))
         {
-            await Login.InvokeAsync(new Radzen.LoginArgs() { Username = Username, Password = Password });
+            await Login.InvokeAsync(new Radzen.LoginArgs { Username = Username, Password = Password });
         }
     }
 
-    async Task OnPwdKeyPress(KeyboardEventArgs args)
+    protected async Task OnReset(EventArgs args)
     {
-        var key = args.Code != null ? args.Code : args.Key;
-        if (key == "Enter") 
-        { 
-            await OnLogin(args); 
-        }
-    }
-
-    bool resetClicked = false;
-    protected async System.Threading.Tasks.Task OnReset(EventArgs args)
-    {
-        resetClicked = true;
         if (!string.IsNullOrEmpty(Username))
         {
             await ResetPassword.InvokeAsync(Username);
         }
     }
 
-    protected async System.Threading.Tasks.Task OnRegister(EventArgs args)
+    protected async Task OnRegister()
     {
-        await Register.InvokeAsync(args);
+        await Register.InvokeAsync(EventArgs.Empty);
     }
 }

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

@@ -51,6 +51,10 @@
                 <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,6 +156,14 @@
         }
     }
 
+    internal void SetCurrentPage(int page)
+    {
+        if (CurrentPage != page)
+        {
+            skip = page * PageSize;
+        }
+    }
+
     public async Task FirstPage(bool forceReload = false)
     {
         if (CurrentPage != 0 || forceReload)

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

@@ -232,15 +232,6 @@
         return $"M {startX} {startY} A {r} {r} 0 {largeArcFlag} 1 {endX} {endY} L {innerEndX} {innerEndY} A {innerRadius} {innerRadius} 0 {largeArcFlag} 0 {innerStartX} {innerStartY}";
    }
 
-   protected string PickColor(int index, IEnumerable<string> colors)
-   {
-       if (colors == null || !colors.Any())
-       {
-           return null;
-       }
-
-       return colors.ElementAt(index % colors.Count());
-   }
 
    public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
    {

Radzen.Blazor/RadzenRadialGauge.razor

@@ -3,7 +3,7 @@
 @inherits GaugeBase
 @if (Visible)
 {
-    <div @ref="Element" class=@GetCssClass() @attributes=@Attributes style=@Style id="@GetId()">
+    <div @ref="Element" style=@Style @attributes=@Attributes class=@GetCssClass() id=@GetId()>
     @if (Width.HasValue && Height.HasValue)
     {
         <svg style="width: 100%; height: 100%">

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

@@ -11,7 +11,7 @@
 <CascadingValue Value="@this">
     @ChildContent
 </CascadingValue>
-<div @ref=Element class=@GetCssClass() style=@Style @attributes=@Attributes id="@GetId()">
+<div @ref=Element  style=@Style @attributes=@Attributes class=@GetCssClass() id=@GetId()>
     <div class="rz-scheduler-nav">
         <div class="rz-scheduler-nav-prev-next">
             <button class="rz-button rz-prev" @onclick=@OnPrev><RadzenIcon Icon="chevron_left" /></button>
@@ -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/RadzenTemplateForm.cs

@@ -6,6 +6,7 @@ using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.AspNetCore.Components.Forms;
 using Radzen;
+using Microsoft.JSInterop;
 
 namespace Radzen.Blazor
 {
@@ -67,26 +68,28 @@ namespace Radzen.Blazor
         {
             if (EditContext != null)
             {
-                bool valid = false;
-
-                try
-                {
-                    valid = EditContext.Validate();
-                }
-                catch
-                {
-
-                }
+                bool valid = EditContext.Validate();
 
                 if (valid)
                 {
                     await Submit.InvokeAsync(Data);
+
+                    if (Action != null)
+                    {
+                        await JSRuntime.InvokeVoidAsync($"Radzen.submit", Element);
+                    }
                 }
                 else
                 {
                     await InvalidSubmit.InvokeAsync(new FormInvalidSubmitEventArgs() { Errors = EditContext.GetValidationMessages() });
                 }
-
+            }
+            else
+            {
+                if (Action != null)
+                {
+                    await JSRuntime.InvokeVoidAsync($"Radzen.submit", Element);
+                }
             }
         }
 
@@ -137,18 +140,16 @@ namespace Radzen.Blazor
                     builder.AddAttribute(2, "method", Method);
                     builder.AddAttribute(3, "action", Action);
                 }
-                else
-                {
-                    builder.AddAttribute(4, "onsubmit", handleSubmitDelegate);
-                }
 
+                builder.AddAttribute(4, "onsubmit", handleSubmitDelegate);
                 builder.AddMultipleAttributes(5, Attributes);
                 builder.AddAttribute(6, "class", GetCssClass());
+                builder.AddElementReferenceCapture(7, form => Element = form);
 
-                builder.OpenComponent<CascadingValue<IRadzenForm>>(7);
-                builder.AddAttribute(8, "IsFixed", true);
-                builder.AddAttribute(9, "Value", this);
-                builder.AddAttribute(10, "ChildContent", new RenderFragment(contentBuilder =>
+                builder.OpenComponent<CascadingValue<IRadzenForm>>(8);
+                builder.AddAttribute(9, "IsFixed", true);
+                builder.AddAttribute(10, "Value", this);
+                builder.AddAttribute(11, "ChildContent", new RenderFragment(contentBuilder =>
                 {
                     contentBuilder.OpenComponent<CascadingValue<EditContext>>(0);
                     contentBuilder.AddAttribute(1, "IsFixed", true);
@@ -159,6 +160,7 @@ namespace Radzen.Blazor
 
                 builder.CloseComponent(); // CascadingValue<IRadzenForm>
 
+
                 builder.CloseElement(); // form
 
                 if (Data != null)

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

@@ -6,16 +6,16 @@
 @if (Visible)
 {
     <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
-        <ul class="rz-tree-container">
+    <ul class="rz-tree-container">
         <CascadingValue Value=this>
             @ChildContent
         </CascadingValue>
         @if (Data != null && Levels.Any())
-        {
-            <CascadingValue Value=this>
-                @RenderChildren(Data, 0)
-            </CascadingValue>
-        }
+            {
+                <CascadingValue Value=this>
+                    @RenderChildren(Data, 0)
+                </CascadingValue>
+            }
         </ul>
     </div>
 }
@@ -43,13 +43,59 @@
     public IEnumerable Data { get; set; }
 
     [Parameter]
-    public object Value { get; set;}
+    public object Value { get; set; }
 
     [Parameter]
     public EventCallback<object> ValueChanged { get; set; }
 
-    void RenderTreeItem(RenderTreeBuilder builder, object data, RenderFragment<RadzenTreeItem> template, Func<object, string> text, 
-        Func<object, bool> hasChildren, Func<object, bool> expanded, Func<object, bool> selected)
+    [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)
     {
         builder.OpenComponent<RadzenTreeItem>(0);
         builder.AddAttribute(1, nameof(RadzenTreeItem.Text), text(data));
@@ -58,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);
     }
 
@@ -76,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);
 
@@ -143,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>()));
+                }
+            }
         }
     }
 
@@ -162,12 +226,19 @@
         return PropertyAccess.Getter<T>(data, property);
     }
 
-    protected override void OnParametersSet()
+    public override async Task SetParametersAsync(ParameterView parameters)
     {
-        if (Value == null)
+        if (parameters.DidParameterChange(nameof(Value), Value))
         {
-            SelectedItem = null;
+            var value = parameters.GetValueOrDefault<object>(nameof(Value));
+            
+            if (value == null)
+            {
+                SelectedItem = null;
+            }
         }
+
+        await base.SetParametersAsync(parameters);
     }
 
     internal void AddLevel(RadzenTreeLevel level)

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

@@ -83,6 +83,10 @@
         headers.Add(name, value);
     }
 
+    internal void RemoveHeader(string name)
+    {
+        headers.Remove(name);
+    }
     private bool visibleChanged = false;
     private bool firstRender = true;
 

Radzen.Blazor/RadzenUploadHeader.razor

@@ -8,8 +8,12 @@
     [CascadingParameter]
     public RadzenUpload Upload { get; set; }
 
-    protected override void OnInitialized()
+    public override async Task SetParametersAsync(ParameterView parameters)
     {
+        Upload?.RemoveHeader(Name);
+
+        await base.SetParametersAsync(parameters);
+
         Upload?.AddHeader(Name, Value);
     }
 }

Radzen.Blazor/Rendering/CategoryAxis.razor

@@ -6,8 +6,8 @@
     <Line Class="rz-line" X1="@x1" Y1="@y1" X2="@x2" Y2="@y1" Stroke="@XAxis.Stroke" StrokeWidth="@XAxis.StrokeWidth" LineType="@XAxis.LineType" />
     @for (var idx = start; idx <= end; idx += step)
     {
-        var value = Chart.CategoryScale.Value(idx);
-        var x = Chart.CategoryScale.Scale(idx, true);
+        var value = Chart.CategoryScale.Value((double)idx);
+        var x = Chart.CategoryScale.Scale((double)idx, true);
 
         var text = XAxis.Format(Chart.CategoryScale, value);
 
@@ -36,9 +36,9 @@
     </g>
 }
 @code {
-    double start;
-    double end;
-    double step;
+    decimal start;
+    decimal end;
+    decimal step;
     double x1;
     double x2;
     double y1;
@@ -59,12 +59,12 @@
         }
 
         var ticks = Chart.CategoryScale.Ticks(XAxis.TickDistance);
-        start = ticks.Start;
-        end = ticks.End;
-        step = ticks.Step;
+        start = (decimal)ticks.Start;
+        end = (decimal)ticks.End;
+        step = (decimal)ticks.Step;
 
-        x1 = Chart.CategoryScale.Scale(start);
-        x2 = Chart.CategoryScale.Scale(end);
+        x1 = Chart.CategoryScale.Scale(ticks.Start);
+        x2 = Chart.CategoryScale.Scale(ticks.End);
 
         var valueTicks = Chart.ValueScale.Ticks(YAxis.TickDistance);
         y1 = Chart.ValueScale.Scale(valueTicks.Start);

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

@@ -0,0 +1,69 @@
+<div class="rz-dialog-wrapper">
+    <div class="rz-dialog" role="dialog" aria-labelledby="rz-dialog-0-label" style=@Style>
+        @if (Dialog.Options.ShowTitle)
+        {
+            <div class="rz-dialog-titlebar">
+                <span class="rz-dialog-title" id="rz-dialog-0-label">@Dialog.Title</span>
+                @if (Dialog.Options.ShowClose)
+                {
+                    <a href="javascript:void(0)" @onclick=@Close role="button" class="rz-dialog-titlebar-icon rz-dialog-titlebar-close">
+                        <span class="rzi rzi-times"></span>
+                    </a>
+                }
+            </div>
+        }
+        <div class="rz-dialog-content">
+            @if (Dialog.Options.ChildContent != null)
+            {
+                @Dialog.Options.ChildContent(Service)
+            }
+            else
+            {
+                @ChildContent
+            }
+        </div>
+    </div>
+    <div class="rz-dialog-mask" style="z-index: 1000;"></div>
+</div>
+
+@code {
+    [Parameter]
+    public Dialog Dialog { get; set; }
+
+    RenderFragment ChildContent => new RenderFragment(builder =>
+        {
+            builder.OpenComponent(0, Dialog.Type);
+
+            if (Dialog.Parameters != null)
+            {
+                foreach (var parameter in Dialog.Parameters)
+                {
+                    builder.AddAttribute(1, parameter.Key, parameter.Value);
+                }
+            }
+
+            builder.CloseComponent();
+        });
+
+    void Close()
+    {
+        Service.Close();
+    }
+
+    string Style
+    {
+        get
+        {
+            var baseStyle = "min-width: 150px; min-height: 150px; z-index: 1001; opacity: 1;position:absolute;";
+            var widthStyle = string.IsNullOrEmpty(Dialog.Options.Width) ? "" : $"width: {Dialog.Options.Width};";
+            var heightStyle = string.IsNullOrEmpty(Dialog.Options.Height) ? "" : $"height: {Dialog.Options.Height};";
+            var topStyle = string.IsNullOrEmpty(Dialog.Options.Top) ? "" : $"top: {Dialog.Options.Top};";
+            var leftStyle = string.IsNullOrEmpty(Dialog.Options.Left) ? "" : $"left: {Dialog.Options.Left};";
+
+            return $"{baseStyle}{widthStyle}{heightStyle}{topStyle}{leftStyle}{Dialog.Options.Style}";
+        }
+    }
+
+    [Inject] 
+    DialogService Service { get; set; }
+}

Radzen.Blazor/Rendering/GaugeBand.razor

@@ -41,15 +41,17 @@
     [Parameter]
     public double Size { get; set; }
 
+    double Clip(double v) => Math.Max(Min, Math.Min(v, Max));
+
     protected override void OnParametersSet()
     {
-        var startRatio = (From - Min) / (Max - Min);
+        var startRatio = (Clip(From) - Min) / (Max - Min);
         var startAngle = StartAngle + startRatio * (EndAngle - StartAngle);
 
         var outerStart = Center.ToCartesian(Radius, Polar.ToRadian(startAngle - 90));
         var innerStart = Center.ToCartesian(Radius - Size, Polar.ToRadian(startAngle - 90));
 
-        var endRatio = (To - Min) / (Max - Min);
+        var endRatio = (Clip(To) - Min) / (Max - Min);
         var endAngle = StartAngle + endRatio * (EndAngle - StartAngle);
 
         var outerEnd = Center.ToCartesian(Radius, Polar.ToRadian(endAngle - 90));

Radzen.Blazor/Rendering/GaugePointer.razor

@@ -43,9 +43,11 @@
 
     private string Path { get; set; }
 
+    double Clip(double v) => Math.Max(Min, Math.Min(v, Max));
+
     protected override void OnParametersSet()
     {
-        var ratio = (Value - Min) / (Max - Min);
+        var ratio = (Clip(Value) - Min) / (Max - Min);
         var angle = StartAngle + ratio * (EndAngle - StartAngle);
 
         angle = Polar.ToRadian(angle - 90);

Radzen.Blazor/Rendering/MonthView.razor

@@ -14,6 +14,7 @@
         </div>
     @{ 
         var days = 0;
+        var points = new Dictionary<AppointmentData, double>();
     }
     <div class="rz-view-content">
     @for (var date = StartDate; date < EndDate; date = date.AddDays(7))
@@ -23,9 +24,9 @@
                 @for (var start = date; start < date.AddDays(7); start = start.AddDays(1))
                 {
                     var end = start.AddDays(1);
-
                     var appointments = AppointmentsInSlot(start, end);
                     var excessCount = appointments.Count() - MaxAppointmentsInSlot;
+                    var existingTops = ExistingTops(points, appointments.Take(MaxAppointmentsInSlot));
 
                     @foreach(var item in appointments.Take(MaxAppointmentsInSlot))
                     {
@@ -34,7 +35,12 @@
                         var left = slotIndex * slotWidth;
                         var length = Math.Max(1, Math.Ceiling(item.End.Subtract(date).TotalDays) - slotIndex);
                         var width = item.End <= date.AddDays(7) ? (length) * slotWidth : (7 - slotIndex) * slotWidth;
-                        var top = 1.5 + 1.5 * Array.IndexOf(appointments, item);
+                        if (!points.TryGetValue(item, out var top))
+                        {
+                            top = DetermineTop(existingTops);
+                            points.Add(item, top);
+                            existingTops.Add(top);
+                        }
                         var height = 1.5;
                         var data = item;
 
@@ -103,6 +109,33 @@
         await Scheduler.SelectSlot(date, date.AddDays(1));
     }
 
+    double DetermineTop(HashSet<double> existingTops)
+    {
+        var top = 1.5;
+
+        while (existingTops.Contains(top))
+        {
+            top += 1.5;
+        }
+
+        return top;
+    }
+
+    HashSet<double> ExistingTops(IDictionary<AppointmentData, double> tops, IEnumerable<AppointmentData> appointments)
+    {
+        var existingTops = new HashSet<double>();
+
+        foreach (var appointment in appointments)
+        {
+            if (tops.TryGetValue(appointment, out var existingTop))
+            {
+                existingTops.Add(existingTop);
+            }
+        }
+
+        return existingTops;
+    }
+
     async Task OnAppointmentClick(AppointmentData data)
     {
         await Scheduler.SelectAppointment(data);

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

@@ -86,16 +86,19 @@ namespace Radzen.Blazor
                 throw new InvalidOperationException($"Cannot find component with Name {Component}");
             }
 
-            IsValid = Validate(component);
-
-            messages.Clear(component.FieldIdentifier);
-
-            if (!IsValid)
+            if (component.FieldIdentifier.FieldName != null)
             {
-                messages.Add(component.FieldIdentifier, Text);
-            }
+                IsValid = Validate(component);
 
-            EditContext?.NotifyValidationStateChanged();
+                messages.Clear(component.FieldIdentifier);
+
+                if (!IsValid)
+                {
+                    messages.Add(component.FieldIdentifier, Text);
+                }
+
+                EditContext?.NotifyValidationStateChanged();
+            }
 
             FieldIdentifier = component.FieldIdentifier;
         }

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

@@ -156,3 +156,12 @@ $button-styles: map-merge(
     }
   }
 }
+
+@keyframes button-icon-spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}

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

@@ -181,7 +181,7 @@ $grid-button-line-height: $grid-button-height !default;
   border-top: $grid-cell-border;
 }
 
-.rz-datatable-thead {
+.rz-datatable-thead, .rz-grid-table thead {
   .rzi {
     color: $grid-cell-color;
   }
@@ -210,7 +210,7 @@ $grid-button-line-height: $grid-button-height !default;
   }
 }
 
-.rz-datatable-tfoot {
+.rz-datatable-tfoot, .rz-grid-table tfoot {
   td {
     background-color: $grid-header-background-color;
     font-size: $grid-cell-font-size;
@@ -299,7 +299,7 @@ $grid-button-line-height: $grid-button-height !default;
   }
 }
 
-.rz-datatable-data .rz-cell-data {
+.rz-datatable-data .rz-cell-data, .rz-grid-table .rz-cell-data {
   .rz-button-sm {
     line-height: $grid-button-line-height;
     padding: $grid-button-text-padding;
@@ -321,7 +321,7 @@ $grid-button-line-height: $grid-button-height !default;
   }
 }
 
-.rz-datatable-data {
+.rz-datatable-data, .rz-grid-table {
   td {
     padding: $grid-cell-padding;
     border-bottom: $grid-cell-border;
@@ -426,61 +426,65 @@ $grid-button-line-height: $grid-button-height !default;
   font-size: $grid-filter-font-size;
   font-weight: normal;
 
-  label {
-    display: flex;
-    flex: auto;
-    align-items: center;
+  .rz-cell-filter-label {
+      display: flex;
+      flex: auto;
+      align-items: center;
 
-    > .rzi {
-      width: $grid-filter-icon-width;
-      height: $grid-filter-icon-height;
-      font-size: $grid-filter-font-size;
-      margin: $grid-filter-icon-margin;
-      color: $grid-filter-color;
+      > .rzi {
+        width: $grid-filter-icon-width;
+        height: $grid-filter-icon-height;
+        font-size: $grid-filter-font-size;
+        margin: $grid-filter-icon-margin;
+        color: $grid-filter-color;
 
-      &.rz-cell-filter-clear {
-        margin-left: auto;
+        &.rz-cell-filter-clear {
+          margin-left: auto;
+        }
+      }
+
+    .rz-spinner {
+      border: none;
+      padding: 0;
+      height: auto;
+      background-color: transparent;
+      box-shadow: none;
+      line-height: 1;
+      flex: auto;
+
+      input {
+        line-height: 1;
+        &:focus {
+          outline: none;
+          color: $grid-filter-focus-color;
+        }
+      }
+
+      button {
+        display: none;
       }
     }
-  }
+    .rz-chkbox-box {
 
-  .rz-spinner {
-    border: none;
-    padding: 0;
-    height: auto;
-    background-color: transparent;
-    box-shadow: none;
-    line-height: 1;
-    flex: auto;
+      &.rz-state-active {
+        background-color: $input-background-color;
+      }
+    }
 
-    input {
+    > input {
+      width: 0;
+      flex: auto;
+      border: none;
+      box-shadow: none;
+      padding: 0;
+      background-color: transparent;
+      color: $grid-filter-color;
       line-height: 1;
-    }
 
-    button {
-      display: none;
-    }
-  }
-
-  .rz-chkbox-box {
-    &.rz-state-active {
-      background-color: $input-background-color;
-    }
-  }
-
-  input {
-    width: 0;
-    flex: auto;
-    border: none;
-    box-shadow: none;
-    padding: 0;
-    background-color: transparent;
-    color: $grid-filter-color;
-    line-height: 1;
-
-    &:focus {
-      outline: none;
-      color: $grid-filter-focus-color;
+      &:focus {
+        outline: none;
+        color: $grid-filter-focus-color;
+      }
     }
   }
 }
@@ -706,3 +710,71 @@ $grid-button-line-height: $grid-button-height !default;
 .rz-grid-filter-active {
   color: $default-link !important;
 }
+
+.rz-data-grid {
+    display: flex;
+    flex-direction: column;
+}
+
+.rz-data-grid-data {
+    overflow: auto;
+    flex: 1;
+}
+
+.rz-grid-table td, .rz-grid-table th {
+    padding: .5rem;
+}
+
+.rz-grid-table thead {
+
+    th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    tr:nth-of-type(2) {
+        th {
+            top: 35px; // height of the first header row
+        }
+    }
+}
+
+.rz-grid-table-fixed {
+    table-layout: fixed;
+
+    .rz-frozen-cell {
+        position: -webkit-sticky;
+        position: sticky;
+        background: $grid-header-background-color;
+        z-index: 1;
+    }
+}
+
+.rz-grid-table tfoot, .rz-grid-table tfoot td {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+}
+
+.rz-grid-table {
+    overflow: auto;
+    width: 100%;
+    position: relative;
+    border-collapse: separate;
+    border-spacing: 0;
+
+    th {
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    td {
+        white-space: nowrap;
+        overflow: hidden;
+    }
+}
+
+.rz-grid-table tbody > div {
+    display: table-row;
+}

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

@@ -32,8 +32,8 @@ $input-disabled-color: rgba(#3a3a3a, 0.4) !default;
   }
 
   .rz-inputtext {
-    background-color: transparent;
-    color: inherit;
+    background-color: $input-disabled-background-color;
+    color: $input-disabled-color;
   }
 }
 

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

@@ -1,5 +1,5 @@
 $numeric-line-height: 1.5rem !default;
-$numeric-input-padding: 1px 12px 1px 1px;
+$numeric-input-padding: 1px 12px 1px 0.5rem;
 $numeric-button-width: 0.875rem !default;
 $numeric-button-height: $numeric-button-width !default;
 $numeric-button-border-radius: 2px !default;
@@ -14,20 +14,19 @@ $numeric-button-color: $white !default;
 
   @extend %input;
 
+  padding: 0px;
+
   input[type='number'],
   input[type='text'] {
     -moz-appearance: textfield;
     width: 100%;
+    height: 100%;
     border: none;
     background-color: transparent;
     line-height: $numeric-line-height;
     text-align: inherit;
     padding: $numeric-input-padding;
 
-    &:focus {
-      outline: none;
-    }
-
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
       -webkit-appearance: none;

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,11 +592,34 @@ 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;
 
-    var parentRect = parent ? parent.getBoundingClientRect() : { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 };
+    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)) {
       var scrollLeft = document.body.scrollLeft;
@@ -684,7 +709,7 @@ window.Radzen = {
       popup.style.left = parentRect.left + scrollLeft + 'px';
     }
 
-    popup.style.zIndex = 1000;
+    popup.style.zIndex = 2000;
 
     if (!popup.classList.contains('rz-overlaypanel')) {
         popup.classList.add('rz-popup');
@@ -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)) || (e.type == 'scroll' && e.target == e.currentTarget)) {
               Radzen.closePopup(id, instance, callback);
             }
           } else {
@@ -708,6 +733,9 @@ window.Radzen = {
     document.removeEventListener('click', Radzen[id]);
     document.addEventListener('click', Radzen[id]);
 
+    document.removeEventListener('scroll', Radzen[id]);
+    document.addEventListener('scroll', Radzen[id], true);
+
     if (!parent) {
         document.removeEventListener('contextmenu', Radzen[id]);
         document.addEventListener('contextmenu', Radzen[id]);
@@ -715,15 +743,24 @@ 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';
     }
     document.removeEventListener('click', Radzen[id]);
+    document.removeEventListener('scroll', Radzen[id]);
     Radzen[id] = null;
 
     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);
@@ -750,7 +787,9 @@ window.Radzen = {
           e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px';
 
     if (e.target.nextElementSibling) {
-      e.target.nextElementSibling.style.paddingRight = scrollLeft;
+        e.target.nextElementSibling.style.marginLeft = scrollLeft;
+        e.target.nextElementSibling.firstElementChild.style.paddingRight =
+            e.target.clientHeight < e.target.scrollHeight ? (e.target.offsetWidth - e.target.clientWidth) + 'px' : '0px';
     }
 
     for (var i = 0; i < document.body.children.length; i++) {
@@ -759,13 +798,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');
@@ -1051,11 +1106,15 @@ window.Radzen = {
   selectionAttributes: function (selector, attributes) {
     var selection = getSelection();
     var target = selection.focusNode;
+    var innerHTML;
     if (target) {
       if (target.nodeType == 3) {
         target = target.parentElement;
       } else {
         target = target.childNodes[selection.focusOffset];
+        if (target) {
+          innerHTML = target.outerHTML;
+        }
       }
       if (target && !target.matches(selector)) {
         target = target.closest(selector);
@@ -1066,7 +1125,7 @@ window.Radzen = {
         result[name] = target[name];
       }
       return result;
-    }, { innerText: selection.toString() });
+    }, { innerText: selection.toString(), innerHTML: innerHTML });
   },
   destroyEditor: function (ref) {
     if (ref) {
@@ -1093,6 +1152,9 @@ window.Radzen = {
     document.addEventListener('touchend', ref.mouseUpHandler, { passive: true });
     return Radzen.clientRect(ref);
   },
+  submit: function (form) {
+    form.submit();
+  },
   clientRect: function (arg) {
     var el = arg instanceof Element || arg instanceof HTMLDocument
         ? arg

RadzenBlazorDemos/Pages/ButtonPage.razor

@@ -48,6 +48,18 @@
                 <RadzenButton style="margin-bottom: 16px"   Click=@(args => OnClick("Warning button ")) Text="Warning" ButtonStyle="ButtonStyle.Warning" />
             </div>
         </div>
+        <h4>Busy Indicator</h4>
+        <div class="row">
+            <div class="col-xl-6">
+                <h5>Without BusyText</h5>
+                <RadzenButton style="margin: 0 1rem 1rem 0; width: 150px" IsBusy=@busy Click=@OnBusyClick Text="Save" />
+            </div>
+
+            <div class="col-xl-6">
+                <h5>With Busy Text</h5>
+                <RadzenButton style="margin: 0 1rem 1rem 0; width: 200px" Icon="save" BusyText="Saving ..." IsBusy=@busy Click=@OnBusyClick Text="Save" />
+            </div>
+        </div>
     </div>
     <div class="col-xl-6">
         <EventConsole @ref=@console />
@@ -57,9 +69,17 @@
 
 @code {
     EventConsole console;
+    bool busy;
 
     void OnClick(string buttonName)
     {
         console.Log($"{buttonName} clicked");
     }
+
+    async Task OnBusyClick()
+    {
+        busy = true;
+        await Task.Delay(2000);
+        busy = false;
+    }
 }

RadzenBlazorDemos/Pages/CascadingDropDownsPage.razor

@@ -22,14 +22,14 @@
 </RadzenDropDown>
 <br />
 <h3>Order Details</h3>
-<RadzenGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
+<RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
             Data="@(orderDetails.Where(o => o.OrderID == OrderID))" TItem="OrderDetail" ColumnWidth="200px">
     <Columns>
-        <RadzenGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
-        <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
-        <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
+        <RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
+        <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
+        <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
     </Columns>
-</RadzenGrid>
+</RadzenDataGrid>
 <br />
 </RadzenExample>
 @code {

RadzenBlazorDemos/Pages/DashboardPage.razor

@@ -67,9 +67,9 @@
     <div class="col-xl-6 col-lg-12 py-2">
         <RadzenCard>
             <h2>Issue List</h2>
-            <RadzenGrid Data=@filteredIssues Style="height: 500px" AllowFiltering="true" AllowSorting="true">
+            <RadzenDataGrid Data=@filteredIssues Style="height: 500px" AllowFiltering="true" AllowSorting="true">
                 <Columns>
-                    <RadzenGridColumn TItem="Issue" Title="User" Width="200px" Property="User.Login">
+                    <RadzenDataGridColumn TItem="Issue" Title="User" Width="200px" Property="User.Login">
                         <FilterTemplate>
                             <RadzenDropDown AllowClear="true" AllowFiltering="true" Data=@users TextProperty="Login" @bind-Value="selectedUser" Change=@FilterIssues>
                                 <Template Context="user">
@@ -82,13 +82,13 @@
                         <Template Context="issue">
                             <img style="width: 40px; height: 40px; border-radius: 50%;" src=@issue.User.AvatarUrl />@issue.User.Login
                         </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Issue" Property="Title" Title="Title" Width="200px">
+                    </RadzenDataGridColumn>
+                    <RadzenDataGridColumn TItem="Issue" Property="Title" Title="Title" Width="200px">
                         <Template Context="issue">
                             <RadzenLink Path=@issue.Url Text=@issue.Title Target="_blank" />
                         </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Issue" Property="State" Title="State" Width="100px">
+                    </RadzenDataGridColumn>
+                    <RadzenDataGridColumn TItem="Issue" Property="State" Title="State" Width="100px">
                         <FilterTemplate>
                             <RadzenDropDown Style="width: 100%" Data=@issueStates @bind-Value="selectedState" Change=@FilterIssues />
                         </FilterTemplate>
@@ -108,8 +108,8 @@
                                 </div>
                             }
                         </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Issue" Title="Labels" Sortable="false">
+                    </RadzenDataGridColumn>
+                    <RadzenDataGridColumn TItem="Issue" Title="Labels" Sortable="false">
                         <FilterTemplate>
                             <RadzenDropDown Style="width: 100%" AllowClear="true" AllowFiltering="true" Multiple="true" Data=@labels @bind-Value="selectedLabels" Change=@FilterIssues>
                                 <Template Context="label">
@@ -125,9 +125,9 @@
                                 <span style="display: inline-block; color: #fff; margin: 4px; padding: 0 4px; border-radius: 4px; background-color: #@label.Color">@Regex.Replace(label.Name, ":\\w+:", "")</span>
                             }</div>
                         </Template>
-                    </RadzenGridColumn>
+                    </RadzenDataGridColumn>
                 </Columns>
-            </RadzenGrid>
+            </RadzenDataGrid>
         </RadzenCard>
     </div>
     <div class="col-xl-3 col-lg-6 py-2">

RadzenBlazorDemos/Pages/DataGridAdvancedFilterPage.razor

@@ -0,0 +1,38 @@
+@page "/datagrid-advanced-filter"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Advanced Filter Mode</strong></h1>
+
+<RadzenExample Name="DataGridAdvancedFilter" Heading="false">
+    <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" 
+        FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" 
+        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
+        LogicalFilterOperator="LogicalFilterOperator.Or">
+        <Columns>
+            <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
+                <Template Context="data">
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridColumnFilterTemplatePage.razor

@@ -11,20 +11,20 @@
     }
     else
     {
-        <RadzenGrid Data=@filteredEmployees AllowFiltering="true" AllowPaging="true" AllowSorting="true" TItem="Employee" ColumnWidth="200px">
+        <RadzenDataGrid Data=@filteredEmployees FilterMode="FilterMode.Simple" AllowFiltering="true" AllowPaging="true" AllowSorting="true" TItem="Employee" ColumnWidth="200px">
             <Columns>
-                <RadzenGridColumn TItem="Employee" Property="ID" Title="ID" />
-                <RadzenGridColumn TItem="Employee" Property="Name" Title="Name" />
-                <RadzenGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy">
+                <RadzenDataGridColumn TItem="Employee" Property="ID" Title="ID" />
+                <RadzenDataGridColumn TItem="Employee" Property="Name" Title="Name" />
+                <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy">
                     <FilterTemplate>
                         <RadzenDropDown @bind-Value="@currentTOC" TextProperty="Text" ValueProperty="Value" Style="width:100%"
                                         Change=@OnChange
                                         Data="@(Enum.GetValues(typeof(TitleOfCourtesy)).Cast<TitleOfCourtesy>().Select(t => new { Text = $"{t}", Value = t }))" />
 
                     </FilterTemplate>
-                </RadzenGridColumn>
+                </RadzenDataGridColumn>
             </Columns>
-        </RadzenGrid>
+        </RadzenDataGrid>
     }
 </RadzenExample>
 

RadzenBlazorDemos/Pages/DataGridColumnResizingPage.razor

@@ -0,0 +1,55 @@
+@page "/datagrid-column-resizing"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Column Resizing</strong></h1>
+
+<p>Enable column resizing by setting the AllowColumnResizing property to true.</p
+
+<RadzenExample Name="DataGridColumnResizing" Heading="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: 40px; height: 40px; border-radius: 8px;" />
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <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}" />
+            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
+            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
+            <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" />
+            <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
+            <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+
+<EventConsole @ref=@console />
+
+@code {
+    IEnumerable<Employee> employees;
+    EventConsole console;
+
+    void OnColumnResized(DataGridColumnResizedEventArgs<Employee> args)
+    {
+        console.Log($"Resized {args.Column.Title} to {args.Width} pixels");
+    }
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridColumnTemplatePage.razor

@@ -0,0 +1,65 @@
+@page "/datagrid-column-template"
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+@using System.Linq 
+@inject NorthwindContext dbContext
+@inject DialogService DialogService
+
+<h1>DataGrid <strong>Column Template</strong></h1>
+
+<p>The <strong>Template</strong> allows you to customize the way data is displayed.</p>
+
+<p>Common uses: Record numbering, displaying an image depending on property value, 
+    displaying multiple properties in the same column, linking to other pages,
+    data formatting and HTML embedding.
+</p>
+
+<RadzenExample Name="DataGridColumnTemplate" Heading="false" Documentation="false">
+<RadzenDataGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" 
+            Data="@orders" TItem="Order">
+    <Columns>
+        <RadzenDataGridColumn Width="50px" TItem="Order" Title="#" Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
+            <Template Context="data">
+                @(orders.IndexOf(data) + 1)
+            </Template>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn Width="200px" TItem="Order" Property="OrderID" Title="Order ID">
+            <Template Context="data">
+                <RadzenButton ButtonStyle="ButtonStyle.Info" Icon="help" Click=@(() => OpenOrder(data.OrderID)) Text="@data.OrderID.ToString()" />
+            </Template>
+        </RadzenDataGridColumn>
+        <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: 40px; height: 40px; border-radius: 8px;" />
+                @order.Employee?.FirstName @order.Employee?.LastName
+            </Template>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
+            <Template Context="order">
+                @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
+            </Template>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="ShipCountry" />
+    </Columns>
+</RadzenDataGrid>
+</RadzenExample>
+
+@code {
+    RadzenDataGrid<Order> ordersGrid;
+    IList<Order> orders;
+
+    async Task OpenOrder(int orderId)
+    {
+         await DialogService.OpenAsync<DialogCardPage>($"Order {orderId}",
+               new Dictionary<string, object>() { { "OrderID", orderId } },
+               new DialogOptions() { Width = "700px", Height = "530px" });
+    }
+
+    protected override void OnInitialized()
+    {
+        orders = dbContext.Orders.Include("Customer").Include("Employee").ToList();
+    }
+}

RadzenBlazorDemos/Pages/DataGridConditionalTemplatePage.razor

@@ -12,13 +12,13 @@
 
 <RadzenExample Name="DataGridConditionalTemplate" Heading="false" Documentation="false">
     <h3>Order Details</h3>
-    <RadzenGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
+    <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                 Data="@orderDetails" TItem="OrderDetail" ColumnWidth="200px" RowRender="@RowRender" CellRender="@CellRender">
         <Columns>
-            <RadzenGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
-            <RadzenGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
-            <RadzenGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
-            <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity">
+            <RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity">
                 <Template Context="data">
                     @if (data.Quantity > 20)
                     {
@@ -29,10 +29,10 @@
                         <span style='color:black'>@data.Quantity</span>
                     }
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 
 @code {
@@ -48,7 +48,7 @@
         args.Attributes.Add("style", $"font-weight: {(args.Data.Quantity > 20 ? "bold" : "normal")};");
     }
 
-    void CellRender(CellRenderEventArgs<OrderDetail> args)
+    void CellRender(DataGridCellRenderEventArgs<OrderDetail> args)
     {
         if (args.Column.Property == "Quantity")
         {

RadzenBlazorDemos/Pages/DataGridDynamicDataPage.razor

@@ -1,45 +1,51 @@
 @page "/datagrid-dynamic"
+<h1>DataGrid <strong>dynamic</strong> data support</h1>
 
-<RadzenExample Name="DataGridDynamicData">
-    <h3>Binding to IEnumerable of IDictionary</h3>
-    <RadzenGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced"
-                AllowPaging="true" PageSize="5" AllowSorting="true" Data="@data" TItem="IDictionary<string, dynamic>"
-                Count="@count" LoadData="@LoadData">
+<p>
+    Sometimes your data comes from external API and you don't have a C# model for it. This demo shows how to implement such a scenario.
+</p>
+
+<RadzenExample Name="DataGridDynamicData" Documentation="false" Heading="false">
+    <RadzenDataGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced"
+            AllowPaging="true" PageSize="5" AllowSorting="true" Data="@data" TItem="IDictionary<string, object>"
+            IsLoading="@isLoading"
+            Count="@count" LoadData="@LoadData">
         <Columns>
-            <RadzenGridColumn TItem="IDictionary<string, dynamic>" Property="EmployeeID" Title="EmployeeID" Type="integer">
+            <RadzenDataGridColumn TItem="IDictionary<string, object>" Property="EmployeeID" Title="EmployeeID" Type="typeof(int)">
                 <Template>
                     @context["EmployeeID"]
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="IDictionary<string, dynamic>" Property="FirstName" Title="FirstName" Type="string">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="IDictionary<string, object>" Property="FirstName" Title="FirstName" Type="typeof(string)">
                 <Template>
                     @context["FirstName"]
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="IDictionary<string, dynamic>" Property="LastName" Title="LastName" Type="string">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="IDictionary<string, object>" Property="LastName" Title="LastName" Type="typeof(string)">
                 <Template>
                     @context["LastName"]
                 </Template>
-            </RadzenGridColumn>
+            </RadzenDataGridColumn>
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 @code {
-    IEnumerable<IDictionary<string, dynamic>> data;
+    IEnumerable<IDictionary<string, object>> data;
     int count;
+    bool isLoading;
 
     async Task LoadData(LoadDataArgs args)
     {
+        isLoading = true;
         var uri = new Uri("https://services.radzen.com/odata/Northwind/Employees")
             .GetODataUri(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true);
 
         var response = await new HttpClient().SendAsync(new HttpRequestMessage(HttpMethod.Get, uri));
 
-        var result = await response.ReadAsync<ODataServiceResult<IDictionary<string, dynamic>>>();
+        var result = await response.ReadAsync<ODataServiceResult<IDictionary<string, object>>>();
 
         data = result.Value.AsODataEnumerable();
         count = result.Count;
-
-        StateHasChanged();
+        isLoading = false;
     }
 }

RadzenBlazorDemos/Pages/DataGridFilterApiPage.razor

@@ -0,0 +1,40 @@
+@page "/datagrid-filter-api"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Filter API</strong></h1>
+
+<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">
+    <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" 
+        FilterMode="FilterMode.Advanced" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" 
+        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
+        LogicalFilterOperator="LogicalFilterOperator.Or">
+        <Columns>
+            <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
+                <Template Context="data">
+                    <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" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridFooterTotalsPage.razor

@@ -1,62 +1,55 @@
 @page "/datagrid-footer-totals"
-
 @using RadzenBlazorDemos.Data
 @using RadzenBlazorDemos.Models.Northwind
 @using Microsoft.EntityFrameworkCore
-
+@using System.Linq 
 @inject NorthwindContext dbContext
 
-<h1>DataGrid Footer Totals</h1>
+<h1>DataGrid <strong>Footer Totals</strong></h1>
 
-<p>This page demonstrates fetching data from the server using <b>IQueryable</b> bound to a <b>DataGrid</b> with totals in column footers.</p>
+<p>This <strong>FooterTemplate</strong> allows you to display aggregated data in the columne footer.</p>
 
 <RadzenExample Name="DataGridFooterTotals" Heading="false" Documentation="false">
-@if (orders == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <RadzenGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" 
-                Data="@dbContext.Orders.Include("Customer").Include("Employee")" TItem="Order">
-        <Columns>
-            <RadzenGridColumn Width="200px" TItem="Order" Property="OrderID" Title="Order ID">
-                <FooterTemplate>
-                    Displayed orders: <b>@ordersGrid.View.Count()</b> of <b>@orders.Count()</b>
-                </FooterTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
-            <RadzenGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
-                <Template Context="order">
-                    <div>@order.Employee?.LastName</div>
-                    <RadzenImage Path="@order.Employee?.Photo" Style="width:150px" />
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
-                <Template Context="order">
-                    @String.Format("{0:d}", order.OrderDate)
-                </Template>
-                <FooterTemplate>
-                    Last order date: <b>@String.Format("{0:d}", orders.OrderByDescending(o => o.OrderDate).Last().OrderDate)</b>
-                </FooterTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="Freight" Title="Freight">
-                <Template Context="order">
-                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
-                </Template>
-                <FooterTemplate>
-                    Total amount: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orders.Sum(o => o.Freight))</b>
-                </FooterTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
-        </Columns>
-    </RadzenGrid>
-}
+<RadzenDataGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" 
+            Data="@orders" TItem="Order">
+    <Columns>
+        <RadzenDataGridColumn Width="50px" TItem="Order" Title="#" Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
+            <Template>
+                @(orders.IndexOf(context) + 1)
+            </Template>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn Width="200px" TItem="Order" Property="OrderID" Title="Order ID">
+            <FooterTemplate>
+                Displayed orders: <b>@ordersGrid.View.Count()</b> of <b>@orders.Count()</b>
+            </FooterTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
+        <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
+            <Template Context="order">
+                @order.Employee?.FirstName @order.Employee?.LastName
+            </Template>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}">
+            <FooterTemplate>
+                Last order date: <b>@String.Format("{0:d}", orders.OrderByDescending(o => o.OrderDate).Last().OrderDate)</b>
+            </FooterTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
+            <Template Context="order">
+                @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
+            </Template>
+            <FooterTemplate>
+                Total amount: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orders.Sum(o => o.Freight))</b>
+            </FooterTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
+    </Columns>
+</RadzenDataGrid>
 </RadzenExample>
 
 @code {
-    RadzenGrid<Order> ordersGrid;
-    IEnumerable<Order> orders;
+    RadzenDataGrid<Order> ordersGrid;
+    IList<Order> orders;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/DataGridFrozenColumnsPage.razor

@@ -0,0 +1,59 @@
+@page "/datagrid-frozen-columns"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Frozen Columns</strong></h1>
+
+<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" 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" Frozen="@frozen">
+                <HeaderTemplate>
+                    <RadzenCheckBox @bind-Value="frozen" title="Pin/Unpin this column" />
+                </HeaderTemplate>
+                <Template Context="data">
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
+                </Template>
+            </RadzenDataGridColumn>
+            <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}" />
+            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
+            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
+            <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" />
+            <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
+            <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+    bool frozen;
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridInLineEditPage.razor

@@ -12,53 +12,54 @@
 
 <RadzenExample Name="DataGridInLineEdit" Heading="false" Documentation="false">
     <RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add" Click="@InsertRow" />
-    <RadzenGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" EditMode="DataGridEditMode.Single"
+    <RadzenDataGrid @ref="ordersGrid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" EditMode="DataGridEditMode.Single"
                 Data="@orders" TItem="Order" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow">
         <Columns>
-            <RadzenGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
-            <RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer">
+            <RadzenDataGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
+            <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer">
                 <EditTemplate Context="order">
                     <RadzenDropDown @bind-Value="order.CustomerID" Data="@customers" TextProperty="CompanyName" ValueProperty="CustomerID" Style="width:100%" />
                 </EditTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="Employee.LastName" Title="Employee">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Property="Employee.LastName" Title="Employee" Width="300px">
                 <Template Context="order">
-                    <div>@order.Employee?.LastName</div>
-                    <RadzenImage Path="@order.Employee?.Photo" Style="width:150px" />
+                    <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: 40px; height: 40px; border-radius: 8px;" />
                             @context.FirstName @context.LastName
                         </Template>
                     </RadzenDropDown>
                 </EditTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
                 <Template Context="order">
                     @String.Format("{0:d}", order.OrderDate)
                 </Template>
                 <EditTemplate Context="order">
                     <RadzenDatePicker @bind-Value="order.OrderDate" Style="width:100%" />
                 </EditTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="Freight" Title="Freight">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Property="Freight" Title="Freight">
                 <Template Context="order">
                     @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
                 </Template>
                 <EditTemplate Context="order">
                     <RadzenNumeric @bind-Value="order.Freight" Style="width:100%" />
                 </EditTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="ShipName" Title="Ship Name">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name">
                 <EditTemplate Context="order">
                     <RadzenTextBox @bind-Value="order.ShipName" Style="width:100%; display: block" Name="ShipName" />
                     <RadzenRequiredValidator Text="ShipName is required" Component="ShipName" Popup="true" />
                 </EditTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Context="sampleBlazorModelsSampleOrder" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="100px">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Context="sampleBlazorModelsSampleOrder" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="100px">
                 <Template Context="order">
-                    <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => EditRow(order))">
+                    <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => EditRow(order))" @onclick:stopPropagation="true">
                     </RadzenButton>
                 </Template>
                 <EditTemplate Context="order">
@@ -67,23 +68,23 @@
                     <RadzenButton Icon="cancel" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Secondary" Click="@((args) => CancelEdit(order))">
                     </RadzenButton>
                 </EditTemplate>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Context="order" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="70px">
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="70px">
                 <Template Context="order">
-                    <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Small" Click="@(args => DeleteRow(order))">
+                    <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Small" Click="@(args => DeleteRow(order))"  @onclick:stopPropagation="true">
                     </RadzenButton>
                 </Template>
                 <EditTemplate Context="order">
                     <RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="close" Size="ButtonSize.Small" Click="@(args => DeleteRow(order))">
                     </RadzenButton>
                 </EditTemplate>
-            </RadzenGridColumn>
+            </RadzenDataGridColumn>
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 
 @code {
-    RadzenGrid<Order> ordersGrid;
+    RadzenDataGrid<Order> ordersGrid;
     IList<Order> orders;
     IEnumerable<Customer> customers;
     IEnumerable<Employee> employees;

RadzenBlazorDemos/Pages/DataGridLoadDataPage.razor

@@ -5,67 +5,103 @@
 
 @inject NorthwindContext dbContext
 
-<h1>DataGrid</h1>
+<h1>DataGrid <strong>LoadData</strong></h1>
 
-<p>This page demonstrates how to data-bind the Radzen Blazor DataGrid to custom collection via the LoadData event.</p>
+<p>The <code>LoadData</code> event allows you to perform custom paging, sorting and filtering.</p>
 
 <RadzenExample Name="DataGridLoadData" Heading="false" Documentation="false">
-    <RadzenGrid 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>
-            <RadzenGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
-            <RadzenGridColumn TItem="Employee" Property="Photo" Title="Photo" Sortable="false" Filterable="false">
+            <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" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="LastName" Title="Last Name" />
-            <RadzenGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
-            <RadzenGridColumn TItem="Employee" Property="Title" Title="Title" />
-            <RadzenGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
-            <RadzenGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date">
-                <Template Context="data">
-                    @String.Format("{0:d}", data.BirthDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="HireDate" Title="Hire Date">
-                <Template Context="data">
-                    @String.Format("{0:d}", data.HireDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="Address" Title="Address" />
-            <RadzenGridColumn TItem="Employee" Property="City" Title="City" />
-            <RadzenGridColumn TItem="Employee" Property="Region" Title="Region" />
-            <RadzenGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
-            <RadzenGridColumn TItem="Employee" Property="Country" Title="Country" />
-            <RadzenGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
-            <RadzenGridColumn TItem="Employee" Property="Extension" Title="Extension" />
-            <RadzenGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <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}" />
+            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
+            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
+            <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" />
+            <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
+            <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 
+<h3 style="margin-top: 32px">To perform custom data-binding:</h3>
+<ol>
+    <li>Set the Data and Count properties.
+    <pre>
+        <code>&lt;RadzenDataGrid Count="@@count" Data="@@employees"</code>
+    </pre>
+    </li>
+    <li>
+        Handle the LoadData event and update the Data and Count backing fields (<code>employees</code> and <code>count</code> in this case).
+    <pre>
+        <code>
+void LoadData(LoadDataArgs args)
+{
+    var query = dbContext.Employees.AsQueryable();
+
+    if (!string.IsNullOrEmpty(args.Filter))
+    {
+        query = query.Where(args.Filter);
+    }
+
+    if (!string.IsNullOrEmpty(args.OrderBy))
+    {
+        query = query.OrderBy(args.OrderBy);
+    }
+
+    employees = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
+
+    count = dbContext.Employees.Count();
+} 
+        </code>
+    </pre>
+    </li>
+</ol>
 @code {
+    RadzenDataGrid<Employee> grid;
     int count;
     IEnumerable<Employee> employees;
 
-    async Task LoadData(LoadDataArgs args)
+    async Task Reset()
     {
+        grid.Reset(true); 
+        await grid.FirstPage(true);
+    }
+
+    void LoadData(LoadDataArgs args)
+    {
+        // This demo is using https://dynamic-linq.net
         var query = dbContext.Employees.AsQueryable();
 
         if (!string.IsNullOrEmpty(args.Filter))
         {
+            // Filter via the Where method
             query = query.Where(args.Filter);
         }
 
         if (!string.IsNullOrEmpty(args.OrderBy))
         {
+            // Sort via the OrderBy method
             query = query.OrderBy(args.OrderBy);
         }
 
+        // Perform paginv via Skip and Take.
         employees = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
 
+        // Important!!! Make sure the Count property of RadzenDataGrid is set.
         count = dbContext.Employees.Count();
-
-        await InvokeAsync(StateHasChanged);
     }
 }

RadzenBlazorDemos/Pages/DataGridMultipleSelectionPage.razor

@@ -5,55 +5,39 @@
 @using Microsoft.EntityFrameworkCore
 
 @inject NorthwindContext dbContext
+<h1>DataGrid <strong>Multiple Selection</strong></h1>
 
-<RadzenExample Name="DataGridMultipleSelection">
-    <RadzenGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced" AllowPaging="true" PageSize="4"
+<RadzenExample Name="DataGridMultipleSelection" Documentation="false" Heading="false">
+    <RadzenDataGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" PageSize="4"
                 AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="200px"
-                SelectionMode="DataGridSelectionMode.Multiple" @bind-Value=@multipleValues>
+                SelectionMode="DataGridSelectionMode.Multiple" @bind-Value=@selectedEmployees>
         <Columns>
-            <RadzenGridColumn TItem="Employee" Width="40px" Sortable="false" Filterable="false">
+            <RadzenDataGridColumn TItem="Employee" Width="40px" Sortable="false" Filterable="false">
                 <HeaderTemplate>
-                    <RadzenCheckBox TriState="false" TValue="bool" Value="@(employees.Any(i => multipleValues != null && (multipleValues as IEnumerable<Employee>).Contains(i)))"
-                                    Change="@(args => multipleValues = args ? employees : null)" />
+                    <RadzenCheckBox TriState="false" TValue="bool" Value="@(employees.Any(i => selectedEmployees != null && selectedEmployees.Contains(i)))"
+                                    Change="@(args => selectedEmployees = args ? employees.ToList() : null)" />
                 </HeaderTemplate>
                 <Template Context="data">
-                    <RadzenCheckBox TriState="false" Value="@(multipleValues != null && (multipleValues as IEnumerable<Employee>).Contains(data))" />
+                    <RadzenCheckBox TriState="false" Value="@(selectedEmployees != null && selectedEmployees.Contains(data))" />
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
-            <RadzenGridColumn TItem="Employee" Property="Photo" Title="Photo" Sortable="false" Filterable="false">
+            </RadzenDataGridColumn>
+            <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" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
+                    @data.FirstName @data.LastName
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="LastName" Title="Last Name" />
-            <RadzenGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
-            <RadzenGridColumn TItem="Employee" Property="Title" Title="Title" />
-            <RadzenGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
-            <RadzenGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date">
-                <Template Context="data">
-                    @String.Format("{0:d}", data.BirthDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="HireDate" Title="Hire Date">
-                <Template Context="data">
-                    @String.Format("{0:d}", data.HireDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="Address" Title="Address" />
-            <RadzenGridColumn TItem="Employee" Property="City" Title="City" />
-            <RadzenGridColumn TItem="Employee" Property="Region" Title="Region" />
-            <RadzenGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
-            <RadzenGridColumn TItem="Employee" Property="Country" Title="Country" />
-            <RadzenGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
-            <RadzenGridColumn TItem="Employee" Property="Extension" Title="Extension" />
-            <RadzenGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
+            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 @code {
     IEnumerable<Employee> employees;
-    object multipleValues;
+    IList<Employee> selectedEmployees;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/DataGridMultipleSortPage.razor

@@ -0,0 +1,29 @@
+@page "/datagrid-multi-sort"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Multiple Column Sorting</strong></h1>
+
+<RadzenExample Name="DataGridMultipleSort" Heading="false">
+    <RadzenDataGrid PageSize="5" AllowMultiColumnSorting="true" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px">
+        <Columns>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridODataPage.razor

@@ -4,55 +4,72 @@
 
 @inject NorthwindODataService service
 
-<h1>DataGrid</h1>
+<h1>DataGrid <strong>OData</strong></h1>
 
-<p>This page demonstrates how to data-bind the Radzen Blazor DataGrid to OData service via the LoadData event.</p>
+<p>Use the <code>LoadData</code> event to get data from a REST service.</p>
 
-<RadzenExample Name="DataGridOData" Heading="false" Documentation="false">
-<RadzenGrid Count="@count" style="height:400px" Data="@employees" LoadData="@LoadData" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced" AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="4" TItem="Employee" ColumnWidth="200px">
+<RadzenExample Name="DataGridOData" Heading="false" Documentation="false" AdditionalSourceCodePages="@(new [] {"../Services/NorthwindODataService.cs"})">
+<RadzenDataGrid IsLoading="@isLoading" Count="@count" Data="@employees" LoadData="@LoadData" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced" AllowSorting="true" AllowFiltering="true" AllowPaging="true" PageSize="4" TItem="Employee" ColumnWidth="200px">
     <Columns>
-        <RadzenGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
-        <RadzenGridColumn TItem="Employee" Property="Photo" Title="Photo" Sortable="false" Filterable="false">
+        <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" />
+                <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
             </Template>
-        </RadzenGridColumn>
-        <RadzenGridColumn TItem="Employee" Property="LastName" Title="Last Name" />
-        <RadzenGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
-        <RadzenGridColumn TItem="Employee" Property="Title" Title="Title" />
-        <RadzenGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
-        <RadzenGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date">
-            <Template Context="data">
-                @String.Format("{0:d}", data.BirthDate)
-            </Template>
-        </RadzenGridColumn>
-        <RadzenGridColumn TItem="Employee" Property="HireDate" Title="Hire Date">
-            <Template Context="data">
-                @String.Format("{0:d}", data.HireDate)
-            </Template>
-        </RadzenGridColumn>
-        <RadzenGridColumn TItem="Employee" Property="Address" Title="Address" />
-        <RadzenGridColumn TItem="Employee" Property="City" Title="City" />
-        <RadzenGridColumn TItem="Employee" Property="Region" Title="Region" />
-        <RadzenGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
-        <RadzenGridColumn TItem="Employee" Property="Country" Title="Country" />
-        <RadzenGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
-        <RadzenGridColumn TItem="Employee" Property="Extension" Title="Extension" />
-        <RadzenGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+        <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+        <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}" />
+        <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
+        <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
+        <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
+        <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" />
+        <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
+        <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+        <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
+        <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" />
+        <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
     </Columns>
-</RadzenGrid>
+</RadzenDataGrid>
 </RadzenExample>
-
+<h3 style="margin-top: 32px">To data-bind to a service:</h3>
+<ol>
+    <li>Set the Data and Count properties.
+    <pre>
+        <code>&lt;RadzenDataGrid Count="@@count" Data="@@employees"</code>
+    </pre>
+    </li>
+    <li>
+        Handle the LoadData event and update the Data and Count backing fields (<code>employees</code> and <code>count</code> in this case).
+    <pre>
+        <code>
+async Task LoadData(LoadDataArgs args)
+{
+    var result = await service.GetEmployees(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true);
+    employees = result.Value.AsODataEnumerable();
+    count = result.Count;
+}
+        </code>
+    </pre>
+    </li>
+</ol>
 @code {
+    bool isLoading;
     int count;
     IEnumerable<Employee> employees;
 
     async Task LoadData(LoadDataArgs args)
     {
+        isLoading = true;
+
         var result = await service.GetEmployees(filter: args.Filter, top: args.Top, skip: args.Skip, orderby: args.OrderBy, count: true);
+        // Update the Data property
         employees = result.Value.AsODataEnumerable();
+        // Update the count
         count = result.Count;
 
-        StateHasChanged();
+        isLoading = false;
     }
 }

RadzenBlazorDemos/Pages/DataGridPage.razor

@@ -6,40 +6,35 @@
 
 @inject NorthwindContext dbContext
 
-<RadzenExample Name="DataGrid">
-    <RadzenGrid PagerPosition="PagerPosition.TopAndBottom" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterMode="FilterMode.Advanced" AllowPaging="true" PageSize="4"
-                AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="200px" AllowColumnResize="true" LogicalFilterOperator="LogicalFilterOperator.Or">
+<h1>DataGrid</h1>
+
+<p>Display tabular data with ease. Perform paging, sorting and filtering through Entity Framework without extra code.</p>
+
+<RadzenExample Name="DataGrid" 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">
         <Columns>
-            <RadzenGridColumn TItem="Employee" Property="EmployeeID" Title="Employee ID" />
-            <RadzenGridColumn TItem="Employee" Property="Photo" Title="Photo" Sortable="false" Filterable="false">
+            <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" />
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="LastName" Title="Last Name" />
-            <RadzenGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
-            <RadzenGridColumn TItem="Employee" Property="Title" Title="Title" />
-            <RadzenGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
-            <RadzenGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date">
-                <Template Context="data">
-                    @String.Format("{0:d}", data.BirthDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="HireDate" Title="Hire Date">
-                <Template Context="data">
-                    @String.Format("{0:d}", data.HireDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Employee" Property="Address" Title="Address" />
-            <RadzenGridColumn TItem="Employee" Property="City" Title="City" />
-            <RadzenGridColumn TItem="Employee" Property="Region" Title="Region" />
-            <RadzenGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
-            <RadzenGridColumn TItem="Employee" Property="Country" Title="Country" />
-            <RadzenGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
-            <RadzenGridColumn TItem="Employee" Property="Extension" Title="Extension" />
-            <RadzenGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <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}" />
+            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Address" Title="Address" />
+            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
+            <RadzenDataGridColumn TItem="Employee" Property="Region" Title="Region" />
+            <RadzenDataGridColumn TItem="Employee" Property="PostalCode" Title="Postal Code" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="HomePhone" Title="Home Phone" />
+            <RadzenDataGridColumn TItem="Employee" Property="Extension" Title="Extension" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 @code {
     IEnumerable<Employee> employees;

RadzenBlazorDemos/Pages/DataGridPagerApiPage.razor

@@ -0,0 +1,58 @@
+@page "/datagrid-pager-api"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Pager API</strong></h1>
+
+<RadzenExample Name="DataGridPagerApi" Heading="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" PageSizeOptions="@pageSizeOptions">
+        <Columns>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+                <Template Context="detail">
+                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
+                <Template Context="detail">
+                    @String.Format("{0}%", detail.Discount * 100)
+                </Template>
+            </RadzenDataGridColumn>
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+
+@code {
+    RadzenDataGrid<OrderDetail> dataGrid;
+    IEnumerable<int> pageSizeOptions = new int[] { 10, 20, 30 };
+    IEnumerable<OrderDetail> orderDetails;
+
+    async Task FirstPage()
+    {
+        await dataGrid.FirstPage();
+    }
+    async Task TenthPage()
+    {
+        await dataGrid.GoToPage(9);
+    }
+    async Task LastPage()
+    {
+        await dataGrid.LastPage();
+    }
+
+    protected override void OnInitialized()
+    {
+        orderDetails = dbContext.OrderDetails;
+    }
+}

RadzenBlazorDemos/Pages/DataGridPagerPositionPage.razor

@@ -0,0 +1,45 @@
+@page "/datagrid-pager-position"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Pager Position</strong></h1>
+
+<RadzenExample Name="DataGridPagerPosition" Heading="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" 
+                Data="@(Enum.GetValues(typeof(PagerPosition)).Cast<PagerPosition>().Select(t => new { Text = $"{t}", Value = t }))" />
+    </div>
+   <RadzenDataGrid Data="@orderDetails" TItem="OrderDetail" PagerPosition="@pagerPosition" AllowPaging="true" AllowSorting="true">
+        <Columns>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+                <Template Context="detail">
+                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
+                <Template Context="detail">
+                    @String.Format("{0}%", detail.Discount * 100)
+                </Template>
+            </RadzenDataGridColumn>
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+
+@code {
+    PagerPosition pagerPosition = PagerPosition.Bottom;
+
+    IEnumerable<OrderDetail> orderDetails;
+
+    protected override void OnInitialized()
+    {
+        orderDetails = dbContext.OrderDetails;
+    }
+}

RadzenBlazorDemos/Pages/DataGridSimpleFilterPage.razor

@@ -0,0 +1,38 @@
+@page "/datagrid-simple-filter"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Simple Filter Mode</strong></h1>
+
+<RadzenExample Name="DataGridSimpleFilter" Heading="false">
+    <RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" 
+        FilterMode="FilterMode.Simple" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" 
+        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
+        LogicalFilterOperator="LogicalFilterOperator.Or">
+        <Columns>
+            <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
+                <Template Context="data">
+                    <RadzenImage Path="@data.Photo" style="width: 40px; height: 40px; border-radius: 8px;" />
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridSingleSelectionPage.razor

@@ -0,0 +1,53 @@
+@page "/datagrid-single-selection"
+@using Radzen
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+<h1>DataGrid <strong>Single Selection</strong></h1>
+
+<RadzenExample Name="DataGridSingleSelection" Documentation="false" Heading="false">
+    <div style="display: flex; align-items: center; margin-bottom: 16px">
+    <RadzenButton Click="@ClearSelection" Text="Clear Selection" />
+    @if (selectedEmployees?.Any() == true)
+    {
+    <div style="margin-left: 16px">
+        Selected Employee: @selectedEmployees[0].FirstName @selectedEmployees[0].LastName
+    </div>
+    }
+    </div>
+
+    <RadzenDataGrid AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="true" PageSize="4"
+                AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="200px"
+                SelectionMode="DataGridSelectionMode.Single" @bind-Value=@selectedEmployees>
+        <Columns>
+            <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: 40px; height: 40px; border-radius: 8px;" />
+                    @data.FirstName @data.LastName
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
+            <RadzenDataGridColumn TItem="Employee" Property="HireDate" Title="Hire Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="City" Title="City" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+    IList<Employee> selectedEmployees;
+
+    void ClearSelection()
+    {
+        selectedEmployees = null;
+    }
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+        selectedEmployees = employees.Take(1).ToList();
+    }
+}

RadzenBlazorDemos/Pages/DataGridSortApiPage.razor

@@ -0,0 +1,31 @@
+@page "/datagrid-sort-api"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Sort API</strong></h1>
+
+<p>Set the initial sort order of your RadzenDataGrid via the <code>SortOrder</code> column property.</p>
+
+<RadzenExample Name="DataGridSortApi" Heading="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"  />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridSortPage.razor

@@ -0,0 +1,29 @@
+@page "/datagrid-sort"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Sorting</strong></h1>
+
+<RadzenExample Name="DataGridSort" Heading="false">
+    <RadzenDataGrid PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px">
+        <Columns>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="BirthDate" Title="Birth Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Employee" Property="Country" Title="Country" />
+            <RadzenDataGridColumn TItem="Employee" Property="Notes" Title="Notes" />
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<Employee> employees;
+
+    protected override void OnInitialized()
+    {
+        employees = dbContext.Employees;
+    }
+}

RadzenBlazorDemos/Pages/DataGridVirtualizationLoadDataPage.razor

@@ -0,0 +1,57 @@
+@page "/datagrid-virtualization-loaddata"
+@using System.Linq.Dynamic.Core
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Custom Virtualization</strong></h1>
+
+<p>
+    RadzenDataGrid supports virtualization with custom data-binding scenarios. Handle the <code>LoadData</code> event as usual.
+</p>
+<RadzenExample Name="DataGridVirtualizationLoadData" Documentation="false" Heading="false">
+    <RadzenDataGrid Data="@orderDetails" Count="@count" LoadData="@LoadData" TItem="OrderDetail" AllowVirtualization="true" Style="height:400px"
+                    AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" LogicalFilterOperator="LogicalFilterOperator.Or"
+                    AllowSorting="true">
+        <Columns>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+                <Template Context="detail">
+                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
+                <Template Context="detail">
+                    @String.Format("{0}%", detail.Discount * 100)
+                </Template>
+            </RadzenDataGridColumn>
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    int count;
+    IEnumerable<OrderDetail> orderDetails;
+
+    void LoadData(LoadDataArgs args)
+    {
+        var query = dbContext.OrderDetails.AsQueryable();
+
+        if (!string.IsNullOrEmpty(args.Filter))
+        {
+            query = query.Where(args.Filter);
+        }
+
+        if (!string.IsNullOrEmpty(args.OrderBy))
+        {
+            query = query.OrderBy(args.OrderBy);
+        }
+
+        orderDetails = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();
+
+        count = dbContext.OrderDetails.Count();
+    }
+}

RadzenBlazorDemos/Pages/DataGridVirtualizationPage.razor

@@ -0,0 +1,45 @@
+@page "/datagrid-virtualization"
+
+@using RadzenBlazorDemos.Data
+@using RadzenBlazorDemos.Models.Northwind
+@using Microsoft.EntityFrameworkCore
+
+@inject NorthwindContext dbContext
+
+<h1>DataGrid <strong>Virtualization</strong></h1>
+
+<p>
+Virtualization allows you to render large amounts of data on demand. The RadzenDataGrid component uses Entity Framework to query the visible data.
+</p>
+<p>
+    Just set the <code>AllowVirtualization</code> property to <code>true</code>. Requires .NET Core 5.0+.
+</p>
+<RadzenExample Name="DataGridVirtualization" Documentation="false" Heading="false">
+    <RadzenDataGrid Data="@orderDetails" TItem="OrderDetail" AllowVirtualization="true" Style="height:400px"
+                    AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" LogicalFilterOperator="LogicalFilterOperator.Or"
+                    AllowSorting="true">
+        <Columns>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+                <Template Context="detail">
+                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
+                <Template Context="detail">
+                    @String.Format("{0}%", detail.Discount * 100)
+                </Template>
+            </RadzenDataGridColumn>
+        </Columns>
+    </RadzenDataGrid>
+</RadzenExample>
+@code {
+    IEnumerable<OrderDetail> orderDetails;
+
+    protected override void OnInitialized()
+    {
+        orderDetails = dbContext.OrderDetails;
+    }
+}

RadzenBlazorDemos/Pages/DialogCardPage.razor

@@ -35,14 +35,14 @@
     <div class="row">
         <div class="col-md-12">
             <h3>Order Details</h3>
-            <RadzenGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
+            <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                         Data="@(orderDetails.Where(o => o.OrderID == OrderID))" TItem="OrderDetail" ColumnWidth="200px">
                 <Columns>
-                    <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
-                    <RadzenGridColumn TItem="OrderDetail" Property="Order.OrderDate" Title="OrderDate" />
-                    <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
+                    <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
+                    <RadzenDataGridColumn TItem="OrderDetail" Property="Order.OrderDate" Title="OrderDate" />
+                    <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
                 </Columns>
-            </RadzenGrid>
+            </RadzenDataGrid>
         </div>
     </div>
 </RadzenCard>