Radzen.Blazor updated

* Make the Close method of DialogService return a Task so it can be await-ed.

* null ref. exception fixed

* Use a separate component to render the dialog.

* Null ref. exception fixed

Co-authored-by: Atanas Korchev <akorchev@gmail.com>

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

@@ -431,6 +431,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; }
@@ -201,6 +218,12 @@ namespace Radzen
         Vertical
     }
 
+    public enum SortOrder
+    {
+        Ascending,
+        Descending
+    }
+
     public enum ButtonType
     {
         Button,
@@ -250,6 +273,19 @@ namespace Radzen
         EndsWith
     }
 
+    public enum FilterOperator
+    {
+        Equals,
+        NotEquals,
+        LessThan,
+        LessThanOrEquals,
+        GreaterThan,
+        GreaterThanOrEquals,
+        Contains,
+        StartsWith,
+        EndsWith
+    }
+
     public enum TextAlign
     {
         Left,
@@ -257,11 +293,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 +326,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,7 +447,15 @@ 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();
         }
@@ -483,6 +550,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

@@ -95,24 +95,34 @@ namespace Radzen
             });
         }
 
+        private object closingDialog = null;
+
         public void Close(dynamic result = null)
         {
-            OnClose?.Invoke(result);
-
-            var dialog = dialogs.LastOrDefault();
-            if (dialog != null)
+            if (closingDialog == null)
             {
-                dialogs.Remove(dialog);
-            }
+                closingDialog = dialogs.LastOrDefault();
 
-            var task = tasks.LastOrDefault();
-            if (task != null && task.Task != null && !task.Task.IsCompleted)
-            {
-                task.SetResult(result);
-                tasks.Remove(task);
+                if (closingDialog != null)
+                {
+                    OnClose?.Invoke(result);
+                    dialogs.Remove(closingDialog);
+                }
+
+                var task = tasks.LastOrDefault();
+                if (task != null && task.Task != null && !task.Task.IsCompleted)
+                {
+                    task.SetResult(result);
+                    tasks.Remove(task);
+                }
             }
         }
 
+        internal void DidCloseDialog()
+        {
+            closingDialog = null;
+        }
+
         public void Dispose()
         {
             UriHelper.LocationChanged -= UriHelper_OnLocationChanged;

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,49 @@ 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))
+                {
+                    var value = (string)Convert.ChangeType(column.GetFilterValue(), typeof(string));
+                    var 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));
+                        }
+                        else
+                        {
+                            whereList.Add($"({GetColumnFilter(column)} {booleanOperator} {GetColumnFilter(column, 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());
@@ -152,6 +221,79 @@ namespace Radzen
             return "";
         }
 
+        private static string GetColumnFilter<T>(RadzenDataGridColumn<T> column, bool second = false)
+        {
+            var property = PropertyAccess.GetProperty(column.GetFilterProperty());
+
+            if (property.IndexOf(".") != -1)
+            {
+                property = $"({property})";
+            }
+
+            if (column.FilterPropertyType == typeof(string))
+            {
+                property = $@"({property} == null ? """" : {property})";
+            }
+
+            var columnFilterOperator = !second ? column.GetFilterOperator() : column.GetSecondFilterOperator();
+
+            var linqOperator = LinqFilterOperators[columnFilterOperator];
+            if (linqOperator == null)
+            {
+                linqOperator = "==";
+            }
+
+            var value = !second ? (string)Convert.ChangeType(column.GetFilterValue(), typeof(string)) :
+                (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
+
+            if (column.FilterPropertyType == typeof(string))
+            {
+                string filterCaseSensitivityOperator = column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
+
+                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 (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";
+
+                return $@"{property} {linqOperator} DateTime(""{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;
@@ -218,6 +360,68 @@ 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 $"{property} eq {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 +470,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,6 +584,75 @@ 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);

Radzen.Blazor/Radzen.Blazor.csproj

@@ -8,7 +8,7 @@
     <IsPackable>true</IsPackable>
     <PackageId>Radzen.Blazor</PackageId>
     <Product>Radzen.Blazor</Product>
-    <Version>3.2.8</Version>
+    <Version>3.3.2</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/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/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/RadzenDataGridCell.razor

@@ -0,0 +1,123 @@
+@typeparam TItem
+<td style="@Style" @attributes="@Attributes" 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 CssClass;
+    }
+}

Radzen.Blazor/RadzenDataGridColumn.razor

@@ -0,0 +1,389 @@
+@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)
+    {
+        return propertyValueGetter != null ? propertyValueGetter(item) : !string.IsNullOrEmpty(Property) ? PropertyAccess.GetValue(item, Property) : "";
+    }
+
+    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;
+                    return !string.IsNullOrEmpty(w) && w.Contains("px") ? int.Parse(w.Replace("px", "")) : 200;
+                });
+
+            style.Add($"left:{left}px");
+        }
+
+        if (isHeaderOrFooterCell && !Frozen && Grid.ColumnsCollection.Where(c => c.Visible && c.Frozen).Any())
+        {
+            style.Add("z-index:0");
+        }
+
+        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 };
+    }
+
+    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) && 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,196 @@
+@typeparam TItem
+@implements IRadzenForm
+@implements IDisposable
+<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 if (!string.IsNullOrEmpty(column.Property))
+                            {
+                                @if (!string.IsNullOrEmpty(column.FormatString))
+                                {
+                                    @(String.Format(column.FormatString, PropertyAccess.GetValue(Item, column.Property)));
+                                }
+                                else if (!string.IsNullOrEmpty(column.Property))
+                                {
+                                    @(PropertyAccess.GetValue(Item, column.Property));
+                                }
+                            }
+                        </span>
+                    </td>
+                </CascadingValue>
+            }
+            else
+            {
+                <RadzenDataGridCell Grid="@this.Grid" Item="@Item"
+                                    Style="@column.GetStyle(true)" CssClass="@(column.CssClass + " " + Grid.getFrozenColumnClass(column, Columns))" Attributes="@(cellAttr)">
+                    <span class="rz-cell-data">
+                        @if (Item != null)
+                        {
+                            @if (column.Template != null)
+                            {
+                                @column.Template(Item)
+                            }
+                            else if (!string.IsNullOrEmpty(column.Property))
+                            {
+                                @if (!string.IsNullOrEmpty(column.FormatString))
+                                {
+                                    @(String.Format(column.FormatString, PropertyAccess.GetValue(Item, column.Property)));
+                                }
+                                else if (!string.IsNullOrEmpty(column.Property))
+                                {
+                                    @(PropertyAccess.GetValue(Item, column.Property));
+                                }
+                            }
+                        }
+                    </span>
+                </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();
+    }
+
+    Tuple<Radzen.RowRenderEventArgs<TItem>, IReadOnlyDictionary<string, object>> rowArgs;
+    protected override void OnInitialized()
+    {
+        rowArgs = Grid.RowAttributes(Item);
+
+        if (Grid.IsVirtualizationAllowed() && Item != null)
+        {
+            Index = Grid.GetItemIndex(Item);
+        }
+    }
+
+    public void Dispose()
+    {
+        if (Grid.IsVirtualizationAllowed() && Item != null)
+        {
+            Grid?.RemoveItem(Item);
+        }
+    }
+}

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>
@@ -179,7 +179,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="@(async() => { if (!Disabled) { Value = CurrentDate; await OnChange(); await monthDropDown?.ClosePopup(); await yearDropDown?.ClosePopup(); } })"
                         onmouseup="@($"Radzen.closePopup('{PopupID}')")">
                     <span class="rz-button-text">Ok</span>
                 </button>
@@ -190,6 +190,9 @@
     </div>
 }
 @code {
+    RadzenDropDown<int> monthDropDown;
+    RadzenDropDown<int> yearDropDown;
+
     class NameValue
     {
         public string Name { get; set; }

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>();
 
@@ -88,7 +32,10 @@
             await JSRuntime.InvokeAsync<string>("Radzen.closeDialog");
         }
 
-        await InvokeAsync(() => { StateHasChanged(); });
+        await InvokeAsync(() => 
+        { 
+            StateHasChanged(); 
+        });
     }
 
     public void Dispose()

Radzen.Blazor/RadzenDropDown.razor

@@ -79,7 +79,7 @@
             }
             @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">
@@ -274,4 +274,9 @@
 
         JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
     }
+
+    internal async System.Threading.Tasks.Task ClosePopup()
+    {
+        await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+    }
 }

Radzen.Blazor/RadzenGrid.razor

@@ -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();

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

@@ -0,0 +1,76 @@
+@implements IDisposable
+
+<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; }
+
+    public void Dispose()
+    {
+        Service.DidCloseDialog();
+    }
+
+    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/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/_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;
@@ -710,3 +710,72 @@ $grid-button-line-height: $grid-button-height !default;
 .rz-grid-filter-active {
   color: $default-link !important;
 }
+
+.rz-data-grid {
+    border: 1px solid #ccc;
+    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 > ::deep 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/wwwroot/Radzen.Blazor.js

@@ -594,7 +594,7 @@ window.Radzen = {
     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 };
+    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;

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: 32px; height: 32px; border-radius: 50%;" />
+                </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: 32px; height: 32px; border-radius: 50%;" />
+                </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: 32px; height: 32px; border-radius: 50%" />
+                @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: 32px; height: 32px; border-radius: 50%;" />
+                </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,66 +1,54 @@
 @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="@orders" TItem="Order">
-        <Columns>
-            <RadzenGridColumn Width="50px" TItem="Order" Title="Nr." Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
-                <Template>
-                    @(orders.IndexOf(context) + 1)
-                </Template>
-            </RadzenGridColumn>
-            <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;
+    RadzenDataGrid<Order> ordersGrid;
     IList<Order> orders;
 
     protected override void OnInitialized()

RadzenBlazorDemos/Pages/DataGridFrozenColumnsPage.razor

@@ -0,0 +1,46 @@
+@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" PageSize="5" AllowPaging="true" AllowSorting="true" Data="@employees" TItem="Employee" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or">
+        <Columns>
+            <RadzenDataGridColumn TItem="Employee" Property="EmployeeID" Filterable="false" Title="ID" Frozen="true" Width="50px" TextAlign="TextAlign.Center" />
+            <RadzenDataGridColumn TItem="Employee" Title="Photo" Sortable="false" Filterable="false" Width="200px" >
+                <Template Context="data">
+                    <RadzenImage Path="@data.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
+                </Template>
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" Frozen="true" />
+            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" Width="150px"/>
+            <RadzenDataGridColumn TItem="Employee" Property="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;
+
+    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: 32px; height: 32px; border-radius: 50%;" />
+                    @order.Employee?.FirstName @order.Employee?.LastName
                 </Template>
                 <EditTemplate Context="order">
                     <RadzenDropDown @bind-Value="order.EmployeeID" Data="@employees" ValueProperty="EmployeeID" Style="width:100%">
                         <Template>
+                            <RadzenImage Path="@context.Photo" style="width: 32px; height: 32px; border-radius: 50%;" />
                             @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,95 @@
 
 @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">
+    <RadzenDataGrid 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: 32px; height: 32px; border-radius: 50%;" />
                 </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 {
     int count;
     IEnumerable<Employee> employees;
 
-    async Task LoadData(LoadDataArgs args)
+    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: 32px; height: 32px; border-radius: 50%" />
+                    @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: 32px; height: 32px; border-radius: 50%;" />
             </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: 32px; height: 32px; border-radius: 50%;" />
                 </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">
+        <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<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: 32px; height: 32px; border-radius: 50%;" />
+                </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: 32px; height: 32px; border-radius: 50%" />
+                    @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>

RadzenBlazorDemos/Pages/DialogPage.razor

@@ -1,19 +1,19 @@
 @page "/dialog"
 @using System.Timers
 @inject DialogService DialogService
+@implements IDisposable
 
-<RadzenExample Name="Dialog" Documentation="true" AdditionalSourceCodePages=@(new List<string>() { "DialogCardPage.razor" })>
+<RadzenExample Name="Dialog" Documentation="true" AdditionalSourceCodePages=@(new [] { "DialogCardPage.razor" })>
     <div class="row">
         <div class="col-xl-6">
-            <h3>Dialog</h3>
-            <RadzenButton Text=@($"Show OrderID: {orderID} details") Click=@(args => DialogService.Open<DialogCardPage>($"Order {orderID}",
-                        new Dictionary<string, object>() { { "OrderID", orderID } },
-                        new DialogOptions(){ Width = "700px", Height = "530px" })) />
-
-            <h3 style="margin-top: 20px;">Simple Dialog</h3>
+            <h3>Open page as a dialog</h3>
+            <RadzenButton Text=@($"Show OrderID: {orderID} details") Click=@OpenOrder />
+            <h3 style="margin-top: 20px;">Inline Dialog</h3>
             <RadzenButton Text="Show dialog with inline Blazor content" Click=@ShowInlineDialog />
-            <h3 style="margin-top: 20px;">Busy Dialog</h3>
-            <RadzenButton Text="Show busy dialog" Click=@ShowBusyDialog />
+            <h3 style="margin-top: 20px;">Busy Dialog with a string message</h3>
+            <RadzenButton Text="Show busy dialog" Click=@(args => ShowBusyDialog(true)) />
+            <h3 style="margin-top: 20px;">Busy Dialog with markup</h3>
+            <RadzenButton Text="Show busy dialog" Click=@(args => ShowBusyDialog(false)) />
             <h3 style="margin-top: 20px;">Confirm Dialog</h3>
             <RadzenButton Text="Show confirm dialog" Click=@(args => DialogService.Confirm("Are you sure?", "MyTitle", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" })) />
         </div>
@@ -33,6 +33,13 @@
         DialogService.OnClose += Close;
     }
 
+    public void Dispose()
+    {
+        // The DialogService is a singleton so it is advisable to unsubscribe.
+        DialogService.OnOpen -= Open;
+        DialogService.OnClose -= Close;
+    }
+
     void Open(string title, Type type, Dictionary<string, object> parameters, DialogOptions options)
     {
         console.Log("Dialog opened");
@@ -40,10 +47,19 @@
 
     void Close(dynamic result)
     {
-        console.Log($"Dialog closed with result: {result}");
+        console.Log($"Dialog closed");
     }
 
-    async Task ShowInlineDialog() => await DialogService.OpenAsync("Simple Dialog", ds =>
+    public async Task OpenOrder()
+    {
+        await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
+               new Dictionary<string, object>() { { "OrderID", orderID } },
+               new DialogOptions() { Width = "700px", Height = "530px" });
+    }
+
+    async Task ShowInlineDialog()
+    {
+     var result = await DialogService.OpenAsync("Simple Dialog", ds =>
         @<div>
             <p Style="margin-bottom: 1rem">Confirm?</p>
             <div class="row">
@@ -54,49 +70,64 @@
                     Order ID: @orderID
                 </div>
             </div>
-    </div>);
+        </div>);
+    
+      console.Log($"Dialog result: {result}");
+    }
 
-    async Task ShowBusyDialog()
+    async Task ShowBusyDialog(bool withMessageAsString)
     {
-        var timer = new Timer(2000);
-        timer.Elapsed += (sender, e) => 
-        { 
-            DialogService.Close(); 
-            timer.Stop(); 
-        };
-        timer.Start();
+        InvokeAsync(async () =>
+        {
+            // Simulate background task
+            await Task.Delay(2000);
 
-        await BusyDialog("Busy...");
+            // Close the dialog
+            DialogService.Close();
+        });
+
+        if (withMessageAsString)
+        {
+            await BusyDialog("Busy ...");
+        }
+        else
+        {
+            await BusyDialog();
+        }
     }
 
     // Busy dialog from markup
-    async Task BusyDialog() => await DialogService.OpenAsync("", ds =>
-        @<div>
-            <div class="row">
-                <div class="col-md-12">
-                    Loading...
+    async Task BusyDialog()
+    {
+        await DialogService.OpenAsync("", ds =>
+            @<div>
+                <div class="row">
+                    <div class="col-md-12">
+                        Loading...
+                    </div>
                 </div>
-            </div>
-    </div>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto" });
+        </div>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto" });
+    }
 
     // Busy dialog from string
-    async Task BusyDialog(string message) => await DialogService.OpenAsync("", ds =>
+    async Task BusyDialog(string message)
     {
-        RenderFragment content = b =>
+        await DialogService.OpenAsync("", ds =>
         {
-            var i = 0;
+            RenderFragment content = b =>
+            {
+                b.OpenElement(0, "div");
+                b.AddAttribute(1, "class", "row");
 
-            b.OpenElement(i++, "div");
-            b.AddAttribute(i++, "class", "row");
+                b.OpenElement(2, "div");
+                b.AddAttribute(3, "class", "col-md-12");
 
-            b.OpenElement(i++, "div");
-            b.AddAttribute(i++, "class", "col-md-12");
+                b.AddContent(4, message);
 
-            b.AddContent(i++, message);
-
-            b.CloseElement();
-            b.CloseElement();
-        };
-        return content;
-    }, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto" });
+                b.CloseElement();
+                b.CloseElement();
+            };
+            return content;
+        }, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto" });
+    }
 }

RadzenBlazorDemos/Pages/ExportToExcelCsvPage.razor

@@ -13,23 +13,23 @@
 
 <RadzenExample Name="ExportToExcelCsv" Heading="false" Documentation="false">
     <RadzenButton Text="Excel" Icon="grid_on" Click="@(args => Export("excel"))" Style="margin-bottom:20px" /><RadzenButton Text="CSV" Icon="wrap_text" Click="@(args => Export("csv"))" Style="margin-left:20px;margin-bottom:20px;" />
-    <RadzenGrid @ref="grid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@orderDetails" TItem="OrderDetail">
+    <RadzenDataGrid @ref="grid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@orderDetails" TItem="OrderDetail">
         <Columns>
-            <RadzenGridColumn TItem="OrderDetail" Property="OrderID" Title="OrderID" />
-            <RadzenGridColumn TItem="OrderDetail" Property="ProductID" Title="ProductID" />
-            <RadzenGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+            <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>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
-            <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
+            <RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount" FormatString="{0:P}" />
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 
 @code {
-    RadzenGrid<OrderDetail> grid;
+    RadzenDataGrid<OrderDetail> grid;
 
     IEnumerable<OrderDetail> orderDetails;
 

RadzenBlazorDemos/Pages/Index.razor

@@ -8,13 +8,24 @@
       Radzen Blazor Components is a <strong>free and open source</strong> set of 60+ native Blazor UI controls.
     </h2>
     <p>
-      <NavLink class="ui-button btn-primary" style="padding: .5rem 1rem; margin: 1rem 0; display: inline-block;" href="/get-started">Get started</NavLink>
+      <NavLink class="rz-button btn-primary" style="padding: .5rem 1rem; margin: 1rem 0; display: inline-block;" href="/get-started">Get started</NavLink>
     </p>
   </div>
   <div class="col">
     <img src="images/hero.png" alt="Application created with Radzen" style="width:100%">
   </div>
 </div>
+<h3 class="text-center my-5">Trusted by:</h3>
+<div class="logos">
+  <img src="images/microsoft.svg" />
+  <img class="square" src="images/nasa.svg" />
+  <img src="images/allianz.svg" />
+  <img class="square" src="images/dell.svg" />
+  <img src="images/accenture.svg" />
+  <img src="images/eurobank.svg" />
+  <img class="square" src="images/konica.svg" />
+  <img src="images/deloitte.svg" />
+</div>
 <h3 class="text-center my-5">Why choose Radzen Blazor Components?</h3>
 <div class="row">
   <div class="col-lg-4 mb-4">

RadzenBlazorDemos/Pages/MasterDetailHierarchyOnDemandPage.razor

@@ -11,68 +11,47 @@
 <p>This page demonstrates how to use templates to create a Radzen Blazor DataGrid hierarchy and load data on demand.</p>
 
 <RadzenExample Name="MasterDetailHierarchyOnDemand" Heading="false" Documentation="false">
-    <RadzenGrid @ref="grid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
+    <RadzenDataGrid @ref="grid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
                 Data="@orders" TItem="Order" RowExpand="RowExpand">
         <Template Context="order">
-            <RadzenGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail">
+            <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail">
                 <Columns>
-                    <RadzenGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
-                    <RadzenGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
-                    <RadzenGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+                    <RadzenDataGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
+                    <RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
+                    <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
                         <Template Context="detail">
                             @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
                         </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
-                    <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
+                    </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>
-                    </RadzenGridColumn>
+                    </RadzenDataGridColumn>
                 </Columns>
-            </RadzenGrid>
+            </RadzenDataGrid>
         </Template>
         <Columns>
-            <RadzenGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
-            <RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
-            <RadzenGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
+            <RadzenDataGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
+            <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
+            <RadzenDataGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                 <Template Context="order">
-                    <div>@order.Employee?.LastName</div>
-                    <RadzenImage Path="@order.Employee?.Photo" />
+                    <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                    @order.Employee?.FirstName @order.Employee?.LastName
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
-                <Template Context="order">
-                    @String.Format("{0:d}", order.OrderDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
-                <Template Context="order">
-                    @String.Format("{0:d}", order.RequiredDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
-                <Template Context="order">
-                    @String.Format("{0:d}", order.ShippedDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="Freight" Title="Freight">
-                <Template Context="order">
-                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
-            <RadzenGridColumn TItem="Order" Property="ShipAddress" Title="Ship Address" />
-            <RadzenGridColumn TItem="Order" Property="ShipCity" Title="Ship City" />
-            <RadzenGridColumn TItem="Order" Property="ShipRegion" Title="Ship Region" />
-            <RadzenGridColumn TItem="Order" Property="ShipPostalCode" Title="Ship Postal Code" />
-            <RadzenGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Order" Property="RequiredDate" Title="Required Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
+            <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 @code {
     IEnumerable<Order> orders;
-    RadzenGrid<Order> grid;
+    RadzenDataGrid<Order> grid;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/MasterDetailHierarchyPage.razor

@@ -11,7 +11,7 @@
 <p>This page demonstrates how to use templates to create a Radzen Blazor DataGrid hierarchy.</p>
 
 <RadzenExample Name="MasterDetailHierarchy" Heading="false" Documentation="false">
-    <RadzenGrid @ref="grid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
+    <RadzenDataGrid @ref="grid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
                 Data="@orders" TItem="Order">
         <Template Context="order">
             <RadzenCard Style="margin-bottom:20px">
@@ -21,23 +21,23 @@
             <RadzenTabs>
                 <Tabs>
                     <RadzenTabsItem Text="Order Details">
-                        <RadzenGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail">
+                        <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail">
                             <Columns>
-                                <RadzenGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
-                                <RadzenGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
-                                <RadzenGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+                                <RadzenDataGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
+                                <RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
+                                <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
                                     <Template Context="detail">
                                         @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
                                     </Template>
-                                </RadzenGridColumn>
-                                <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
-                                <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
+                                </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>
-                                </RadzenGridColumn>
+                                </RadzenDataGridColumn>
                             </Columns>
-                        </RadzenGrid>
+                        </RadzenDataGrid>
                     </RadzenTabsItem>
                     <RadzenTabsItem Text="Products">
                         <RadzenDataList WrapItems="true" AllowPaging="true" Data="@order.OrderDetails" TItem="OrderDetail" PageSize="10">
@@ -53,46 +53,25 @@
             </RadzenTabs>
         </Template>
         <Columns>
-            <RadzenGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
-            <RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
-            <RadzenGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
+            <RadzenDataGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
+            <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
+            <RadzenDataGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                 <Template Context="order">
-                    <div>@order.Employee?.LastName</div>
-                    <RadzenImage Path="@order.Employee?.Photo" />
+                    <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                    @order.Employee?.FirstName @order.Employee?.LastName
                 </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
-                <Template Context="order">
-                    @String.Format("{0:d}", order.OrderDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
-                <Template Context="order">
-                    @String.Format("{0:d}", order.RequiredDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
-                <Template Context="order">
-                    @String.Format("{0:d}", order.ShippedDate)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="Freight" Title="Freight">
-                <Template Context="order">
-                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
-                </Template>
-            </RadzenGridColumn>
-            <RadzenGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
-            <RadzenGridColumn TItem="Order" Property="ShipAddress" Title="Ship Address" />
-            <RadzenGridColumn TItem="Order" Property="ShipCity" Title="Ship City" />
-            <RadzenGridColumn TItem="Order" Property="ShipRegion" Title="Ship Region" />
-            <RadzenGridColumn TItem="Order" Property="ShipPostalCode" Title="Ship Postal Code" />
-            <RadzenGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
+            </RadzenDataGridColumn>
+            <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Order" Property="RequiredDate" Title="Required Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date" FormatString="{0:d}" />
+            <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
+            <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
         </Columns>
-    </RadzenGrid>
+    </RadzenDataGrid>
 </RadzenExample>
 @code {
     IEnumerable<Order> orders;
-    RadzenGrid<Order> grid;
+    RadzenDataGrid<Order> grid;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/MasterDetailPage.razor

@@ -19,73 +19,52 @@ else
 {
     <div class="row">
         <div class="col-md-6">
-            <RadzenGrid ColumnWidth="200px" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" Data="@orders" TItem="Order" @bind-Value="@order">
+            <RadzenDataGrid ColumnWidth="200px" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" Data="@orders" TItem="Order" @bind-Value="@SelectedOrders">
                 <Columns>
-                    <RadzenGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
-                    <RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
-                    <RadzenGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
+                    <RadzenDataGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
+                    <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
+                    <RadzenDataGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                         <Template Context="order">
-                            <div>@order.Employee?.LastName</div>
-                            <RadzenImage Path="@order.Employee?.Photo" />
+                            <RadzenImage Path="@order.Employee?.Photo" style="width: 32px; height: 32px; border-radius: 50%" />
+                            @order.Employee?.FirstName @order.Employee?.LastName
                         </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
-                        <Template Context="order">
-                            @String.Format("{0:d}", order.OrderDate)
-                        </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
-                        <Template Context="order">
-                            @String.Format("{0:d}", order.RequiredDate)
-                        </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
-                        <Template Context="order">
-                            @String.Format("{0:d}", order.ShippedDate)
-                        </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Order" Property="Freight" Title="Freight">
-                        <Template Context="order">
-                            @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
-                        </Template>
-                    </RadzenGridColumn>
-                    <RadzenGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
-                    <RadzenGridColumn TItem="Order" Property="ShipAddress" Title="Ship Address" />
-                    <RadzenGridColumn TItem="Order" Property="ShipCity" Title="Ship City" />
-                    <RadzenGridColumn TItem="Order" Property="ShipRegion" Title="Ship Region" />
-                    <RadzenGridColumn TItem="Order" Property="ShipPostalCode" Title="Ship Postal Code" />
-                    <RadzenGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
+                    </RadzenDataGridColumn>
+                    <RadzenDataGridColumn TItem="Order" Property="OrderDate" Title="Order Date" FormatString="{0:d}" />
+                    <RadzenDataGridColumn TItem="Order" Property="RequiredDate" Title="Required Date" FormatString="{0:d}" />
+                    <RadzenDataGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date" FormatString="{0:d}" />
+                    <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
+                    <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
                 </Columns>
-            </RadzenGrid>
+            </RadzenDataGrid>
         </div>
         <div class="col-md-6">
             <RadzenCard Style="margin-bottom:20px">
                 Company:
-                <b>@order.Customer?.CompanyName</b>
+                <b>@SelectedOrders.FirstOrDefault()?.Customer?.CompanyName</b>
             </RadzenCard>
             <RadzenTabs>
                 <Tabs>
                     <RadzenTabsItem Text="Order Details">
-                        <RadzenGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail">
+                        <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@(SelectedOrders.FirstOrDefault()?.OrderDetails)" TItem="OrderDetail">
                             <Columns>
-                                <RadzenGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
-                                <RadzenGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
-                                <RadzenGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
+                                <RadzenDataGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
+                                <RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
+                                <RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
                                     <Template Context="detail">
                                         @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
                                     </Template>
-                                </RadzenGridColumn>
-                                <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
-                                <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
+                                </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>
-                                </RadzenGridColumn>
+                                </RadzenDataGridColumn>
                             </Columns>
-                        </RadzenGrid>
+                        </RadzenDataGrid>
                     </RadzenTabsItem>
                     <RadzenTabsItem Text="Products">
-                        <RadzenDataList WrapItems="true" AllowPaging="true" Data="@order.OrderDetails" TItem="OrderDetail" PageSize="10">
+                        <RadzenDataList WrapItems="true" AllowPaging="true" Data="@(SelectedOrders.FirstOrDefault()?.OrderDetails)" TItem="OrderDetail" PageSize="10">
                             <Template Context="detail">
                                 <RadzenCard Style="width:100px;height:100px">
                                     Product:
@@ -102,22 +81,7 @@ else
 </RadzenExample>
 
 @code {
-    dynamic _order;
-    dynamic order
-    {
-        get
-        {
-            return _order;
-        }
-        set
-        {
-            if (_order != value)
-            {
-                _order = value;
-                StateHasChanged();
-            }
-        }
-    }
+    IList<Order> SelectedOrders { get; set; }
 
     IQueryable<Order> orders;
 
@@ -129,6 +93,6 @@ else
             .Include("OrderDetails")
             .Include("OrderDetails.Product");
 
-        order = orders.FirstOrDefault();
+        SelectedOrders = new List<Order>(){ orders.FirstOrDefault() };
     }
 }

RadzenBlazorDemos/Pages/StepsPage.razor

@@ -13,73 +13,73 @@
             <Steps>
                 <RadzenStepsItem Text="Customers">
                     <h3>Select Customer</h3>
-                    <RadzenGrid ColumnWidth="200px" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@customers" TItem="Customer" Value="@customer" RowSelect="@(args => customer = args)">
+                    <RadzenDataGrid ColumnWidth="200px" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@customers" TItem="Customer" @bind-Value="@selectedCustomers">
                         <Columns>
-                            <RadzenGridColumn TItem="Customer" Property="CustomerID" Title="Customer ID" />
-                            <RadzenGridColumn TItem="Customer" Property="CompanyName" Title="Company Name" />
-                            <RadzenGridColumn TItem="Customer" Property="ContactName" Title="Contact Name" />
-                            <RadzenGridColumn TItem="Customer" Property="ContactTitle" Title="Contact Title" />
-                            <RadzenGridColumn TItem="Customer" Property="Address" Title="Address" />
-                            <RadzenGridColumn TItem="Customer" Property="City" Title="City" />
-                            <RadzenGridColumn TItem="Customer" Property="Region" Title="Region" />
-                            <RadzenGridColumn TItem="Customer" Property="PostalCode" Title="Postal Code" />
-                            <RadzenGridColumn TItem="Customer" Property="Country" Title="Country" />
-                            <RadzenGridColumn TItem="Customer" Property="Phone" Title="Phone" />
-                            <RadzenGridColumn TItem="Customer" Property="Fax" Title="Fax" />
+                            <RadzenDataGridColumn TItem="Customer" Property="CustomerID" Title="Customer ID" />
+                            <RadzenDataGridColumn TItem="Customer" Property="CompanyName" Title="Company Name" />
+                            <RadzenDataGridColumn TItem="Customer" Property="ContactName" Title="Contact Name" />
+                            <RadzenDataGridColumn TItem="Customer" Property="ContactTitle" Title="Contact Title" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Address" Title="Address" />
+                            <RadzenDataGridColumn TItem="Customer" Property="City" Title="City" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Region" Title="Region" />
+                            <RadzenDataGridColumn TItem="Customer" Property="PostalCode" Title="Postal Code" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Country" Title="Country" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Phone" Title="Phone" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Fax" Title="Fax" />
                         </Columns>
-                    </RadzenGrid>
+                    </RadzenDataGrid>
                 </RadzenStepsItem>
-                <RadzenStepsItem Text="Orders" Disabled="@(customer == null)">
+                <RadzenStepsItem Text="Orders" Disabled="@(selectedCustomers == null || selectedCustomers != null && !selectedCustomers.Any())">
                     <h3>Select Order</h3>
-                    <RadzenGrid ColumnWidth="200px" PageSize="2" AllowFiltering="true" AllowPaging="true" AllowSorting="true" 
-                                Data="@orders" TItem="Order" Value="@order" RowSelect="@(args => order = args)">
+                    <RadzenDataGrid ColumnWidth="200px" PageSize="2" AllowFiltering="true" AllowPaging="true" AllowSorting="true" 
+                                Data="@(selectedCustomers != null && selectedCustomers.Any() ? orders.Where(o => o.CustomerID == selectedCustomers[0].CustomerID) : Enumerable.Empty<Order>())" TItem="Order" @bind-Value="@selectedOrders">
                         <Columns>
-                            <RadzenGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
-                            <RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
-                            <RadzenGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
+                            <RadzenDataGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
+                            <RadzenDataGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
+                            <RadzenDataGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                                 <Template Context="order">
                                     <div>@order.Employee?.LastName</div>
                                     <RadzenImage Path="@order.Employee?.Photo" />
                                 </Template>
-                            </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>
-                            </RadzenGridColumn>
-                            <RadzenGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
+                            </RadzenDataGridColumn>
+                            <RadzenDataGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
                                 <Template Context="order">
                                     @String.Format("{0:d}", order.RequiredDate)
                                 </Template>
-                            </RadzenGridColumn>
-                            <RadzenGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
+                            </RadzenDataGridColumn>
+                            <RadzenDataGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
                                 <Template Context="order">
                                     @String.Format("{0:d}", order.ShippedDate)
                                 </Template>
-                            </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>
-                            </RadzenGridColumn>
-                            <RadzenGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
-                            <RadzenGridColumn TItem="Order" Property="ShipAddress" Title="Ship Address" />
-                            <RadzenGridColumn TItem="Order" Property="ShipCity" Title="Ship City" />
-                            <RadzenGridColumn TItem="Order" Property="ShipRegion" Title="Ship Region" />
-                            <RadzenGridColumn TItem="Order" Property="ShipPostalCode" Title="Ship Postal Code" />
-                            <RadzenGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
+                            </RadzenDataGridColumn>
+                            <RadzenDataGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
+                            <RadzenDataGridColumn TItem="Order" Property="ShipAddress" Title="Ship Address" />
+                            <RadzenDataGridColumn TItem="Order" Property="ShipCity" Title="Ship City" />
+                            <RadzenDataGridColumn TItem="Order" Property="ShipRegion" Title="Ship Region" />
+                            <RadzenDataGridColumn TItem="Order" Property="ShipPostalCode" Title="Ship Postal Code" />
+                            <RadzenDataGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
                         </Columns>
-                    </RadzenGrid>
+                    </RadzenDataGrid>
                 </RadzenStepsItem>
-                <RadzenStepsItem Text="Order Details" Disabled="@(order == null)">
-                    <RadzenGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true"
-                                Data="@(orderDetails.Where(o => o.OrderID == order.OrderID))" TItem="OrderDetail" ColumnWidth="200px">
+                <RadzenStepsItem Text="Order Details" Disabled="@(selectedOrders == null || selectedOrders != null && !selectedOrders.Any())">
+                    <RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true"
+                                Data="@(selectedOrders != null && selectedOrders.Any() ? orderDetails.Where(o => o.OrderID == selectedOrders[0].OrderID) : Enumerable.Empty<OrderDetail>())" 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>
                 </RadzenStepsItem>
             </Steps>
         </RadzenSteps>
@@ -96,8 +96,8 @@
     IEnumerable<Order> orders;
     IEnumerable<OrderDetail> orderDetails;
 
-    Customer customer;
-    Order order;
+    IList<Customer> selectedCustomers;
+    IList<Order> selectedOrders;
 
     protected override void OnInitialized()
     {

RadzenBlazorDemos/Pages/TabsPage.razor

@@ -41,55 +41,55 @@
                     </RadzenDataList>
                 </RadzenTabsItem>
                 <RadzenTabsItem Text="Employee">
-                    <RadzenGrid ColumnWidth="150px" AllowFiltering="true" AllowPaging="true" PageSize="4" AllowSorting="true" Data="@employees" TItem="Employee">
+                    <RadzenDataGrid ColumnWidth="150px" AllowFiltering="true" AllowPaging="true" PageSize="4" AllowSorting="true" Data="@employees" TItem="Employee">
                         <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" Title="Employee ID" />
+                            <RadzenDataGridColumn TItem="Employee" Property="Photo" Title="Photo" Sortable="false" Filterable="false">
                                 <Template Context="data">
                                     <RadzenImage Path="@data?.Photo" />
                                 </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">
+                            </RadzenDataGridColumn>
+                            <RadzenDataGridColumn TItem="Employee" Property="LastName" Title="Last Name" />
+                            <RadzenDataGridColumn TItem="Employee" Property="FirstName" Title="First Name" />
+                            <RadzenDataGridColumn TItem="Employee" Property="Title" Title="Title" />
+                            <RadzenDataGridColumn TItem="Employee" Property="TitleOfCourtesy" Title="Title Of Courtesy" />
+                            <RadzenDataGridColumn 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">
+                            </RadzenDataGridColumn>
+                            <RadzenDataGridColumn 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="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>
                 </RadzenTabsItem>
                 <RadzenTabsItem Text="Customers">
-                    <RadzenGrid ColumnWidth="150px" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@customers" TItem="Customer">
+                    <RadzenDataGrid ColumnWidth="150px" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@customers" TItem="Customer">
                         <Columns>
-                            <RadzenGridColumn TItem="Customer" Property="CustomerID" Title="Customer ID" />
-                            <RadzenGridColumn TItem="Customer" Property="CompanyName" Title="Company Name" />
-                            <RadzenGridColumn TItem="Customer" Property="ContactName" Title="Contact Name" />
-                            <RadzenGridColumn TItem="Customer" Property="ContactTitle" Title="Contact Title" />
-                            <RadzenGridColumn TItem="Customer" Property="Address" Title="Address" />
-                            <RadzenGridColumn TItem="Customer" Property="City" Title="City" />
-                            <RadzenGridColumn TItem="Customer" Property="Region" Title="Region" />
-                            <RadzenGridColumn TItem="Customer" Property="PostalCode" Title="Postal Code" />
-                            <RadzenGridColumn TItem="Customer" Property="Country" Title="Country" />
-                            <RadzenGridColumn TItem="Customer" Property="Phone" Title="Phone" />
-                            <RadzenGridColumn TItem="Customer" Property="Fax" Title="Fax" />
+                            <RadzenDataGridColumn TItem="Customer" Property="CustomerID" Title="Customer ID" />
+                            <RadzenDataGridColumn TItem="Customer" Property="CompanyName" Title="Company Name" />
+                            <RadzenDataGridColumn TItem="Customer" Property="ContactName" Title="Contact Name" />
+                            <RadzenDataGridColumn TItem="Customer" Property="ContactTitle" Title="Contact Title" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Address" Title="Address" />
+                            <RadzenDataGridColumn TItem="Customer" Property="City" Title="City" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Region" Title="Region" />
+                            <RadzenDataGridColumn TItem="Customer" Property="PostalCode" Title="Postal Code" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Country" Title="Country" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Phone" Title="Phone" />
+                            <RadzenDataGridColumn TItem="Customer" Property="Fax" Title="Fax" />
                         </Columns>
-                    </RadzenGrid>
+                    </RadzenDataGrid>
                 </RadzenTabsItem>
             </Tabs>
         </RadzenTabs>

RadzenBlazorDemos/Pages/_Host.cshtml

@@ -19,7 +19,7 @@
     <app>
         @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
     </app>
-    <script async src="js/blazor.server.js"></script>
+    <script src="_framework/blazor.server.js"></script>
     <script async src="js/highlight.pack.js"></script>
     <script async src="blazor.polyfill.min.js"></script>
     <script async src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

RadzenBlazorDemos/RadzenBlazorDemos.csproj

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

RadzenBlazorDemos/Services/ExampleService.cs

@@ -34,171 +34,391 @@ namespace RadzenBlazorDemos
             Path = "/support",
             Icon = "&#xe94c"
         },
+   
         new Example()
         {
-            Name = "General",
+            Name="DataGrid",
+            Children = new [] {
+                new Example
+                {
+                    Name = "Data-binding",
+                    Icon = "&#xe3ec",
+                    Children = new [] {
+                        new Example
+                        {
+                            Name = "IQueryable",
+                            Path = "datagrid",
+                            Tags = new [] { "datatable", "datagridview", "dataview", "grid", "table" }
+                        },
+                        new Example
+                        {
+                            Name = "LoadData event",
+                            Path = "datagrid-loaddata",
+                            Title = "Blazor DataGrid custom data-binding",
+                            Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "custom" }
+                        },
+                        new Example
+                        {
+                            Name = "OData service",
+                            Path = "datagrid-odata",
+                            Title = "Blazor DataGrid OData data-binding",
+                            Icon = "&#xe871",
+                            Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "odata", "service", "rest" }
+                        },
+                        new Example
+                        {
+                            Name = "Dynamic data",
+                            Path = "datagrid-dynamic",
+                            Title = "Blazor DataGrid binding dynamic data",
+                            Icon = "&#xe871",
+                            Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "dynamic" }
+                        },
+                    }
+                },
+                new Example
+                {
+                    Name = "Virtualization",
+                    Icon = "&#xe871",
+                    Children = new []
+                    {
+                        new Example
+                        {
+                            Name = "IQueryable support",
+                            Path = "datagrid-virtualization",
+                            Title = "Blazor DataGrid IQueryable virtualization",
+                            Tags = new [] { "datagrid", "bind", "load", "data", "virtualization", "ondemand" }
+                        },
+                        new Example
+                        {
+                            Name = "LoadData support",
+                            Path = "datagrid-virtualization-loaddata",
+                            Title = "Blazor DataGrid custom virtualization",
+                            Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "virtualization", "ondemand" }
+                        },
+                    }
+                },
+                new Example
+                {
+                    Name = "Columns",
+                    Icon = "&#xe336",
+                    Children = new []
+                    {
+                        new Example
+                        {
+                            Name = "Template",
+                            Path = "datagrid-column-template",
+                            Title = "Blazor DataGrid column template",
+                            Tags = new [] { "column", "template", "grid", "datagrid", "table"}
+                        },
+                        new Example
+                        {
+                            Name = "Resizing",
+                            Path = "datagrid-column-resizing",
+                            Title = "Blazor DataGrid column resizing",
+                            Tags = new [] { "column", "resizing", "grid", "datagrid", "table"}
+                        },
+                        new Example
+                        {
+                            Name = "Footer Totals",
+                            Path = "datagrid-footer-totals",
+                            Title = "Blazor DataGrid footer totals",
+                            Tags = new [] { "summary", "total", "aggregate", "datagrid", "table", "dataview" }
+                        },
+                        new Example
+                        {
+                            Name = "Filter Template",
+                            Path = "datagrid-filter-template",
+                            Title = "Blazor DataGrid custom filtering",
+                            Tags = new [] { "datagrid", "column", "filter", "template" }
+                        },
+                        new Example
+                        {
+                            Name = "Frozen Columns",
+                            Path = "datagrid-frozen-columns",
+                            Title = "Blazor DataGrid frozen columns",
+                            Tags = new [] { "datagrid", "column", "frozen", "locked" }
+                        }
+                    }
+                },
+                new Example
+                {
+                    Name = "Filtering",
+                    Icon = "&#xef4f",
+                    Children = new []
+                    {
+                        new Example
+                        {
+                            Name = "Simple Mode",
+                            Path = "datagrid-simple-filter",
+                            Title = "Blazor DataGrid Simple filter mode",
+                            Tags = new [] { "filter", "simple", "grid", "datagrid", "table"}
+                        },
+                        new Example
+                        {
+                            Name = "Advanced Mode",
+                            Path = "datagrid-advanced-filter",
+                            Title = "Blazor DataGrid Simple filter mode",
+                            Tags = new [] { "filter", "advanced", "grid", "datagrid", "table"}
+                        },
+                        new Example
+                        {
+                            Name = "Filter API",
+                            Path = "datagrid-filter-api",
+                            Title = "Blazor DataGrid Filter API",
+                            Tags = new [] { "filter", "api", "grid", "datagrid", "table"}
+                        },
+                    }
+                },
+                new Example
+                {
+                    Name = "Hierarchy",
+                    Icon = "&#xe23e",
+                    Children  = new []
+                    {
+                        new Example
+                        {
+                            Name = "Hierarchy",
+                            Path = "master-detail-hierarchy",
+                            Title = "Blazor DataGrid Hierarchy",
+                            Tags = new [] { "master", "detail", "datagrid", "table", "dataview" }
+                        },
+                        new Example
+                        {
+                            Name = "Hierarchy on demand",
+                            Path = "master-detail-hierarchy-demand",
+                            Title = "Blazor DataGrid Hierarchy on demand",
+                            Tags = new [] { "master", "detail", "datagrid", "table", "dataview", "on-demand" }
+                        },
+                        new Example
+                        {
+                            Name = "Master/Detail",
+                            Path = "master-detail",
+                            Title = "Master and detail Blazor DataGrid",
+                            Tags = new [] { "master", "detail", "datagrid", "table", "dataview" }
+                        },
+                    }
+                },
+                new Example
+                {
+                    Name = "Selection",
+                    Icon = "&#xf0c5",
+                    Children = new []
+                    {
+                        new Example
+                        {
+                            Name = "Single selection",
+                            Path = "datagrid-single-selection",
+                            Title = "Blazor DataGrid single selection",
+                            Tags = new [] { "single", "selection", "datagrid", "table", "dataview" }
+                        },
+                        new Example
+                        {
+                            Name = "Multiple selection",
+                            Path = "datagrid-multiple-selection",
+                            Title = "Blazor DataGrid Multiple selection",
+                            Tags = new [] { "multiple", "selection", "datagrid", "table", "dataview" }
+                        },
+                    }
+                },
+                new Example
+                {
+                    Name = "Sorting",
+                    Icon = "&#xe164",
+                    Children = new []
+                    {
+                        new Example
+                        {
+                            Name = "Single Column Sorting",
+                            Path = "datagrid-sort",
+                            Title = "Blazor DataGrid sorting",
+                            Tags = new [] { "single", "sort", "datagrid", "table", "dataview" }
+                        },
+                        new Example
+                        {
+                            Name = "Multiple Column Sorting",
+                            Path = "datagrid-multi-sort",
+                            Title = "Blazor DataGrid multiple column sorting",
+                            Tags = new [] { "multi", "sort", "datagrid", "table", "dataview" }
+                        },
+                        new Example
+                        {
+                            Name = "Sort API",
+                            Path = "datagrid-sort-api",
+                            Title = "Blazor DataGrid Sort API",
+                            Tags = new [] { "api", "sort", "datagrid", "table", "dataview" }
+                        }
+                    }
+                },
+                new Example
+                {
+                    Name = "Paging",
+                    Icon = "&#xe5dd",
+                    Children = new []
+                    {
+                        new Example
+                        {
+                            Name = "Pager Position",
+                            Path = "datagrid-pager-position",
+                            Title = "Blazor DataGrid pager position",
+                            Tags = new [] { "pager", "paging", "datagrid", "table", "dataview" }
+                        },
+                        new Example
+                        {
+                            Name = "Pager API",
+                            Path = "datagrid-pager-api",
+                            Title = "Blazor DataGrid pager API",
+                            Tags = new [] { "pager", "paging", "api", "datagrid", "table", "dataview" }
+                        }
+                    }
+                },
+                new Example()
+                {
+                    Name = "InLine Editing",
+                    Path = "datagrid-inline-edit",
+                    Title = "Blazor DataGrid InLine Editing",
+                    Icon = "&#xe22b",
+                    Tags = new [] { "inline", "editor", "datagrid", "table", "dataview" }
+                },
+
+                new Example()
+                {
+                    Name = "Conditional formatting",
+                    Path = "datagrid-conditional-template",
+                    Title = "DataGrid conditional template",
+                    Icon = "&#xe41d",
+                    Tags = new [] { "conditional", "template", "style", "datagrid", "table", "dataview" }
+                },
+                new Example()
+                {
+                    Name = "Export to Excel and CSV",
+                    Path = "export-excel-csv",
+                    Title = "Blazor DataGrid export to Excel and CSV",
+                    Icon = "&#xe0c3",
+                    Tags = new [] { "export", "excel", "csv" }
+                },
+                new Example()
+                {
+                    Name = "Cascading DropDowns",
+                    Path = "cascading-dropdowns",
+                    Title = "Blazor Cascading DropDowns",
+                    Icon = "&#xe915",
+                    Tags = new [] { "related", "parent", "child" }
+                },
+            }
+        },
+        new Example
+        {
+            Name="Data",
             Children = new [] {
                 new Example()
                 {
-                    Name = "Button",
-                    Path = "button",
-                    Icon = "&#xe86d"
+                    Name = "DataList",
+                    Path = "datalist",
+                    Icon = "&#xe896",
+                    Tags = new [] { "dataview", "grid", "table" }
                 },
+
                 new Example()
                 {
-                    Name = "GoogleMap",
-                    Path = "googlemap",
-                    Icon = "&#xe55b"
+                    Name = "Pager",
+                    Path = "pager",
+                    Icon = "&#xe8be",
+                    Tags = new [] { "pager", "paging" }
                 },
+
                 new Example()
                 {
-                    Name = "Gravatar",
-                    Path = "gravatar",
-                    Icon = "&#xe84e"
+                    Name = "Tree",
+                    Path = "tree",
+                    Icon = "&#xe8ef",
+                    Tags = new [] { "tree", "treeview", "nodes", "hierarchy" }
                 },
+
                 new Example()
                 {
-                    Name = "SplitButton",
-                    Path = "splitbutton",
-                    Icon = "&#xe05f"
+                    Name = "Scheduler",
+                    Path = "scheduler",
+                    Icon = "&#xe616",
+                    Tags = new [] { "scheduler", "calendar", "event", "appointment"}
                 },
-                new Example()
-                {
-                    Name = "Icon",
-                    Path = "icon",
-                    Icon = "&#xe84f"
-                },
-                new Example()
-                {
-                    Name = "Image",
-                    Path = "image",
-                    Icon = "&#xe8aa"
-                },
-                new Example()
-                {
-                    Name = "Link",
-                    Path = "link",
-                    Icon = "&#xe157"
-                },
-                new Example()
-                {
-                    Name = "Login",
-                    Path = "login",
-                    Icon = "&#xe8e8"
-                },
-                new Example()
-                {
-                    Name = "ProgressBar",
-                    Path = "progressbar",
-                    Icon = "&#xe893",
-                    Tags = new [] { "progress", "spinner" }
-                },
-                new Example()
-                {
-                    Name = "Dialog",
-                    Path = "dialog",
-                    Icon = "&#xe8a7",
-                    Tags = new [] { "popup", "window" }
-                },
-                new Example()
-                {
-                    Name = "Notification",
-                    Path = "notification",
-                    Icon = "&#xe85a",
-                    Tags = new [] { "message", "alert" }
-                },
-                new Example()
-                {
-                    Name = "Tooltip",
-                    Path = "tooltip",
-                    Icon = "&#xe8cd",
-                    Tags = new [] { "popup", "tooltip" }
-                },
-                new Example()
-                {
-                    Name = "Menu",
-                    Path = "menu",
-                    Icon = "&#xe91a",
-                    Tags = new [] { "navigation", "dropdown" }
-                },
-                new Example()
-                {
-                    Name = "PanelMenu",
-                    Path = "panelmenu",
-                    Icon = "&#xe8d2",
-                    Tags = new [] { "navigation", "menu" }
-                },
-                new Example()
-                {
-                    Name = "ContextMenu",
-                    Path = "contextmenu",
-                    Icon = "&#xe8de",
-                    Tags = new [] { "popup", "dropdown", "menu" }
-                },
-                new Example()
-                {
-                    Name = "ProfileMenu",
-                    Path = "profile-menu",
-                    Icon = "&#xe851",
-                    Tags = new [] { "navigation", "dropdown", "menu" }
-                },
-                new Example()
-                {
-                    Name = "Upload",
-                    Path = "example-upload",
-                    Icon = "&#xe2c6",
-                    Tags = new [] { "upload", "file"}
-                }
             }
         },
         new Example()
         {
-            Name="Containers",
+            Name="HtmlEditor",
             Children = new [] {
                 new Example()
                 {
-                    Name = "Accordion",
-                    Path = "accordion",
-                    Icon = "&#xe8ee",
-                    Tags = new [] { "panel", "container" }
+                    Name = "Default Tools",
+                    Path = "html-editor",
+                    Icon = "&#xe3c9",
+                    Tags = new [] { "html", "editor", "rich", "text" }
                 },
                 new Example()
                 {
-                    Name = "Card",
-                    Path = "card",
-                    Icon = "&#xe919",
-                    Tags = new [] { "container" }
-                },
-                new Example()
-                {
-                    Name = "Fieldset",
-                    Path = "fieldset",
-                    Icon = "&#xe850",
-                    Tags = new [] { "form", "container" }
-                },
-                new Example()
-                {
-                    Name = "Panel",
-                    Path = "panel",
-                    Icon = "&#xe14f",
-                    Tags = new [] { "container" }
-                },
-                new Example()
-                {
-                    Name = "Tabs",
-                    Path = "tabs",
-                    Icon = "&#xe8d8",
-                    Tags = new [] { "tabstrip", "tabview", "container" }
-                },
-                new Example()
-                {
-                    Name = "Steps",
-                    Path = "steps",
-                    Icon = "&#xe044",
-                    Tags = new [] { "step", "steps", "wizard" }
+                    Name = "Custom Tools",
+                    Path = "html-editor-custom-tools",
+                    Icon = "&#xe8b8",
+                    Tags = new [] { "html", "editor", "rich", "text", "tool", "custom" }
                 },
             }
         },
+        new Example
+        {
+            Name="Charts",
+            Children= new [] {
+                new Example
+                {
+                    Name = "Line Chart",
+                    Path = "line-chart",
+                    Icon = "&#xe922",
+                    Tags = new [] { "chart", "graph", "line" }
+                },
+                new Example
+                {
+                    Name = "Area Chart",
+                    Path = "area-chart",
+                    Icon = "&#xe251",
+                    Tags = new [] { "chart", "graph", "area" }
+                },
+                new Example
+                {
+                    Name = "Column Chart",
+                    Path = "column-chart",
+                    Icon = "&#xe24b",
+                    Tags = new [] { "chart", "graph", "column", "bar" }
+                },
+                new Example
+                {
+                    Name = "Bar Chart",
+                    Path = "bar-chart",
+                    Icon = "&#xe164",
+                    Tags = new [] { "chart", "graph", "column", "bar" }
+                },
+                new Example
+                {
+                    Name = "Pie Chart",
+                    Path = "pie-chart",
+                    Icon = "&#xe6c4",
+                    Tags = new [] { "chart", "graph", "pie" }
+                },
+                new Example
+                {
+                    Name = "Donut Chart",
+                    Path = "donut-chart",
+                    Icon = "&#xe917",
+                    Tags = new [] { "chart", "graph", "donut" }
+                },
+                new Example
+                {
+                    Name = "Styling",
+                    Path = "styling-chart",
+                    Icon = "&#xe41d",
+                    Tags = new [] { "chart", "graph", "styling" }
+                },
+            }
+        },
+
         new Example()
         {
             Name="Forms",
@@ -393,232 +613,52 @@ namespace RadzenBlazorDemos
                 }
             }
         },
+   
         new Example()
         {
-            Name="Data",
+            Name="Containers",
             Children = new [] {
                 new Example()
                 {
-                    Name = "DataList",
-                    Path = "datalist",
-                    Icon = "&#xe896",
-                    Tags = new [] { "dataview", "grid", "table" }
-                },
-
-                new Example()
-                {
-                    Name = "Pager",
-                    Path = "pager",
-                    Icon = "&#xe8be",
-                    Tags = new [] { "pager", "paging" }
-                },
-
-                new Example()
-                {
-                    Name = "Tree",
-                    Path = "tree",
-                    Icon = "&#xe8ef",
-                    Tags = new [] { "tree", "treeview", "nodes", "hierarchy" }
-                },
-
-                new Example()
-                {
-                    Name = "Scheduler",
-                    Path = "scheduler",
-                    Icon = "&#xe616",
-                    Tags = new [] { "scheduler", "calendar", "event", "appointment"}
-                },
-            }
-        },
-        new Example()
-        {
-            Name="DataGrid",
-            Children = new [] {
-                new Example()
-                {
-                    Name = "Binding to IQueryable",
-                    Path = "datagrid",
-                    Icon = "&#xe3ec",
-                    Tags = new [] { "datatable", "datagridview", "dataview", "grid", "table" }
+                    Name = "Accordion",
+                    Path = "accordion",
+                    Icon = "&#xe8ee",
+                    Tags = new [] { "panel", "container" }
                 },
                 new Example()
                 {
-                    Name = "Binding with LoadData event",
-                    Path = "datagrid-loaddata",
-                    Title = "Blazor DataGrid custom data-binding",
-                    Icon = "&#xe265",
-                    Tags = new [] { "datagrid", "bind", "load", "data", "loaddata" }
+                    Name = "Card",
+                    Path = "card",
+                    Icon = "&#xe919",
+                    Tags = new [] { "container" }
                 },
                 new Example()
                 {
-                    Name = "Binding to OData service",
-                    Path = "datagrid-odata",
-                    Title = "Blazor DataGrid OData data-binding",
-                    Icon = "&#xe871",
-                    Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "odata" }
+                    Name = "Fieldset",
+                    Path = "fieldset",
+                    Icon = "&#xe850",
+                    Tags = new [] { "form", "container" }
                 },
                 new Example()
                 {
-                    Name = "Binding to dynamic data",
-                    Path = "datagrid-dynamic",
-                    Title = "Blazor DataGrid binding dynamic data",
-                    Icon = "&#xe871",
-                    Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "dynamic" }
+                    Name = "Panel",
+                    Path = "panel",
+                    Icon = "&#xe14f",
+                    Tags = new [] { "container" }
                 },
                 new Example()
                 {
-                    Name = "Footer Totals",
-                    Path = "datagrid-footer-totals",
-                    Title = "Blazor DataGrid footer totals",
-                    Icon = "&#xe336",
-                    Tags = new [] { "summary", "total", "aggregate", "datagrid", "table", "dataview" }
+                    Name = "Tabs",
+                    Path = "tabs",
+                    Icon = "&#xe8d8",
+                    Tags = new [] { "tabstrip", "tabview", "container" }
                 },
                 new Example()
                 {
-                    Name = "Custom Column FilterTemplate",
-                    Path = "datagrid-filter-template",
-                    Title = "Blazor DataGrid custom filtering",
-                    Icon = "&#xe152",
-                    Tags = new [] { "datagrid", "column", "filter", "template" }
-                },
-                new Example()
-                {
-                    Name = "Hierarchy",
-                    Path = "master-detail-hierarchy",
-                    Icon = "&#xe23e",
-                    Title = "Blazor DataGrid Hierarchy",
-                    Tags = new [] { "master", "detail", "datagrid", "table", "dataview" }
-                },
-                new Example()
-                {
-                    Name = "Hierarchy on demand",
-                    Path = "master-detail-hierarchy-demand",
-                    Icon = "&#xe23e",
-                    Title = "Blazor DataGrid Hierarchy on demand",
-                    Tags = new [] { "master", "detail", "datagrid", "table", "dataview", "on-demand" }
-                },
-                new Example()
-                {
-                    Name = "Master/Detail",
-                    Path = "master-detail",
-                    Icon = "&#xe1b2",
-                    Title = "Master and detail Blazor DataGrid",
-                    Tags = new [] { "master", "detail", "datagrid", "table", "dataview" }
-                },
-                new Example()
-                {
-                    Name = "InLine Editing",
-                    Path = "datagrid-inline-edit",
-                    Title = "Blazor DataGrid InLine Editing",
-                    Icon = "&#xe22b",
-                    Tags = new [] { "inline", "editor", "datagrid", "table", "dataview" }
-                },
-                new Example()
-                {
-                    Name = "Multiple selection",
-                    Path = "datagrid-multiple-selection",
-                    Title = "Blazor DataGrid Multiple selection",
-                    Icon = "&#xf0c5",
-                    Tags = new [] { "multiple", "selection", "datagrid", "table", "dataview" }
-                },
-                new Example()
-                {
-                    Name = "Conditional styles and templates",
-                    Path = "datagrid-conditional-template",
-                    Title = "DataGrid conditional template",
-                    Icon = "&#xe41d",
-                    Tags = new [] { "conditional", "template", "style", "datagrid", "table", "dataview" }
-                },
-                new Example()
-                {
-                    Name = "Export to Excel and CSV",
-                    Path = "export-excel-csv",
-                    Title = "Blazor DataGrid export to Excel and CSV",
-                    Icon = "&#xe0c3",
-                    Tags = new [] { "export", "excel", "csv" }
-                },
-                new Example()
-                {
-                    Name = "Cascading DropDowns",
-                    Path = "cascading-dropdowns",
-                    Title = "Blazor Cascading DropDowns",
-                    Icon = "&#xe915",
-                    Tags = new [] { "related", "parent", "child" }
-                },
-            }
-        },
-        new Example()
-        {
-            Name="HtmlEditor",
-            Children = new [] {
-                new Example()
-                {
-                    Name = "Default Tools",
-                    Path = "html-editor",
-                    Icon = "&#xe3c9",
-                    Tags = new [] { "html", "editor", "rich", "text" }
-                },
-                new Example()
-                {
-                    Name = "Custom Tools",
-                    Path = "html-editor-custom-tools",
-                    Icon = "&#xe8b8",
-                    Tags = new [] { "html", "editor", "rich", "text", "tool", "custom" }
-                },
-            }
-        },
-        new Example
-        {
-            Name="Charts",
-            Children= new [] {
-                new Example
-                {
-                    Name = "Line Chart",
-                    Path = "line-chart",
-                    Icon = "&#xe922",
-                    Tags = new [] { "chart", "graph", "line" }
-                },
-                new Example
-                {
-                    Name = "Area Chart",
-                    Path = "area-chart",
-                    Icon = "&#xe251",
-                    Tags = new [] { "chart", "graph", "area" }
-                },
-                new Example
-                {
-                    Name = "Column Chart",
-                    Path = "column-chart",
-                    Icon = "&#xe24b",
-                    Tags = new [] { "chart", "graph", "column", "bar" }
-                },
-                new Example
-                {
-                    Name = "Bar Chart",
-                    Path = "bar-chart",
-                    Icon = "&#xe164",
-                    Tags = new [] { "chart", "graph", "column", "bar" }
-                },
-                new Example
-                {
-                    Name = "Pie Chart",
-                    Path = "pie-chart",
-                    Icon = "&#xe6c4",
-                    Tags = new [] { "chart", "graph", "pie" }
-                },
-                new Example
-                {
-                    Name = "Donut Chart",
-                    Path = "donut-chart",
-                    Icon = "&#xe917",
-                    Tags = new [] { "chart", "graph", "donut" }
-                },
-                new Example
-                {
-                    Name = "Styling",
-                    Path = "styling-chart",
-                    Icon = "&#xe41d",
-                    Tags = new [] { "chart", "graph", "styling" }
+                    Name = "Steps",
+                    Path = "steps",
+                    Icon = "&#xe044",
+                    Tags = new [] { "step", "steps", "wizard" }
                 },
             }
         },
@@ -649,6 +689,124 @@ namespace RadzenBlazorDemos
                 },
             }
         },
+        new Example()
+        {
+            Name = "Misc",
+            Children = new [] {
+                new Example()
+                {
+                    Name = "Button",
+                    Path = "button",
+                    Icon = "&#xe86d"
+                },
+                new Example()
+                {
+                    Name = "GoogleMap",
+                    Path = "googlemap",
+                    Icon = "&#xe55b"
+                },
+                new Example()
+                {
+                    Name = "Gravatar",
+                    Path = "gravatar",
+                    Icon = "&#xe84e"
+                },
+                new Example()
+                {
+                    Name = "SplitButton",
+                    Path = "splitbutton",
+                    Icon = "&#xe05f"
+                },
+                new Example()
+                {
+                    Name = "Icon",
+                    Path = "icon",
+                    Icon = "&#xe84f"
+                },
+                new Example()
+                {
+                    Name = "Image",
+                    Path = "image",
+                    Icon = "&#xe8aa"
+                },
+                new Example()
+                {
+                    Name = "Link",
+                    Path = "link",
+                    Icon = "&#xe157"
+                },
+                new Example()
+                {
+                    Name = "Login",
+                    Path = "login",
+                    Icon = "&#xe8e8"
+                },
+                new Example()
+                {
+                    Name = "ProgressBar",
+                    Path = "progressbar",
+                    Icon = "&#xe893",
+                    Tags = new [] { "progress", "spinner" }
+                },
+                new Example()
+                {
+                    Name = "Dialog",
+                    Path = "dialog",
+                    Icon = "&#xe8a7",
+                    Tags = new [] { "popup", "window" }
+                },
+                new Example()
+                {
+                    Name = "Notification",
+                    Path = "notification",
+                    Icon = "&#xe85a",
+                    Tags = new [] { "message", "alert" }
+                },
+                new Example()
+                {
+                    Name = "Tooltip",
+                    Path = "tooltip",
+                    Icon = "&#xe8cd",
+                    Tags = new [] { "popup", "tooltip" }
+                },
+                new Example()
+                {
+                    Name = "Menu",
+                    Path = "menu",
+                    Icon = "&#xe91a",
+                    Tags = new [] { "navigation", "dropdown" }
+                },
+                new Example()
+                {
+                    Name = "PanelMenu",
+                    Path = "panelmenu",
+                    Icon = "&#xe8d2",
+                    Tags = new [] { "navigation", "menu" }
+                },
+                new Example()
+                {
+                    Name = "ContextMenu",
+                    Path = "contextmenu",
+                    Icon = "&#xe8de",
+                    Tags = new [] { "popup", "dropdown", "menu" }
+                },
+                new Example()
+                {
+                    Name = "ProfileMenu",
+                    Path = "profile-menu",
+                    Icon = "&#xe851",
+                    Tags = new [] { "navigation", "dropdown", "menu" }
+                },
+                new Example()
+                {
+                    Name = "Upload",
+                    Path = "example-upload",
+                    Icon = "&#xe2c6",
+                    Tags = new [] { "upload", "file"}
+                }
+            }
+        },
+
     };
 
         public IEnumerable<Example> Examples
@@ -661,16 +819,26 @@ namespace RadzenBlazorDemos
 
         public IEnumerable<Example> Filter(string term)
         {
-            Func<string, bool> contains = value => value.Contains(term, StringComparison.OrdinalIgnoreCase);
+            bool contains(string value) => value.Contains(term, StringComparison.OrdinalIgnoreCase);
 
-            Func<Example, bool> filter = (example) => contains(example.Name) || (example.Tags != null && example.Tags.Any(contains));
+            bool filter(Example example) => contains(example.Name) || (example.Tags != null && example.Tags.Any(contains));
 
-            return Examples.Where(category => category.Children != null && category.Children.Any(filter))
-                           .Select(category => new Example()
+            bool deepFilter(Example example) => filter(example) || example.Children?.Any(filter) == true;
+
+            return Examples.Where(category => category.Children?.Any(deepFilter) == true)
+                           .Select(category => new Example
                            {
                                Name = category.Name,
                                Expanded = true,
-                               Children = category.Children.Where(filter).ToArray()
+                               Children = category.Children.Where(deepFilter).Select(example => new Example
+                               {
+                                   Name = example.Name,
+                                   Path = example.Path,
+                                   Icon = example.Icon,
+                                   Expanded = true,
+                                   Children = example.Children
+                               }
+                               ).ToArray()
                            }).ToList();
         }
 

RadzenBlazorDemos/Shared/MainLayout.razor

@@ -48,7 +48,7 @@
 <RadzenSidebar @ref="@sidebar0" @bind-Expanded="@sidebarExpanded">
     <ChildContent>
         <div style="padding: 1rem">
-            <input placeholder="Find component ..." class="rz-textbox" type="search" @oninput="@FilterPanelMenu" style="width: 100%" />
+            <RadzenTextBox Placeholder="Find component ..." type="search" @oninput="@FilterPanelMenu" style="width: 100%" />
         </div>
         <RadzenPanelMenu>
             @foreach (var category in examples)
@@ -58,7 +58,20 @@
                     {
                         @foreach (var example in category.Children)
                         {
-                            <RadzenPanelMenuItem Text="@example.Name" Path="@example.Path" Icon="@example.Icon" />
+                            if (example.Children != null)
+                            {
+                                <RadzenPanelMenuItem Text="@example.Name" @bind-Expanded="@example.Expanded" Icon="@example.Icon">
+                                @foreach (var child in example.Children)
+                                {
+                                    <RadzenPanelMenuItem Text="@child.Name" Path="@child.Path" />
+                                }
+                                </RadzenPanelMenuItem>
+
+                            }
+                            else
+                            {
+                                <RadzenPanelMenuItem Text="@example.Name" Path="@example.Path" Icon="@example.Icon" />
+                            }
                         }
                     }
                 </RadzenPanelMenuItem>

RadzenBlazorDemos/Shared/RadzenExample.razor

@@ -1,3 +1,4 @@
+@using System.IO
 @using Radzen.Blazor
 
 @if (Heading)
@@ -26,7 +27,7 @@ else if (Documentation)
         </RadzenTabsItem>
         @foreach (var p in AdditionalSourceCodePages)
         {
-        <RadzenTabsItem Text="@p" Icon="code">
+        <RadzenTabsItem Text="@Path.GetFileName(p)" Icon="code">
             <CodeViewer PageName="@p" />
         </RadzenTabsItem>
         }

RadzenBlazorDemos/_Imports.razor

@@ -6,4 +6,5 @@
 @using Microsoft.JSInterop
 @using RadzenBlazorDemos
 @using RadzenBlazorDemos.Shared
-@using Radzen
+@using Radzen
+@using Radzen.Blazor

RadzenBlazorDemos/wwwroot/css/site.css

@@ -132,4 +132,22 @@ text-decoration: none;
 .console-message-time {
     font-size: 12px;
     padding: 2px 4px;
+}
+
+.logos {
+  margin: 48px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.logos img {
+  height: 32px;
+  margin-right: 32px;
+  margin-bottom: 32px;
+}
+
+.logos  .square {
+  height: 48px;
 }

RadzenBlazorDemos/wwwroot/images/accenture.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 163.2 43" style="enable-background:new 0 0 163.2 43;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#A100FF;}
+</style>
+<g>
+	<polygon class="st0" points="95.1,12 104.5,8.5 95.1,4.9 95.1,0 111.2,6.5 111.2,10.5 95.1,17 	"/>
+	<path d="M6.2,43C2.8,43,0,41.3,0,37.5v-0.2c0-4.6,4-6.2,8.9-6.2h2.3v-0.9c0-1.9-0.8-3-2.8-3c-1.8,0-2.7,1-2.8,2.4h-5
+		c0.4-4.2,3.7-6.2,8.1-6.2c4.5,0,7.8,1.9,7.8,6.6v12.6h-5.1v-2.2C10.4,41.8,8.7,43,6.2,43z M11.2,36.4v-1.8H9.1
+		c-2.6,0-3.9,0.7-3.9,2.4v0.2c0,1.3,0.8,2.2,2.6,2.2C9.6,39.3,11.2,38.3,11.2,36.4z M28.4,43c-5.2,0-9-3.2-9-9.6v-0.3
+		c0-6.4,4-9.8,9-9.8c4.3,0,7.8,2.2,8.2,7.1h-5c-0.3-1.8-1.3-3-3.1-3c-2.2,0-3.8,1.8-3.8,5.5v0.6c0,3.8,1.4,5.5,3.8,5.5
+		c1.8,0,3.1-1.3,3.4-3.4h4.8C36.4,40,33.5,43,28.4,43z M48,43c-5.2,0-9-3.2-9-9.6v-0.3c0-6.4,4-9.8,9-9.8c4.3,0,7.8,2.2,8.2,7.1h-5
+		c-0.3-1.8-1.3-3-3.1-3c-2.2,0-3.8,1.8-3.8,5.5v0.6c0,3.8,1.4,5.5,3.8,5.5c1.8,0,3.1-1.3,3.4-3.4h4.8C56,40,53.1,43,48,43z M67.7,43
+		c-5.4,0-9.1-3.2-9.1-9.5v-0.4c0-6.3,3.9-9.8,9-9.8c4.7,0,8.6,2.6,8.6,8.9v2.3H63.9c0.2,3.4,1.7,4.7,3.9,4.7c2,0,3.1-1.1,3.5-2.4
+		h4.9C75.6,40.3,72.6,43,67.7,43z M64,31H71c-0.1-2.8-1.4-4-3.5-4C65.9,27.1,64.4,28,64,31z M79.4,23.8h5.3v2.8
+		c0.9-1.8,2.8-3.2,5.7-3.2c3.4,0,5.7,2.1,5.7,6.6v12.6h-5.3V30.8c0-2.2-0.9-3.2-2.8-3.2c-1.8,0-3.3,1.1-3.3,3.5v11.5h-5.3V23.8z
+		 M105.8,18.1v5.7h3.6v3.9h-3.6v8.9c0,1.4,0.6,2.1,1.9,2.1c0.8,0,1.3-0.1,1.8-0.3v4.1c-0.6,0.2-1.7,0.4-3,0.4c-4.1,0-6-1.9-6-5.7
+		v-9.5h-2.2v-3.9h2.2v-3.5L105.8,18.1z M129.2,42.6H124v-2.8c-0.9,1.8-2.7,3.2-5.5,3.2c-3.4,0-5.9-2.1-5.9-6.5V23.8h5.3v12
+		c0,2.2,0.9,3.2,2.7,3.2c1.8,0,3.3-1.2,3.3-3.5V23.8h5.3V42.6z M133.1,23.8h5.3v3.5c1.1-2.5,2.9-3.7,5.7-3.7v5.2
+		c-3.6,0-5.7,1.1-5.7,4.2v9.7h-5.3V23.8z M154.8,43c-5.4,0-9.1-3.2-9.1-9.5v-0.4c0-6.3,3.9-9.8,9-9.8c4.7,0,8.6,2.6,8.6,8.9v2.3
+		h-12.2c0.2,3.4,1.7,4.7,3.9,4.7c2,0,3.1-1.1,3.5-2.4h4.9C162.6,40.3,159.7,43,154.8,43z M151,31h7.1c-0.1-2.8-1.4-4-3.5-4
+		C153,27.1,151.5,28,151,31z"/>
+</g>
+</svg>

RadzenBlazorDemos/wwwroot/images/allianz.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.0"
+   width="591.97833"
+   height="153.24893"
+   id="svg39820">
+  <defs
+     id="defs39822">
+    <clipPath
+       id="clp5">
+      <path
+         d="M 1457.1,761.7 L 1544.4,761.7 L 1544.4,739.1 L 1457.1,739.1 L 1457.1,761.7 z "
+         id="path37641" />
+    </clipPath>
+  </defs>
+  <g
+     transform="translate(-104.3378,-135.8517)"
+     id="layer1">
+    <g
+       id="g39870">
+      <path
+         d="M 157.90708,218.51549 L 136.20812,218.51549 L 147.7357,181.01696 L 157.90708,218.51549 z M 126.03673,256.42087 L 132.81766,233.56914 L 160.61946,233.56914 L 167.40038,256.42087 L 190.45553,256.42087 L 166.0442,169.69282 C 164.68801,163.99683 161.97564,162.16598 155.87281,162.16598 L 121.96818,162.16598 L 121.96818,169.96405 L 124.68055,169.96405 C 128.7491,169.96405 130.78338,171.25243 130.78338,174.37166 C 130.78338,176.33813 130.78338,177.6265 128.7491,182.30534 L 104.33777,256.42087"
+         style="fill:#004a93;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         id="path37627" />
+      <path
+         d="M 219.61351,256.42087 L 219.61351,169.08253 C 219.61351,164.53931 216.90114,162.16598 212.1545,162.16598 L 191.13362,162.16598 L 191.13362,169.96405 L 192.48981,169.96405 C 196.55836,169.96405 198.59264,171.65929 198.59264,175.32099 L 198.59264,256.42087"
+         style="fill:#004a93;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path37629" />
+      <path
+         d="M 257.5867,256.42087 L 257.5867,169.08253 C 257.5867,164.53931 254.87433,162.16598 250.12768,162.16598 L 229.10681,162.16598 L 229.10681,169.96405 L 230.463,169.96405 C 234.53155,169.96405 236.56583,171.65929 236.56583,175.32099 L 236.56583,256.42087"
+         style="fill:#004a93;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         id="path37631" />
+      <path
+         d="M 296.23798,170.50653 C 296.23798,164.26807 291.49133,160.60637 284.03231,160.60637 C 275.8952,160.60637 271.82665,164.26807 271.82665,170.50653 C 271.82665,176.8806 275.8952,180.61011 284.03231,180.61011 C 291.49133,180.61011 296.23798,176.8806 296.23798,170.50653 M 295.55989,256.42087 L 295.55989,192.81578 C 295.55989,188.40817 292.84752,185.83142 288.77896,185.83142 L 267.75809,185.83142 L 267.75809,193.49387 L 269.11428,193.49387 C 273.18283,193.49387 274.53902,195.1891 274.53902,199.05423 L 274.53902,256.42087"
+         style="fill:#004a93;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         id="path37633" />
+      <path
+         d="M 345.73874,222.17719 L 345.73874,236.28151 C 341.67019,240.35007 336.92354,242.65558 332.85498,242.65558 C 328.78643,242.65558 326.75215,240.68912 326.75215,235.39999 C 326.75215,229.5684 328.10834,227.33069 332.85498,225.49984 C 336.24545,224.07585 339.63591,223.19433 345.73874,222.17719 M 315.90267,205.29268 L 317.93695,204.47897 C 323.36169,202.30907 326.75215,201.49536 330.82071,200.74946 C 332.85498,200.47822 335.56735,200.20699 336.92354,200.20699 C 343.70447,200.20699 345.73874,202.44469 345.73874,208.68314 L 345.73874,210.44618 C 336.24545,212.0058 333.53308,212.54827 328.10834,213.70103 C 325.39596,214.37912 322.68359,215.26064 319.97122,216.4134 C 311.15602,219.93948 307.08746,226.72041 307.08746,237.36646 C 307.08746,250.72489 312.5122,257.09896 324.71787,257.09896 C 329.46452,257.09896 334.21117,256.01401 337.60163,253.84411 C 340.9921,252.2845 342.34828,251.47079 346.41684,247.74128 L 346.41684,249.91118 C 346.41684,254.31878 348.45111,256.42087 352.51967,256.42087 L 372.86245,256.42087 L 372.86245,249.16527 L 372.18436,249.16527 C 368.1158,249.16527 366.08152,247.33442 366.08152,243.67272 L 366.08152,209.02219 C 366.08152,190.98493 359.97869,184.88209 342.34828,184.88209 C 336.24545,184.88209 330.82071,185.56019 325.39596,186.84856 C 319.97122,188.13694 317.25885,189.08627 311.15602,192.2733"
+         style="fill:#004a93;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         id="path37635" />
+      <path
+         d="M 404.7328,256.42087 L 404.7328,208.54753 C 409.47945,204.13992 412.86991,202.44469 417.61656,202.44469 C 422.36321,202.44469 423.7194,204.47897 423.7194,211.66675 L 423.7194,256.42087 L 444.74027,256.42087 L 444.74027,208.27629 C 444.74027,198.37614 443.38408,194.10415 440.67171,190.37464 C 437.28125,186.71294 433.21269,185.01771 427.10986,185.01771 C 418.97275,185.01771 412.86991,188.00132 403.37662,196.20624 L 403.37662,192.40892 C 403.37662,188.00132 401.34234,185.83142 397.27378,185.83142 L 376.931,185.83142 L 376.931,193.49387 L 377.6091,193.49387 C 381.67765,193.49387 383.71193,195.1891 383.71193,199.05423 L 383.71193,256.42087"
+         style="fill:#004a93;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         id="path37637" />
+      <g
+         transform="matrix(6.780926,0,0,-6.780926,-9776.146,5300.883)"
+         style="fill:#143861;fill-opacity:1;fill-rule:evenodd;stroke:none"
+         clip-path="url(#clp5)"
+         id="g37643">
+        <path
+           d="M 1516.9,745.91 L 1512.3,745.91 L 1516.7,752.19 L 1516.7,754.33 L 1510.1,754.33 C 1509.3,754.33 1509,754.01 1509,753.24 L 1509,751.35 L 1510.1,751.35 L 1510.1,751.56 C 1510.1,752.13 1510.4,752.36 1511,752.36 L 1513.4,752.36 L 1508.9,746.08 L 1508.9,743.92 L 1516.9,743.92"
+           style="fill:#004a93;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           id="path37645" />
+        <path
+           d="M 1534.6,744.49 L 1534.6,756.27 C 1534.6,757.22 1534.2,757.53 1533.3,757.53 L 1530.6,757.53 L 1530.6,756.23 L 1530.9,756.23 C 1531.4,756.23 1531.6,756.04 1531.6,755.46 L 1531.6,744.49 L 1534.6,744.49 z M 1536.2,744.49 L 1539.1,744.49 L 1539.1,753.38 C 1539.1,754.28 1538.7,754.64 1537.8,754.64 L 1536.2,754.64 L 1536.2,744.49 z M 1530,744.49 L 1530,754.64 L 1528.4,754.64 C 1527.5,754.64 1527.1,754.28 1527.1,753.38 L 1527.1,744.49 L 1530,744.49 z M 1542.5,750.41 C 1542.5,744.9 1538.5,740.88 1533.1,740.88 C 1527.7,740.88 1523.7,744.9 1523.7,750.41 C 1523.7,755.92 1527.7,759.94 1533.1,759.94 C 1538.5,759.94 1542.5,755.92 1542.5,750.41 M 1544.4,750.41 C 1544.4,756.86 1539.6,761.7 1533.1,761.7 C 1526.7,761.7 1521.8,756.86 1521.8,750.41 C 1521.8,743.94 1526.7,739.1 1533.1,739.1 C 1539.6,739.1 1544.4,743.94 1544.4,750.41"
+           style="fill:#004a93;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           id="path37647" />
+      </g>
+    </g>
+  </g>
+</svg>

RadzenBlazorDemos/wwwroot/images/dell.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg3794"
+   viewBox="0 0 300 300">
+  <defs
+     id="defs3796" />
+  <metadata
+     id="metadata3799">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(-318.33375,-439.74274)"
+     id="layer1">
+    <g
+       transform="matrix(4.579965,0,0,-4.579965,468.34291,456.8459)"
+       id="g3460">
+      <path
+         id="path3462"
+         style="fill:#007db8;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 0,0 c -8.01,0 -15.264,-3.249 -20.516,-8.505 -5.254,-5.244 -8.501,-12.502 -8.501,-20.516 0,-8.008 3.247,-15.261 8.501,-20.507 5.252,-5.249 12.506,-8.504 20.516,-8.504 8.012,0 15.27,3.255 20.514,8.504 5.252,5.246 8.492,12.499 8.492,20.507 0,8.014 -3.24,15.272 -8.492,20.516 C 15.27,-3.249 8.012,0 0,0 m 0,3.516 c 17.965,0 32.531,-14.568 32.531,-32.537 0,-17.963 -14.566,-32.529 -32.531,-32.529 -17.963,0 -32.535,14.566 -32.535,32.529 0,17.969 14.572,32.537 32.535,32.537" />
+    </g>
+    <g
+       transform="matrix(4.579965,0,0,-4.579965,397.87238,588.54693)"
+       id="g3464">
+      <path
+         id="path3466"
+         style="fill:#007db8;fill-opacity:1;fill-rule:nonzero;stroke:none"
+         d="m 0,0 c 0,1.896 -1.258,2.973 -3.039,2.973 l -1.09,0 0,-5.948 1.059,0 C -1.414,-2.975 0,-2.075 0,0 M 19.389,-2.14 11.359,-8.463 4.02,-2.685 C 2.961,-5.229 0.402,-6.996 -2.545,-6.996 l -6.281,0 0,13.992 6.281,0 c 3.293,0 5.666,-2.094 6.563,-4.325 l 7.341,5.772 2.719,-2.14 -6.728,-5.288 1.293,-1.012 6.726,5.285 2.723,-2.134 -6.727,-5.294 1.291,-1.014 6.733,5.295 0,4.855 4.881,0 0,-9.908 4.869,0 0,-4.101 -9.75,0 0,4.873 z m 15.933,-0.774 4.867,0 0,-4.099 -9.753,0 0,14.009 4.886,0 0,-9.91 z" />
+    </g>
+  </g>
+</svg>

RadzenBlazorDemos/wwwroot/images/deloitte.svg

@@ -0,0 +1,188 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="920"
+   height="200"
+   viewBox="0 0 919.99995 200.00003"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="Deloitte_logo_2016.svg"
+   inkscape:export-filename="C:\Users\Daijin\Desktop\Deloitte.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4">
+    <clipPath
+       id="clipPath3350"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3352"
+         d="m 42.52,723.968 130.394,0 0,24.378 -130.394,0 0,-24.378 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath3708"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3710"
+         d="m 335.433,531.507 135,0 0,51.596 -135,0 0,-51.596 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath3862"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3864"
+         d="m 335.433,476.232 135,0 0,51.565 -135,0 0,-51.565 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath3882"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3884"
+         d="m 335.433,420.927 135,0 0,51.564 -135,0 0,-51.564 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath3936"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3938"
+         d="m 335.433,365.621 135,0 0,51.564 -135,0 0,-51.564 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath3984"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3986"
+         d="m 335.433,310.315 135,0 0,51.564 -135,0 0,-51.564 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath4038"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path4040"
+         d="m 335.433,255.01 135,0 0,51.564 -135,0 0,-51.564 z" />
+    </clipPath>
+    <clipPath
+       id="clipPath3350-9"
+       clipPathUnits="userSpaceOnUse">
+      <path
+         inkscape:connector-curvature="0"
+         id="path3352-1"
+         d="m 42.52,723.968 130.394,0 0,24.378 -130.394,0 0,-24.378 z" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.6636812"
+     inkscape:cx="300.28476"
+     inkscape:cy="100"
+     inkscape:document-units="px"
+     inkscape:current-layer="g3359"
+     showgrid="false"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-2521.9698,-654.34261)">
+    <g
+       id="g3359"
+       transform="matrix(3.0676446,0,0,3.0676446,-6165.655,-2195.369)">
+      <g
+         id="g3371"
+         transform="matrix(1.7716542,0,0,1.7716542,-2301.0501,-745.37663)">
+        <path
+           inkscape:connector-curvature="0"
+           id="path3356"
+           style="fill:#86bc24;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 3054.8273,974.3862 c 0,-2.385 1.9363,-4.32 4.32,-4.32 2.385,0 4.3188,1.935 4.3188,4.32 0,2.385 -1.9338,4.31875 -4.3188,4.31875 -2.3837,0 -4.32,-1.93375 -4.32,-4.31875" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path3360"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 2917.0546,962.94557 c 0,-2.73625 -0.5287,-4.76625 -1.5862,-6.08875 -1.0588,-1.32125 -2.6626,-1.98125 -4.8188,-1.98125 l -2.2937,0 0,16.7325 1.755,0 c 2.395,0 4.15,-0.71 5.2675,-2.135 1.1162,-1.4225 1.6762,-3.59875 1.6762,-6.5275 m 8.18,-0.285 c 0,4.985 -1.34,8.82625 -4.02,11.5225 -2.68,2.6975 -6.4475,4.04625 -11.3038,4.04625 l -9.4362,0 0,-29.87125 10.095,0 c 4.6825,0 8.2975,1.22625 10.845,3.6775 2.5463,2.4525 3.82,5.9925 3.82,10.625" />
+        <path
+           d="m 2951.3731,978.22895 7.5087,0 0,-29.99625 -7.5087,0 0,29.99625 z"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           id="path3362"
+           inkscape:connector-curvature="0" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path3366"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 2969.4302,967.0402 c 0,1.9125 0.25,3.37125 0.7488,4.37375 0.5,1.00375 1.3374,1.505 2.5149,1.505 1.165,0 1.9888,-0.50125 2.4688,-1.505 0.48,-1.0025 0.7187,-2.46125 0.7187,-4.37375 0,-1.9025 -0.2425,-3.3375 -0.7287,-4.30625 -0.4875,-0.97125 -1.3188,-1.4575 -2.4975,-1.4575 -1.1525,0 -1.9762,0.48375 -2.4762,1.44625 -0.4988,0.96375 -0.7488,2.4025 -0.7488,4.3175 m 14.0937,0 c 0,3.64375 -0.955,6.48625 -2.87,8.52375 -1.9137,2.03875 -4.5925,3.05875 -8.0362,3.05875 -3.3025,0 -5.9313,-1.0425 -7.8825,-3.1275 -1.9537,-2.085 -2.93,-4.9025 -2.93,-8.455 0,-3.6325 0.9563,-6.455 2.8713,-8.4675 1.9149,-2.0125 4.5999,-3.01875 8.0574,-3.01875 2.1363,0 4.0263,0.46625 5.6638,1.3975 1.6387,0.93125 2.9038,2.265 3.7925,4.0025 0.89,1.735 1.3337,3.765 1.3337,6.08625" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path3370"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 2986.5059,978.22907 7.51,0 0,-11.48 0,-10.80125 -7.51,0 0,22.28125 z" />
+        <path
+           d="m 2986.5056,953.2527 7.51,0 0,-5.02125 -7.51,0 0,5.02125 z"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           id="path3372"
+           inkscape:connector-curvature="0" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path3376"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 3009.2307,972.54595 c 1.0138,0 2.2213,-0.2575 3.63,-0.76875 l 0,5.60625 c -1.0125,0.445 -1.975,0.76375 -2.89,0.9525 -0.915,0.19125 -1.9888,0.28625 -3.2175,0.28625 -2.5213,0 -4.3387,-0.63375 -5.455,-1.89875 -1.1112,-1.265 -1.6687,-3.2075 -1.6687,-5.82875 l 0,-9.185 -2.63,0 0,-5.76 2.63,0 0,-5.69 7.5675,-1.31625 0,7.00625 4.7912,0 0,5.76 -4.7912,0 0,8.6725 c 0,1.4425 0.6787,2.16375 2.0337,2.16375" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path3380"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 3026.6116,972.54595 c 1.0138,0 2.2213,-0.2575 3.63,-0.76875 l 0,5.60625 c -1.0112,0.445 -1.975,0.76375 -2.89,0.9525 -0.9162,0.19125 -1.9862,0.28625 -3.2175,0.28625 -2.5212,0 -4.3387,-0.63375 -5.4525,-1.89875 -1.1137,-1.265 -1.6712,-3.2075 -1.6712,-5.82875 l 0,-9.185 -2.6313,0 0,-5.76 2.6313,0 0,-5.77625 7.5662,-1.23 0,7.00625 4.7938,0 0,5.76 -4.7938,0 0,8.6725 c 0,1.4425 0.6788,2.16375 2.035,2.16375" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path3384"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 3039.7174,964.32582 c 0.1025,-1.22 0.4513,-2.11375 1.0462,-2.685 0.5976,-0.57 1.3351,-0.855 2.2176,-0.855 0.9625,0 1.7275,0.32 2.295,0.965 0.5712,0.64125 0.8687,1.5 0.8925,2.575 l -6.4513,0 z m 10.59,-6.145 c -1.785,-1.75 -4.3175,-2.62625 -7.5937,-2.62625 -3.4438,0 -6.0938,1.00625 -7.9513,3.01875 -1.8563,2.0125 -2.785,4.9 -2.785,8.6625 0,3.64375 1.0038,6.45375 3.0063,8.42625 2.0037,1.9725 4.8174,2.96 8.4412,2.96 1.74,0 3.2375,-0.11875 4.4925,-0.355 1.2475,-0.23375 2.455,-0.65625 3.6263,-1.26625 l -1.1538,-5.02125 c -0.8512,0.3475 -1.6612,0.615 -2.4262,0.79125 -1.105,0.25625 -2.3175,0.385 -3.6376,0.385 -1.4474,0 -2.5899,-0.35375 -3.4274,-1.06125 -0.8375,-0.70875 -1.2838,-1.68625 -1.335,-2.93125 l 13.4225,0 0,-3.42125 c 0,-3.29125 -0.8926,-5.8125 -2.6788,-7.56125" />
+        <path
+           inkscape:connector-curvature="0"
+           id="path3388"
+           style="fill:#0f0b0b;fill-opacity:1;fill-rule:nonzero;stroke:none"
+           d="m 2935.2007,964.32582 c 0.1025,-1.22 0.4513,-2.11375 1.0462,-2.685 0.5963,-0.57 1.335,-0.855 2.2188,-0.855 0.96,0 1.725,0.32 2.2938,0.965 0.5712,0.64125 0.8674,1.5 0.8937,2.575 l -6.4525,0 z m 10.5912,-6.145 c -1.7862,-1.75 -4.3175,-2.62625 -7.5949,-2.62625 -3.4451,0 -6.0938,1.00625 -7.9501,3.01875 -1.8562,2.0125 -2.7862,4.9 -2.7862,8.6625 0,3.64375 1.0025,6.45375 3.0075,8.42625 2.0025,1.9725 4.8162,2.96 8.44,2.96 1.74,0 3.2375,-0.11875 4.4925,-0.355 1.2475,-0.23375 2.455,-0.65625 3.6275,-1.26625 l -1.155,-5.02125 c -0.8513,0.3475 -1.6613,0.615 -2.425,0.79125 -1.1075,0.25625 -2.3187,0.385 -3.6388,0.385 -1.4462,0 -2.5899,-0.35375 -3.4274,-1.06125 -0.8388,-0.70875 -1.2838,-1.68625 -1.335,-2.93125 l 13.4225,0 0,-3.42125 c 0,-3.29125 -0.8926,-5.8125 -2.6776,-7.56125" />
+      </g>
+    </g>
+  </g>
+</svg>

RadzenBlazorDemos/wwwroot/images/eurobank.svg

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="123"
+   height="38"
+   viewBox="0 0 123 38"
+   enable-background="new 0 0 156 38"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="Eurobank.svg"><metadata
+   id="metadata3069"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs3067" /><sodipodi:namedview
+   pagecolor="#d3d3d3"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="1"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1017"
+   id="namedview3065"
+   showgrid="false"
+   showguides="true"
+   inkscape:guide-bbox="true"
+   inkscape:zoom="7.977615"
+   inkscape:cx="71.290435"
+   inkscape:cy="26.149078"
+   inkscape:window-x="-8"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+<path
+   d="m 120.375,15.254 c -1.51,-1.512 -3.512,-2.339 -5.639,-2.339 l -85.753,0 C 28.175,5.657 22.02,0 14.538,0 6.509,0 0,6.51 0,14.54 c 0,8.03 6.509,14.545 14.538,14.545 0.415,0 0.821,-0.033 1.229,-0.06 l 0,0.322 c 0,2.133 0.82,4.135 2.327,5.639 1.511,1.505 3.512,2.33 5.643,2.33 l 98.971,0 0,-1.193 0.003,-15.232 c 0,-2.125 -0.831,-4.134 -2.336,-5.637"
+   id="path3029"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff"
+   sodipodi:nodetypes="cscssscscscccc" />
+
+<path
+   d="m 121.512,36.12 -97.775,0 c -3.74,0 -6.774,-3.026 -6.774,-6.772 l 0,-15.227 97.773,-0.002 c 3.744,0 6.781,3.033 6.781,6.77 l -0.005,15.231"
+   id="path3033"
+   inkscape:connector-curvature="0"
+   style="fill:#0d1f7e"
+   sodipodi:nodetypes="csscccc" />
+<path
+   d="M 14.538,29.085 C 22.569,29.085 29.08,22.57 29.08,14.54 29.08,6.51 22.569,0 14.538,0 6.509,0 0,6.51 0,14.54 0,22.57 6.509,29.085 14.538,29.085"
+   id="path3035"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 14.538,27.884 c 7.37,0 13.344,-5.974 13.344,-13.344 0,-7.373 -5.974,-13.347 -13.344,-13.347 -7.367,0 -13.342,5.974 -13.342,13.347 0,7.37 5.975,13.344 13.342,13.344"
+   id="path3037"
+   inkscape:connector-curvature="0"
+   style="fill:#de2402" />
+<path
+   d="M 16.118,5.112 C 15.944,5.004 15.753,4.918 15.554,4.842 13.955,4.243 12.157,5.019 11.062,6.663 l -6.049,8.964 c -0.896,1.378 -0.736,3.232 0.465,4.438 0.687,0.688 1.596,1.027 2.496,1.027 H 22.397 L 19.621,17.794 H 7.602 L 16.118,5.112"
+   id="path3039"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 17.962,12.376 -1.957,3.049 h -3.987 l 5.561,-8.624 6.362,7.391 c 1.586,1.757 1.35,3.809 0.221,5.354 l -6.2,-7.17"
+   id="path3041"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 40.896,25.813 h -4.403 v 2.371 c 0,0 -0.038,0.575 0.551,1.058 0.35,0.286 0.979,0.262 0.979,0.262 h 3.685 v 1.879 h -4.437 c 0,0 -1.355,0.12 -2.304,-0.606 -0.922,-0.702 -0.819,-2.188 -0.819,-2.188 v -9.646 h 6.771 v 1.762 h -4.426 v 3.242 h 4.403 v 1.866"
+   id="path3043"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 52.007,28.664 c 0,1.08 0.042,1.977 0.08,2.718 h -2.043 l -0.113,-1.354 h -0.056 c -0.401,0.631 -1.317,1.561 -2.994,1.561 -1.676,0 -3.22,-0.99 -3.22,-3.947 v -5.336 h 2.344 v 4.94 c 0,1.513 0.496,2.479 1.734,2.479 0.953,0 1.564,-0.63 1.792,-1.232 0.094,-0.188 0.131,-0.445 0.131,-0.702 v -5.485 h 2.345 v 6.358"
+   id="path3045"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 54.543,25.229 c 0,-1.229 -0.019,-2.121 -0.072,-2.924 h 2.021 l 0.092,1.715 h 0.06 c 0.454,-1.267 1.543,-1.92 2.555,-1.92 0.229,0 0.766,0.131 0.971,0.24 l -0.58,1.942 c -0.208,-0.036 -0.258,-0.036 -0.548,-0.036 -1.104,0 -1.883,0.688 -2.093,1.729 -0.041,0.207 -0.06,0.453 -0.06,0.695 v 4.711 h -2.345 l -10e-4,-6.152"
+   id="path3047"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 65.295,29.934 c 1.335,0 2.271,-1.27 2.271,-3.117 0,-1.414 -0.647,-3.06 -2.253,-3.06 -1.654,0 -2.325,1.588 -2.325,3.099 0,1.752 0.897,3.078 2.289,3.078 h 0.018 m -0.075,1.654 c -2.61,0 -4.65,-1.752 -4.65,-4.68 0,-2.982 2,-4.807 4.802,-4.807 2.765,0 4.613,1.897 4.613,4.655 0,3.345 -2.399,4.831 -4.745,4.831 h -0.02 z"
+   id="path3049"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 74.255,27.641 c 0,0.184 0.019,0.37 0.058,0.537 0.246,0.934 1.066,1.605 2.076,1.605 1.468,0 2.363,-1.141 2.363,-2.985 0,-1.603 -0.778,-2.909 -2.341,-2.909 -0.954,0 -1.833,0.672 -2.081,1.682 -0.037,0.17 -0.075,0.371 -0.075,0.594 v 1.476 m -2.342,-9.172 h 2.342 v 5.088 h 0.038 c 0.571,-0.88 1.581,-1.455 2.975,-1.455 2.269,-0.002 3.886,1.842 3.867,4.605 0,3.261 -2.113,4.879 -4.214,4.881 -1.2,0 -2.265,-0.443 -2.934,-1.561 H 73.95 l -0.114,1.354 h -2.002 c 0.038,-0.608 0.079,-1.616 0.079,-2.53 V 18.469 z"
+   id="path3051"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 87.979,26.945 c -1.656,-0.014 -3.24,0.322 -3.24,1.697 0,0.896 0.592,1.31 1.334,1.31 0.953,0 1.621,-0.599 1.85,-1.252 0.059,-0.168 0.059,-0.339 0.059,-0.505 v -1.25 m 2.284,2.259 c 0,0.823 0.037,1.622 0.152,2.178 h -2.113 l -0.173,-1.006 h -0.057 c -0.554,0.711 -1.526,1.21 -2.745,1.21 -1.869,0 -2.916,-1.318 -2.916,-2.695 0,-2.281 2.078,-3.455 5.508,-3.431 v -0.151 c 0,-0.597 -0.248,-1.584 -1.889,-1.584 -0.911,0 -1.869,0.274 -2.494,0.672 L 83.08,22.903 c 0.684,-0.41 1.886,-0.803 3.355,-0.803 2.973,0 3.828,1.844 3.828,3.84 v 3.265 h 0.003 z"
+   id="path3053"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 92.745,25.009 c 0,-1.045 -0.038,-1.92 -0.077,-2.704 h 2.04 l 0.114,1.358 h 0.057 c 0.419,-0.707 1.434,-1.563 2.975,-1.563 1.623,0 3.299,1.024 3.299,3.899 v 5.383 h -2.344 v -5.124 c 0,-1.309 -0.498,-2.294 -1.774,-2.294 -0.935,0 -1.581,0.653 -1.83,1.345 -0.076,0.185 -0.115,0.463 -0.115,0.725 v 5.349 h -2.343 l -0.002,-6.374"
+   id="path3055"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+<path
+   d="m 105.992,26.295 h 0.039 c 0.226,-0.355 0.496,-0.746 0.721,-1.064 l 2.271,-2.926 h 2.463 l -3.479,4.418 3.598,4.62 h -2.879 l -2.729,-3.635 -0.005,0.581 v 3.093 h -2.345 V 18.469 h 2.345 l 0,7.826"
+   id="path3057"
+   inkscape:connector-curvature="0"
+   style="fill:#ffffff" />
+
+
+
+</svg>

RadzenBlazorDemos/wwwroot/images/konica.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg2" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="232.1px"
+	 viewBox="0 0 400 232.1" style="enable-background:new 0 0 400 232.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#007EC5;}
+	.st2{fill:#231F20;}
+</style>
+<g id="g10" transform="matrix(1, 0, 0, 1, 0, 0)">
+	<g id="g12" transform="scale(0.1)">
+		<path id="path14" class="st0" d="M1038.1,863.3c112.9,2.8,658.5,25.3,935.4,24.3c276.8,1,822.5-21.4,935.4-24.3
+			c7.8-0.2,11.7,3.7,12.2,9.5c0.4-9.4,0.5-18.9,0.5-28.5c0-9.5-0.2-18.9-0.5-28.5c-0.5,6-4.4,9.7-12.2,9.6
+			c-112.9-3-658.7-25.5-935.4-24.1c-277-1.3-822.5,21.1-935.4,24.1c-7.7,0.2-11.6-3.3-12.3-9.1c-0.3,9.2-0.5,18.6-0.5,28
+			c0,9.4,0.2,18.8,0.5,28C1026.5,866.7,1030.4,863.1,1038.1,863.3"/>
+		<path id="path16" class="st0" d="M1031.7,749.2c2.2-8.4,8.5-12.7,17.1-12.4c8.5,0.2,641.5,36.4,924.7,38.7
+			c283-2.4,916.2-38.6,924.7-38.7c8.7-0.3,15.2,4.4,17.2,13.1c-2.7-20.1-6.2-39.9-10.4-59.5c0.2,7.7-6.2,12.7-13.6,12.7
+			c-117.6-2.2-729.2-15.6-918-15.6c-188.6,0-800.2,13.4-917.8,15.6c-7.7,0-14.1-5.4-13.6-13.2
+			C1037.8,709.5,1034.4,729.3,1031.7,749.2"/>
+		<path id="path18" class="st0" d="M1059.4,625.2c2.8-6,6.7-8.9,13.6-8.7c117.1,6.5,900.6,50.3,900.6,50.3s783.6-43.8,900.9-50.3
+			c6.4,0,10.2,2.5,12.9,8c-5.7-18.1-12.2-36-19.4-53.6c3.3,9.6-1.7,15.6-11.1,15.7c-19.8,0-426.4,5.1-426.4,5.1h-913.8
+			c0,0-406.7-5.1-426.3-5.1c-9.4-0.2-14.4-6-11.4-15C1071.8,589,1065.2,607.1,1059.4,625.2"/>
+		<path id="path20" class="st0" d="M2887.3,1064.3c-2.7,5.5-6.5,8.1-12.9,7.9c-117.3-6.4-900.9-50.3-900.9-50.3
+			s-783.5,43.9-900.6,50.3c-6.9,0.2-10.7-2.5-13.6-8.6c5.8,18.1,12.4,35.9,19.6,53.5c-3-9.1,2-15.1,11.2-15.1
+			c19.8-0.2,426.4-5,426.4-5h913.8c0,0,406.7,4.8,426.4,5c9.4,0,14.4,6.4,11.1,15.6C2875.1,1100,2881.6,1082.4,2887.3,1064.3"/>
+		<path id="path22" class="st0" d="M2915.5,938.8c-2,8.7-8.5,13.4-17.2,13.1c-8.5-0.3-641.7-36.4-924.7-38.7
+			c-283.1,2.3-916.1,38.4-924.7,38.7c-8.6,0.4-14.9-4-17.1-12.6c2.7,20.1,6,40.1,10.4,59.7c-0.5-8.1,6-13.6,13.6-13.4
+			c117.6,2.2,729.2,15.6,917.8,15.6c188.8,0,800.4-13.4,918-15.6c7.4-0.2,13.8,5,13.6,12.7C2909.3,978.9,2912.8,959,2915.5,938.8"/>
+		<path id="path24" class="st1" d="M1973.5,23.2c413,0,765.2,229.3,894,546.9c4,9.9-1,16.6-10.7,16.6c-19.8,0-426.4,5.1-426.4,5.1
+			h-913.8c0,0-406.7-5.1-426.4-5.1c-9.7,0-14.7-6.7-10.7-16.6C1208.3,252.6,1560.5,23.2,1973.5,23.2"/>
+		<path id="path26" class="st1" d="M1973.5,687.5c188.8,0,800.4,13.4,918,15.6c8.1,0,14.9-6,13.4-14.8
+			c-1.8-10.7-13.6-52.8-16.4-61.1c-2.7-7.6-6.7-10.9-14.1-10.7c-117.3,6.5-900.9,50.3-900.9,50.3S1190,623,1072.9,616.5
+			c-7.6-0.2-11.6,3.2-14.2,10.7c-3,8.4-14.6,50.4-16.4,61.1c-1.5,8.7,5.2,14.8,13.4,14.8C1173.3,700.9,1784.9,687.5,1973.5,687.5"/>
+		<path id="path28" class="st1" d="M1973.5,801.3c276.8-1.3,822.5,21.1,935.4,24.1c8.5,0.2,12.2-4.4,12.2-11.1c0-13.4-4-54.5-5.4-63
+			c-1.5-9.7-8.4-15.1-17.6-14.6c-8.5,0.2-641.7,36.4-924.7,38.7c-283.1-2.4-916.1-38.6-924.7-38.7c-9.2-0.5-16.1,4.9-17.6,14.6
+			c-1.5,8.5-5.4,49.6-5.4,63c-0.2,6.7,3.7,11.2,12.3,11.1C1151,822.4,1696.6,800,1973.5,801.3"/>
+		<path id="path30" class="st1" d="M1973.5,1665.7c413,0,765.2-229.4,894-547c4-10.1-1-16.6-10.7-16.6c-19.8-0.2-426.4-5-426.4-5
+			h-913.8c0,0-406.7,4.8-426.4,5c-9.7,0-14.7,6.5-10.7,16.6C1208.3,1436.3,1560.5,1665.7,1973.5,1665.7"/>
+		<path id="path32" class="st1" d="M1973.5,1001.2c188.8,0,800.4-13.4,918-15.6c8.1-0.2,14.9,6,13.4,14.9
+			c-1.8,10.5-13.6,52.8-16.4,61c-2.7,7.7-6.7,10.9-14.1,10.7c-117.3-6.6-900.9-50.3-900.9-50.3s-783.5,43.7-900.6,50.3
+			c-7.6,0.2-11.6-3-14.2-10.7c-3-8.2-14.6-50.5-16.4-61c-1.5-8.9,5.2-15.1,13.4-14.9C1173.3,987.8,1784.9,1001.2,1973.5,1001.2"/>
+		<path id="path34" class="st1" d="M1973.5,887.4c276.8,1.2,822.5-21.3,935.4-24.1c8.5-0.2,12.2,4.2,12.2,11c0,13.3-4,54.3-5.4,63
+			c-1.5,9.7-8.4,14.9-17.6,14.6c-8.5-0.3-641.7-36.4-924.7-38.7c-283.1,2.3-916.1,38.4-924.7,38.7c-9.2,0.4-16.1-4.8-17.6-14.6
+			c-1.5-8.7-5.4-49.8-5.4-63c-0.2-6.8,3.7-11.2,12.3-11C1151,866.1,1696.6,888.6,1973.5,887.4"/>
+		<path id="path36" class="st2" d="M520.3,2249.6c-39.5,0-101.7-29.3-101.7-123.7c0-94.5,62-124.6,101.7-124.6
+			c39.7,0,101.5,30.1,101.5,124.6C621.9,2220.6,559.9,2249.6,520.3,2249.6z M520,1953.7c-91.3,0-165.5,77.1-165.5,172.3
+			c0,95,74.2,172.3,165.5,172.3c91.5,0,165.7-77.3,165.7-172.3C685.8,2030.8,611.5,1953.7,520,1953.7"/>
+		<path id="path38" class="st2" d="M3066.6,2249.6c-39.5,0-101.7-29.3-101.7-123.7c0-94.5,62-124.6,101.7-124.6
+			c39.7,0,101.6,30.1,101.6,124.6C3168.2,2220.6,3106.1,2249.6,3066.6,2249.6z M3066.3,1953.7c-91.3,0-165.4,77.1-165.4,172.3
+			c0,95,74.1,172.3,165.4,172.3c91.5,0,165.7-77.3,165.7-172.3C3232,2030.8,3157.8,1953.7,3066.3,1953.7"/>
+		<path id="path40" class="st2" d="M40,1961.6h59.8v328.7H40V1961.6z"/>
+		<path id="path42" class="st2" d="M1107.9,1961.6h59.8v328.7h-59.8V1961.6z"/>
+		<path id="path44" class="st2" d="M2419.4,1961.6h59.8v328.7h-59.8V1961.6z"/>
+		<path id="path46" class="st2" d="M1440.9,2005.6h26.2l3-42.4c-13.1-1.5-22.9-2.2-36.2-2.2c-127.2,0-209.1,67.9-209.1,164.9
+			c0,97.2,81.9,164.9,209.1,164.9c13.3,0,23.1-0.7,36.2-2l-3-42.5h-26.2c-90.3,0-149.8-46.9-149.8-120.7
+			C1291.1,2051.7,1350.9,2005.6,1440.9,2005.6"/>
+		<path id="path48" class="st2" d="M972.6,2157.8c0,0.7-0.2,0.9-0.5,0.3c-43.7-80.4-137-164.9-193.8-196.5h-40.7v328.7h56.3
+			c0,0-2.3-253.3-2.3-253.8c0-1,0.1-1.2,0.7-1c70.9,48.9,147.8,143.4,188.3,254.8h46.2v-328.7h-56.4
+			C970.3,1961.6,972.6,2157.4,972.6,2157.8"/>
+		<path id="path50" class="st2" d="M2793.7,2157.8c0,0.7-0.3,0.9-0.6,0.3c-43.6-80.4-136.9-164.9-193.7-196.5h-40.9v328.7h56.3
+			c0,0-2.3-253.3-2.3-253.8c0-1,0.2-1.2,0.8-1c70.9,48.9,147.8,143.4,188.2,254.8h46.4v-328.7h-56.4
+			C2791.3,1961.6,2793.7,2157.4,2793.7,2157.8"/>
+		<path id="path52" class="st2" d="M1488.5,2290.3h56.6c0,0,88.5-209.7,91.8-216.8c3.9,7.2,109.2,216.8,109.2,216.8h67.6
+			l-175.9-335.2L1488.5,2290.3"/>
+		<path id="path54" class="st2" d="M3783.9,1955.1l-149.3,335.2h56.6c0,0,88.5-209.7,91.8-216.8c4,7.2,109.2,216.8,109.2,216.8h67.7
+			L3783.9,1955.1"/>
+		<path id="path56" class="st2" d="M206.2,2095.3c34.7-35.9,128.5-133.7,128.5-133.7h-71.9l-136.7,143.9
+			c65.7,43,120.5,102,154.3,184.8h62.8C317.3,2212.6,267.5,2141.3,206.2,2095.3"/>
+		<path id="path58" class="st2" d="M3343.7,1961.6h-59.8v328.7h190v-45.6h-130.2V1961.6"/>
+		<path id="path60" class="st2" d="M3672.3,1961.6h-226.7v45.6h83.5v283.1h59.8v-283.1h83.5V1961.6"/>
+		<path id="path62" class="st2" d="M2176.7,2123.1c-6,11.4-14.4,33.2-20.1,48.6c-0.2,0.3-0.7,0.3-0.9,0
+			c-5.5-15.1-13.9-37.1-19.8-48.3c-28.7-59.5-73.9-141.3-100.8-169.9c-15.8,29.1-78.4,281.8-91.5,336.8h60
+			c0,0,47.1-215.4,47.3-216.1c0.2-0.7,0.5-1,0.8-0.5c20.6,31.7,60.5,113.3,84.6,187.4h39.7c22.1-69.4,63.7-156.2,84.1-187.8
+			c0.3-0.2,0.6,0,0.6,0.5c0.2,0.5,48.1,216.7,48.1,216.7h60c-13.3-54.9-75.7-307.6-91.6-336.8
+			C2249.8,1982.2,2205.4,2064,2176.7,2123.1"/>
+	</g>
+</g>
+</svg>

RadzenBlazorDemos/wwwroot/images/microsoft.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="MS-symbol" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 337.6 72" style="enable-background:new 0 0 337.6 72;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#737373;}
+	.st1{fill:#F25022;}
+	.st2{fill:#7FBA00;}
+	.st3{fill:#00A4EF;}
+	.st4{fill:#FFB900;}
+</style>
+<path class="st0" d="M140.4,14.4v43.2h-7.5V23.7h-0.1l-13.4,33.9h-5l-13.7-33.9h-0.1v33.9h-6.9V14.4h10.8l12.4,32h0.2l13.1-32H140.4
+	z M146.6,17.7c0-1.2,0.4-2.2,1.3-3c0.9-0.8,1.9-1.2,3.1-1.2c1.3,0,2.4,0.4,3.2,1.2s1.3,1.8,1.3,3c0,1.2-0.4,2.2-1.3,3
+	c-0.9,0.8-1.9,1.2-3.2,1.2s-2.3-0.4-3.1-1.2C147.1,19.8,146.6,18.8,146.6,17.7z M154.7,26.6v31h-7.3v-31H154.7z M176.8,52.3
+	c1.1,0,2.3-0.2,3.6-0.8c1.3-0.5,2.5-1.2,3.6-2v6.8c-1.2,0.7-2.5,1.2-4,1.5c-1.5,0.3-3.1,0.5-4.9,0.5c-4.6,0-8.3-1.4-11.1-4.3
+	c-2.9-2.9-4.3-6.6-4.3-11c0-5,1.5-9.1,4.4-12.3c2.9-3.2,7-4.8,12.4-4.8c1.4,0,2.8,0.2,4.1,0.5c1.4,0.3,2.5,0.8,3.3,1.2v7
+	c-1.1-0.8-2.3-1.5-3.4-1.9c-1.2-0.4-2.4-0.7-3.6-0.7c-2.9,0-5.2,0.9-7,2.8s-2.6,4.4-2.6,7.6c0,3.1,0.9,5.6,2.6,7.3
+	C171.6,51.4,173.9,52.3,176.8,52.3z M204.7,26.1c0.6,0,1.1,0,1.6,0.1s0.9,0.2,1.2,0.3v7.4c-0.4-0.3-0.9-0.6-1.7-0.8
+	s-1.6-0.4-2.7-0.4c-1.8,0-3.3,0.8-4.5,2.3s-1.9,3.8-1.9,7v15.6h-7.3v-31h7.3v4.9h0.1c0.7-1.7,1.7-3,3-4
+	C201.2,26.6,202.8,26.1,204.7,26.1z M207.9,42.6c0-5.1,1.5-9.2,4.3-12.2c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3
+	s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2C209.3,51.3,207.9,47.4,207.9,42.6z
+	 M215.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6
+	c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C216.2,36.5,215.5,39,215.5,42.3z M250.5,34.8c0,1,0.3,1.9,1,2.5
+	c0.7,0.6,2.1,1.3,4.4,2.2c2.9,1.2,5,2.5,6.1,3.9c1.2,1.5,1.8,3.2,1.8,5.3c0,2.9-1.1,5.2-3.4,7c-2.2,1.8-5.3,2.6-9.1,2.6
+	c-1.3,0-2.7-0.2-4.3-0.5c-1.6-0.3-2.9-0.7-4-1.2v-7.2c1.3,0.9,2.8,1.7,4.3,2.2c1.5,0.5,2.9,0.8,4.2,0.8c1.6,0,2.9-0.2,3.6-0.7
+	c0.8-0.5,1.2-1.2,1.2-2.3c0-1-0.4-1.8-1.2-2.6c-0.8-0.7-2.4-1.5-4.6-2.4c-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4
+	c0-2.8,1.1-5.1,3.3-6.9c2.2-1.8,5.1-2.7,8.6-2.7c1.1,0,2.3,0.1,3.6,0.4s2.5,0.6,3.4,0.9V34c-1-0.6-2.1-1.2-3.4-1.7
+	c-1.3-0.5-2.6-0.7-3.8-0.7c-1.4,0-2.5,0.3-3.2,0.8C250.9,33.1,250.5,33.8,250.5,34.8z M266.9,42.6c0-5.1,1.5-9.2,4.3-12.2
+	c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2
+	C268.4,51.3,266.9,47.4,266.9,42.6z M274.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6
+	c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C275.3,36.5,274.5,39,274.5,42.3z
+	 M322.9,32.6h-10.9v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2,1.1-5.9,3.2-8s4.8-3.1,8.1-3.1c0.9,0,1.7,0.1,2.4,0.1s1.3,0.2,1.8,0.4v6.3
+	c-0.2-0.1-0.7-0.3-1.3-0.5c-0.6-0.2-1.3-0.3-2.1-0.3c-1.5,0-2.7,0.5-3.5,1.4c-0.8,0.9-1.2,2.4-1.2,4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4
+	v6h-7.4v14.5c0,1.9,0.4,3.2,1,4c0.7,0.8,1.8,1.2,3.3,1.2c0.4,0,0.9-0.1,1.5-0.3c0.6-0.2,1.1-0.4,1.5-0.7v6c-0.5,0.3-1.2,0.5-2.3,0.7
+	c-1.1,0.2-2.1,0.3-3.2,0.3c-3.1,0-5.4-0.8-6.9-2.4c-1.5-1.6-2.3-4.1-2.3-7.4L322.9,32.6L322.9,32.6z"/>
+<g>
+	<rect class="st1" width="34.2" height="34.2"/>
+	<rect x="37.8" class="st2" width="34.2" height="34.2"/>
+	<rect y="37.8" class="st3" width="34.2" height="34.2"/>
+	<rect x="37.8" y="37.8" class="st4" width="34.2" height="34.2"/>
+</g>
+</svg>

RadzenBlazorDemos/wwwroot/images/nasa.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0"?>
+<svg height="92" viewBox="0 0 110 92" width="110" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50.049" cy="45" fill="#0b3d91" r="40.14"/>
+<g fill="#fff">
+<circle cx="47.679" cy="12.57" r=".45"/>
+<circle cx="52.299" cy="13.17" r=".45"/>
+<circle cx="58.359" cy="21.33" r=".45"/>
+<circle cx="25.119" cy="63.33" r=".45"/>
+<circle cx="26.289" cy="66.93" r=".45"/>
+<circle cx="20.709" cy="63.87" r=".337"/>
+<circle cx="39.009" cy="70.942" r=".338"/>
+<circle cx="67.711" cy="64.98" r=".337"/>
+<circle cx="76.052" cy="55.92" r=".338"/>
+<circle cx="35.169" cy="23.962" r=".337"/>
+<circle cx="44.349" cy="17.22" r=".337"/>
+<circle cx="43.352" cy="16.56" r=".337"/>
+<circle cx="42.452" cy="15.9" r=".337"/>
+<circle cx="36.609" cy="25.703" r=".337"/>
+<circle cx="50.131" cy="8.16" r=".337"/>
+<circle cx="52.352" cy="17.88" r=".337"/>
+<circle cx="48.849" cy="15.982" r=".337"/>
+<circle cx="42.849" cy="18.563" r=".337"/>
+<circle cx="69.309" cy="73.883" r=".337"/>
+<circle cx="24.549" cy="65.61" r=".338"/>
+<circle cx="48.009" cy="69.96" r=".338"/>
+<circle cx="31.531" cy="65.34" r=".338"/>
+<circle cx="34.449" cy="70.103" r=".338"/>
+<circle cx="55.929" cy="67.103" r=".337"/>
+<circle cx="67.771" cy="60.42" r=".337"/>
+<circle cx="76.749" cy="64.522" r=".337"/>
+<circle cx="79.809" cy="66.48" r=".337"/>
+<circle cx="80.312" cy="61.14" r=".337"/>
+<circle cx="35.671" cy="53.58" r=".337"/>
+<circle cx="35.799" cy="61.32" r=".45"/>
+<circle cx="38.499" cy="67.02" r=".45"/>
+<circle cx="70.839" cy="61.08" r=".45"/>
+<circle cx="82.479" cy="60.42" r=".45"/>
+<circle cx="76.719" cy="57.96" r=".45"/>
+<circle cx="70.839" cy="58.2" r=".45"/>
+<path d="M58.71 12.288l1.119-.107-1.117-.063c-.035-.216-.208-.385-.426-.413l-.107-1.114-.064 1.123c-.202.045-.357.214-.382.424l-1.144.104 1.152.062c.042.193.198.344.394.38l.104 1.148.061-1.146C58.507 12.651 58.671 12.492 58.71 12.288z"/>
+<path d="M39.824 24.746l1.119-.107-1.117-.063c-.034-.216-.208-.385-.426-.413l-.107-1.114-.063 1.123c-.203.045-.358.214-.383.424l-1.144.104 1.152.062c.042.193.198.344.394.38l.104 1.148.062-1.146C39.622 25.11 39.786 24.95 39.824 24.746z"/>
+<path d="M81.659 57.684l1.119-.107-1.117-.063c-.034-.216-.208-.385-.426-.413l-.107-1.114-.063 1.123c-.202.045-.357.214-.382.424l-1.144.104 1.152.062c.042.193.198.344.394.38l.104 1.148.062-1.146C81.456 58.048 81.62 57.889 81.659 57.684z"/>
+<path d="M36.044 74.906l1.119-.107-1.117-.063c-.035-.216-.208-.385-.426-.413l-.107-1.113-.063 1.122c-.203.045-.358.214-.383.424l-1.144.104 1.152.062c.042.193.198.345.394.38l.104 1.148.062-1.146C35.841 75.27 36.006 75.11 36.044 74.906z"/>
+<path d="M78.104 66.506l1.119-.107-1.117-.063c-.034-.216-.208-.385-.426-.413l-.107-1.114-.063 1.122c-.202.045-.357.214-.382.424l-1.144.104 1.152.062c.042.193.198.344.394.38l.104 1.148.062-1.146C77.901 66.87 78.066 66.71 78.104 66.506z"/>
+<path d="M59.568 35.385c-4.667 1.814-9.219 3.433-13.06 4.635-7.805 2.444-29.16 9.06-42.06 17.4l1.08.42c7.86-4.44 12.969-5.835 17.88-7.38 5.34-1.68 22.603-5.72 30.42-7.92 2.641-.743 5.734-1.716 9.01-2.9-.762-1.063-1.566-2.129-2.412-3.193C60.143 36.088 59.856 35.734 59.568 35.385zM65.27 43.244c-1.13.763-2.077 1.372-2.74 1.756-3.84 2.22-22.561 15-26.82 17.94s-16.08 14.1-19.56 17.34l-.12 1.319c11.22-10.08 14.74-12.566 19.2-15.959 5.52-4.2 16.939-11.97 20.82-14.46 3.71-2.38 7.056-4.569 10.059-6.572-.049-.082-.098-.164-.147-.247C65.736 43.99 65.505 43.618 65.27 43.244zM82.809 24.72c-5.466 3.204-14.081 7.071-22.439 10.352.2.245.399.492.597.741.934 1.176 1.815 2.36 2.644 3.545 6.57-2.42 13.779-5.668 19.499-9.599-2.725 2.582-11.734 9.315-17.227 13.068.283.461.557.922.822 1.381 8.322-5.569 13.922-9.668 17.185-12.409 4.5-3.78 14.76-12.24 18.66-23.58C95.709 16.92 87.621 21.899 82.809 24.72z" fill="#fc3d21"/>
+<path d="M44.884 54.939c-.885-1.114-2.109-2.606-3.028-3.763-1.229-1.547-2.366-3.11-3.408-4.671-.34.085-.679.17-1.018.255 1.258 1.963 2.655 3.923 4.177 5.839 1.112 1.4 2.123 2.527 2.641 3.228.105.142.313.456.594.874.324-.22.651-.442.981-.666C45.504 55.688 45.189 55.323 44.884 54.939zM51.344 60.803c-.727-.688-2.49-1.837-4.325-3.561-.405.278-.814.56-1.224.844 1.185 1.67 2.799 3.721 4.063 4.319C51.762 63.307 52.275 61.685 51.344 60.803zM60.967 35.813c-10.492-13.206-23.309-20.461-28.835-16.07-4.292 3.41-2.53 13.376 3.386 23.845.306-.105.609-.208.909-.31-5.971-10.2-7.605-19.679-3.557-22.896 5.087-4.042 17.37 3.241 27.558 16.064 2.109 2.654 3.963 5.318 5.533 7.915 6.012 9.95 7.857 18.948 3.703 22.621-1.271 1.124-5.155 1.565-10.243-.725-.071.089.043.33.132.389 4.392 1.766 8.599 2.439 10.723.752C75.38 63.342 71.459 49.019 60.967 35.813z"/>
+<path d="M15.969 37.38h6.72l5.64 9.57c0 0 0-6.93 0-7.47 0-.84-1.065-1.935-1.44-2.1.45 0 4.38 0 4.65 0-.285.075-1.2 1.185-1.2 2.1 0 .45 0 10.5 0 10.98 0 .675.975 1.605 1.44 1.965h-6.48l-5.73-9.615c0 0 0 7.17 0 7.56 0 .75.735 1.47 1.5 2.085h-4.95c.705-.3 1.38-1.245 1.44-1.995s0-10.425 0-10.845C17.559 38.7 16.674 37.95 15.969 37.38z"/>
+<path d="M77.439 52.425h8.94c-.495-.12-1.05-.705-1.35-1.485-.3-.78-5.04-13.56-5.04-13.56H76.59c-.964.694-1.997 1.426-3.1 2.197-.003.028-.006.056-.011.083-.148.9-2.808 10.534-2.97 11.01-.225.66-1.38 1.395-1.845 1.785h4.815c-.48-.54-.87-1.065-.78-1.665.09-.6.36-1.8.36-1.8h4.98c.225.6.393 1.139.48 1.65C78.624 51.255 77.994 51.945 77.439 52.425zM73.509 47.07l1.68-5.49 2.22 5.49H73.509zM72.752 37.928c.247-.182.495-.365.742-.548h-1.305C72.319 37.5 72.534 37.689 72.752 37.928z"/>
+<path d="M38.559 50.79c.09-.6.36-1.8.36-1.8h4.98c.225.6.393 1.139.48 1.65.105.615-.525 1.305-1.08 1.785h7.871c.164-.11.327-.22.49-.329-.305-.27-.586-.675-.771-1.156-.3-.78-5.04-13.56-5.04-13.56h-7.8c.375.345 1.455 1.275 1.29 2.28-.147.9-2.808 10.534-2.97 11.01-.225.66-1.38 1.395-1.845 1.785h4.815C38.859 51.915 38.469 51.39 38.559 50.79zM41.049 41.58l2.22 5.49h-3.9L41.049 41.58z"/>
+<path d="M65.748 44.848c-1.468.978-3.017 1.999-4.649 3.065.732.355 1.315.801 1.371 1.377.104 1.082-2.07 1.605-4.035 1.38-.393-.045-.779-.148-1.147-.286-.408.263-.82.528-1.238.796-.425.273-.941.609-1.53.997v1.553c.39-.765 1.243-1.45 1.905-1.485.285-.015 1.275.9 5.355.675 1.98-.109 5.805-2.22 5.745-4.65C67.489 46.834 66.739 45.714 65.748 44.848zM54.519 48.6v1.582c.361-.241.717-.478 1.066-.709C55.036 49.091 54.647 48.734 54.519 48.6zM64.353 43.855c-.38-.225-.765-.422-1.134-.596-1.92-.9-3.93-1.065-4.35-2.28-.296-.857.54-1.65 2.58-1.62 2.04.03 3.93 1.245 4.44 1.68v-3.87c-.15.15-.808.905-1.41.78-1.155-.24-3.12-.553-5.37-.54-2.58.015-4.8 2.009-4.875 4.53-.105 3.525 2.715 4.485 4.305 5.04.164.057.351.118.554.183 1.525-.992 2.731-1.756 3.437-2.163C63.004 44.726 63.625 44.334 64.353 43.855z"/>
+</g>
+</svg>