version updated

* Change to DatePicker to optionally pad the time picker hour, minute or seconds components with leading zeros. Corresponding new boolean parameters are PadHours, PadMinutes and PadSeconds.

* Fixed issue with RadzenDialog where closing a nested dialog removed the 'no-scroll' class from the page body, allowing the background to scroll. The javascript 'closeDialog' function is now only invoked when the last dialog is closed.
Added a  potential impovement to RadzenDialog, whereby the dialog mask is only shown for the top most dialog, rather than the accumulative effect of multiple masks. This might be personal perference, but makes more sense to me.

* Added boolean Cancel property to UploadProgressArgs, allowing the underlying XMLHttpRequest to be aborted if required. Thereby cancelling the upload. Added boolean Cancelled property to UploadCompleteEventArgs, to determine if the request completed due to being canelled.

.gitignore

@@ -8,6 +8,7 @@
 *.user
 *.userosscache
 *.sln.docstates
+global.json
 
 # User-specific files (MonoDevelop/Xamarin Studio)
 *.userprefs
@@ -333,3 +334,10 @@ issues.json
 
 Radzen.Blazor/wwwroot/css/
 project.csproj
+RadzenBlazorDemos/wwwroot/docs/
+Radzen.DocFX/obj/
+Radzen.DocFX/_site/
+Radzen.DocFX/_exported_templates
+Radzen.DocFX/api/*.yml
+!Radzen.DocFX/api/index.md
+Radzen.DocFX/api/.manifest

CONTRIBUTING.md

@@ -5,21 +5,19 @@
 This is a set of guidelines for contributing to Radzen.Blazor.
 
 ## Asking questions
-
 Please don't open an issue to ask a question about using Radzen.Blazor components. You can check the following resources instead:
 
-- [Online demos](https://blazor.radzen.com)
-
+### [Online demos](https://blazor.radzen.com)
 A showcase application that demonstrates all Radzen.Blazor components. You will find various use cases that demonstrate the component features and API. The source 
 of the demos is available [here](https://github.com/radzenhq/radzen-blazor/tree/master/RadzenBlazorDemos).
-- [Documentation](https://www.radzen.com/documentation/blazor/accordion/)
 
+### [Documentation](https://blazor.radzen.com/docs/)
 Technical documentation and API reference.
-- [Online forum](https://forum.radzen.com)
 
+### [Community forum](https://forum.radzen.com)
 You can ask your question here. Please use the [Radzen.Blazor Components](https://forum.radzen.com/c/blazor-components/10) category.
 
-- Dedicated technical support
+### Dedicated technical support
 
 Radzen staff provides technical support with guaranteed response time to Radzen Professional and Enterprise subscribers. The pricing options are available [here](https://www.radzen.com/pricing/).
 
@@ -67,7 +65,8 @@ Explain the enhancement and include additional details:
 If you want to contribute a new feature of fix a bug you can open a pull request. 
 
 Make sure you follow this procedure:
-
+* **Important!!!** if you itent to make a lot of changes in a pull request open an issue to discuss this with us first. The Radzen Blazor Components have a lot of
+moving parts and making big changes should be done with extra precautions. 
 * **Be sure that none of the existing tests** breaks after your changes. The test project is available [here](https://github.com/radzenhq/radzen-blazor/tree/master/Radzen.Blazor.Tests).
 * **If possible add new tests that verify your fix or new feature**. 
 * **Follow the existing coding style** (to be described in detail later).

Dockerfile

@@ -0,0 +1,30 @@
+# syntax=docker/dockerfile:1
+FROM mono:latest
+
+ENV DOCFX_VER 2.58.4
+
+RUN apt-get update && apt-get install unzip wget git -y && wget -q -P /tmp https://github.com/dotnet/docfx/releases/download/v${DOCFX_VER}/docfx.zip && \
+    mkdir -p /opt/docfx && \
+    unzip /tmp/docfx.zip -d /opt/docfx && \
+    echo '#!/bin/bash\nmono /opt/docfx/docfx.exe $@' > /usr/bin/docfx && \
+    chmod +x /usr/bin/docfx && \
+    rm -rf /tmp/*
+
+COPY Radzen.Blazor /app/Radzen.Blazor
+COPY Radzen.DocFX /app/DocFX
+COPY RadzenBlazorDemos /app/RadzenBlazorDemos
+WORKDIR /app
+RUN docfx DocFX/docfx.json
+
+FROM mcr.microsoft.com/dotnet/sdk:6.0-focal
+
+COPY --from=0 /app/RadzenBlazorDemos /app
+WORKDIR /app
+RUN dotnet publish -c Release -o out
+COPY RadzenBlazorDemos/northwind.db /app/out
+COPY RadzenBlazorDemos/northwind.sql /app/out
+
+ENV ASPNETCORE_URLS http://*:5000
+WORKDIR /app/out
+
+ENTRYPOINT ["dotnet", "RadzenBlazorDemos.dll"]

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2021 Radzen Ltd
+Copyright (c) 2018-2022 Radzen Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,42 +1,113 @@
-# Radzen Blazor Components
+![Radzen Blazor Components](RadzenBlazorDemos/wwwroot/images/radzen-blazor-components.png)
 
-The home of the [Radzen Blazor components](https://blazor.radzen.com)
+<h1 align="center">
+    Radzen Blazor Components
+</h1>
 
-## Commercial support
+<p align="center">
+    A set of <strong>60+ free and open source</strong> native Blazor UI controls.
+</p>
 
-Paid support for the Radzen Blazor Components is available as part of the [Radzen Professional subscription](https://www.radzen.com/pricing/). 
+<div align="center">
 
-Our flagship product Radzen provides tons of productivity features for Blazor developers:
+[See Online Demos](https://blazor.radzen.com) or [Read the Docs](https://blazor.radzen.com/docs/)
+
+</div>
+
+---
+
+<p align="center">
+    <a href="https://github.com/radzenhq/radzen-blazor/blob/master/LICENSE">
+        <img alt="License - MIT" src="https://img.shields.io/github/license/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
+    </a>
+    <a href="https://www.nuget.org/packages/Radzen.Blazor">
+        <img alt="Nuget Downloads" src="https://img.shields.io/nuget/dt/Radzen.Blazor?color=%232694F9&label=nuget%20downloads&logo=nuget&style=for-the-badge" />
+    </a>
+    <img alt="Last Commit" src="https://img.shields.io/github/last-commit/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
+    <a href="https://github.com/radzenhq/radzen-blazor/graphs/contributors">
+        <img alt="Github Contributors" src="https://img.shields.io/github/contributors/radzenhq/radzen-blazor?logo=github&style=for-the-badge" />
+    </a>
+    <a href="https://blazor.radzen.com">
+        <img alt="Radzen Blazor Components - Online Demos" src="https://img.shields.io/badge/demos-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge" />
+    </a>
+    <a href="https://blazor.radzen.com/docs">
+        <img alt="Radzen Blazor Components - Documentation" src="https://img.shields.io/badge/docs-online-brightgreen?color=%232694F9&logo=blazor&style=for-the-badge" />
+    </a>
+</p>
+
+## Why choose Radzen Blazor Components?
+
+### :sparkles: Free
+
+Radzen Blazor Components are open source and free for commercial use. You can install them from [nuget](https://www.nuget.org/packages/Radzen.Blazor) or build your own copy from source.
+
+Paid support is available as part of the [Radzen Professional subscription](https://www.radzen.com/pricing/).
+
+### :computer: Native
+
+The components are implemented in C# and take full advantage of the Blazor framework. They do not depend on or wrap existing JavaScript frameworks or libraries.
+
+Blazor Server and Blazor WebAssembly are fully supported.
+
+### :seedling: Growing
+
+We add new components and features on a regular basis.
+
+Short development cycle. We release as soon as new stuff is available. No more quarterly releases.
+
+## Support exceeding your expectations 
+
+### :speech_balloon: Community Support
+Everybody is welcome to visit the [Radzen Community forum](https://forum.radzen.com/). Join the growing community and participate in the discussions!
+
+### :dart: Dedicated Support
+
+The Radzen team monitors the forum threads, but does not guarantee a response to every question. For guaranteed responses you may consider the dedicated support option.
+
+Dedicated support for the Radzen Blazor Components is available as part of the [Radzen Professional subscription](https://www.radzen.com/pricing/). 
+
+Our flagship product [Radzen Studio](https://www.radzen.com/features/) provides tons of productivity features for Blazor developers:
 - The first in the industry WYSIWYG Blazor design time canvas
 - Scaffolding a complete CRUD applications from a database
 - Built-in security - authentication and authorization
 - Visual Studio Code and Professional support
 - Deployment to IIS and Azure
 - Dedicated support with 24 hour guaranteed response time
-- Active community forum
 
-## Get started with the Radzen Blazor Components
+## Get started with Radzen Blazor Components
 
-### Install
+### 1. Install
 
-Radzen Blazor Components are distributed as the Radzen.Blazor nuget package. You can add them to your project in one of the following ways
-- Install the package from command line by running dotnet add package Radzen.Blazor
+Radzen Blazor Components are distributed as a [Radzen.Blazor nuget package](https://www.nuget.org/packages/Radzen.Blazor). You can add them to your project in one of the following ways
+- Install the package from command line by running `dotnet add package Radzen.Blazor`
 - Add the project from the Visual Nuget Package Manager 
 - Manually edit the .csproj file and add a project reference
 
-### Import the namespace
+### 2. Import the namespace
 
 Open the `_Imports.razor` file of your Blazor application and add this line `@using Radzen.Blazor`.
 
-### Include a theme
+### 3. Include a theme
 
-Open the `_Host.cshtml` file (server-side Blazor) or `wwwroot/index.html` (client-side Blazor) and include a theme CSS file by adding this snippet `<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">` or `<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">` if you either include Bootstrap manually or don't use it at all.
+Open `Pages\_Layout.cshtml` (Blazor Server .NET 6+), `Pages\_Host.cshtml` (Blazor Server before .NET 6) or `wwwroot/index.html` (Blazor WebAssembly) and include a theme CSS file by adding this snippet 
+```html
+<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
+```
+If you either add Bootstrap manually or don't use it at all, include this instead:
+```html
+<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
+```
 
-### Include Radzen.Blazor.js
 
-Open the `_Host.cshtml` file (server-side Blazor) or `wwwroot/index.html` (client-side Blazor) and include this snippet `<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>`
+### 4. Include Radzen.Blazor.js
 
-### Use a component
+Open `Pages\_Layout.cshtml` (Blazor Server .NET 6+), `Pages\_Host.cshtml` (Blazor Server before .NET 6) or `wwwroot/index.html` (Blazor WebAssembly) and include this snippet:
+
+```html
+<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
+```
+
+### 5. Use a component
 Use any Radzen Blazor component by typing its tag name in a Blazor page e.g. 
 ```html
 <RadzenButton Text="Hi"></RadzenButton>

Radzen.Blazor.Tests/BadgeTests.cs

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

Radzen.Blazor.Tests/BreadCrumbTests.cs

@@ -0,0 +1,77 @@
+using Bunit;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class BreadCrumbTests
+    {
+        [Fact]
+        public void BreadCrumb_Renders_Items()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBreadCrumb>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(c => c.ChildContent, builder =>
+          {
+              builder.OpenComponent<RadzenBreadCrumbItem>(0);
+              builder.AddAttribute(1, nameof(RadzenBreadCrumbItem.Text), "Test");
+              builder.CloseComponent();
+          });
+            });
+            //@"<RadzenBreadCrumbItem Text=""Test"" />"
+            Assert.Contains(@"class=""rz-breadcrumb-item", component.Markup);
+            Assert.Contains(">Test</", component.Markup);
+        }
+
+        [Fact]
+        public void BreadCrumb_Renders_Icon()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBreadCrumb>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(c => c.ChildContent, builder =>
+          {
+              builder.OpenComponent<RadzenBreadCrumbItem>(0);
+              builder.AddAttribute(1, nameof(RadzenBreadCrumbItem.Text), "Test");
+              builder.AddAttribute(2, nameof(RadzenBreadCrumbItem.Icon), "add");
+              builder.CloseComponent();
+          });
+            });
+
+            //@"<RadzenBreadCrumbItem Text=""Test"" />"
+            Assert.Contains("<i", component.Markup);
+            Assert.Contains(">add</i>", component.Markup);
+        }
+
+        [Fact]
+        public void BreadCrumb_Renders_Link()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenBreadCrumb>();
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(c => c.ChildContent, builder =>
+                {
+                    builder.OpenComponent<RadzenBreadCrumbItem>(0);
+                    builder.AddAttribute(1, nameof(RadzenBreadCrumbItem.Text), "Test");
+                    builder.AddAttribute(2, nameof(RadzenBreadCrumbItem.Icon), "add");
+                    builder.AddAttribute(3, nameof(RadzenBreadCrumbItem.Path), "/badge");
+                    builder.CloseComponent();
+                });
+            });
+
+            //@"<RadzenBreadCrumbItem Text=""Test"" />"
+            Assert.Contains("<i", component.Markup);
+            Assert.Contains(">add</i>", component.Markup);
+            Assert.Contains("<a href=\"/badge", component.Markup);
+        }
+    }
+}

Radzen.Blazor.Tests/ButtonTests.cs

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

Radzen.Blazor.Tests/CheckBoxTests.cs

@@ -110,7 +110,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, args => { raised = true; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             Assert.True(raised);
         }
@@ -126,7 +126,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ValueChanged, args => { raised = true; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             Assert.True(raised);
         }
@@ -141,21 +141,21 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters => parameters.Add<bool>(p => p.TriState, true));
 
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             component.Render();
 
             Assert.Contains(@$"rz-state-active", component.Markup);
             Assert.Contains(@$"rzi-check", component.Markup);
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             component.Render();
 
             Assert.DoesNotContain(@$"rz-state-active", component.Markup);
             Assert.DoesNotContain(@$"rzi-check", component.Markup);
 
-            component.Find("div").MouseUp();
+            component.Find("div.rz-chkbox-box").Click();
 
             Assert.Contains(@$"rz-state-active", component.Markup);
             Assert.Contains(@$"rzi-times", component.Markup);

Radzen.Blazor.Tests/DataGridTests.cs

@@ -2,9 +2,7 @@ using AngleSharp.Dom;
 using Bunit;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
-using Radzen.Blazor.Rendering;
 using System;
-using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text.RegularExpressions;
@@ -22,9 +20,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.CloseComponent();
@@ -63,9 +63,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
-                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1}, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
+                parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.CloseComponent();
@@ -86,9 +88,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Title", "MyId");
                     builder.CloseComponent();
@@ -107,20 +111,23 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
                     builder.CloseComponent();
                 });
-                parameterBuilder.Add<bool>(p => p.AllowSorting, true) ;
+                parameterBuilder.Add<bool>(p => p.AllowSorting, true);
             });
 
             Assert.Contains(@$"rz-sortable-column", component.Markup);
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowSorting, false);
             });
 
@@ -134,9 +141,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -156,9 +165,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -169,7 +180,8 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"rz-cell-filter", component.Markup);
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowFiltering, false);
             });
 
@@ -183,9 +195,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -205,9 +219,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, new[] { new { Id = 1 }, new { Id = 2 }, new { Id = 3 } });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -219,7 +235,8 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"rz-grid-filter", component.Markup);
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<FilterMode>(p => p.FilterMode, FilterMode.Simple);
             });
 
@@ -233,9 +250,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<int>>(p => p.Data, new[] { 1, 2, 3 });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<int>));
 
                     builder.AddAttribute(1, "HeaderTemplate", (RenderFragment)delegate (RenderTreeBuilder b)
@@ -257,9 +276,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<int>>(p => p.Data, new[] { 1, 2, 3 });
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<int>));
 
                     builder.AddAttribute(1, "FooterTemplate", (RenderFragment)delegate (RenderTreeBuilder b)
@@ -284,9 +305,11 @@ namespace Radzen.Blazor.Tests
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
             ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
 
-            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder => {
+            var component = ctx.RenderComponent<RadzenGrid<dynamic>>(parameterBuilder =>
+            {
                 parameterBuilder.Add<IEnumerable<dynamic>>(p => p.Data, Enumerable.Range(0, 100).Select(i => new { Id = i }));
-                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder => {
+                parameterBuilder.Add<RenderFragment>(p => p.Columns, builder =>
+                {
                     builder.OpenComponent(0, typeof(RadzenGridColumn<dynamic>));
                     builder.AddAttribute(1, "Property", "Id");
                     builder.AddAttribute(2, "Title", "Id");
@@ -328,9 +351,10 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
-                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top); 
+                parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.Top);
             });
 
             Assert.Contains(@$"rz-paginator", component.Markup);
@@ -346,7 +370,8 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Enumerable.Range(0, 100)));
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<PagerPosition>(p => p.PagerPosition, PagerPosition.TopAndBottom);
             });
@@ -355,6 +380,57 @@ namespace Radzen.Blazor.Tests
             Assert.Contains(@$"rz-paginator-bottom", component.Markup);
         }
 
+        [Fact]
+        public void DataGrid_Renders_DefaultEmptyText()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            component.Render();
+
+            Assert.Contains("No records to display.", component.Markup);
+        }
+
+        [Fact]
+        public void DataGrid_Renders_EmptyText()
+        {
+            string emptyText = "Lorem Ipsum";
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.EmptyText, emptyText);
+            });
+
+            Assert.Contains(emptyText, component.Markup);
+        }
+
+        [Fact]
+        public void DataGrid_Renders_EmptyTemplate()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenGrid<int>>(parameterBuilder => parameterBuilder.Add<IEnumerable<int>>(p => p.Data, Array.Empty<int>()));
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<RenderFragment>(p => p.EmptyTemplate, builder =>
+                {
+                    builder.OpenElement(0, "p");
+                    builder.AddContent(0, "Lorem Ipsum");
+                    builder.CloseElement();
+                });
+            });
+
+            Assert.Contains("<p>Lorem Ipsum</p>", component.Markup);
+        }
+
         [Fact]
         public void DataGrid_Raises_LoadDataEventOnNextPageClick()
         {
@@ -367,7 +443,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -391,7 +468,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -415,7 +493,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -440,7 +519,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });
             });
@@ -464,7 +544,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
@@ -485,7 +566,8 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
@@ -506,13 +588,15 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
             });
 
             component.Find(".rz-paginator-last").Click();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
@@ -532,13 +616,15 @@ namespace Radzen.Blazor.Tests
 
             var raised = false;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
             });
 
             component.Find(".rz-paginator-last").Click();
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; });
             });
 
@@ -559,7 +645,8 @@ namespace Radzen.Blazor.Tests
             var raised = false;
             LoadDataArgs newArgs = null;
 
-            component.SetParametersAndRender(parameters => {
+            component.SetParametersAndRender(parameters =>
+            {
                 parameters.Add<bool>(p => p.AllowPaging, true);
                 parameters.Add<int>(p => p.PageSize, 20);
                 parameters.Add<LoadDataArgs>(p => p.LoadData, args => { raised = true; newArgs = args; });

Radzen.Blazor.Tests/DatePickerTests.cs

@@ -1,8 +1,8 @@
 using Bunit;
-using Radzen.Blazor.Rendering;
 using System;
-using System.Collections;
 using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
 using Xunit;
 
 namespace Radzen.Blazor.Tests
@@ -230,7 +230,7 @@ namespace Radzen.Blazor.Tests
         }
 
         [Fact]
-        public void DatePicker_Raises_ChangeEventOnNextMonth()
+        public void DatePicker_NotRaises_ChangeEventOnNextMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -247,12 +247,11 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-next-icon").Click();
 
-            Assert.True(raised);
-            Assert.True(((DateTime)newValue) > DateTime.Now);
+            Assert.False(raised);
         }
 
         [Fact]
-        public void DatePicker_Raises_ValueChangedEventOnNextMonth()
+        public void DatePicker_NotRaises_ValueChangedEventOnNextMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -269,12 +268,11 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-next-icon").Click();
 
-            Assert.True(raised);
-            Assert.True(((DateTime)newValue) > DateTime.Now);
+            Assert.False(raised);
         }
 
         [Fact]
-        public void DatePicker_Raises_ChangeEventOnPrevMonth()
+        public void DatePicker_NotRaises_ChangeEventOnPrevMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -291,12 +289,11 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-prev-icon").Click();
 
-            Assert.True(raised);
-            Assert.True(((DateTime)newValue) < DateTime.Now);
+            Assert.False(raised);
         }
 
         [Fact]
-        public void DatePicker_Raises_ValueChangedEventOnPrevMonth()
+        public void DatePicker_NotRaises_ValueChangedEventOnPrevMonth()
         {
             using var ctx = new TestContext();
             ctx.JSInterop.Mode = JSRuntimeMode.Loose;
@@ -313,8 +310,200 @@ namespace Radzen.Blazor.Tests
 
             component.Find(".rz-datepicker-prev-icon").Click();
 
+            Assert.False(raised);
+        }
+
+        [Fact]
+        public void DatePicker_Raises_ValueChangedEvent_Returns_PreviousDateOnInputOnDisabledDates()
+        {
+            IEnumerable<DateTime> dates = new DateTime[] { DateTime.Today };
+            DateTime previousDay = DateTime.Today.AddDays(-1);
+
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;            
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>();
+            
+            var raised = false;
+            object newValue = null;            
+
+            component.SetParametersAndRender(parameters => {
+                parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; })
+                          .Add(p => p.DateRender, args => { args.Disabled = dates.Contains(args.Date); });
+            });
+
+            var inputElement = component.Find(".rz-inputtext");
+
+            // initialize DateTimeValue
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(previousDay.ToShortDateString());
+            inputElement.Change(previousDay.AddDays(-1));
+
+            // try to enter disabled date
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(DateTime.Today.ToShortDateString());
+            inputElement.Change(DateTime.Today);
+
             Assert.True(raised);
-            Assert.True(((DateTime)newValue) < DateTime.Now);
+            Assert.Equal(previousDay, (DateTime)newValue);
+        }
+
+        [Fact]
+        public void DatePicker_Clears_InputOnDisabledDates()
+        {
+            IEnumerable<DateTime> dates = new DateTime[] { DateTime.Today };
+            DateTime previousDay = DateTime.Today.AddDays(-1);
+
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime?>>();
+
+            var raised = false;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters => {
+                parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; })
+                          .Add(p => p.DateRender, args => { args.Disabled = dates.Contains(args.Date); });
+            });
+
+            var inputElement = component.Find(".rz-inputtext");
+
+            // initialize DateTimeValue
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(previousDay.ToShortDateString());
+            inputElement.Change(previousDay.AddDays(-1));
+
+            // try to enter disabled date
+            ctx.JSInterop.Setup<string>("Radzen.getInputValue", invocation => true).SetResult(DateTime.Today.ToShortDateString());
+            inputElement.Change(DateTime.Today);
+
+            Assert.True(raised);
+            Assert.Null(newValue);
+        }
+        
+        [Fact]
+        public void DatePicker_Respects_DateTimeMaxValue()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+            
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(p => p.Value, DateTime.MaxValue);
+            });
+
+            Assert.Contains(DateTime.MaxValue.ToString(component.Instance.DateFormat), component.Markup);
+
+            var exception = Record.Exception(() => component.Find(".rz-datepicker-next-icon")
+                                                            .Click());
+            Assert.Null(exception);
+        }
+
+        [Fact]
+        public void DatePicker_Respects_DateTimeMinValue()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(p => p.Value, DateTime.MinValue);
+            });
+
+            Assert.Contains(DateTime.MinValue.ToString(component.Instance.DateFormat), component.Markup);
+
+            var exception = Record.Exception(() => component.Find(".rz-datepicker-prev-icon")
+                                                            .Click());
+            Assert.Null(exception);
+        }
+
+        [Theory]
+        [InlineData(DateTimeKind.Local)]
+        [InlineData(DateTimeKind.Unspecified)]
+        [InlineData(DateTimeKind.Utc)]
+        public void DatePicker_Respects_DateTimeKind(DateTimeKind kind)
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(x => x.Kind, kind);
+                parameters.Add(x => x.ShowTime, true);
+            });
+
+            var raised = false;
+            object newValue = null;
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add(p => p.Change, args => { raised = true; newValue = args; });
+            });
+
+            component.Find(".rz-datepicker-next-icon").Click();
+            component.FindAll(".rz-button-text").First(x => x.TextContent == "Ok").Click();
+
+            Assert.True(raised);
+            Assert.Equal(kind, ((DateTime)newValue).Kind);
+        }
+
+        [Fact]
+        public void DatePicker_Renders_FooterTemplate()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            string actionsTemplate = "<input type=\"button\" value=\"Test\" />";
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTime>>(parameters =>
+            {
+                parameters.Add(p => p.Value, DateTime.MinValue);
+                parameters.Add(p => p.FooterTemplate, actionsTemplate);
+            });
+
+            Assert.Contains(actionsTemplate, component.Markup);
+        }
+
+        [Fact]
+        public void DatePicker_Converts_DateTimeOffSet_FromUtc_ToLocal()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var valueUtc = DateTimeOffset.UtcNow;
+            var kind = DateTimeKind.Local;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTimeOffset>>(parameters =>
+            {
+                parameters.Add(p => p.Kind, kind);
+                parameters.Add(p => p.Value, valueUtc);
+            });
+
+            Assert.Equal(kind, (component.Instance.Value as DateTime?)?.Kind);
+            Assert.Equal(valueUtc.LocalDateTime.ToString(CultureInfo.InvariantCulture), (component.Instance.Value as DateTime?)?.ToString(CultureInfo.InvariantCulture));
+        }
+
+        [Fact]
+        public void DatePicker_Converts_DateTimeOffSet_Local_ToUtc()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var valueUtc = DateTimeOffset.Now;
+            var kind = DateTimeKind.Utc;
+
+            var component = ctx.RenderComponent<RadzenDatePicker<DateTimeOffset>>(parameters =>
+            {
+                parameters.Add(p => p.Kind, kind);
+                parameters.Add(p => p.Value, valueUtc);
+            });
+
+            Assert.Equal(kind, (component.Instance.Value as DateTime?)?.Kind);
+            Assert.Equal(valueUtc.UtcDateTime.ToString(CultureInfo.InvariantCulture), (component.Instance.Value as DateTime?)?.ToString(CultureInfo.InvariantCulture));
         }
     }
 }

Radzen.Blazor.Tests/IconTests.cs

@@ -45,5 +45,29 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"autofocus", component.Markup);
         }
+
+        [Fact]
+        public void Icon_Renders_IconStyleClass()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenIcon>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(icon => icon.IconStyle, IconStyle.Primary));
+
+            Assert.Contains(@$"rzi-primary", component.Markup);
+        }
+
+        [Fact]
+        public void Icon_NotRenders_IconStyleClass_WhenNull()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenIcon>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(icon => icon.IconStyle, null));
+
+            Assert.DoesNotContain(@$"rzi-primary", component.Markup);
+        }
     }
 }

Radzen.Blazor.Tests/LoginTests.cs

@@ -36,7 +36,7 @@ namespace Radzen.Blazor.Tests
 
             var component = ctx.RenderComponent<RadzenLogin>();
 
-            Assert.Contains(@$"<input name=""userName"" class=""rz-textbox""", component.Markup);
+            Assert.Contains(@$"<input name=""Username""", component.Markup);
         }
 
         [Fact]
@@ -89,30 +89,6 @@ namespace Radzen.Blazor.Tests
             Assert.True(!clicked);
         }
 
-        [Fact]
-        public void Login_Validates_UsernameParameter()
-        {
-            using var ctx = new TestContext();
-
-            var component = ctx.RenderComponent<RadzenLogin>();
-
-            component.Find("button").Click();
-
-            Assert.Contains(@$"Username is required", component.Markup);
-        }
-
-        [Fact]
-        public void Login_Validates_PasswordParameter()
-        {
-            using var ctx = new TestContext();
-
-            var component = ctx.RenderComponent<RadzenLogin>();
-
-            component.Find("button").Click();
-
-            Assert.Contains(@$"Password is required", component.Markup);
-        }
-
         [Fact]
         public void Login_Renders_LoginTextParameter()
         {
@@ -214,7 +190,7 @@ namespace Radzen.Blazor.Tests
                 parameters.Add(p => p.Register, args => { clicked = true; });
             });
 
-            component.Find(".btn-secondary").Click();
+            component.Find(".register > button").Click();
 
             Assert.True(clicked);
         }
@@ -240,7 +216,7 @@ namespace Radzen.Blazor.Tests
         }
 
         [Fact]
-        public void Login_NotRaises_ResetPasswordEvent_WhenEmptyUsername()
+        public void Login_Raises_ResetPasswordEvent_WhenEmptyUsername()
         {
             using var ctx = new TestContext();
 
@@ -255,19 +231,7 @@ namespace Radzen.Blazor.Tests
 
             component.Find("a").Click();
 
-            Assert.True(!clicked);
-        }
-
-        [Fact]
-        public void Login_Validates_UsernameParameter_OnResetPasswordEvent()
-        {
-            using var ctx = new TestContext();
-
-            var component = ctx.RenderComponent<RadzenLogin>();
-
-            component.Find("a").Click();
-
-            Assert.Contains(@$"Username is required", component.Markup);
+            Assert.True(clicked);
         }
     }
 }

Radzen.Blazor.Tests/NumericTests.cs

@@ -48,6 +48,7 @@ namespace Radzen.Blazor.Tests
             component.SetParametersAndRender(parameters =>
             {
                 component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, args => { raised = true; }));
+                parameters.Add<double>(p => p.Value, minValue);
                 parameters.Add<decimal?>(p => p.Min, minValue);
             });
 

Radzen.Blazor.Tests/PagerTests.cs

@@ -0,0 +1,80 @@
+using Bunit;
+using Bunit.JSInterop;
+using System;
+using System.Collections.Generic;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class PagerTests
+    {
+        [Fact]
+        public void RadzenPager_AutoHide_If_Count_Is_Less_Than_PageSize()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 20);
+                parameters.Add<int>(p => p.Count, 100);
+            });
+
+            component.Render();
+
+            Assert.Contains(@$"rz-paginator", component.Markup);
+
+            component.SetParametersAndRender(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 101);
+                parameters.Add<int>(p => p.Count, 100);
+            });
+            Assert.DoesNotContain(@$"rz-paginator", component.Markup);
+        }
+
+        [Fact]
+        public void RadzenPager_Dont_AutoHide_If_PageSizeOptions_Specified()
+        {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters =>
+            {
+                parameters.Add<int>(p => p.PageSize, 101);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<IEnumerable<int>>(p => p.PageSizeOptions, new int[] { 3, 7, 15 });
+            });
+
+            component.Render();
+
+            Assert.Contains(@$"rz-paginator", component.Markup);
+            Assert.Contains(@$"rz-dropdown-trigger", component.Markup);
+        }
+
+        [Fact]
+        public async void RadzenPager_Renders_Summary() {
+            using var ctx = new TestContext();
+            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+            ctx.JSInterop.SetupModule("_content/Radzen.Blazor/Radzen.Blazor.js");
+
+            var component = ctx.RenderComponent<RadzenPager>(parameters => {
+                parameters.Add<int>(p => p.PageSize, 10);
+                parameters.Add<int>(p => p.Count, 100);
+                parameters.Add<bool>(p => p.ShowPagingSummary, true);
+            });
+            await component.Instance.GoToPage(2);
+            component.Render();
+
+            Assert.Contains(@$"rz-paginator-summary", component.Markup); 
+            Assert.Contains(@$"Page 3 of 10 (100 items)", component.Markup); 
+            
+            component.SetParametersAndRender(parameters => {
+                parameters.Add<bool>(p => p.ShowPagingSummary, false);
+            });
+            Assert.DoesNotContain(@$"rz-paginator-summary", component.Markup);
+        }
+
+    }
+}

Radzen.Blazor.Tests/PanelMenuTests.cs

@@ -0,0 +1,98 @@
+using Bunit;
+using Bunit.TestDoubles;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.Extensions.DependencyInjection.Extensions;
+using Xunit;
+
+namespace Radzen.Blazor.Tests
+{
+    public class PanelMenuTests
+    {
+        class TestNavigationManager : NavigationManager
+        {
+            public TestNavigationManager(string uri)
+            {
+                Initialize("http://www.example.com/", uri);
+            }
+
+            protected override void NavigateToCore(string uri, bool forceLoad)
+            {
+            }
+        }
+
+        private static string CreatePanelMenu(string currentAbsoluteUrl, NavLinkMatch match, params string[] urls)
+        {
+            using var ctx = new TestContext();
+
+            ctx.Services.RemoveAll<NavigationManager>();
+            ctx.Services.TryAddSingleton<NavigationManager>(new TestNavigationManager(currentAbsoluteUrl));
+
+            var component = ctx.RenderComponent<RadzenPanelMenu>();
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Match, match).AddChildContent(builder => 
+            {
+                foreach (var url in urls)
+                {
+                    builder.OpenComponent<RadzenPanelMenuItem>(0);
+                    builder.AddAttribute(1, nameof(RadzenPanelMenuItem.Path), url);
+                    builder.CloseComponent();
+                }
+            }));
+
+            return component.Markup;
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_SetsOneActiveMenuItem()
+        {
+            var component = CreatePanelMenu("http://www.example.com/datagrid-dynamic", NavLinkMatch.All, "/datagrid", "/datagrid-dynamic");
+
+            var firstIndex = component.IndexOf("rz-navigation-item-wrapper-active");
+            var lastIndex = component.LastIndexOf("rz-navigation-item-wrapper-active");
+
+            Assert.NotEqual(-1, firstIndex);
+            Assert.Equal(firstIndex, lastIndex);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_MatchesQueryStringParameters()
+        {
+            var component = CreatePanelMenu("http://www.example.com/foo?bar", NavLinkMatch.Prefix, "/foo");
+
+            Assert.Contains("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_DoesNotMatchQueryStringParametersWhenExactMatchIsSpecified()
+        {
+            var component = CreatePanelMenu("http://www.example.com/foo?bar", NavLinkMatch.All, "/foo");
+
+            Assert.DoesNotContain("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_DoesNotMatchRootWithEverything()
+        {
+            var component = CreatePanelMenu("http://www.example.com/foo", NavLinkMatch.Prefix, "/");
+
+            Assert.DoesNotContain("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_MatchesRoot()
+        {
+            var component = CreatePanelMenu("http://www.example.com/", NavLinkMatch.Prefix, "/");
+
+            Assert.Contains("rz-navigation-item-wrapper-active", component);
+        }
+
+        [Fact]
+        public void RadzenPanelMenu_MatchesRootWithoutTrailingSlash()
+        {
+            var component = CreatePanelMenu("http://www.example.com", NavLinkMatch.Prefix, "/");
+
+            Assert.Contains("rz-navigation-item-wrapper-active", component);
+        }
+    }
+}

Radzen.Blazor.Tests/ProgressBarTests.cs

@@ -118,5 +118,27 @@ namespace Radzen.Blazor.Tests
 
             Assert.Contains(@$"style=""width: {Math.Min(value / max * 100, 100).ToInvariantString()}%;""", component.Markup);
         }
+
+        [Fact]
+        public void ProgressBar_Renders_ProgressBarStyle()
+        {
+            using var ctx = new TestContext();
+
+            var component = ctx.RenderComponent<RadzenProgressBar>();
+
+            component.SetParametersAndRender(parameters=>parameters.Add(p=>p.ProgressBarStyle, ProgressBarStyle.Success));
+            Assert.Contains(@$"rz-progressbar-determinate-success", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Info));
+            Assert.Contains(@$"rz-progressbar-determinate-info", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Success));
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Mode, ProgressBarMode.Indeterminate));
+            Assert.Contains(@$"rz-progressbar-indeterminate-success", component.Markup);
+
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.ProgressBarStyle, ProgressBarStyle.Info));
+            component.SetParametersAndRender(parameters => parameters.Add(p => p.Mode, ProgressBarMode.Indeterminate));
+            Assert.Contains(@$"rz-progressbar-indeterminate-info", component.Markup);
+        }
     }
 }

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

@@ -1,15 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net6</TargetFramework>
 
     <IsPackable>false</IsPackable>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.7.1" />
-    <PackageReference Include="bunit.web" Version="1.0.0-preview-01" />
-    <PackageReference Include="bunit.xunit" Version="1.0.0-preview-01" />
+    <PackageReference Include="bunit.web" Version="1.2.49" />
     <PackageReference Include="xunit" Version="2.4.1" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

Radzen.Blazor.Tests/SliderTests.cs

@@ -38,8 +38,8 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add<int>(p => p.Value, value));
 
-            Assert.Contains(@$"style=""width: {(value / max * 100).ToInvariantString()}%;""", component.Markup);
-            Assert.Contains(@$"style=""left: {(value / max * 100).ToInvariantString()}%;""", component.Markup);
+            Assert.Contains(@$"style=""width: {Math.Round((value / max * 100)).ToInvariantString()}%;""", component.Markup);
+            Assert.Contains(@$"style=""left: {Math.Round((value / max * 100)).ToInvariantString()}%;""", component.Markup);
         }
 
         [Fact]
@@ -55,9 +55,9 @@ namespace Radzen.Blazor.Tests
                 parameters.Add<IEnumerable<int>>(p => p.Value, new int[] { 4, 30 });
             });
 
-            Assert.Contains(@$"left: 4.00%", component.Markup);
-            Assert.Contains(@$"left: 30.0%", component.Markup);
-            Assert.Contains(@$"left: 4.00%; width: 26.00%;", component.Markup);
+            Assert.Contains(@$"left: 4%", component.Markup);
+            Assert.Contains(@$"left: 30%", component.Markup);
+            Assert.Contains(@$"left: 4%; width: 26%;", component.Markup);
         }
 
         [Fact]

Radzen.Blazor.Tests/SwitchTests.cs

@@ -110,7 +110,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.Change, args => { raised = true; newValue = args; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div").Click();
 
             Assert.True(raised);
             Assert.True(object.Equals(value, !(bool)newValue));
@@ -129,7 +129,7 @@ namespace Radzen.Blazor.Tests
 
             component.SetParametersAndRender(parameters => parameters.Add(p => p.ValueChanged, args => { raised = true; newValue = args; }));
 
-            component.Find("div").MouseUp();
+            component.Find("div").Click();
 
             Assert.True(raised);
             Assert.True(object.Equals(value, !(bool)newValue));

Radzen.Blazor/.config/dotnet-tools.json

@@ -1,12 +0,0 @@
-{
-  "version": 1,
-  "isRoot": true,
-  "tools": {
-    "excubo.webcompiler": {
-      "version": "2.6.0",
-      "commands": [
-        "webcompiler"
-      ]
-    }
-  }
-}

Radzen.Blazor/AppointmentData.cs

@@ -3,13 +3,37 @@ using System.Collections.Generic;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Represents an appointment in <see cref="RadzenScheduler{TItem}" />
+    /// </summary>
     public class AppointmentData
     {
+        /// <summary>
+        /// Gets or sets the start of the appointment.
+        /// </summary>
+        /// <value>The start.</value>
         public DateTime Start { get; set; }
+        /// <summary>
+        /// Gets or sets the end of the appointment.
+        /// </summary>
+        /// <value>The end.</value>
         public DateTime End { get; set; }
+        /// <summary>
+        /// Gets or sets the text of the appointment.
+        /// </summary>
+        /// <value>The text.</value>
         public string Text { get; set; }
+        /// <summary>
+        /// Gets or sets the data associated with the appointment
+        /// </summary>
+        /// <value>The data.</value>
         public object Data { get; set; }
 
+        /// <summary>
+        /// Determines whether the specified object is equal to this instance. Used to check if two appointments are equal.
+        /// </summary>
+        /// <param name="obj">The object to compare with this instance.</param>
+        /// <returns><c>true</c> if the specified is equal to this instance; otherwise, <c>false</c>.</returns>
         public override bool Equals(object obj)
         {
             return obj is AppointmentData data &&
@@ -19,6 +43,10 @@ namespace Radzen.Blazor
                    EqualityComparer<object>.Default.Equals(Data, data.Data);
         }
 
+        /// <summary>
+        /// Returns a hash code for this instance.
+        /// </summary>
+        /// <returns>A hash code for this instance, suitable for use in hashing algorithms and data structures like a hash table.</returns>
         public override int GetHashCode()
         {
             return HashCode.Combine(Start, End, Text, Data);

Radzen.Blazor/AxisBase.cs

@@ -3,45 +3,106 @@ using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Base class for an axis in <see cref="RadzenChart" />.
+    /// </summary>
     public abstract class AxisBase : RadzenChartComponentBase, IChartAxis
     {
+        /// <summary>
+        /// Gets or sets the stroke (line color) of the axis.
+        /// </summary>
+        /// <value>The stroke.</value>
         [Parameter]
         public string Stroke { get; set; }
+        /// <summary>
+        /// Gets or sets the pixel width of axis.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
         [Parameter]
         public double StrokeWidth { get; set; } = 1;
 
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets or sets the format string used to display the axis values.
+        /// </summary>
+        /// <value>The format string.</value>
         [Parameter]
         public string FormatString { get; set; }
 
+        /// <summary>
+        /// Gets or sets a formatter function that formats the axis values.
+        /// </summary>
+        /// <value>The formatter.</value>
         [Parameter]
         public Func<object, string> Formatter { get; set; }
 
+        /// <summary>
+        /// Gets or sets the type of the line used to display the axis.
+        /// </summary>
+        /// <value>The type of the line.</value>
         [Parameter]
         public LineType LineType { get; set; }
 
+        /// <summary>
+        /// Gets or sets the grid lines configuration of the current axis.
+        /// </summary>
+        /// <value>The grid lines.</value>
         public RadzenGridLines GridLines { get; set; } = new RadzenGridLines();
 
+        /// <summary>
+        /// Gets or sets the title configuration.
+        /// </summary>
+        /// <value>The title.</value>
         public RadzenAxisTitle Title { get; set; } = new RadzenAxisTitle();
 
+        /// <summary>
+        /// Gets or sets the ticks configuration.
+        /// </summary>
+        /// <value>The ticks.</value>
         public RadzenTicks Ticks { get; set; } = new RadzenTicks();
 
-        internal int TickDistance { get; set; } = 100;
+        /// <summary>
+        /// Gets or sets the pixel distance between axis ticks. It is used to calculate the number of visible ticks depending on the available space. Set to 100 by default;
+        /// Setting <see cref="Step" /> will override this value.
+        /// </summary>
+        /// <value>The desired pixel distance between ticks.</value>
+        [Parameter]
+        public int TickDistance { get; set; } = 100;
 
+        /// <summary>
+        /// Specifies the minimum value of the axis.
+        /// </summary>
+        /// <value>The minimum.</value>
         [Parameter]
         public object Min { get; set; }
 
+        /// <summary>
+        /// Specifies the maximum value of the axis.
+        /// </summary>
+        /// <value>The maximum.</value>
         [Parameter]
         public object Max { get; set; }
 
+        /// <summary>
+        /// Specifies the step of the axis.
+        /// </summary>
         [Parameter]
         public object Step { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="AxisBase"/> is visible.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool Visible { get; set; } = true;
 
+        /// <inheritdoc />
         protected override bool ShouldRefreshChart(ParameterView parameters)
         {
             return DidParameterChange(parameters, nameof(Min), Min) ||

Radzen.Blazor/CartesianSeries.cs

@@ -5,12 +5,22 @@ using System.Linq;
 using System.Linq.Dynamic.Core;
 using Radzen.Blazor.Rendering;
 using System.Threading.Tasks;
+using System.Collections;
+using Microsoft.AspNetCore.Components.Rendering;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Base class of <see cref="RadzenChart" /> series.
+    /// </summary>
+    /// <typeparam name="TItem">The type of the series data.</typeparam>
     public abstract class CartesianSeries<TItem> : RadzenChartComponentBase, IChartSeries, IDisposable
     {
-        protected Func<TItem, double> Category(ScaleBase scale)
+        /// <summary>
+        /// Creates a getter function that returns a value from the specified category scale for the specified data item.
+        /// </summary>
+        /// <param name="scale">The scale.</param>
+        internal Func<TItem, double> Category(ScaleBase scale)
         {
             if (IsNumeric(CategoryProperty))
             {
@@ -34,16 +44,28 @@ namespace Radzen.Blazor
             return (item) => Items.IndexOf(item);
         }
 
+        /// <summary>
+        /// Helper function. Used internally.
+        /// </summary>
         protected Func<TItem, double> ComposeCategory(ScaleBase scale)
         {
             return scale.Compose(Category(scale));
         }
 
+        /// <summary>
+        /// Helper function. Used internally.
+        /// </summary>
         protected Func<TItem, double> ComposeValue(ScaleBase scale)
         {
             return scale.Compose(Value);
         }
 
+        /// <summary>
+        /// Determines whether the property with the specified name is <see cref="DateTime" />
+        /// </summary>
+        /// <param name="propertyName">Name of the property.</param>
+        /// <returns><c>true</c> if the specified property name is date; otherwise, <c>false</c>.</returns>
+        /// <exception cref="ArgumentException">Property {propertyName} does not exist</exception>
         protected bool IsDate(string propertyName)
         {
             if (String.IsNullOrEmpty(propertyName))
@@ -61,6 +83,12 @@ namespace Radzen.Blazor
             return PropertyAccess.IsDate(property);
         }
 
+        /// <summary>
+        /// Determines whether the property with the specified name is numeric.
+        /// </summary>
+        /// <param name="propertyName">Name of the property.</param>
+        /// <returns><c>true</c> if the specified property name is numeric; otherwise, <c>false</c>.</returns>
+        /// <exception cref="ArgumentException">Property {propertyName} does not exist</exception>
         protected bool IsNumeric(string propertyName)
         {
             if (String.IsNullOrEmpty(propertyName))
@@ -78,46 +106,118 @@ namespace Radzen.Blazor
             return PropertyAccess.IsNumeric(property);
         }
 
+        /// <inheritdoc />
         [Parameter]
         public string Title { get; set; }
 
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         [Parameter]
         public RenderFragment ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets or sets the tooltip template.
+        /// </summary>
+        /// <value>The tooltip template.</value>
         [Parameter]
         public RenderFragment<TItem> TooltipTemplate { get; set; }
 
+        /// <summary>
+        /// Gets the list of overlays.
+        /// </summary>
+        /// <value>The Overlays list.</value>
+        public IList<IChartSeriesOverlay> Overlays { get; } = new List<IChartSeriesOverlay>();
+
+        /// <summary>
+        /// Gets the coordinate system of the series.
+        /// </summary>
+        /// <value>Coordinate system enum value.</value>
+        public virtual CoordinateSystem CoordinateSystem => CoordinateSystem.Cartesian;
+
+        /// <summary>
+        /// The name of the property of <typeparamref name="TItem" /> that provides the X axis (a.k.a. category axis) values.
+        /// </summary>
         [Parameter]
         public string CategoryProperty { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="CartesianSeries{TItem}"/> is visible.
+        /// Invisible series do not appear in the legend and cannot be shown by the user.
+        /// Use the <c>Visible</c> property to programatically show or hide a series.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
+        [Parameter]
         public bool Visible { get; set; } = true;
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="CartesianSeries{TItem}"/> is hidden.
+        /// Hidden series are initially invisible and the user can show them by clicking on their label in the legend.
+        /// Use the <c>Hidden</c> property to hide certain series from your users but still allow them to see them.
+        /// </summary>
+        /// <value><c>true</c> if hidden; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Hidden { get; set; }
+
+        bool IsVisible { get; set; } = true;
+
+        bool IChartSeries.Visible
+        {
+            get
+            {
+                return IsVisible;
+            }
+        }
+
+        /// <inheritdoc />
+        public bool ShowInLegend { get => Visible; }
+
+        /// <summary>
+        /// The name of the property of <typeparamref name="TItem" /> that provides the Y axis (a.k.a. value axis) values.
+        /// </summary>
         [Parameter]
         public string ValueProperty { get; set; }
 
+        /// <inheritdoc />
         [Parameter]
         public int RenderingOrder { get; set; }
 
-        protected Func<TItem, double> Value
+        /// <summary>
+        /// Creates a getter function that returns a value from the specified data item. Uses <see cref="ValueProperty" />.
+        /// </summary>
+        /// <value>The value.</value>
+        /// <exception cref="ArgumentException">ValueProperty should not be empty</exception>
+        internal Func<TItem, double> Value
         {
             get
             {
                 if (String.IsNullOrEmpty(ValueProperty))
                 {
-                    throw new ArgumentException("ValueProperty shoud not be empty");
+                    throw new ArgumentException("ValueProperty should not be empty");
                 }
 
                 return PropertyAccess.Getter<TItem, double>(ValueProperty);
             }
         }
 
+        /// <summary>
+        /// Gets or sets the data of the series. The data is enumerated and its items are displayed by the series.
+        /// </summary>
+        /// <value>The data.</value>
         [Parameter]
         public IEnumerable<TItem> Data { get; set; }
 
+        /// <summary>
+        /// Stores <see cref="Data" /> as an IList of <typeparamref name="TItem"/>.
+        /// </summary>
+        /// <value>The items.</value>
         protected IList<TItem> Items { get; set; } = new List<TItem>();
 
+        /// <inheritdoc />
         public RadzenMarkers Markers { get; set; } = new RadzenMarkers();
 
+        /// <inheritdoc />
         public virtual MarkerType MarkerType
         {
             get
@@ -142,6 +242,17 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Returns the category values
+        /// </summary>
+        protected virtual IList<object> GetCategories()
+        {
+            Func<TItem, object> category = String.IsNullOrEmpty(CategoryProperty) ? (item) => string.Empty : PropertyAccess.Getter<TItem, object>(CategoryProperty);
+
+            return Items.Select(category).ToList();
+        }
+
+        /// <inheritdoc />
         public virtual ScaleBase TransformCategoryScale(ScaleBase scale)
         {
             if (Items == null)
@@ -168,9 +279,7 @@ namespace Radzen.Blazor
                 };
             }
 
-            Func<TItem, object> category = String.IsNullOrEmpty(CategoryProperty) ? (item) => string.Empty : PropertyAccess.Getter<TItem, object>(CategoryProperty);
-
-            var data = Items.Select(category).ToList();
+            var data = GetCategories();
 
             if (scale is OrdinalScale ordinal)
             {
@@ -199,6 +308,7 @@ namespace Radzen.Blazor
             };
         }
 
+        /// <inheritdoc />
         public virtual ScaleBase TransformValueScale(ScaleBase scale)
         {
             if (Items != null)
@@ -212,18 +322,55 @@ namespace Radzen.Blazor
             return scale;
         }
 
+        /// <inheritdoc />
         public abstract RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale);
+
+        /// <inheritdoc />
+        public RenderFragment RenderOverlays(ScaleBase categoryScale, ScaleBase valueScale)
+        {
+            return new RenderFragment(builder =>
+            {
+                builder.OpenRegion(0);
+                foreach (var overlay in Overlays)
+                {
+                    if (overlay.Visible)
+                    {
+                        builder.AddContent(1, overlay.Render(categoryScale, valueScale));
+                    }
+                }
+                builder.CloseRegion();
+            });
+        }
+
+        /// <inheritdoc />
         public abstract string Color { get; }
 
-        double MinValue { get; set; }
-        double MaxValue { get; set; }
-
+        /// <inheritdoc />
         public override async Task SetParametersAsync(ParameterView parameters)
         {
             var shouldRefresh = parameters.DidParameterChange(nameof(Data), Data);
+            var visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);
+            var hiddenChanged = parameters.DidParameterChange(nameof(Hidden), Hidden);
 
             await base.SetParametersAsync(parameters);
 
+            if (hiddenChanged)
+            {
+                IsVisible = !Hidden;
+                shouldRefresh = true;
+            }
+
+            if (visibleChanged)
+            {
+                IsVisible = Visible;
+                shouldRefresh = true;
+            }
+
+            if (Data != null && Data.Count() != Items.Count)
+            {
+                shouldRefresh = true;
+            }
+
             if (shouldRefresh)
             {
                 if (Data != null)
@@ -241,34 +388,36 @@ namespace Radzen.Blazor
                     {
                         Items = Items.AsQueryable().OrderBy(CategoryProperty).ToList();
                     }
-
-                    if (Items.Any())
-                    {
-                        MinValue = Items.Min(Value);
-                        MaxValue = Items.Max(Value);
-                    }
                 }
 
-                Chart.Refresh(false);
-                Chart.DisplayTooltip();
+                await Chart.Refresh(false);
             }
         }
 
+        /// <inheritdoc />
         protected override void Initialize()
         {
             Chart.AddSeries(this);
         }
 
-        public virtual bool Contains(double x, double y)
+        /// <inheritdoc />
+        public virtual bool Contains(double x, double y, double tolerance)
         {
             return false;
         }
 
+        /// <inheritdoc />
         public virtual double MeasureLegend()
         {
             return TextMeasurer.TextWidth(GetTitle());
         }
 
+        /// <summary>
+        /// Determines if the provided point is inside the provided polygon.
+        /// </summary>
+        /// <param name="point">The point.</param>
+        /// <param name="polygon">The polygon.</param>
+        /// <returns><c>true</c> if the polygon contains the point, <c>false</c> otherwise.</returns>
         protected bool InsidePolygon(Point point, Point[] polygon)
         {
             var minX = polygon[0].X;
@@ -304,6 +453,7 @@ namespace Radzen.Blazor
             return inside;
         }
 
+        /// <inheritdoc />
         public virtual RenderFragment RenderTooltip(object data, double marginLeft, double marginTop)
         {
             var item = (TItem)data;
@@ -317,10 +467,7 @@ namespace Radzen.Blazor
                 builder.AddAttribute(1, nameof(ChartTooltip.X), x + marginLeft);
                 builder.AddAttribute(2, nameof(ChartTooltip.Y), y + marginTop);
 
-                if (TooltipTemplate != null)
-                {
-                    builder.AddAttribute(3, nameof(ChartTooltip.ChildContent), TooltipTemplate(item));
-                }
+                builder.AddAttribute(3, nameof(ChartTooltip.ChildContent), TooltipTemplate == null ? null : TooltipTemplate(item));
 
                 builder.AddAttribute(4, nameof(ChartTooltip.Title), TooltipTitle(item));
                 builder.AddAttribute(5, nameof(ChartTooltip.Label), TooltipLabel(item));
@@ -331,21 +478,30 @@ namespace Radzen.Blazor
             };
         }
 
+        /// <summary>
+        /// Gets the tooltip inline style.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipStyle(TItem item)
         {
             return Chart.Tooltip.Style;
         }
 
+        /// <summary>
+        /// Gets the tooltip CSS class.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipClass(TItem item)
         {
             return $"rz-series-{Chart.Series.IndexOf(this)}-tooltip";
         }
 
+        /// <inheritdoc />
         public virtual RenderFragment RenderLegendItem()
         {
             var style = new List<string>();
 
-            if (Visible == false)
+            if (IsVisible == false)
             {
                 style.Add("text-decoration: line-through");
             }
@@ -364,6 +520,7 @@ namespace Radzen.Blazor
             };
         }
 
+        /// <inheritdoc />
         public double MarkerSize
         {
             get
@@ -379,59 +536,177 @@ namespace Radzen.Blazor
             }
         }
 
-        private void OnLegendItemClick()
+        /// <inheritdoc />
+        public double GetMedian()
         {
-            Chart.ToggleSeries(this);
+            return Data.Select(e => Value(e)).OrderBy(e => e).Skip(Data.Count() / 2).FirstOrDefault();
         }
 
+        /// <inheritdoc />
+        public double GetMean()
+        {
+            return Data.Select(e => Value(e)).Average();
+        }
+
+        /// <inheritdoc />
+        public double GetMode()
+        {
+            return Data.GroupBy(e => Value(e)).Select(g => new { Value = g.Key, Count = g.Count() }).OrderByDescending(e => e.Count).FirstOrDefault().Value;
+        }
+
+        /// <summary>
+        /// https://en.wikipedia.org/wiki/Simple_linear_regression#Fitting_the_regression_line
+        /// </summary>
+        public (double a, double b) GetTrend()
+        {
+            double a, b;
+
+            Func<TItem, double> X;
+            Func<TItem, double> Y;
+            if (Chart.ShouldInvertAxes())
+            {
+                X = e => Chart.CategoryScale.Scale(Value(e));
+                Y = e => Chart.ValueScale.Scale(Category(Chart.ValueScale)(e));
+            }
+            else
+            {
+                X = e => Chart.CategoryScale.Scale(Category(Chart.CategoryScale)(e));
+                Y = e => Chart.ValueScale.Scale(Value(e));
+            }
+
+            var avgX = Data.Select(e => X(e)).Average();
+            var avgY = Data.Select(e => Y(e)).Average();
+            var sumXY = Data.Sum(e => (X(e) - avgX) * (Y(e) - avgY));         
+            if (Chart.ShouldInvertAxes())
+            {
+                var sumYSq = Data.Sum(e => (Y(e) - avgY) * (Y(e) - avgY));
+                b = sumXY / sumYSq;
+                a = avgX - b * avgY;
+            }
+            else
+            {
+                var sumXSq = Data.Sum(e => (X(e) - avgX) * (X(e) - avgX));
+                b = sumXY / sumXSq;
+                a = avgY - b * avgX;
+            }
+
+            return (a, b);
+        }
+
+        private async Task OnLegendItemClick()
+        {
+            IsVisible = !IsVisible;
+
+            if (Chart.LegendClick.HasDelegate)
+            {
+                var args = new LegendClickEventArgs
+                {
+                    Data = this.Data,
+                    Title = GetTitle(),
+                    IsVisible = IsVisible,
+                };
+
+                await Chart.LegendClick.InvokeAsync(args);
+
+                IsVisible = args.IsVisible;
+            }
+
+            await Chart.Refresh();
+        }
+
+        /// <inheritdoc />
         public string GetTitle()
         {
             return String.IsNullOrEmpty(Title) ? $"Series {Chart.Series.IndexOf(this) + 1}" : Title;
         }
 
+        /// <summary>
+        /// Gets the label of the tooltip displayed for this item.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipLabel(TItem item)
         {
             return GetTitle();
         }
 
+        /// <summary>
+        /// Gets the title of the tooltip displayed for this item.
+        /// </summary>
+        /// <param name="item">The item.</param>
         protected virtual string TooltipTitle(TItem item)
         {
             var category = Category(Chart.CategoryScale);
             return Chart.CategoryAxis.Format(Chart.CategoryScale, Chart.CategoryScale.Value(category(item)));
         }
 
+        /// <summary>
+        /// Gets the value of the tooltip displayed for this item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <returns>System.String.</returns>
         protected virtual string TooltipValue(TItem item)
         {
             return Chart.ValueAxis.Format(Chart.ValueScale, Chart.ValueScale.Value(Value(item)));
         }
 
-        protected virtual double TooltipX(TItem item)
+        /// <summary>
+        /// Gets the X coordinate of the tooltip of the specified item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        internal virtual double TooltipX(TItem item)
         {
             var category = Category(Chart.CategoryScale);
             return Chart.CategoryScale.Scale(category(item), true);
         }
 
-        protected virtual double TooltipY(TItem item)
+        /// <summary>
+        /// Gets the Y coordinate of the tooltip of the specified item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        internal virtual double TooltipY(TItem item)
         {
             return Chart.ValueScale.Scale(Value(item), true);
         }
 
+        /// <inheritdoc />
         public virtual object DataAt(double x, double y)
         {
-            var first = Items.FirstOrDefault();
-            var last = Items.LastOrDefault();
+            if (Items.Any())
+            {
+                return Items.Select(item =>
+                {
+                    var distance = Math.Abs(TooltipX(item) - x);
+                    return new { Item = item, Distance = distance };
+                }).Aggregate((a, b) => a.Distance < b.Distance ? a : b).Item;
+            }
 
-            var category = Category(Chart.CategoryScale);
-
-            var startX = Chart.CategoryScale.Scale(category(first), true);
-            var endX = Chart.CategoryScale.Scale(category(last), true);
-
-            var count = Math.Max(Items.Count() - 1, 1);
-            var index = Convert.ToInt32((x - startX) / ((endX - startX) / count));
-
-            return Items.ElementAtOrDefault(index);
+            return null;
         }
 
+        /// <inheritdoc />
+        public virtual IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
+        {
+            var list = new List<ChartDataLabel>();
+            
+            foreach (var d in Data)
+            {
+                list.Add(new ChartDataLabel 
+                { 
+                    Position = new Point { X = TooltipX(d) + offsetX, Y = TooltipY(d) + offsetY },
+                    TextAnchor = "middle",
+                    Text = Chart.ValueAxis.Format(Chart.ValueScale, Value(d))
+                });
+            }
+
+            return list;
+        }
+
+        /// <summary>
+        /// Returns a color from the specified list of colors. Rotates colors.
+        /// </summary>
+        /// <param name="index">The index.</param>
+        /// <param name="colors">The colors.</param>
+        /// <param name="defaultValue">The default value.</param>
         protected string PickColor(int index, IEnumerable<string> colors, string defaultValue = null)
         {
             if (colors == null || !colors.Any())
@@ -442,9 +717,29 @@ namespace Radzen.Blazor
             return colors.ElementAt(index % colors.Count());
         }
 
+        /// <inheritdoc />
         public void Dispose()
         {
             Chart?.RemoveSeries(this);
         }
+
+        /// <inheritdoc />
+        public async Task InvokeClick(EventCallback<SeriesClickEventArgs> handler, object data)
+        {
+            var category = Category(Chart.CategoryScale);
+
+            await handler.InvokeAsync(new SeriesClickEventArgs
+            {
+                Data = data,
+                Title = GetTitle(),
+                Category = PropertyAccess.GetValue(data, CategoryProperty),
+                Value = PropertyAccess.GetValue(data, ValueProperty),
+                Point = new SeriesPoint
+                {
+                    Category = category((TItem)data),
+                    Value = Value((TItem)data)
+                }
+            });
+        }
     }
 }

Radzen.Blazor/ColorScheme.cs

@@ -1,10 +1,25 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the <see cref="RadzenChart" /> color schemes used when rendering the series.
+    /// </summary>
     public enum ColorScheme
     {
+        /// <summary>
+        /// Pastel color scheme.
+        /// </summary>
         Pastel,
+        /// <summary>
+        /// Palette color scheme.
+        /// </summary>
         Palette,
+        /// <summary>
+        /// Divergent color scheme.
+        /// </summary>
         Divergent,
+        /// <summary>
+        /// Monochrome color scheme
+        /// </summary>
         Monochrome
     }
 }

Radzen.Blazor/ContextMenuService.cs

@@ -7,10 +7,48 @@ using System.Threading.Tasks;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class ContextMenuService. Contains various methods with options to open and close context menus. 
+    /// Should be added as scoped service in the application services and RadzenContextMenu should be added in application main layout.
+    /// Implements the <see cref="IDisposable" />
+    /// </summary>
+    /// <seealso cref="IDisposable" />
+    /// <example>
+    /// <code>
+    /// @inject ContextMenuService ContextMenuService
+    /// &lt;RadzenButton Text="Show context menu" ContextMenu=@(args => ShowContextMenuWithContent(args)) /&gt;
+    /// @code {
+    ///     void ShowContextMenuWithContent(MouseEventArgs args) =&gt; ContextMenuService.Open(args, ds =&gt;
+    ///       @&lt;RadzenMenu Click="OnMenuItemClick"&gt;
+    ///         &lt;RadzenMenuItem Text="Item1" Value="1"&gt;&lt;/RadzenMenuItem&gt;
+    ///         &lt;RadzenMenuItem Text="Item2" Value="2"&gt;&lt;/RadzenMenuItem&gt;
+    ///         &lt;RadzenMenuItem Text="More items" Value="3"&gt;
+    ///             &lt;RadzenMenuItem Text="More sub items" Value="4"&gt;
+    ///                 &lt;RadzenMenuItem Text="Item1" Value="5"&gt;&lt;/RadzenMenuItem&gt;
+    ///                 &lt;RadzenMenuItem Text="Item2" Value="6"&gt;&lt;/RadzenMenuItem&gt;
+    ///             &lt;/RadzenMenuItem&gt;
+    ///         &lt;/RadzenMenuItem&gt;
+    ///       &lt;/RadzenMenu&gt;);
+    /// 
+    ///     void OnMenuItemClick(MenuItemEventArgs args)
+    ///     {
+    ///       Console.WriteLine($"Menu item with Value={args.Value} clicked");
+    ///     }
+    /// }
+    /// </code>
+    /// </example>
     public class ContextMenuService : IDisposable
     {
+        /// <summary>
+        /// Gets or sets the navigation manager.
+        /// </summary>
+        /// <value>The navigation manager.</value>
         NavigationManager navigationManager { get; set; }
 
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ContextMenuService"/> class.
+        /// </summary>
+        /// <param name="uriHelper">The URI helper.</param>
         public ContextMenuService(NavigationManager uriHelper)
         {
             navigationManager = uriHelper;
@@ -21,6 +59,11 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Handles the OnLocationChanged event of the UriHelper control.
+        /// </summary>
+        /// <param name="sender">The source of the event.</param>
+        /// <param name="e">The <see cref="Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs"/> instance containing the event data.</param>
         private void UriHelper_OnLocationChanged(object sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
         {
             if (this.OnNavigate != null)
@@ -29,12 +72,27 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Occurs when [on navigate].
+        /// </summary>
         public event Action OnNavigate;
 
+        /// <summary>
+        /// Raises the Close event.
+        /// </summary>
         public event Action OnClose;
 
+        /// <summary>
+        /// Occurs when [on open].
+        /// </summary>
         public event Action<MouseEventArgs, ContextMenuOptions> OnOpen;
 
+        /// <summary>
+        /// Opens the specified arguments.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <param name="items">The items.</param>
+        /// <param name="click">The click.</param>
         public void Open(MouseEventArgs args, IEnumerable<ContextMenuItem> items, Action<MenuItemEventArgs> click = null)
         {
             var options = new ContextMenuOptions();
@@ -45,6 +103,11 @@ namespace Radzen
             OpenTooltip(args, options);
         }
 
+        /// <summary>
+        /// Opens the specified arguments.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <param name="childContent">Content of the child.</param>
         public void Open(MouseEventArgs args, RenderFragment<ContextMenuService> childContent)
         {
             var options = new ContextMenuOptions();
@@ -54,39 +117,87 @@ namespace Radzen
             OpenTooltip(args, options);
         }
 
+        /// <summary>
+        /// Opens the tooltip.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <param name="options">The options.</param>
         private void OpenTooltip(MouseEventArgs args, ContextMenuOptions options)
         {
             OnOpen?.Invoke(args, options);
         }
 
+        /// <summary>
+        /// Closes this instance.
+        /// </summary>
         public void Close()
         {
             OnClose?.Invoke();
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public void Dispose()
         {
             navigationManager.LocationChanged -= UriHelper_OnLocationChanged;
         }
     }
 
+    /// <summary>
+    /// Class ContextMenuOptions.
+    /// </summary>
     public class ContextMenuOptions
     {
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         public RenderFragment<ContextMenuService> ChildContent { get; set; }
+        /// <summary>
+        /// Gets or sets the items.
+        /// </summary>
+        /// <value>The items.</value>
         public IEnumerable<ContextMenuItem> Items { get; set; }
 
+        /// <summary>
+        /// Gets or sets the click.
+        /// </summary>
+        /// <value>The click.</value>
         public Action<MenuItemEventArgs> Click { get; set; }
     }
 
+    /// <summary>
+    /// Class ContextMenu.
+    /// </summary>
     public class ContextMenu
     {
+        /// <summary>
+        /// Gets or sets the options.
+        /// </summary>
+        /// <value>The options.</value>
         public ContextMenuOptions Options { get; set; }
+        /// <summary>
+        /// Gets or sets the mouse event arguments.
+        /// </summary>
+        /// <value>The mouse event arguments.</value>
         public MouseEventArgs MouseEventArgs { get; set; }
     }
 
+    /// <summary>
+    /// Class ContextMenuItem.
+    /// </summary>
     public class ContextMenuItem
-    { 
+    {
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
         public string Text { get; set; }
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         public object Value { get; set; }
     }
 }

Radzen.Blazor/DataBoundFormComponent.cs

@@ -8,37 +8,85 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Radzen.Blazor;
+using Radzen.Blazor.Rendering;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class DataBoundFormComponent.
+    /// Implements the <see cref="Radzen.RadzenComponent" />
+    /// Implements the <see cref="Radzen.IRadzenFormComponent" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="Radzen.RadzenComponent" />
+    /// <seealso cref="Radzen.IRadzenFormComponent" />
     public class DataBoundFormComponent<T> : RadzenComponent, IRadzenFormComponent
     {
+        /// <summary>
+        /// Gets or sets the index of the tab.
+        /// </summary>
+        /// <value>The index of the tab.</value>
         [Parameter]
         public int TabIndex { get; set; } = 0;
 
+        /// <summary>
+        /// Gets or sets the filter case sensitivity.
+        /// </summary>
+        /// <value>The filter case sensitivity.</value>
         [Parameter]
         public FilterCaseSensitivity FilterCaseSensitivity { get; set; } = FilterCaseSensitivity.Default;
 
+        /// <summary>
+        /// Gets or sets the filter operator.
+        /// </summary>
+        /// <value>The filter operator.</value>
         [Parameter]
         public StringFilterOperator FilterOperator { get; set; } = StringFilterOperator.Contains;
 
+        /// <summary>
+        /// Gets or sets the name.
+        /// </summary>
+        /// <value>The name.</value>
         [Parameter]
         public string Name { get; set; }
 
+        /// <summary>
+        /// Gets or sets the placeholder.
+        /// </summary>
+        /// <value>The placeholder.</value>
         [Parameter]
         public string Placeholder { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="DataBoundFormComponent{T}"/> is disabled.
+        /// </summary>
+        /// <value><c>true</c> if disabled; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool Disabled { get; set; }
 
+        /// <summary>
+        /// Gets or sets the change.
+        /// </summary>
+        /// <value>The change.</value>
         [Parameter]
         public EventCallback<object> Change { get; set; }
 
+        /// <summary>
+        /// Gets or sets the load data.
+        /// </summary>
+        /// <value>The load data.</value>
         [Parameter]
         public EventCallback<Radzen.LoadDataArgs> LoadData { get; set; }
 
+        /// <summary>
+        /// The form
+        /// </summary>
         IRadzenForm _form;
 
+        /// <summary>
+        /// Gets or sets the form.
+        /// </summary>
+        /// <value>The form.</value>
         [CascadingParameter]
         public IRadzenForm Form
         {
@@ -48,15 +96,19 @@ namespace Radzen
             }
             set
             {
-                if (_form != value && value != null)
-                {
-                    _form = value;
-                    _form.AddComponent(this);
-                }
+                _form = value;
+                _form?.AddComponent(this);
             }
         }
 
+        /// <summary>
+        /// The value
+        /// </summary>
         object _value;
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         [Parameter]
         public object Value
         {
@@ -73,9 +125,17 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the value changed.
+        /// </summary>
+        /// <value>The value changed.</value>
         [Parameter]
         public EventCallback<T> ValueChanged { get; set; }
 
+        /// <summary>
+        /// Gets a value indicating whether this instance is bound.
+        /// </summary>
+        /// <value><c>true</c> if this instance is bound; otherwise, <c>false</c>.</value>
         public bool IsBound
         {
             get
@@ -83,7 +143,11 @@ namespace Radzen
                 return ValueChanged.HasDelegate;
             }
         }
-        public bool HasValue
+        /// <summary>
+        /// Gets a value indicating whether this instance has value.
+        /// </summary>
+        /// <value><c>true</c> if this instance has value; otherwise, <c>false</c>.</value>
+        public virtual bool HasValue
         {
             get
             {
@@ -95,10 +159,21 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the text property.
+        /// </summary>
+        /// <value>The text property.</value>
         [Parameter]
         public string TextProperty { get; set; }
 
+        /// <summary>
+        /// The data
+        /// </summary>
         IEnumerable _data = null;
+        /// <summary>
+        /// Gets or sets the data.
+        /// </summary>
+        /// <value>The data.</value>
         [Parameter]
         public virtual IEnumerable Data
         {
@@ -113,17 +188,23 @@ namespace Radzen
                     _view = null;
                     _value = null;
                     _data = value;
-                    OnDataChanged();
                     StateHasChanged();
                 }
             }
         }
 
-        protected virtual void OnDataChanged()
+        /// <summary>
+        /// Called when [data changed].
+        /// </summary>
+        protected virtual async Task OnDataChanged()
         {
-
+            await Task.CompletedTask;
         }
 
+        /// <summary>
+        /// Gets the query.
+        /// </summary>
+        /// <value>The query.</value>
         protected virtual IQueryable Query
         {
             get
@@ -132,9 +213,19 @@ namespace Radzen
             }
         }
 
-        protected string searchText;
+        /// <summary>
+        /// The search text
+        /// </summary>
+        internal string searchText;
 
+        /// <summary>
+        /// The view
+        /// </summary>
         protected IQueryable _view = null;
+        /// <summary>
+        /// Gets the view.
+        /// </summary>
+        /// <value>The view.</value>
         protected virtual IEnumerable View
         {
             get
@@ -171,15 +262,38 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the edit context.
+        /// </summary>
+        /// <value>The edit context.</value>
         [CascadingParameter]
         public EditContext EditContext { get; set; }
 
+        /// <summary>
+        /// Gets the field identifier.
+        /// </summary>
+        /// <value>The field identifier.</value>
         public FieldIdentifier FieldIdentifier { get; private set; }
 
+        /// <summary>
+        /// Gets or sets the value expression.
+        /// </summary>
+        /// <value>The value expression.</value>
         [Parameter]
         public Expression<Func<T>> ValueExpression { get; set; }
-        public override Task SetParametersAsync(ParameterView parameters)
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        public override async Task SetParametersAsync(ParameterView parameters)
         {
+            var dataChanged = parameters.DidParameterChange(nameof(Data), Data);
+            if (dataChanged)
+            {
+                await OnDataChanged();
+            }
+
             var result = base.SetParametersAsync(parameters);
 
             if (EditContext != null && ValueExpression != null && FieldIdentifier.Model != EditContext.Model)
@@ -188,14 +302,22 @@ namespace Radzen
                 EditContext.OnValidationStateChanged += ValidationStateChanged;
             }
 
-            return result;
+            await result;
         }
 
+        /// <summary>
+        /// Validations the state changed.
+        /// </summary>
+        /// <param name="sender">The sender.</param>
+        /// <param name="e">The <see cref="ValidationStateChangedEventArgs"/> instance containing the event data.</param>
         private void ValidationStateChanged(object sender, ValidationStateChangedEventArgs e)
         {
             StateHasChanged();
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public override void Dispose()
         {
             base.Dispose();
@@ -208,9 +330,23 @@ namespace Radzen
             Form?.RemoveComponent(this);
         }
 
+        /// <summary>
+        /// Gets the value.
+        /// </summary>
+        /// <returns>System.Object.</returns>
         public object GetValue()
         {
             return Value;
         }
+
+
+        /// <summary>
+        /// Gets the class list.
+        /// </summary>
+        /// <param name="className">Name of the class.</param>
+        /// <returns>ClassList.</returns>
+        protected ClassList GetClassList(string className) => ClassList.Create(className)
+                                                                       .AddDisabled(Disabled)
+                                                                       .Add(FieldIdentifier, EditContext);
     }
 }

Radzen.Blazor/DialogService.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -6,13 +7,66 @@ using System.Threading.Tasks;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class DialogService. Contains various methods with options to open and close dialogs. 
+    /// Should be added as scoped service in the application services and RadzenDialog should be added in application main layout.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// @inject DialogService DialogService
+    /// &lt;RadzenButton Text="Show dialog with inline Blazor content" Click=@ShowInlineDialog /&gt;
+    /// @code {
+    ///  async Task ShowInlineDialog()
+    ///  {
+    ///    var result = await DialogService.OpenAsync("Simple Dialog", ds =&gt;
+    ///      @&lt;div&gt;
+    ///          &lt;p Style="margin-bottom: 1rem"&gt;Confirm?&lt;/p&gt;
+    ///          &lt;div class="row"&gt;
+    ///              &lt;div class="col-md-12"&gt;
+    ///                  &lt;RadzenButton Text="Ok" Click="() =&gt; ds.Close(true)" Style="margin-bottom: 10px; width: 150px" /&gt;
+    ///                  &lt;RadzenButton Text="Cancel" Click="() =&gt; ds.Close(false)" ButtonStyle="ButtonStyle.Secondary"  Style="margin-bottom: 10px; width: 150px"/&gt;
+    ///                  &lt;RadzenButton Text="Refresh" Click="(() =&gt; { orderID = 10249; ds.Refresh(); })" ButtonStyle="ButtonStyle.Info"  Style="margin-bottom: 10px; width: 150px"/&gt;
+    ///                  Order ID: @orderID
+    ///              &lt;/div&gt;
+    ///          &lt;/div&gt;
+    ///      &lt;/div&gt;);
+    ///    Console.WriteLine($"Dialog result: {result}");
+    ///  }
+    /// }
+    /// </code>
+    /// </example>
     public class DialogService : IDisposable
     {
-        NavigationManager UriHelper { get; set; }
+        private DotNetObjectReference<DialogService> reference;
+        internal DotNetObjectReference<DialogService> Reference
+        {
+            get
+            {
+                if (reference == null)
+                {
+                    reference = DotNetObjectReference.Create(this);
+                }
 
-        public DialogService(NavigationManager uriHelper)
+                return reference;
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the URI helper.
+        /// </summary>
+        /// <value>The URI helper.</value>
+        NavigationManager UriHelper { get; set; }
+        IJSRuntime JSRuntime { get; set; }
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="DialogService"/> class.
+        /// </summary>
+        /// <param name="uriHelper">The URI helper.</param>
+        /// <param name="jsRuntime">IJSRuntime instance.</param>
+        public DialogService(NavigationManager uriHelper, IJSRuntime jsRuntime)
         {
             UriHelper = uriHelper;
+            JSRuntime = jsRuntime;
 
             if (UriHelper != null)
             {
@@ -24,28 +78,58 @@ namespace Radzen
         {
             if (dialogs.Count > 0)
             {
-                this.Close();
+                Close();
             }
         }
 
+        /// <summary>
+        /// Raises the Close event.
+        /// </summary>
         public event Action<dynamic> OnClose;
 
+        /// <summary>
+        /// Occurs when [on refresh].
+        /// </summary>
         public event Action OnRefresh;
 
+        /// <summary>
+        /// Occurs when a new dialog is open.
+        /// </summary>
         public event Action<string, Type, Dictionary<string, object>, DialogOptions> OnOpen;
 
+        /// <summary>
+        /// Opens a dialog with the specified arguments.
+        /// </summary>
+        /// <typeparam name="T">The type of the Blazor component which will be displayed in a dialog.</typeparam>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T" />.</param>
+        /// <param name="options">The dialog options.</param>
         public void Open<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
         {
             OpenDialog<T>(title, parameters, options);
         }
 
+        /// <summary>
+        /// Invokes <see cref="OnRefresh" />.
+        /// </summary>
         public void Refresh()
         {
             OnRefresh?.Invoke();
         }
 
+        /// <summary>
+        /// The tasks
+        /// </summary>
         protected List<TaskCompletionSource<dynamic>> tasks = new List<TaskCompletionSource<dynamic>>();
 
+        /// <summary>
+        /// Opens a dialog with the specified arguments.
+        /// </summary>
+        /// <typeparam name="T">The type of the Blazor component which will be displayed in a dialog.</typeparam>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="parameters">The dialog parameters. Passed as property values of <typeparamref name="T" />.</param>
+        /// <param name="options">The dialog options.</param>
+        /// <returns>The value passed as argument to <see cref="Close" />.</returns>
         public Task<dynamic> OpenAsync<T>(string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
         {
             var task = new TaskCompletionSource<dynamic>();
@@ -55,6 +139,14 @@ namespace Radzen
 
             return task.Task;
         }
+
+        /// <summary>
+        /// Opens a dialog with the specified content.
+        /// </summary>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="childContent">The content displayed in the dialog.</param>
+        /// <param name="options">The dialog options.</param>
+        /// <returns>The value passed as argument to <see cref="Close" />.</returns>
         public Task<dynamic> OpenAsync(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
         {
             var task = new TaskCompletionSource<dynamic>();
@@ -69,6 +161,12 @@ namespace Radzen
             return task.Task;
         }
 
+        /// <summary>
+        /// Opens a dialog with the specified content.
+        /// </summary>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="childContent">The content displayed in the dialog.</param>
+        /// <param name="options">The dialog options.</param>
         public void Open(string title, RenderFragment<DialogService> childContent, DialogOptions options = null)
         {
             options = options ?? new DialogOptions();
@@ -78,7 +176,11 @@ namespace Radzen
             OpenDialog<object>(title, null, options);
         }
 
+        /// <summary>
+        /// The dialogs
+        /// </summary>
         protected List<object> dialogs = new List<object>();
+
         private void OpenDialog<T>(string title, Dictionary<string, object> parameters, DialogOptions options)
         {
             dialogs.Add(new object());
@@ -87,15 +189,25 @@ namespace Radzen
                 Width = options != null && !string.IsNullOrEmpty(options.Width) ? options.Width : "600px",
                 Left = options != null && !string.IsNullOrEmpty(options.Left) ? options.Left : "",
                 Top = options != null && !string.IsNullOrEmpty(options.Top) ? options.Top : "",
+                Bottom = options != null && !string.IsNullOrEmpty(options.Bottom) ? options.Bottom : "",
                 Height = options != null && !string.IsNullOrEmpty(options.Height) ? options.Height : "",
                 ShowTitle = options != null ? options.ShowTitle : true,
                 ShowClose = options != null ? options.ShowClose : true,
+                Resizable = options != null ? options.Resizable : false,
+                Draggable = options != null ? options.Draggable : false,
                 ChildContent = options?.ChildContent,
                 Style = options != null ? options.Style : "",
-                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true
+                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true,
+                CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
+                CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
             });
         }
 
+        /// <summary>
+        /// Closes the last opened dialog with optional result.
+        /// </summary>
+        /// <param name="result">The result.</param>
+        [JSInvokable("DialogService.Close")]
         public void Close(dynamic result = null)
         {
             var dialog = dialogs.LastOrDefault();
@@ -114,83 +226,198 @@ namespace Radzen
             }
         }
 
+        /// <inheritdoc />
         public void Dispose()
         {
             UriHelper.LocationChanged -= UriHelper_OnLocationChanged;
         }
 
-        public async Task<bool?> Confirm(string message = "Confirm?", string title = "Confirm", ConfirmOptions options = null) => await OpenAsync(title, ds => {
-            RenderFragment content = b =>
-            {
-                var i = 0;
-                b.OpenElement(i++, "div");
-                b.OpenElement(i++, "p");
-                b.AddAttribute(i++, "style", "margin-bottom: 20px;");
-                b.AddContent(i++, message);
-                b.CloseElement();
-
-                b.OpenElement(i++, "div");
-                b.AddAttribute(i++, "class", "row");
-                b.OpenElement(i++, "div");
-                b.AddAttribute(i++, "class", "col-md-12");
-
-                b.OpenComponent<Blazor.RadzenButton>(i++);
-                b.AddAttribute(i++, "Text", options != null ? options.OkButtonText : "Ok");
-                b.AddAttribute(i++, "Style", "margin-bottom: 10px; width: 150px");
-                b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(true)));
-                b.CloseComponent();
-
-                b.OpenComponent<Blazor.RadzenButton>(i++);
-                b.AddAttribute(i++, "Text", options != null ? options.CancelButtonText : "Cancel");
-                b.AddAttribute(i++, "ButtonStyle", ButtonStyle.Secondary);
-                b.AddAttribute(i++, "Style", "margin-bottom: 10px; margin-left: 10px; width: 150px");
-                b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(false)));
-                b.CloseComponent();
-                
-                b.CloseElement();
-                b.CloseElement();
-                b.CloseElement();
-            };
-            return content;
-        }, new DialogOptions() 
+        /// <summary>
+        /// Displays a confirmation dialog.
+        /// </summary>
+        /// <param name="message">The message displayed to the user.</param>
+        /// <param name="title">The text displayed in the title bar of the dialog.</param>
+        /// <param name="options">The options.</param>
+        /// <returns><c>true</c> if the user clicked the OK button, <c>false</c> otherwise.</returns>
+        public async Task<bool?> Confirm(string message = "Confirm?", string title = "Confirm", ConfirmOptions options = null)
         {
-            Width = options != null ? !string.IsNullOrEmpty(options.Width) ? options.Width : "355px" : "355px",
-            Height = options != null ? options.Height : null,
-            Left = options != null ? options.Left : null,
-            Top = options != null ? options.Top : null,
-            Bottom = options != null ? options.Bottom : null,
-            ChildContent = options != null ? options.ChildContent : null,
-            ShowTitle = options != null ? options.ShowTitle : true,
-            ShowClose = options != null ? options.ShowClose : true,
-            Style = options != null ? options.Style : "",
-        });
+            var dialogOptions = new DialogOptions()
+            {
+                Width = options != null ? !string.IsNullOrEmpty(options.Width) ? options.Width : "355px" : "355px",
+                Height = options != null ? options.Height : null,
+                Left = options != null ? options.Left : null,
+                Top = options != null ? options.Top : null,
+                Bottom = options != null ? options.Bottom : null,
+                ChildContent = options != null ? options.ChildContent : null,
+                ShowTitle = options != null ? options.ShowTitle : true,
+                ShowClose = options != null ? options.ShowClose : true,
+                Resizable = options != null ? options.Resizable : false,
+                Draggable = options != null ? options.Draggable : false,
+                Style = options != null ? options.Style : "",
+                AutoFocusFirstElement = options != null ? options.AutoFocusFirstElement : true,
+                CloseDialogOnOverlayClick = options != null ? options.CloseDialogOnOverlayClick : false,
+                CloseDialogOnEsc = options != null ? options.CloseDialogOnEsc : true,
+            };
+
+            await JSRuntime.InvokeAsync<string>("Radzen.openDialog", dialogOptions, Reference);
+
+            return await OpenAsync(title, ds =>
+            {
+                RenderFragment content = b =>
+                {
+                    var i = 0;
+                    b.OpenElement(i++, "div");
+                    b.OpenElement(i++, "p");
+                    b.AddAttribute(i++, "style", "margin-bottom: 20px;");
+                    b.AddContent(i++, message);
+                    b.CloseElement();
+
+                    b.OpenElement(i++, "div");
+                    b.AddAttribute(i++, "class", "row");
+                    b.OpenElement(i++, "div");
+                    b.AddAttribute(i++, "class", "col-md-12");
+
+                    b.OpenComponent<Blazor.RadzenButton>(i++);
+                    b.AddAttribute(i++, "Text", options != null ? options.OkButtonText : "Ok");
+                    b.AddAttribute(i++, "Style", "margin-bottom: 10px; width: 150px");
+                    b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(true)));
+                    b.CloseComponent();
+
+                    b.OpenComponent<Blazor.RadzenButton>(i++);
+                    b.AddAttribute(i++, "Text", options != null ? options.CancelButtonText : "Cancel");
+                    b.AddAttribute(i++, "ButtonStyle", ButtonStyle.Secondary);
+                    b.AddAttribute(i++, "Style", "margin-bottom: 10px; margin-left: 10px; width: 150px");
+                    b.AddAttribute(i++, "Click", EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, () => ds.Close(false)));
+                    b.CloseComponent();
+
+                    b.CloseElement();
+                    b.CloseElement();
+                    b.CloseElement();
+                };
+                return content;
+            }, dialogOptions);
+        }
     }
 
+    /// <summary>
+    /// Class DialogOptions.
+    /// </summary>
     public class DialogOptions
     {
+        /// <summary>
+        /// Gets or sets a value indicating whether to show the title bar. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if title bar is shown; otherwise, <c>false</c>.</value>
         public bool ShowTitle { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to show the close button. Set to <c>true</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if the close button is shown; otherwise, <c>false</c>.</value>
         public bool ShowClose { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog is resizable. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if resizable; otherwise, <c>false</c>.</value>
+        public bool Resizable { get; set; } = false;
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog is draggable. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if draggable; otherwise, <c>false</c>.</value>
+        public bool Draggable { get; set; } = false;
+        /// <summary>
+        /// Gets or sets the X coordinate of the dialog. Maps to the <c>left</c> CSS attribute.
+        /// </summary>
+        /// <value>The left.</value>
         public string Left { get; set; }
+        /// <summary>
+        /// Gets or sets the Y coordinate of the dialog. Maps to the <c>top</c> CSS attribute.
+        /// </summary>
+        /// <value>The top.</value>
         public string Top { get; set; }
+        /// <summary>
+        /// Specifies the <c>bottom</c> CSS attribute.
+        /// </summary>
+        /// <value>The bottom.</value>
         public string Bottom { get; set; }
+        /// <summary>
+        /// Gets or sets the width of the dialog.
+        /// </summary>
+        /// <value>The width.</value>
         public string Width { get; set; }
+        /// <summary>
+        /// Gets or sets the height of the dialog.
+        /// </summary>
+        /// <value>The height.</value>
         public string Height { get; set; }
+        /// <summary>
+        /// Gets or sets the CSS style of the dialog
+        /// </summary>
+        /// <value>The style.</value>
         public string Style { get; set; }
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         public RenderFragment<DialogService> ChildContent { get; set; }
+        /// <summary>
+        /// Gets or sets a value indicating whether to focus the first focusable HTML element. Set to <c>true</c> by default.
+        /// </summary>
         public bool AutoFocusFirstElement { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog should be closed by clicking the overlay.
+        /// </summary>
+        /// <value><c>true</c> if closeable; otherwise, <c>false</c>.</value>
+        public bool CloseDialogOnOverlayClick { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether the dialog should be closed on ESC key press.
+        /// </summary>
+        /// <value><c>true</c> if closeable; otherwise, <c>false</c>.</value>
+        public bool CloseDialogOnEsc { get; set; } = true;
     }
 
+    /// <summary>
+    /// Class ConfirmOptions.
+    /// </summary>
     public class ConfirmOptions : DialogOptions
     {
+        /// <summary>
+        /// Gets or sets the text of the OK button.
+        /// </summary>
         public string OkButtonText { get; set; }
+        /// <summary>
+        /// Gets or sets the text of the Cancel button.
+        /// </summary>
         public string CancelButtonText { get; set; }
     }
 
+    /// <summary>
+    /// Class Dialog.
+    /// </summary>
     public class Dialog
     {
+        /// <summary>
+        /// Gets or sets the title.
+        /// </summary>
+        /// <value>The title.</value>
         public string Title { get; set; }
+        /// <summary>
+        /// Gets or sets the type.
+        /// </summary>
+        /// <value>The type.</value>
         public Type Type { get; set; }
+        /// <summary>
+        /// Gets or sets the parameters.
+        /// </summary>
+        /// <value>The parameters.</value>
         public Dictionary<string, object> Parameters { get; set; }
+        /// <summary>
+        /// Gets or sets the options.
+        /// </summary>
+        /// <value>The options.</value>
         public DialogOptions Options { get; set; }
     }
 }

Radzen.Blazor/DropDownBase.cs

@@ -3,58 +3,97 @@ using System.Collections;
 using System.Collections.Generic;
 using System.Linq;
 using System.Linq.Dynamic.Core;
-using System.Threading;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.JSInterop;
-using Radzen.Blazor;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Base class of components that display a list of items.
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
     public class DropDownBase<T> : DataBoundFormComponent<T>
     {
-#if NET5
+#if NET5_0_OR_GREATER
         internal Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object> virtualize;
 
+        /// <summary>
+        /// The Virtualize instance.
+        /// </summary>
+        public Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object> Virtualize
+        {
+            get
+            {
+                return virtualize;
+            }
+        }
+
+        List<object> virtualItems;
+
         private async ValueTask<Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<object>> LoadItems(Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderRequest request)
         {
             var data = Data != null ? Data.Cast<object>() : Enumerable.Empty<object>();
             var view = (LoadData.HasDelegate ? data : View).Cast<object>().AsQueryable();
             var totalItemsCount = LoadData.HasDelegate ? Count : view.Count();
-            var top = Math.Min(request.Count, totalItemsCount - request.StartIndex);
+            var top = request.Count;
+
+            if(top <= 0)
+            {
+                top = PageSize;
+            }
 
             if (LoadData.HasDelegate)
             {
-                await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = request.StartIndex, Top = top, Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) });
+                await LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = request.StartIndex, Top = request.Count, Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) });
             }
 
-            return new Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<object>(LoadData.HasDelegate ? Data.Cast<object>() : view.Skip(request.StartIndex).Take(top), totalItemsCount);
+            virtualItems = (LoadData.HasDelegate ? Data : view.Skip(request.StartIndex).Take(top)).Cast<object>().ToList();
+
+            return new Microsoft.AspNetCore.Components.Web.Virtualization.ItemsProviderResult<object>(virtualItems, LoadData.HasDelegate ? Count : totalItemsCount);
         }
 
+        /// <summary>
+        /// Specifies the total number of items in the data source.
+        /// </summary>
         [Parameter]
         public int Count { get; set; }
 
+        /// <summary>
+        /// Specifies wether virtualization is enabled. Set to <c>false</c> by default.
+        /// </summary>
         [Parameter]
         public bool AllowVirtualization { get; set; }
 
+        /// <summary>
+        /// Specifies the default page size. Set to <c>5</c> by default.
+        /// </summary>
         [Parameter]
         public int PageSize { get; set; } = 5;
 #endif
+        /// <summary>
+        /// Determines whether virtualization is allowed.
+        /// </summary>
+        /// <returns><c>true</c> if virtualization is allowed; otherwise, <c>false</c>.</returns>
         internal bool IsVirtualizationAllowed()
         {
-#if NET5
+#if NET5_0_OR_GREATER
             return AllowVirtualization;
 #else
             return false;
 #endif
         }
 
+        /// <summary>
+        /// Renders the items.
+        /// </summary>
+        /// <returns>RenderFragment.</returns>
         internal virtual RenderFragment RenderItems()
         {
             return new RenderFragment(builder =>
             {
-#if NET5
+#if NET5_0_OR_GREATER
                 if (AllowVirtualization)
                 {
                     builder.OpenComponent(0, typeof(Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<object>));
@@ -87,32 +126,107 @@ namespace Radzen
             });
         }
 
+        /// <inheritdoc />
+        public override bool HasValue
+        {
+            get
+            {
+                if (typeof(T) == typeof(string))
+                {
+                    return !string.IsNullOrEmpty($"{internalValue}");
+                }
+                return internalValue != null;
+            }
+        }
+
+        /// <summary>
+        /// Renders the item.
+        /// </summary>
+        /// <param name="builder">The builder.</param>
+        /// <param name="item">The item.</param>
         internal virtual void RenderItem(RenderTreeBuilder builder, object item)
         {
             //
         }
 
+        System.Collections.Generic.HashSet<object> keys = new System.Collections.Generic.HashSet<object>();
+
+        internal object GetKey(object item)
+        {
+            var value = PropertyAccess.GetItemOrValueFromProperty(item, ValueProperty);
+
+            if (!keys.Contains(value))
+            {
+                keys.Add(value);
+                return value;
+            }
+            else
+            {
+                return item;
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether filtering is allowed. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if filtering is allowed; otherwise, <c>false</c>.</value>
         [Parameter]
         public virtual bool AllowFiltering { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether the user can clear the value. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if clearing is allowed; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool AllowClear { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="DropDownBase{T}"/> is multiple.
+        /// </summary>
+        /// <value><c>true</c> if multiple; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool Multiple { get; set; }
 
+        /// <summary>
+        /// Gets or sets the template.
+        /// </summary>
+        /// <value>The template.</value>
         [Parameter]
         public RenderFragment<dynamic> Template { get; set; }
 
+        /// <summary>
+        /// Gets or sets the value property.
+        /// </summary>
+        /// <value>The value property.</value>
         [Parameter]
         public string ValueProperty { get; set; }
 
+        /// <summary>
+        /// Gets or sets the disabled property.
+        /// </summary>
+        /// <value>The disabled property.</value>
+        [Parameter]
+        public string DisabledProperty { get; set; }
+
+        /// <summary>
+        /// Gets or sets the selected item changed.
+        /// </summary>
+        /// <value>The selected item changed.</value>
         [Parameter]
         public Action<object> SelectedItemChanged { get; set; }
 
-        protected List<object> selectedItems = new List<object>();
+        /// <summary>
+        /// The selected items
+        /// </summary>
+        protected IList<object> selectedItems = new List<object>();
+        /// <summary>
+        /// The selected item
+        /// </summary>
         protected object selectedItem = null;
 
+        /// <summary>
+        /// Selects all.
+        /// </summary>
         protected async System.Threading.Tasks.Task SelectAll()
         {
             if (Disabled)
@@ -133,27 +247,43 @@ namespace Radzen
             if (!string.IsNullOrEmpty(ValueProperty))
             {
                 System.Reflection.PropertyInfo pi = PropertyAccess.GetElementType(Data.GetType()).GetProperty(ValueProperty);
-                Value = selectedItems.Select(i => PropertyAccess.GetItemOrValueFromProperty(i, ValueProperty)).AsQueryable().Cast(pi.PropertyType);
+                internalValue = selectedItems.Select(i => PropertyAccess.GetItemOrValueFromProperty(i, ValueProperty)).AsQueryable().Cast(pi.PropertyType);
             }
             else
             {
                 var type = typeof(T).IsGenericType ? typeof(T).GetGenericArguments()[0] : typeof(T);
-                Value = selectedItems.AsQueryable().Cast(type);
+                internalValue = selectedItems.AsQueryable().Cast(type);
             }
 
-            await ValueChanged.InvokeAsync((T)Value);
+            await ValueChanged.InvokeAsync((T)internalValue);
             if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-            await Change.InvokeAsync(Value);
+            await Change.InvokeAsync(internalValue);
 
             StateHasChanged();
         }
 
+        internal bool IsAllSelected()
+        {
+            if (LoadData.HasDelegate && !string.IsNullOrEmpty(ValueProperty))
+            {
+                return View != null && View.Cast<object>().All(i => IsItemSelectedByValue(PropertyAccess.GetValue(i, ValueProperty)));
+            }
+
+            return View != null && selectedItems.Count == View.Cast<object>().Count();
+        }
+
+        /// <summary>
+        /// Resets this instance.
+        /// </summary>
         public void Reset()
         {
             InvokeAsync(ClearAll);
             InvokeAsync(DebounceFilter);
         }
 
+        /// <summary>
+        /// Clears all.
+        /// </summary>
         protected async System.Threading.Tasks.Task ClearAll()
         {
             if (Disabled)
@@ -162,24 +292,31 @@ namespace Radzen
             searchText = null;
             await JSRuntime.InvokeAsync<string>("Radzen.setInputValue", search, "");
 
-            Value = default(T);
+            internalValue = default(T);
             selectedItem = null;
 
             selectedItems.Clear();
 
             selectedIndex = -1;
 
-            await ValueChanged.InvokeAsync((T)Value);
+            await ValueChanged.InvokeAsync((T)internalValue);
             if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-            await Change.InvokeAsync(Value);
+            await Change.InvokeAsync(internalValue);
 
             await OnFilter(new ChangeEventArgs());
 
             StateHasChanged();
         }
 
+        /// <summary>
+        /// The data
+        /// </summary>
         IEnumerable _data;
 
+        /// <summary>
+        /// Gets or sets the data.
+        /// </summary>
+        /// <value>The data.</value>
         [Parameter]
         public override IEnumerable Data
         {
@@ -200,8 +337,6 @@ namespace Radzen
                         selectedItems.Clear();
                     }
 
-                    SelectItemFromValue(Value);
-
                     OnDataChanged();
 
                     StateHasChanged();
@@ -209,22 +344,34 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets the popup identifier.
+        /// </summary>
+        /// <value>The popup identifier.</value>
         protected string PopupID
         {
             get
             {
-                return $"popup{UniqueID}";
+                return $"popup-{GetId()}";
             }
         }
 
+        /// <summary>
+        /// Gets the search identifier.
+        /// </summary>
+        /// <value>The search identifier.</value>
         protected string SearchID
         {
             get
             {
-                return $"search{UniqueID}";
+                return $"search-{GetId()}";
             }
         }
 
+        /// <summary>
+        /// Opens the popup script.
+        /// </summary>
+        /// <returns>System.String.</returns>
         protected string OpenPopupScript()
         {
             if (Disabled)
@@ -235,6 +382,10 @@ namespace Radzen
             return $"Radzen.togglePopup(this.parentNode, '{PopupID}', true);Radzen.focusElement('{SearchID}');";
         }
 
+        /// <summary>
+        /// Opens the popup script from parent.
+        /// </summary>
+        /// <returns>System.String.</returns>
         protected string OpenPopupScriptFromParent()
         {
             if (Disabled)
@@ -245,13 +396,32 @@ namespace Radzen
             return $"Radzen.togglePopup(this, '{PopupID}', true);Radzen.focusElement('{SearchID}');";
         }
 
+        /// <summary>
+        /// Gets or sets the filter delay.
+        /// </summary>
+        /// <value>The filter delay.</value>
         [Parameter]
         public int FilterDelay { get; set; } = 500;
 
+        /// <summary>
+        /// The search
+        /// </summary>
         protected ElementReference search;
-        protected ElementReference list;
+        /// <summary>
+        /// The list
+        /// </summary>
+        protected ElementReference? list;
+        /// <summary>
+        /// The selected index
+        /// </summary>
         protected int selectedIndex = -1;
 
+        /// <summary>
+        /// Opens the popup.
+        /// </summary>
+        /// <param name="key">The key.</param>
+        /// <param name="isFilter">if set to <c>true</c> [is filter].</param>
+        /// <param name="isFromClick">if set to <c>true</c> [is from click].</param>
         protected virtual async System.Threading.Tasks.Task OpenPopup(string key = "ArrowDown", bool isFilter = false, bool isFromClick = false)
         {
             if (Disabled)
@@ -260,15 +430,44 @@ namespace Radzen
             await JSRuntime.InvokeVoidAsync("Radzen.togglePopup", Element, PopupID, true);
             await JSRuntime.InvokeVoidAsync("Radzen.focusElement", isFilter ? UniqueID : SearchID);
 
-            await JSRuntime.InvokeVoidAsync("Radzen.selectListItem", search, list, selectedIndex);
+            if (list != null)
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.selectListItem", search, list, selectedIndex);
+            }
         }
 
+        /// <summary>
+        /// Handles the key press.
+        /// </summary>
+        /// <param name="args">The <see cref="Microsoft.AspNetCore.Components.Web.KeyboardEventArgs"/> instance containing the event data.</param>
+        /// <param name="isFilter">if set to <c>true</c> [is filter].</param>
         private async System.Threading.Tasks.Task HandleKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args, bool isFilter = false)
         {
             if (Disabled)
                 return;
 
-            var items = (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).Cast<object>();
+            List<object> items = Enumerable.Empty<object>().ToList();
+
+            if (LoadData.HasDelegate)
+            {
+                if (Data != null)
+                {
+                    items = Data.Cast<object>().ToList();
+                }
+            }
+            else
+            {
+                if (IsVirtualizationAllowed())
+                {
+#if NET5_0_OR_GREATER
+                    items = virtualItems;
+#endif
+                }
+                else
+                {
+                    items = View.Cast<object>().ToList();
+                }
+            }
 
             var key = args.Code != null ? args.Code : args.Key;
 
@@ -276,11 +475,13 @@ namespace Radzen
             {
                 try
                 {
-                    var newSelectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown" || key == "ArrowRight", selectedIndex);
+                    var currentViewIndex = Multiple ? selectedIndex : items.IndexOf(selectedItem);
+
+                    var newSelectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown" || key == "ArrowRight", currentViewIndex);
 
                     if (!Multiple)
                     {
-                        if (newSelectedIndex != selectedIndex && newSelectedIndex >= 0 && newSelectedIndex <= items.Count() - 1)
+                        if (newSelectedIndex != currentViewIndex && newSelectedIndex >= 0 && newSelectedIndex <= items.Count() - 1)
                         {
                             selectedIndex = newSelectedIndex;
                             await OnSelectItem(items.ElementAt(selectedIndex), true);
@@ -288,7 +489,7 @@ namespace Radzen
                     }
                     else
                     {
-                        selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown", selectedIndex);
+                        selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown", currentViewIndex);
                     }
                 }
                 catch (Exception)
@@ -312,7 +513,7 @@ namespace Radzen
             {
                 await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
             }
-            else if (key == "Delete")
+            else if (key == "Delete" && AllowClear)
             {
                 if (!Multiple && selectedItem != null)
                 {
@@ -325,17 +526,24 @@ namespace Radzen
                     Debounce(DebounceFilter, FilterDelay);
                 }
             }
-            else if(AllowFiltering && isFilter)
+            else if (AllowFiltering && isFilter)
             {
                 Debounce(DebounceFilter, FilterDelay);
             }
         }
 
+        /// <summary>
+        /// Handles the <see cref="E:FilterKeyPress" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="Microsoft.AspNetCore.Components.Web.KeyboardEventArgs"/> instance containing the event data.</param>
         protected virtual async System.Threading.Tasks.Task OnFilterKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
         {
             await HandleKeyPress(args, true);
         }
 
+        /// <summary>
+        /// Debounces the filter.
+        /// </summary>
         async Task DebounceFilter()
         {
             if (!LoadData.HasDelegate)
@@ -344,13 +552,13 @@ namespace Radzen
                 _view = null;
                 if (IsVirtualizationAllowed())
                 {
-#if NET5
+#if NET5_0_OR_GREATER
                     if (virtualize != null)
                     {
                         await virtualize.RefreshDataAsync();
                     }
                     await InvokeAsync(() => { StateHasChanged(); });
-#endif 
+#endif
                 }
                 else
                 {
@@ -361,41 +569,61 @@ namespace Radzen
             {
                 if (IsVirtualizationAllowed())
                 {
-#if NET5
+#if NET5_0_OR_GREATER
                     if (virtualize != null)
                     {
                         await InvokeAsync(virtualize.RefreshDataAsync);
                     }
                     await InvokeAsync(() => { StateHasChanged(); });
-#endif 
+#endif
                 }
                 else
                 {
                     await LoadData.InvokeAsync(await GetLoadDataArgs());
-                }   
+                }
             }
 
+            if (Multiple)
+                selectedIndex = -1;
+
             await JSRuntime.InvokeAsync<string>("Radzen.repositionPopup", Element, PopupID);
         }
 
+        /// <summary>
+        /// Handles the <see cref="E:KeyPress" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="Microsoft.AspNetCore.Components.Web.KeyboardEventArgs"/> instance containing the event data.</param>
         protected async System.Threading.Tasks.Task OnKeyPress(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)
         {
             await HandleKeyPress(args);
         }
 
+        /// <summary>
+        /// Called when [select item].
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <param name="isFromKey">if set to <c>true</c> [is from key].</param>
         protected virtual async System.Threading.Tasks.Task OnSelectItem(object item, bool isFromKey = false)
         {
             await SelectItem(item);
         }
 
+        /// <summary>
+        /// Handles the <see cref="E:Filter" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="ChangeEventArgs"/> instance containing the event data.</param>
         protected virtual async System.Threading.Tasks.Task OnFilter(ChangeEventArgs args)
         {
             await DebounceFilter();
         }
 
+        /// <summary>
+        /// Gets the load data arguments.
+        /// </summary>
+        /// <returns>LoadDataArgs.</returns>
         internal virtual async System.Threading.Tasks.Task<LoadDataArgs> GetLoadDataArgs()
         {
-#if NET5
+#if NET5_0_OR_GREATER
             if (AllowVirtualization)
             {
                 return new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize, Filter = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search) };
@@ -409,8 +637,16 @@ namespace Radzen
 #endif
         }
 
+        /// <summary>
+        /// The first render
+        /// </summary>
         private bool firstRender = true;
 
+        /// <summary>
+        /// Called when [after render asynchronous].
+        /// </summary>
+        /// <param name="firstRender">if set to <c>true</c> [first render].</param>
+        /// <returns>Task.</returns>
         protected override Task OnAfterRenderAsync(bool firstRender)
         {
             this.firstRender = firstRender;
@@ -418,8 +654,34 @@ namespace Radzen
             return base.OnAfterRenderAsync(firstRender);
         }
 
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            internalValue = Value;
+
+            base.OnInitialized();
+        }
+
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
         public override async Task SetParametersAsync(ParameterView parameters)
         {
+#if NET5_0_OR_GREATER
+            var pageSize = parameters.GetValueOrDefault<int>(nameof(PageSize));
+            if(pageSize != default(int))
+            {
+                PageSize = pageSize;
+            }
+#endif
+            var selectedItemChanged = parameters.DidParameterChange(nameof(SelectedItem), SelectedItem);
+            if (selectedItemChanged)
+            {
+                await SelectItem(selectedItem, false);
+            }
+
             var shouldClose = false;
 
             if (parameters.DidParameterChange(nameof(Visible), Visible))
@@ -428,6 +690,11 @@ namespace Radzen
                 shouldClose = !visible;
             }
 
+            if (parameters.DidParameterChange(nameof(Value), Value))
+            {
+                internalValue = parameters.GetValueOrDefault<object>(nameof(Value));
+            }
+
             await base.SetParametersAsync(parameters);
 
             if (shouldClose && !firstRender)
@@ -436,9 +703,13 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Called when [parameters set asynchronous].
+        /// </summary>
+        /// <returns>Task.</returns>
         protected override Task OnParametersSetAsync()
         {
-            var valueAsEnumerable = Value as IEnumerable;
+            var valueAsEnumerable = internalValue as IEnumerable;
 
             if (valueAsEnumerable != null)
             {
@@ -448,28 +719,48 @@ namespace Radzen
                 }
             }
 
-            SelectItemFromValue(Value);
+            SelectItemFromValue(internalValue);
 
             return base.OnParametersSetAsync();
         }
 
+        /// <summary>
+        /// Handles the <see cref="E:Change" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="ChangeEventArgs"/> instance containing the event data.</param>
         protected void OnChange(ChangeEventArgs args)
         {
-            Value = args.Value;
+            internalValue = args.Value;
         }
 
+        /// <summary>
+        /// Determines whether the specified item is selected.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <returns><c>true</c> if the specified item is selected; otherwise, <c>false</c>.</returns>
         internal bool isSelected(object item)
         {
-            if (Multiple)
+            if (LoadData.HasDelegate && !string.IsNullOrEmpty(ValueProperty))
             {
-                return selectedItems.IndexOf(item) != -1;
+                return IsItemSelectedByValue(PropertyAccess.GetValue(item, ValueProperty));
             }
             else
             {
-                return item == selectedItem;
+                if (Multiple)
+                {
+                    return selectedItems.IndexOf(item) != -1;
+                }
+                else
+                {
+                    return item == selectedItem;
+                }
             }
         }
 
+        /// <summary>
+        /// Gets or sets the selected item.
+        /// </summary>
+        /// <value>The selected item.</value>
         [Parameter]
         public object SelectedItem
         {
@@ -482,11 +773,14 @@ namespace Radzen
                 if (selectedItem != value)
                 {
                     selectedItem = object.Equals(value, "null") ? null : value;
-                    SelectItem(selectedItem, false).Wait();
                 }
             }
         }
 
+        /// <summary>
+        /// Gets the items.
+        /// </summary>
+        /// <value>The items.</value>
         protected virtual IEnumerable<object> Items
         {
             get
@@ -495,6 +789,10 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets the view.
+        /// </summary>
+        /// <value>The view.</value>
         protected override IEnumerable View
         {
             get
@@ -512,6 +810,11 @@ namespace Radzen
                             query.Add(TextProperty);
                         }
 
+                        if (typeof(EnumerableQuery).IsAssignableFrom(Query.GetType()))
+                        {
+                            query.Add("ToString()");
+                        }
+
                         if (ignoreCase)
                         {
                             query.Add("ToLower()");
@@ -529,7 +832,7 @@ namespace Radzen
                         }
                         else
                         {
-                            _view = (typeof(IQueryable).IsAssignableFrom(Data.GetType())) ? Query.Cast<object>().ToList().AsQueryable() : Query;
+                            _view = (typeof(IQueryable).IsAssignableFrom(Data.GetType())) ? (Query as IEnumerable).Cast<object>().ToList().AsQueryable() : Query;
                         }
                     }
                 }
@@ -538,6 +841,9 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Sets the selected index from selected item.
+        /// </summary>
         void SetSelectedIndexFromSelectedItem()
         {
             if (selectedItem != null)
@@ -557,12 +863,24 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Selects the item internal.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <param name="raiseChange">if set to <c>true</c> [raise change].</param>
         internal async System.Threading.Tasks.Task SelectItemInternal(object item, bool raiseChange = true)
         {
             await SelectItem(item, raiseChange);
         }
 
-        protected async System.Threading.Tasks.Task SelectItem(object item, bool raiseChange = true)
+        internal object internalValue;
+
+        /// <summary>
+        /// Selects the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <param name="raiseChange">if set to <c>true</c> [raise change].</param>
+        public async System.Threading.Tasks.Task SelectItem(object item, bool raiseChange = true)
         {
             if (!Multiple)
             {
@@ -572,11 +890,11 @@ namespace Radzen
                 selectedItem = item;
                 if (!string.IsNullOrEmpty(ValueProperty))
                 {
-                    Value = PropertyAccess.GetItemOrValueFromProperty(item, ValueProperty);
+                    internalValue = PropertyAccess.GetItemOrValueFromProperty(item, ValueProperty);
                 }
                 else
                 {
-                    Value = item;
+                    internalValue = item;
                 }
 
                 SetSelectedIndexFromSelectedItem();
@@ -585,19 +903,35 @@ namespace Radzen
             }
             else
             {
-                if (selectedItems.IndexOf(item) == -1)
+                if (!string.IsNullOrEmpty(ValueProperty))
                 {
-                    selectedItems.Add(item);
+                    if (LoadData.HasDelegate)
+                    {
+                        var v = PropertyAccess.GetValue(item, ValueProperty);
+                        var si = (selectedItems ?? Enumerable.Empty<object>()).AsQueryable().Where($@"object.Equals({ValueProperty},@0)", v).FirstOrDefault();
+                        if (si == null)
+                        {
+                            selectedItems.Add(item);
+                        }
+                        else
+                        {
+                            selectedItems.Remove(si);
+                        }
+                    }
+                    else
+                    {
+                        UpdateSelectedItems(item);
+                    }
                 }
                 else
                 {
-                    selectedItems.Remove(item);
+                    UpdateSelectedItems(item);
                 }
 
                 if (!string.IsNullOrEmpty(ValueProperty))
                 {
                     System.Reflection.PropertyInfo pi = PropertyAccess.GetElementType(Data.GetType()).GetProperty(ValueProperty);
-                    Value = selectedItems.Select(i => PropertyAccess.GetItemOrValueFromProperty(i, ValueProperty)).AsQueryable().Cast(pi.PropertyType);
+                    internalValue = selectedItems.Select(i => PropertyAccess.GetItemOrValueFromProperty(i, ValueProperty)).AsQueryable().Cast(pi.PropertyType);
                 }
                 else
                 {
@@ -605,23 +939,44 @@ namespace Radzen
                     var elementType = firstElement != null ? firstElement.GetType() : null;
                     if (elementType != null)
                     {
-                        Value = selectedItems.AsQueryable().Cast(elementType);
+                        internalValue = selectedItems.AsQueryable().Cast(elementType);
                     }
                     else
                     {
-                        Value = selectedItems;
+                        internalValue = selectedItems;
                     }
                 }
             }
             if (raiseChange)
             {
-                await ValueChanged.InvokeAsync(object.Equals(Value, null) ? default(T) : (T)Value);
+                if (ValueChanged.HasDelegate)
+                {
+                    await ValueChanged.InvokeAsync(object.Equals(internalValue, null) ? default(T) : (T)internalValue);
+                }
+
                 if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-                await Change.InvokeAsync(Value);
+
+                await Change.InvokeAsync(internalValue);
             }
             StateHasChanged();
         }
 
+        internal void UpdateSelectedItems(object item)
+        {
+            if (selectedItems.IndexOf(item) == -1)
+            {
+                selectedItems.Add(item);
+            }
+            else
+            {
+                selectedItems.Remove(item);
+            }
+        }
+
+        /// <summary>
+        /// Selects the item from value.
+        /// </summary>
+        /// <param name="value">The value.</param>
         protected virtual void SelectItemFromValue(object value)
         {
             if (value != null && View != null)
@@ -641,7 +996,7 @@ namespace Radzen
                     }
                     else
                     {
-                        selectedItem = Value;
+                        selectedItem = internalValue;
                     }
 
                     SetSelectedIndexFromSelectedItem();
@@ -650,12 +1005,12 @@ namespace Radzen
                 }
                 else
                 {
-                    var values = value as dynamic;
+                    var values = value as IEnumerable;
                     if (values != null)
                     {
                         if (!string.IsNullOrEmpty(ValueProperty))
                         {
-                            foreach (object v in values)
+                            foreach (object v in values.ToDynamicList())
                             {
                                 dynamic item;
 
@@ -668,7 +1023,7 @@ namespace Radzen
                                     item = View.AsQueryable().Where($@"{ValueProperty} == @0", v).FirstOrDefault();
                                 }
 
-                                if (item != null && selectedItems.IndexOf(item) == -1)
+                                if (!object.Equals(item, null) && (LoadData.HasDelegate ? !IsItemSelectedByValue(v) : selectedItems.IndexOf(item) == -1))
                                 {
                                     selectedItems.Add(item);
                                 }
@@ -687,5 +1042,19 @@ namespace Radzen
                 selectedItem = null;
             }
         }
+
+        internal bool IsItemSelectedByValue(object v)
+        {
+            return ((Multiple ? selectedItems : selectedItem != null ? new[] { selectedItem } : Enumerable.Empty<object>()) ?? Enumerable.Empty<object>())
+                .AsQueryable().Where($@"object.Equals({ValueProperty},@0)", v).Any();
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            keys.Clear();
+        }
     }
 }

Radzen.Blazor/Extensions.cs

@@ -0,0 +1,35 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Reflection;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Class EnumExtensions.
+    /// </summary>
+    public static class EnumExtensions
+    {
+        /// <summary>
+        /// Gets enum description.
+        /// </summary>
+        public static string GetDisplayDescription(this Enum enumValue)
+        {
+            var enumValueAsString = enumValue.ToString();
+            var val = enumValue.GetType().GetMember(enumValueAsString).FirstOrDefault();
+
+            return val?.GetCustomAttribute<DisplayAttribute>()?.GetDescription() ?? enumValueAsString;
+        }
+
+        /// <summary>
+        /// Converts Enum to IEnumerable of Value/Text.
+        /// </summary>
+        public static IEnumerable<object> EnumAsKeyValuePair(Type enumType)
+        {
+            return Enum.GetValues(enumType).Cast<Enum>().Distinct().Select(val => new { Value = Convert.ToInt32(val), Text = val.GetDisplayDescription() });
+        }
+
+    }
+}
+

Radzen.Blazor/FormComponent.cs

@@ -5,28 +5,64 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.AspNetCore.Components.Web;
+using Radzen.Blazor.Rendering;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class FormComponent.
+    /// Implements the <see cref="Radzen.RadzenComponent" />
+    /// Implements the <see cref="Radzen.IRadzenFormComponent" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="Radzen.RadzenComponent" />
+    /// <seealso cref="Radzen.IRadzenFormComponent" />
     public class FormComponent<T> : RadzenComponent, IRadzenFormComponent
     {
+        /// <summary>
+        /// Gets or sets the name.
+        /// </summary>
+        /// <value>The name.</value>
         [Parameter]
         public string Name { get; set; }
 
+        /// <summary>
+        /// Gets or sets the index of the tab.
+        /// </summary>
+        /// <value>The index of the tab.</value>
         [Parameter]
         public int TabIndex { get; set; } = 0;
 
+        /// <summary>
+        /// Gets or sets the placeholder.
+        /// </summary>
+        /// <value>The placeholder.</value>
         [Parameter]
         public string Placeholder { get; set; }
 
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="FormComponent{T}"/> is disabled.
+        /// </summary>
+        /// <value><c>true</c> if disabled; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool Disabled { get; set; }
 
+        /// <summary>
+        /// The form
+        /// </summary>
         IRadzenForm _form;
 
+        /// <summary>
+        /// Gets or sets the edit context.
+        /// </summary>
+        /// <value>The edit context.</value>
         [CascadingParameter]
         public EditContext EditContext { get; set; }
 
+        /// <summary>
+        /// Gets or sets the form.
+        /// </summary>
+        /// <value>The form.</value>
         [CascadingParameter]
         public IRadzenForm Form
         {
@@ -36,17 +72,22 @@ namespace Radzen
             }
             set
             {
-                if (_form != value && value != null)
-                {
-                    _form = value;
-                    _form.AddComponent(this);
-                }
+                _form = value;
+                _form?.AddComponent(this);
             }
         }
 
+        /// <summary>
+        /// Gets or sets the value changed.
+        /// </summary>
+        /// <value>The value changed.</value>
         [Parameter]
         public EventCallback<T> ValueChanged { get; set; }
 
+        /// <summary>
+        /// Gets a value indicating whether this instance has value.
+        /// </summary>
+        /// <value><c>true</c> if this instance has value; otherwise, <c>false</c>.</value>
         public virtual bool HasValue
         {
             get
@@ -59,6 +100,10 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets a value indicating whether this instance is bound.
+        /// </summary>
+        /// <value><c>true</c> if this instance is bound; otherwise, <c>false</c>.</value>
         public bool IsBound
         {
             get
@@ -67,8 +112,15 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// The value
+        /// </summary>
         protected T _value;
 
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         [Parameter]
         public virtual T Value
         {
@@ -86,11 +138,28 @@ namespace Radzen
         }
 
 
+        /// <summary>
+        /// Gets or sets the change.
+        /// </summary>
+        /// <value>The change.</value>
         [Parameter]
         public EventCallback<T> Change { get; set; }
+        /// <summary>
+        /// Gets the field identifier.
+        /// </summary>
+        /// <value>The field identifier.</value>
         public FieldIdentifier FieldIdentifier { get; private set; }
+        /// <summary>
+        /// Gets or sets the value expression.
+        /// </summary>
+        /// <value>The value expression.</value>
         [Parameter]
         public Expression<Func<T>> ValueExpression { get; set; }
+        /// <summary>
+        /// Sets the parameters asynchronous.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>Task.</returns>
         public override Task SetParametersAsync(ParameterView parameters)
         {
             var result = base.SetParametersAsync(parameters);
@@ -98,17 +167,26 @@ namespace Radzen
             if (EditContext != null && ValueExpression != null && FieldIdentifier.Model != EditContext.Model)
             {
                 FieldIdentifier = FieldIdentifier.Create(ValueExpression);
+                EditContext.OnValidationStateChanged -= ValidationStateChanged;
                 EditContext.OnValidationStateChanged += ValidationStateChanged;
             }
 
             return result;
         }
 
+        /// <summary>
+        /// Validations the state changed.
+        /// </summary>
+        /// <param name="sender">The sender.</param>
+        /// <param name="e">The <see cref="ValidationStateChangedEventArgs"/> instance containing the event data.</param>
         private void ValidationStateChanged(object sender, ValidationStateChangedEventArgs e)
         {
             StateHasChanged();
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public override void Dispose()
         {
             base.Dispose();
@@ -121,11 +199,20 @@ namespace Radzen
             Form?.RemoveComponent(this);
         }
 
+        /// <summary>
+        /// Gets the value.
+        /// </summary>
+        /// <returns>System.Object.</returns>
         public object GetValue()
         {
             return Value;
         }
 
+        /// <summary>
+        /// Handles the <see cref="E:ContextMenu" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        /// <returns>Task.</returns>
         public override Task OnContextMenu(MouseEventArgs args)
         {
             if (!Disabled)
@@ -135,5 +222,14 @@ namespace Radzen
 
             return Task.CompletedTask;
         }
+
+        /// <summary>
+        /// Gets the class list.
+        /// </summary>
+        /// <param name="className">Name of the class.</param>
+        /// <returns>ClassList.</returns>
+        protected ClassList GetClassList(string className) => ClassList.Create(className)
+                                                                       .AddDisabled(Disabled)
+                                                                       .Add(FieldIdentifier, EditContext);
     }
 }

Radzen.Blazor/GaugeBase.cs

@@ -6,21 +6,49 @@ using Radzen.Blazor.Rendering;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Class GaugeBase.
+    /// Implements the <see cref="Radzen.RadzenComponent" />
+    /// </summary>
+    /// <seealso cref="Radzen.RadzenComponent" />
     public abstract class GaugeBase : RadzenComponent
     {
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
         [Parameter]
         public RenderFragment ChildContent
         {
             get; set;
         }
 
+        /// <summary>
+        /// Gets or sets the width.
+        /// </summary>
+        /// <value>The width.</value>
         public double? Width { get; set; }
 
+        /// <summary>
+        /// Gets or sets the height.
+        /// </summary>
+        /// <value>The height.</value>
         public double? Height { get; set; }
 
+        /// <summary>
+        /// The width and height are set
+        /// </summary>
         bool widthAndHeightAreSet = false;
+        /// <summary>
+        /// The first render
+        /// </summary>
         bool firstRender = true;
 
+        /// <summary>
+        /// On after render as an asynchronous operation.
+        /// </summary>
+        /// <param name="firstRender">if set to <c>true</c> [first render].</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             this.firstRender = firstRender;
@@ -43,6 +71,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Called when [initialized].
+        /// </summary>
         protected override void OnInitialized()
         {
             base.OnInitialized();
@@ -50,6 +81,11 @@ namespace Radzen.Blazor
             Initialize();
         }
 
+        /// <summary>
+        /// Resizes the specified width.
+        /// </summary>
+        /// <param name="width">The width.</param>
+        /// <param name="height">The height.</param>
         [JSInvokable]
         public void Resize(double width, double height)
         {
@@ -73,6 +109,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Initializes this instance.
+        /// </summary>
         private void Initialize()
         {
             double width = 0;
@@ -107,8 +146,16 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// The visible changed
+        /// </summary>
         private bool visibleChanged = false;
 
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
         public override async Task SetParametersAsync(ParameterView parameters)
         {
             bool shouldRefresh = parameters.DidParameterChange(nameof(Style), Style);
@@ -131,6 +178,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
         public override void Dispose()
         {
             base.Dispose();
@@ -141,6 +191,9 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Reloads this instance.
+        /// </summary>
         public void Reload()
         {
             StateHasChanged();

Radzen.Blazor/GaugeTickPosition.cs

@@ -1,9 +1,21 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Enum GaugeTickPosition
+    /// </summary>
     public enum GaugeTickPosition
     {
+        /// <summary>
+        /// The inside
+        /// </summary>
         Inside,
+        /// <summary>
+        /// The outside
+        /// </summary>
         Outside,
+        /// <summary>
+        /// The none
+        /// </summary>
         None
     }
 }

Radzen.Blazor/HttpResponseMessageExtensions.cs

@@ -7,8 +7,21 @@ using System.Xml.Linq;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class HttpResponseMessageExtensions.
+    /// </summary>
     public static class HttpResponseMessageExtensions
     {
+        /// <summary>
+        /// Read as an asynchronous operation.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="response">The response.</param>
+        /// <returns>A Task&lt;T&gt; representing the asynchronous operation.</returns>
+        /// <exception cref="Exception">Unable to parse the response.</exception>
+        /// <exception cref="Exception"></exception>
+        /// <exception cref="Exception">Unable to parse the response.</exception>
+        /// <exception cref="Exception"></exception>
         public static async Task<T> ReadAsync<T>(this HttpResponseMessage response)
         {
             try

Radzen.Blazor/IChartAxis.cs

@@ -1,7 +1,13 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Common axis API of <see cref="RadzenChart" />
+    /// </summary>
     public interface IChartAxis
     {
+        /// <summary>
+        /// Gets or sets the grid lines configuration of this axis.
+        /// </summary>
         RadzenGridLines GridLines { get; set; }
     }
 }

Radzen.Blazor/IChartBarSeries.cs

@@ -1,7 +1,14 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Marker interface for <see cref="RadzenBarSeries{TItem}" />.
+    /// </summary>
     public interface IChartBarSeries
     {
+        /// <summary>
+        /// Gets the count.
+        /// </summary>
+        /// <value>The count.</value>
         int Count { get; }
     }
 }

Radzen.Blazor/IChartColumnSeries.cs

@@ -1,7 +1,14 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Marker interface for <see cref="RadzenColumnSeries{TItem}" />.
+    /// </summary>
     public interface IChartColumnSeries
     {
+        /// <summary>
+        /// Gets the count.
+        /// </summary>
+        /// <value>The count.</value>
         int Count { get; }
     }
 }

Radzen.Blazor/IChartDonutSeries.cs

@@ -2,8 +2,17 @@ using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Marker interface for <see cref="RadzenColumnSeries{TItem}" />.
+    /// </summary>
     public interface IChartDonutSeries
     {
-      RenderFragment RenderTitle(double x, double y);
+        /// <summary>
+        /// Renders the title.
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
+        /// <returns>RenderFragment.</returns>
+        RenderFragment RenderTitle(double x, double y);
     }
 }

Radzen.Blazor/IChartSeries.cs

@@ -1,24 +1,149 @@
+using System;
+using System.Collections;
+using System.Collections.Generic;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the common API that <see cref="RadzenChart" /> series must implement.
+    /// </summary>
     public interface IChartSeries
     {
+        /// <summary>
+        /// Transforms a category scale to new one.
+        /// </summary>
+        /// <param name="scale">The scale.</param>
         ScaleBase TransformCategoryScale(ScaleBase scale);
+        /// <summary>
+        /// Transforms a category scale to new one.
+        /// </summary>
+        /// <param name="scale">The scale.</param>
         ScaleBase TransformValueScale(ScaleBase scale);
+        /// <summary>
+        /// Gets or sets the series marker configuration.
+        /// </summary>
         RadzenMarkers Markers { get; set; }
+        /// <summary>
+        /// Gets the series marker type.
+        /// </summary>
+        /// <value>The type of the marker.</value>
         MarkerType MarkerType { get; }
+        /// <summary>
+        /// Gets the size of the marker.
+        /// </summary>
+        /// <value>The size of the marker.</value>
         double MarkerSize { get; }
+        /// <summary>
+        /// Renders the series with the specified category and value scales.
+        /// </summary>
+        /// <param name="categoryScale">The category scale.</param>
+        /// <param name="valueScale">The value scale.</param>
+        /// <returns>RenderFragment.</returns>
         RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale);
+        /// <summary>
+        /// Renders the series overlays with the specified category and value scales.
+        /// </summary>
+        /// <param name="categoryScale">The category scale.</param>
+        /// <param name="valueScale">The value scale.</param>
+        /// <returns>RenderFragment.</returns>
+        RenderFragment RenderOverlays(ScaleBase categoryScale, ScaleBase valueScale);
+        /// <summary>
+        /// Renders the series tooltip.
+        /// </summary>
+        /// <param name="data">The data.</param>
+        /// <param name="marginLeft">The left margin.</param>
+        /// <param name="marginTop">The right margin.</param>
+        /// <returns>RenderFragment.</returns>
         RenderFragment RenderTooltip(object data, double marginLeft, double marginTop);
+        /// <summary>
+        /// Renders the legend item.
+        /// </summary>
+        /// <returns>RenderFragment.</returns>
         RenderFragment RenderLegendItem();
+        /// <summary>
+        /// Gets the color.
+        /// </summary>
+        /// <value>The color.</value>
         string Color { get; }
-        bool Visible { get; set; }
+        /// <summary>
+        /// Gets a value indicating whether this <see cref="IChartSeries"/> is visible.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
+        bool Visible { get; }
+        /// <summary>
+        /// Gets a value indicating whether this series should appear in the legend.
+        /// </summary>
+        /// <value><c>true</c> if the series appears in the legend; otherwise, <c>false</c>.</value>
+        bool ShowInLegend { get; }
+        /// <summary>
+        /// Gets or sets the rendering order.
+        /// </summary>
+        /// <value>The rendering order.</value>
         int RenderingOrder { get; set; }
-        bool Contains(double x, double y);
+        /// <summary>
+        /// Determines if the series contains the specified coordinates with a given tolerance.
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
+        /// <param name="tolerance">The tolerance.</param>
+        /// <returns><c>true</c> if the series contains the coordinates; otherwise, <c>false</c>.</returns>
+        bool Contains(double x, double y, double tolerance);
+        /// <summary>
+        /// Returns the data at the specified coordinates;
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
         object DataAt(double x, double y);
+        /// <summary>
+        /// Returns data chart position
+        /// </summary>
+        IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY);
+        /// <summary>
+        /// Returns series median
+        /// </summary>
+        double GetMedian();
+        /// <summary>
+        /// Returns series mean
+        /// </summary>
+        double GetMean();
+        /// <summary>
+        /// Returns series mode
+        /// </summary>
+        double GetMode();
+        /// <summary>
+        /// Returns series trend
+        /// </summary>
+        (double a, double b) GetTrend();
+        /// <summary>
+        /// Series coordinate system
+        /// </summary>
+        CoordinateSystem CoordinateSystem { get; }
+        /// <summary>
+        /// Series overlays
+        /// </summary>
+        IList<IChartSeriesOverlay> Overlays{ get; }
+        /// <summary>
+        /// Gets or sets the title of the series. The title is displayed in tooltips and the legend.
+        /// </summary>
+        /// <value>The title.</value>
         string Title { get; set; }
+        /// <summary>
+        /// Gets the title.
+        /// </summary>
         string GetTitle();
+        /// <summary>
+        /// Measures the legend.
+        /// </summary>
+        /// <returns>System.Double.</returns>
         double MeasureLegend();
+        /// <summary>
+        /// Invokes the click handler with the provided data item.
+        /// </summary>
+        /// <param name="handler">The handler.</param>
+        /// <param name="data">The data.</param>
+        Task InvokeClick(EventCallback<SeriesClickEventArgs> handler, object data);
     }
 }

Radzen.Blazor/IChartSeriesOverlay.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Interface for chart overlays
+    /// </summary>
+    public interface IChartSeriesOverlay
+    {
+        /// <summary>
+        /// Render overlay
+        /// </summary>
+        /// <param name="categoryScale"></param>
+        /// <param name="valueScale"></param>
+        /// <returns>RenderFragment</returns>
+        RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale);
+
+        /// <summary>
+        /// Gets overlay visibility state
+        /// </summary>
+        bool Visible { get; }
+
+        /// <summary>
+        /// Hit test
+        /// </summary>
+        bool Contains(double mouseX, double mouseY, int tolerance);
+
+        /// <summary>
+        /// Renders tooltip
+        /// </summary>
+        RenderFragment RenderTooltip(double mouseX, double mouseY, double marginLeft, double marginTop);
+    }
+}

Radzen.Blazor/IScheduler.cs

@@ -1,23 +1,95 @@
 using System;
 using System.Collections.Generic;
+using System.Globalization;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// The common <see cref="RadzenScheduler{TItem}" /> API injected as a cascading parameter to is views.
+    /// </summary>
     public interface IScheduler
     {
+        /// <summary>
+        /// Gets the appointments in the specified range.
+        /// </summary>
+        /// <param name="start">The start of the range.</param>
+        /// <param name="end">The end of the range.</param>
+        /// <returns>A collection of appointments within the specified range.</returns>
         IEnumerable<AppointmentData> GetAppointmentsInRange(DateTime start, DateTime end);
+        /// <summary>
+        /// Determines whether an appointment is within the specified range.
+        /// </summary>
+        /// <param name="item">The appointment to check.</param>
+        /// <param name="start">The start of the range.</param>
+        /// <param name="end">The end of the range.</param>
+        /// <returns><c>true</c> if the appointment is within the specified range; otherwise, <c>false</c>.</returns>
         bool IsAppointmentInRange(AppointmentData item, DateTime start, DateTime end);
+        /// <summary>
+        /// Adds a view. Must be called when a <see cref="ISchedulerView" /> is initialized.
+        /// </summary>
+        /// <param name="view">The view to add.</param>
         Task AddView(ISchedulerView view);
+        /// <summary>
+        /// Removes a view. Must be called when a <see cref="ISchedulerView" /> is disposed.
+        /// </summary>
+        /// <param name="view">The view to remove.</param>
         void RemoveView(ISchedulerView view);
+        /// <summary>
+        /// Determines whether the specified view is selected.
+        /// </summary>
+        /// <param name="view">The view.</param>
+        /// <returns><c>true</c> if the specified view is selected; otherwise, <c>false</c>.</returns>
         bool IsSelected(ISchedulerView view);
+        /// <summary>
+        /// Gets or sets the current date.
+        /// </summary>
+        /// <value>The current date.</value>
         DateTime CurrentDate { get; set; }
+        /// <summary>
+        /// Selects the specified appointment.
+        /// </summary>
+        /// <param name="data">The appointment to select.</param>
         Task SelectAppointment(AppointmentData data);
+        /// <summary>
+        /// Selects the specified slot.
+        /// </summary>
+        /// <param name="start">The start.</param>
+        /// <param name="end">The end.</param>
         Task SelectSlot(DateTime start, DateTime end);
+        /// <summary>
+        /// Gets the appointment HTML attributes.
+        /// </summary>
+        /// <param name="item">The appointment.</param>
+        /// <returns>A dictionary containing the HTML attributes for the specified appointment.</returns>
         IDictionary<string, object> GetAppointmentAttributes(AppointmentData item);
+        /// <summary>
+        /// Gets the slot HTML attributes.
+        /// </summary>
+        /// <param name="start">The start of the slot.</param>
+        /// <param name="end">The end of the slot.</param>
+        /// <returns>A dictionary containing the HTML attributes for the specified slot.</returns>
+        IDictionary<string, object> GetSlotAttributes(DateTime start, DateTime end);
+        /// <summary>
+        /// Renders the appointment.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <returns>RenderFragment.</returns>
         RenderFragment RenderAppointment(AppointmentData item);
+        /// <summary>
+        /// Reloads this instance.
+        /// </summary>
         Task Reload();
+        /// <summary>
+        /// Gets the height.
+        /// </summary>
+        /// <value>The height.</value>
         double Height { get; }
+        /// <summary>
+        /// Gets or sets the culture.
+        /// </summary>
+        /// <value>The culture.</value>
+        CultureInfo Culture { get; set; }
     }
 }

Radzen.Blazor/ISchedulerView.cs

@@ -3,18 +3,51 @@ using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Interface that has to be implemented by a view in order to by supported by <see cref="RadzenScheduler{TItem}" />.
+    /// </summary>
     public interface ISchedulerView
     {
+        /// <summary>
+        /// Gets the icon of the view. It is displayed in the view switching UI.
+        /// </summary>
+        string Icon { get; }
+        /// <summary>
+        /// Gets the title of the view. It is displayed in the RadzenScheduler title area.
+        /// </summary>
+        /// <value>The title.</value>
         string Title { get; }
+        /// <summary>
+        /// Gets the text of the view. It is displayed in the view switching UI.
+        /// </summary>
+        /// <value>The text.</value>
         string Text { get; }
 
+        /// <summary>
+        /// Returns a new date when the user clicks the next button of RadzenScheduler.
+        /// </summary>
+        /// <returns>The next date. For example a day view will return the next day, a week view will return the next week.</returns>
         DateTime Next();
 
+        /// <summary>
+        /// Returns a new date when the user clicks the previous button of RadzenScheduler.
+        /// </summary>
+        /// <returns>The previous date. For example a day view will return the previous day, a week view will return the previous week.</returns>
         DateTime Prev();
 
+        /// <summary>
+        /// Renders this instance.
+        /// </summary>
+        /// <returns>RenderFragment.</returns>
         RenderFragment Render();
 
+        /// <summary>
+        /// Gets the start date.
+        /// </summary>
         DateTime StartDate { get; }
+        /// <summary>
+        /// Gets the end date.
+        /// </summary>
         DateTime EndDate { get; }
     }
 }

Radzen.Blazor/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2021 Radzen Ltd
+Copyright (c) 2018-2022 Radzen Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Radzen.Blazor/LegendPosition.cs

@@ -1,10 +1,25 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the legend position in a <see cref="RadzenChart" />.
+    /// </summary>
     public enum LegendPosition
     {
+        /// <summary>
+        /// The legend is at the right side of the series.
+        /// </summary>
         Right,
+        /// <summary>
+        /// The legend is at the left side of the series.
+        /// </summary>
         Left,
+        /// <summary>
+        /// The legend is above the series.
+        /// </summary>
         Top,
+        /// <summary>
+        /// The legend is below the series.
+        /// </summary>
         Bottom
     }
 }

Radzen.Blazor/LineStyle.cs

@@ -1,9 +1,21 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specified the line drawing style.
+    /// </summary>
     public enum LineType
     {
+        /// <summary>
+        /// Solid lines.
+        /// </summary>
         Solid,
+        /// <summary>
+        /// Dashed lines.
+        /// </summary>
         Dashed,
+        /// <summary>
+        /// Dotted lines.
+        /// </summary>
         Dotted
     }
 }

Radzen.Blazor/LinearScale.cs

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

Radzen.Blazor/MarkerType.cs

@@ -1,12 +1,33 @@
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Specifies the type of marker that <see cref="RadzenChart" /> displays for data points.
+    /// </summary>
     public enum MarkerType
     {
+        /// <summary>
+        /// Do not display a marker for data points.
+        /// </summary>
         None,
+        /// <summary>
+        /// Cycle between markers.
+        /// </summary>
         Auto,
+        /// <summary>
+        /// Use a circle marker.
+        /// </summary>
         Circle,
+        /// <summary>
+        /// Use a triangle marker.
+        /// </summary>
         Triangle,
+        /// <summary>
+        /// Use a square marker.
+        /// </summary>
         Square,
+        /// <summary>
+        /// Use a diamond marker.
+        /// </summary>
         Diamond
     }
 }

Radzen.Blazor/NotificationService.cs

@@ -5,10 +5,28 @@ using System.Text;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class NotificationService. Contains various methods with options to open notifications. 
+    /// Should be added as scoped service in the application services and RadzenNotification should be added in application main layout.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// @inject NotificationService NotificationService
+    /// &lt;RadzenButton Text="Show info notification" Click=@(args => NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "Info Summary", Detail = "Info Detail", Duration = 4000 })) / &gt;
+    /// </code>
+    /// </example>
     public class NotificationService
     {
+        /// <summary>
+        /// Gets the messages.
+        /// </summary>
+        /// <value>The messages.</value>
         public ObservableCollection<NotificationMessage> Messages { get; private set; } = new ObservableCollection<NotificationMessage>();
 
+        /// <summary>
+        /// Notifies the specified message.
+        /// </summary>
+        /// <param name="message">The message.</param>
         public void Notify(NotificationMessage message)
         {
             var newMessage = new NotificationMessage()
@@ -26,6 +44,13 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Notifies the specified severity.
+        /// </summary>
+        /// <param name="severity">The severity.</param>
+        /// <param name="summary">The summary.</param>
+        /// <param name="detail">The detail.</param>
+        /// <param name="duration">The duration.</param>
         public void Notify(NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000)
         {
             var newMessage = new NotificationMessage()
@@ -43,12 +68,35 @@ namespace Radzen
         }
     }
 
+    /// <summary>
+    /// Class NotificationMessage.
+    /// </summary>
     public class NotificationMessage
     {
+        /// <summary>
+        /// Gets or sets the duration.
+        /// </summary>
+        /// <value>The duration.</value>
         public double? Duration { get; set; }
+        /// <summary>
+        /// Gets or sets the severity.
+        /// </summary>
+        /// <value>The severity.</value>
         public NotificationSeverity Severity { get; set; }
+        /// <summary>
+        /// Gets or sets the summary.
+        /// </summary>
+        /// <value>The summary.</value>
         public string Summary { get; set; }
+        /// <summary>
+        /// Gets or sets the detail.
+        /// </summary>
+        /// <value>The detail.</value>
         public string Detail { get; set; }
+        /// <summary>
+        /// Gets or sets the style.
+        /// </summary>
+        /// <value>The style.</value>
         public string Style { get; set; }
     }
 }

Radzen.Blazor/OData.cs

@@ -8,35 +8,76 @@ using System.Web;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class ODataEnumerable.
+    /// Implements the <see cref="IEnumerable{T}" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="IEnumerable{T}" />
     public class ODataEnumerable<T> : IEnumerable<T>
     {
+        /// <summary>
+        /// The source
+        /// </summary>
         IEnumerable<T> source;
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ODataEnumerable{T}"/> class.
+        /// </summary>
+        /// <param name="source">The source.</param>
         public ODataEnumerable(IEnumerable<T> source)
         {
             this.source = source;
         }
 
+        /// <summary>
+        /// Gets the enumerator.
+        /// </summary>
+        /// <returns>IEnumerator&lt;T&gt;.</returns>
         public IEnumerator<T> GetEnumerator()
         {
             return source.GetEnumerator();
         }
 
+        /// <summary>
+        /// Gets the enumerator.
+        /// </summary>
+        /// <returns>IEnumerator.</returns>
         IEnumerator IEnumerable.GetEnumerator()
         {
             return source.GetEnumerator();
         }
     }
 
+    /// <summary>
+    /// Class ODataServiceResult.
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
     public class ODataServiceResult<T>
     {
+        /// <summary>
+        /// Gets or sets the count.
+        /// </summary>
+        /// <value>The count.</value>
         [JsonPropertyName("@odata.count")]
         public int Count { get; set; }
 
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
         public IEnumerable<T> Value { get; set; }
     }
 
+    /// <summary>
+    /// Class ODataJsonSerializer.
+    /// </summary>
     public static class ODataJsonSerializer
     {
+        /// <summary>
+        /// Determines whether the specified type is complex.
+        /// </summary>
+        /// <param name="type">The type.</param>
+        /// <returns><c>true</c> if the specified type is complex; otherwise, <c>false</c>.</returns>
         static bool IsComplex(Type type)
         {
             var underlyingType = type.IsGenericType && type.GetGenericTypeDefinition() == typeof(Nullable<>) ? Nullable.GetUnderlyingType(type) : type;
@@ -47,11 +88,23 @@ namespace Radzen
                 type != typeof(string) && type != typeof(decimal) && type.IsClass;
         }
 
+        /// <summary>
+        /// Determines whether the specified type is enumerable.
+        /// </summary>
+        /// <param name="type">The type.</param>
+        /// <returns><c>true</c> if the specified type is enumerable; otherwise, <c>false</c>.</returns>
         static bool IsEnumerable(Type type)
         {
             return !typeof(string).IsAssignableFrom(type) && (typeof(IEnumerable<>).IsAssignableFrom(type) || typeof(IEnumerable).IsAssignableFrom(type));
         }
 
+        /// <summary>
+        /// Serializes the specified value.
+        /// </summary>
+        /// <typeparam name="TValue">The type of the t value.</typeparam>
+        /// <param name="value">The value.</param>
+        /// <param name="options">The options.</param>
+        /// <returns>System.String.</returns>
         public static string Serialize<TValue>(TValue value, JsonSerializerOptions options = null)
         {
             if (options == null)
@@ -70,19 +123,45 @@ namespace Radzen
         }
     }
 
+    /// <summary>
+    /// Class ComplexPropertiesConverter.
+    /// Implements the <see cref="JsonConverter{T}" />
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    /// <seealso cref="JsonConverter{T}" />
     public class ComplexPropertiesConverter<T> : JsonConverter<T>
     {
+        /// <summary>
+        /// The complex properties
+        /// </summary>
         IEnumerable<string> complexProperties;
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ComplexPropertiesConverter{T}"/> class.
+        /// </summary>
+        /// <param name="complexProperties">The complex properties.</param>
         public ComplexPropertiesConverter(IEnumerable<string> complexProperties)
         {
             this.complexProperties = complexProperties;
         }
 
+        /// <summary>
+        /// Reads the specified reader.
+        /// </summary>
+        /// <param name="reader">The reader.</param>
+        /// <param name="typeToConvert">The type to convert.</param>
+        /// <param name="options">The options.</param>
+        /// <returns>T.</returns>
         public override T Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
         {
             return JsonSerializer.Deserialize<T>(ref reader, options);
         }
 
+        /// <summary>
+        /// Writes the specified writer.
+        /// </summary>
+        /// <param name="writer">The writer.</param>
+        /// <param name="value">The value.</param>
+        /// <param name="options">The options.</param>
         public override void Write(Utf8JsonWriter writer, T value, JsonSerializerOptions options)
         {
             writer.WriteStartObject();
@@ -105,21 +184,54 @@ namespace Radzen
         }
     }
 
+    /// <summary>
+    /// Class DateTimeConverterUsingDateTimeParse.
+    /// Implements the <see cref="JsonConverter{DateTime}" />
+    /// </summary>
+    /// <seealso cref="JsonConverter{DateTime}" />
     public class DateTimeConverterUsingDateTimeParse : JsonConverter<DateTime>
     {
+        /// <summary>
+        /// Reads the specified reader.
+        /// </summary>
+        /// <param name="reader">The reader.</param>
+        /// <param name="typeToConvert">The type to convert.</param>
+        /// <param name="options">The options.</param>
+        /// <returns>DateTime.</returns>
         public override DateTime Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
         {
             return DateTime.Parse(reader.GetString());
         }
 
+        /// <summary>
+        /// Writes the specified writer.
+        /// </summary>
+        /// <param name="writer">The writer.</param>
+        /// <param name="value">The value.</param>
+        /// <param name="options">The options.</param>
         public override void Write(Utf8JsonWriter writer, DateTime value, JsonSerializerOptions options)
         {
             writer.WriteStringValue(value.ToString("yyyy-MM-ddTHH:mm:ss.fffZ"));
         }
     }
 
+    /// <summary>
+    /// Class ODataExtensions.
+    /// </summary>
     public static class ODataExtensions
-    {        
+    {
+        /// <summary>
+        /// Gets the o data URI.
+        /// </summary>
+        /// <param name="uri">The URI.</param>
+        /// <param name="filter">The filter.</param>
+        /// <param name="top">The top.</param>
+        /// <param name="skip">The skip.</param>
+        /// <param name="orderby">The orderby.</param>
+        /// <param name="expand">The expand.</param>
+        /// <param name="select">The select.</param>
+        /// <param name="count">if set to <c>true</c> [count].</param>
+        /// <returns>Uri.</returns>
         public static Uri GetODataUri(this Uri uri, string filter = null, int? top = null, int? skip = null, string orderby = null, string expand = null, string select = null, bool? count = null)
         {
             var uriBuilder = new UriBuilder(uri);

Radzen.Blazor/PagedDataBoundComponent.cs

@@ -8,29 +8,93 @@ using Radzen.Blazor;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Base classes of components that support paging.
+    /// </summary>
+    /// <typeparam name="T">The type of the data item</typeparam>
     public class PagedDataBoundComponent<T> : RadzenComponent
     {
+        /// <summary>
+        /// Gets or sets the pager position. Set to <c>PagerPosition.Bottom</c> by default.
+        /// </summary>
+        /// <value>The pager position.</value>
         [Parameter]
         public PagerPosition PagerPosition { get; set; } = PagerPosition.Bottom;
 
+        /// <summary>
+        /// Gets or sets a value indicating whether pager is visible even when not enough data for paging.
+        /// </summary>
+        /// <value><c>true</c> if pager is visible even when not enough data for paging otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool PagerAlwaysVisible { get; set; }
+
+        /// <summary>
+        /// Gets or sets the horizontal align.
+        /// </summary>
+        /// <value>The horizontal align.</value>
+        [Parameter]
+        public HorizontalAlign PagerHorizontalAlign { get; set; } = HorizontalAlign.Justify;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether paging is allowed. Set to <c>false</c> by default.
+        /// </summary>
+        /// <value><c>true</c> if paging is allowed; otherwise, <c>false</c>.</value>
         [Parameter]
         public bool AllowPaging { get; set; }
 
+        int _PageSize = 10;
+        /// <summary>
+        /// Gets or sets the size of the page.
+        /// </summary>
+        /// <value>The size of the page.</value>
         [Parameter]
-        public int PageSize { get; set; } = 10;
+        public int PageSize 
+        {
+            get
+            {
+                return pageSize ?? _PageSize;
+            }
+            set
+            {
+                _PageSize = value;
+            }
+        }
 
+        /// <summary>
+        /// Gets or sets the page numbers count.
+        /// </summary>
+        /// <value>The page numbers count.</value>
         [Parameter]
         public int PageNumbersCount { get; set; } = 5;
 
+        /// <summary>
+        /// Gets or sets the count.
+        /// </summary>
+        /// <value>The count.</value>
         [Parameter]
         public int Count { get; set; }
+        /// <summary>
+        /// Gets or sets the current page.
+        /// </summary>
+        /// <value>The current page.</value>
         public int CurrentPage { get; set; }
 
+        /// <summary>
+        /// Gets or sets the template.
+        /// </summary>
+        /// <value>The template.</value>
         [Parameter]
         public RenderFragment<T> Template { get; set; }
 
+        /// <summary>
+        /// The data
+        /// </summary>
         IEnumerable<T> _data;
 
+        /// <summary>
+        /// Gets or sets the data.
+        /// </summary>
+        /// <value>The data.</value>
         [Parameter]
         public IEnumerable<T> Data
         {
@@ -49,22 +113,58 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the page size options.
+        /// </summary>
+        /// <value>The page size options.</value>
         [Parameter]
         public IEnumerable<int> PageSizeOptions { get; set; }
 
+        /// <summary>
+        /// Gets or sets the page size description text.
+        /// </summary>
+        /// <value>The page size description text.</value>
+        [Parameter]
+        public string PageSizeText { get; set; } = "items per page";
+        
+        /// <summary>
+        /// Gets or sets the pager summary visibility.
+        /// </summary>
+        /// <value>The pager summary visibility.</value>
+        [Parameter]
+        public bool ShowPagingSummary { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets the pager summary format.
+        /// </summary>
+        /// <value>The pager summary format.</value>
+        [Parameter]
+        public string PagingSummaryFormat { get; set; } = "Page {0} of {1} ({2} items)";
+
+        /// <summary>
+        /// The view
+        /// </summary>
         protected IQueryable<T> _view = null;
+        /// <summary>
+        /// Gets the paged view.
+        /// </summary>
+        /// <value>The paged view.</value>
         public virtual IQueryable<T> PagedView
         {
             get
             {
                 if (_view == null)
                 {
-                    _view = (AllowPaging ? View.Skip(skip).Take(PageSize) : View).ToList().AsQueryable();
+                    _view = (AllowPaging && !LoadData.HasDelegate ? View.Skip(skip).Take(PageSize) : View).ToList().AsQueryable();
                 }
                 return _view;
             }
         }
 
+        /// <summary>
+        /// Gets the view.
+        /// </summary>
+        /// <value>The view.</value>
         public virtual IQueryable<T> View
         {
             get
@@ -73,9 +173,16 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Gets or sets the load data.
+        /// </summary>
+        /// <value>The load data.</value>
         [Parameter]
         public EventCallback<Radzen.LoadDataArgs> LoadData { get; set; }
 
+        /// <summary>
+        /// Reloads this instance.
+        /// </summary>
         public async virtual Task Reload()
         {
             _view = null;
@@ -95,14 +202,23 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Called when [data changed].
+        /// </summary>
         protected virtual void OnDataChanged()
         {
 
         }
 
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
         public override async Task SetParametersAsync(ParameterView parameters)
         {
-            bool pageSizeChanged = parameters.DidParameterChange(nameof(PageSize), PageSize);
+            bool pageSizeChanged = parameters.DidParameterChange(nameof(PageSize), PageSize) &&
+                PageSize != pageSize;
 
             await base.SetParametersAsync(parameters);
 
@@ -112,6 +228,10 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Called when [parameters set asynchronous].
+        /// </summary>
+        /// <returns>Task.</returns>
         protected override Task OnParametersSetAsync()
         {
             if (Visible && !LoadData.HasDelegate)
@@ -126,50 +246,105 @@ namespace Radzen
             return base.OnParametersSetAsync();
         }
 
+        /// <summary>
+        /// The first render
+        /// </summary>
         bool firstRender = true;
-        protected override Task OnAfterRenderAsync(bool firstRender)
+        /// <summary>
+        /// Called when [after render asynchronous].
+        /// </summary>
+        /// <param name="firstRender">if set to <c>true</c> [first render].</param>
+        /// <returns>Task.</returns>
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             this.firstRender = firstRender;
-            if (firstRender && Visible && (LoadData.HasDelegate && Data == null))
+
+            if (firstRender)
             {
-                InvokeAsync(Reload);
-                StateHasChanged();
+                await ReloadOnFirstRender();
             }
 
-            return base.OnAfterRenderAsync(firstRender);
+            await base.OnAfterRenderAsync(firstRender);
         }
 
+        internal virtual async Task ReloadOnFirstRender()
+        {
+            if (firstRender && Visible && (LoadData.HasDelegate && Data == null))
+            {
+                await InvokeAsync(Reload);
+                StateHasChanged();
+            }
+        }
+
+        /// <summary>
+        /// The skip
+        /// </summary>
         protected int skip;
 
+        /// <summary>
+        /// The top pager
+        /// </summary>
         protected RadzenPager topPager;
+        /// <summary>
+        /// The bottom pager
+        /// </summary>
         protected RadzenPager bottomPager;
 
+        /// <summary>
+        /// Gets or sets the page callback.
+        /// </summary>
+        /// <value>The page callback.</value>
+        [Parameter]
+        public EventCallback<PagerEventArgs> Page { get; set; }
+
+        /// <summary>
+        /// Handles the <see cref="E:PageChanged" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="PagerEventArgs"/> instance containing the event data.</param>
         protected async Task OnPageChanged(PagerEventArgs args)
         {
             skip = args.Skip;
             CurrentPage = args.PageIndex;
+
+            await Page.InvokeAsync(args);
+
             await InvokeAsync(Reload);
         }
 
+        int? pageSize;
+
+        /// <summary>
+        /// Called when [page size changed].
+        /// </summary>
+        /// <param name="value">The value.</param>
         protected async Task OnPageSizeChanged(int value)
         {
-            PageSize = value;
+            pageSize = value;
             await InvokeAsync(Reload);
         }
 
+        /// <summary>
+        /// Calculates the pager.
+        /// </summary>
         protected void CalculatePager()
         {
             if (topPager != null)
             {
+                topPager.SetCount(Count);
                 topPager.SetCurrentPage(CurrentPage);
             }
 
             if (bottomPager != null)
             {
+                bottomPager.SetCount(Count);
                 bottomPager.SetCurrentPage(CurrentPage);
             }
         }
 
+        /// <summary>
+        /// Goes to page.
+        /// </summary>
+        /// <param name="page">The page.</param>
         public async Task GoToPage(int page)
         {
             if (topPager != null)
@@ -183,19 +358,33 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Firsts the page.
+        /// </summary>
+        /// <param name="forceReload">if set to <c>true</c> [force reload].</param>
         public async Task FirstPage(bool forceReload = false)
         {
+            var shouldReload = forceReload && CurrentPage == 0;
+
             if (topPager != null)
             {
-                await topPager.FirstPage(forceReload);
+                await topPager.FirstPage();
             }
 
             if (bottomPager != null)
             {
-                await bottomPager.FirstPage(forceReload);
+                await bottomPager.FirstPage();
+            }
+
+            if (shouldReload)
+            {
+                await InvokeAsync(Reload);
             }
         }
 
+        /// <summary>
+        /// Previouses the page.
+        /// </summary>
         public async Task PrevPage()
         {
             if (topPager != null)
@@ -209,6 +398,9 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Nexts the page.
+        /// </summary>
         public async Task NextPage()
         {
             if (topPager != null)
@@ -222,6 +414,9 @@ namespace Radzen
             }
         }
 
+        /// <summary>
+        /// Lasts the page.
+        /// </summary>
         public async Task LastPage()
         {
             if (topPager != null)

Radzen.Blazor/QueryableExtension.cs

@@ -7,8 +7,14 @@ using System.Linq.Dynamic.Core;
 
 namespace Radzen
 {
+    /// <summary>
+    /// Class QueryableExtension.
+    /// </summary>
     public static class QueryableExtension
     {
+        /// <summary>
+        /// The filter operators
+        /// </summary>
         internal static readonly IDictionary<string, string> FilterOperators = new Dictionary<string, string>
         {
             {"eq", "="},
@@ -19,9 +25,13 @@ namespace Radzen
             {"ge", ">="},
             {"startswith", "StartsWith"},
             {"endswith", "EndsWith"},
-            {"contains", "Contains"}
+            {"contains", "Contains"},
+            {"DoesNotContain", "Contains"}
         };
 
+        /// <summary>
+        /// The linq filter operators
+        /// </summary>
         internal static readonly IDictionary<FilterOperator, string> LinqFilterOperators = new Dictionary<FilterOperator, string>
         {
             {FilterOperator.Equals, "="},
@@ -32,9 +42,17 @@ namespace Radzen
             {FilterOperator.GreaterThanOrEquals, ">="},
             {FilterOperator.StartsWith, "StartsWith"},
             {FilterOperator.EndsWith, "EndsWith"},
-            {FilterOperator.Contains, "Contains"}
+            {FilterOperator.Contains, "Contains"},
+            {FilterOperator.DoesNotContain, "DoesNotContain"},
+            {FilterOperator.IsNull, "=="},
+            {FilterOperator.IsEmpty, "=="},
+            {FilterOperator.IsNotNull, "!="},
+            {FilterOperator.IsNotEmpty, "!="}
         };
 
+        /// <summary>
+        /// The o data filter operators
+        /// </summary>
         internal static readonly IDictionary<FilterOperator, string> ODataFilterOperators = new Dictionary<FilterOperator, string>
         {
             {FilterOperator.Equals, "eq"},
@@ -45,9 +63,19 @@ namespace Radzen
             {FilterOperator.GreaterThanOrEquals, "ge"},
             {FilterOperator.StartsWith, "startswith"},
             {FilterOperator.EndsWith, "endswith"},
-            {FilterOperator.Contains, "contains"}
+            {FilterOperator.Contains, "contains"},
+            {FilterOperator.DoesNotContain, "DoesNotContain"},
+            {FilterOperator.IsNull, "eq"},
+            {FilterOperator.IsEmpty, "eq"},
+            {FilterOperator.IsNotNull, "ne"},
+            {FilterOperator.IsNotEmpty, "ne"}
         };
 
+        /// <summary>
+        /// Converts to list.
+        /// </summary>
+        /// <param name="query">The query.</param>
+        /// <returns>IList.</returns>
         public static IList ToList(IQueryable query)
         {
             var genericToList = typeof(Enumerable).GetMethod("ToList")
@@ -55,6 +83,12 @@ namespace Radzen
             return (IList)genericToList.Invoke(null, new[] { query });
         }
 
+        /// <summary>
+        /// Converts to filterstring.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="columns">The columns.</param>
+        /// <returns>System.String.</returns>
         public static string ToFilterString<T>(this IEnumerable<RadzenGridColumn<T>> columns)
         {
             Func<RadzenGridColumn<T>, bool> canFilter = (c) => c.Filterable && !string.IsNullOrEmpty(c.Type) &&
@@ -101,10 +135,19 @@ namespace Radzen
             return "";
         }
 
+        /// <summary>
+        /// Converts to filterstring.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="columns">The columns.</param>
+        /// <returns>System.String.</returns>
         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;
+               (!(c.GetFilterValue() == null || c.GetFilterValue() as string == string.Empty) || c.GetFilterOperator() == FilterOperator.IsNotNull 
+                   || c.GetFilterOperator() == FilterOperator.IsNull || c.GetFilterOperator() == FilterOperator.IsEmpty 
+                   || c.GetFilterOperator() == FilterOperator.IsNotEmpty)
+               && c.GetFilterProperty() != null;
 
             if (columns.Where(canFilter).Any())
             {
@@ -117,10 +160,11 @@ namespace Radzen
                     string value = "";
                     string secondValue = "";
 
+                    var v = column.GetFilterValue();
+                    var sv = column.GetSecondFilterValue();
+
                     if (PropertyAccess.IsDate(column.FilterPropertyType))
                     {
-                        var v = column.GetFilterValue();
-                        var sv = column.GetSecondFilterValue();
                         if (v != null)
                         {
                             value = v is DateTime ? ((DateTime)v).ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : v is DateTimeOffset ? ((DateTimeOffset)v).UtcDateTime.ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : "";
@@ -130,13 +174,74 @@ namespace Radzen
                             secondValue = sv is DateTime ? ((DateTime)sv).ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : sv is DateTimeOffset ? ((DateTimeOffset)sv).UtcDateTime.ToString("yyyy-MM-ddTHH:mm:ss.fffZ") : "";
                         }
                     }
+                    else if (PropertyAccess.IsEnum(column.FilterPropertyType) || PropertyAccess.IsNullableEnum(column.FilterPropertyType))
+                    {
+                        if (v != null)
+                        {
+                            value = ((int)v).ToString();
+                        }
+                        if (sv != null)
+                        {
+                            secondValue = ((int)sv).ToString();
+                        }
+                    }
+                    else if (IsEnumerable(column.FilterPropertyType) && column.FilterPropertyType != typeof(string))
+                    {
+                        var enumerableValue = ((IEnumerable)(v != null ? v : Enumerable.Empty<object>())).AsQueryable();
+                        var enumerableSecondValue = ((IEnumerable)(sv != null ? sv : Enumerable.Empty<object>())).AsQueryable();
+
+                        var enumerableValueAsString = "new []{" + String.Join(",", 
+                                (enumerableValue.ElementType == typeof(string) ? enumerableValue.Cast<string>().Select(i => $@"""{i}""").Cast<object>() : enumerableValue.Cast<object>())) + "}";
+
+                        var enumerableSecondValueAsString = "new []{" + String.Join(",",
+                                (enumerableSecondValue.ElementType == typeof(string) ? enumerableSecondValue.Cast<string>().Select(i => $@"""{i}""").Cast<object>() : enumerableSecondValue.Cast<object>())) + "}";
+
+                        if (enumerableValue != null)
+                        {
+                            var columnFilterOperator = column.GetFilterOperator();
+                            var columnSecondFilterOperator = column.GetSecondFilterOperator();
+                            var linqOperator = LinqFilterOperators[column.GetFilterOperator()];
+                            if (linqOperator == null)
+                            {
+                                linqOperator = "==";
+                            }
+
+                            var booleanOperator = column.LogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
+
+                            var property = PropertyAccess.GetProperty(column.GetFilterProperty());
+
+                            if (property.IndexOf(".") != -1)
+                            {
+                                property = $"({property})";
+                            }
+
+                            if (sv == null)
+                            {
+                                if (columnFilterOperator == FilterOperator.Contains || columnFilterOperator == FilterOperator.DoesNotContain)
+                                {
+                                    whereList.Add($@"{(columnFilterOperator == FilterOperator.DoesNotContain ? "!" : "")}({enumerableValueAsString}).Contains({property})");
+                                }
+                            }
+                            else
+                            {
+                                if ((columnFilterOperator == FilterOperator.Contains || columnFilterOperator == FilterOperator.DoesNotContain) &&
+                                        (columnSecondFilterOperator == FilterOperator.Contains || columnSecondFilterOperator == FilterOperator.DoesNotContain))
+                                {
+                                    whereList.Add($@"{(columnFilterOperator == FilterOperator.DoesNotContain ? "!" : "")}({enumerableValueAsString}).Contains({property}) {booleanOperator} {(columnSecondFilterOperator == FilterOperator.DoesNotContain ? "!" : "")}({enumerableSecondValueAsString}).Contains({property})");
+                                }
+                            }
+                        }
+                    }
                     else
                     {
                         value = (string)Convert.ChangeType(column.GetFilterValue(), typeof(string));
                         secondValue = (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
                     }
 
-                    if (!string.IsNullOrEmpty(value))
+                    if (!string.IsNullOrEmpty(value) || column.GetFilterOperator() == FilterOperator.IsNotNull 
+                                                    || column.GetFilterOperator() == FilterOperator.IsNull
+                                                    || column.GetFilterOperator() == FilterOperator.IsEmpty
+                                                    || column.GetFilterOperator() == FilterOperator.IsNotEmpty)
                     {
                         var linqOperator = LinqFilterOperators[column.GetFilterOperator()];
                         if (linqOperator == null)
@@ -163,6 +268,13 @@ namespace Radzen
             return "";
         }
 
+        /// <summary>
+        /// Gets the column filter.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="column">The column.</param>
+        /// <param name="second">if set to <c>true</c> [second].</param>
+        /// <returns>System.String.</returns>
         private static string GetColumnFilter<T>(RadzenGridColumn<T> column, bool second = false)
         {
             var property = PropertyAccess.GetProperty(column.GetFilterProperty());
@@ -215,6 +327,10 @@ namespace Radzen
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "DoesNotContain")
+                {
+                    return $@"({property} == null ? """" : !{property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "startswith")
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.StartsWith(""{value}""{filterCaseSensitivityOperator})";
@@ -244,6 +360,14 @@ namespace Radzen
             return "";
         }
 
+        /// <summary>
+        /// Gets the column filter.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="column">The column.</param>
+        /// <param name="value">The value.</param>
+        /// <param name="second">if set to <c>true</c> [second].</param>
+        /// <returns>System.String.</returns>
         private static string GetColumnFilter<T>(RadzenDataGridColumn<T> column, string value, bool second = false)
         {
             var property = PropertyAccess.GetProperty(column.GetFilterProperty());
@@ -269,6 +393,10 @@ namespace Radzen
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.DoesNotContain)
+                {
+                    return $@"!({property} == null ? """" : {property}){filterCaseSensitivityOperator}.Contains(""{value}""{filterCaseSensitivityOperator})";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.StartsWith)
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator}.StartsWith(""{value}""{filterCaseSensitivityOperator})";
@@ -285,22 +413,60 @@ namespace Radzen
                 {
                     return $@"({property} == null ? """" : {property}){filterCaseSensitivityOperator} != ""{value}""{filterCaseSensitivityOperator}";
                 }
+                else if (columnFilterOperator == FilterOperator.IsNull)
+                {
+                    return $@"np({property}) == null";
+                }
+                else if (columnFilterOperator == FilterOperator.IsEmpty)
+                {
+                    return $@"np({property}) == ''";
+                }
+                else if (columnFilterOperator == FilterOperator.IsNotEmpty)
+                {
+                    return $@"np({property}) != ''";
+                }
+                else if (columnFilterOperator == FilterOperator.IsNotNull)
+                {
+                    return $@"np({property}) != null";
+                }
             }
             else if (PropertyAccess.IsNumeric(column.FilterPropertyType))
             {
-                return $"{property} {linqOperator} {value}";
+                if (column.GetFilterOperator() == FilterOperator.IsNull || column.GetFilterOperator() == FilterOperator.IsNotNull)
+                {
+                    return $"{property} {linqOperator} null";
+                }
+                else if (column.GetFilterOperator() == FilterOperator.IsEmpty || column.GetFilterOperator() == FilterOperator.IsNotEmpty)
+                {
+                    return $"{property} {linqOperator} ''";
+                }
+                else
+                {
+                    return $"{property} {linqOperator} {value}";
+                }
             }
             else if (column.FilterPropertyType == typeof(DateTime) || 
                     column.FilterPropertyType == typeof(DateTime?) ||
                     column.FilterPropertyType == typeof(DateTimeOffset) || 
                     column.FilterPropertyType == typeof(DateTimeOffset?))
             {
-                var dateTimeValue = DateTime.Parse(value, null, System.Globalization.DateTimeStyles.RoundtripKind);
-                var finalDate = dateTimeValue.TimeOfDay == TimeSpan.Zero ? dateTimeValue.Date : dateTimeValue;
-                var dateFormat = dateTimeValue.TimeOfDay == TimeSpan.Zero ? "yyyy-MM-dd" : "yyyy-MM-ddTHH:mm:ssZ";
-                var dateFunction = column.FilterPropertyType == typeof(DateTimeOffset) || column.FilterPropertyType == typeof(DateTimeOffset?) ? "DateTimeOffset" : "DateTime";
+                if (column.GetFilterOperator() == FilterOperator.IsNull || column.GetFilterOperator() == FilterOperator.IsNotNull)
+                {
+                    return $"{property} {linqOperator} null";
+                }
+                else if (column.GetFilterOperator() == FilterOperator.IsEmpty || column.GetFilterOperator() == FilterOperator.IsNotEmpty)
+                {
+                    return $"{property} {linqOperator} ''";
+                }
+                else
+                {
+                    var dateTimeValue = DateTime.Parse(value, null, System.Globalization.DateTimeStyles.RoundtripKind);
+                    var finalDate = dateTimeValue.TimeOfDay == TimeSpan.Zero ? dateTimeValue.Date : dateTimeValue;
+                    var dateFormat = dateTimeValue.TimeOfDay == TimeSpan.Zero ? "yyyy-MM-dd" : "yyyy-MM-ddTHH:mm:ssZ";
+                    var dateFunction = column.FilterPropertyType == typeof(DateTimeOffset) || column.FilterPropertyType == typeof(DateTimeOffset?) ? "DateTimeOffset" : "DateTime";
 
-                return $@"{property} {linqOperator} {dateFunction}(""{finalDate.ToString(dateFormat)}"")";
+                    return $@"{property} {linqOperator} {dateFunction}(""{finalDate.ToString(dateFormat)}"")";
+                }
             }
             else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
             {
@@ -308,12 +474,30 @@ namespace Radzen
             }
             else if (column.FilterPropertyType == typeof(Guid) || column.FilterPropertyType == typeof(Guid?))
             {
-                return $@"{property} {linqOperator} Guid(""{value}"")";
+                if (column.GetFilterOperator() == FilterOperator.IsNull || column.GetFilterOperator() == FilterOperator.IsNotNull)
+                {
+                    return $"{property} {linqOperator} null";
+                }
+                else if (column.GetFilterOperator() == FilterOperator.IsEmpty || column.GetFilterOperator() == FilterOperator.IsNotEmpty)
+                {
+                    return $"{property} {linqOperator} ''";
+                }
+                else
+                {
+                    return $@"{property} {linqOperator} Guid(""{value}"")";
+                }
             }
 
             return "";
         }
 
+        /// <summary>
+        /// Gets the column o data filter.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="column">The column.</param>
+        /// <param name="second">if set to <c>true</c> [second].</param>
+        /// <returns>System.String.</returns>
         private static string GetColumnODataFilter<T>(RadzenGridColumn<T> column, bool second = false)
         {
             var columnType = column.Type;
@@ -351,6 +535,12 @@ namespace Radzen
                         $"contains({property}, tolower('{value}'))" : 
                         $"contains({property}, '{value}')";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "DoesNotContain")
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"not(contains({property}, tolower('{value}')))" :
+                        $"not(contains({property}, '{value}'))";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == "startswith")
                 {
                     return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? 
@@ -388,14 +578,23 @@ namespace Radzen
             return "";
         }
 
+        /// <summary>
+        /// Gets the column o data filter.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="column">The column.</param>
+        /// <param name="second">if set to <c>true</c> [second].</param>
+        /// <returns>System.String.</returns>
         private static string GetColumnODataFilter<T>(RadzenDataGridColumn<T> column, bool second = false)
         {
             var property = column.GetFilterProperty().Replace('.', '/');
 
             var columnFilterOperator = !second ? column.GetFilterOperator() : column.GetSecondFilterOperator();
+            var odataFilterOperator = ODataFilterOperators[columnFilterOperator];
 
-            var value = !second ? (string)Convert.ChangeType(column.GetFilterValue(), typeof(string)) :
-                (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
+            var value = IsEnumerable(column.FilterPropertyType) && column.FilterPropertyType != typeof(string) ? null :
+                    !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))
             {
@@ -410,6 +609,12 @@ namespace Radzen
                         $"contains({property}, tolower('{value}'))" :
                         $"contains({property}, '{value}')";
                 }
+                else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.DoesNotContain)
+                {
+                    return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
+                        $"not(contains({property}, tolower('{value}')))" :
+                        $"not(contains({property}, '{value}'))";
+                }
                 else if (!string.IsNullOrEmpty(value) && columnFilterOperator == FilterOperator.StartsWith)
                 {
                     return column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ?
@@ -434,30 +639,84 @@ namespace Radzen
                         $"{property} ne tolower('{value}')" :
                         $"{property} ne '{value}'";
                 }
+                else if (columnFilterOperator == FilterOperator.IsNull || columnFilterOperator == FilterOperator.IsNotNull)
+                {
+                    return $"{property} {odataFilterOperator} null";
+                }
+                else if (columnFilterOperator == FilterOperator.IsEmpty || columnFilterOperator == FilterOperator.IsNotEmpty)
+                {
+                    return $"{property} {odataFilterOperator} ''";
+                }
+            }
+            else if (IsEnumerable(column.FilterPropertyType) && column.FilterPropertyType != typeof(string))
+            {
+                var v = !second ? column.GetFilterValue() : column.GetSecondFilterValue();
+
+                var enumerableValue = ((IEnumerable)(v != null ? v : Enumerable.Empty<object>())).AsQueryable();
+
+                var enumerableValueAsString = "(" + String.Join(",",
+                        (enumerableValue.ElementType == typeof(string) ? enumerableValue.Cast<string>().Select(i => $@"'{i}'").Cast<object>() : enumerableValue.Cast<object>())) + ")";
+
+                if (enumerableValue.Any() && columnFilterOperator == FilterOperator.Contains)
+                {
+                    return $"{property} in {enumerableValueAsString}";
+                }
+                else if (enumerableValue.Any() && columnFilterOperator == FilterOperator.DoesNotContain)
+                {
+                    return $"not({property} in {enumerableValueAsString})";
+                }
             }
             else if (PropertyAccess.IsNumeric(column.FilterPropertyType))
             {
-                return $"{property} {ODataFilterOperators[columnFilterOperator]} {value}";
+                return $"{property} {odataFilterOperator} {value}";
             }
             else if (column.FilterPropertyType == typeof(bool) || column.FilterPropertyType == typeof(bool?))
             {
-                return $"{property} eq {value.ToLower()}";
+                if (columnFilterOperator == FilterOperator.IsNull || columnFilterOperator == FilterOperator.IsNotNull)
+                {
+                    return $"{property} {odataFilterOperator} null";
+                }
+                else if (columnFilterOperator == FilterOperator.IsEmpty || columnFilterOperator == FilterOperator.IsNotEmpty)
+                {
+                    return $"{property} {odataFilterOperator} ''";
+                }
+                else
+                {
+                    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")}";
+                if (columnFilterOperator == FilterOperator.IsNull || columnFilterOperator == FilterOperator.IsNotNull)
+                {
+                    return $"{property} {odataFilterOperator} null";
+                }
+                else if (columnFilterOperator == FilterOperator.IsEmpty || columnFilterOperator == FilterOperator.IsNotEmpty)
+                {
+                    return $"{property} {odataFilterOperator} ''";
+                }
+                else
+                {
+                    return $"{property} {odataFilterOperator} {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 $"{property} {odataFilterOperator} {value}";
             }
 
             return "";
         }
 
+        /// <summary>
+        /// Converts to odatafilterstring.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="columns">The columns.</param>
+        /// <returns>System.String.</returns>
         public static string ToODataFilterString<T>(this IEnumerable<RadzenGridColumn<T>> columns)
         {
             Func<RadzenGridColumn<T>, bool> canFilter = (c) => c.Filterable && !string.IsNullOrEmpty(c.Type) &&
@@ -506,10 +765,19 @@ namespace Radzen
             return "";
         }
 
+        /// <summary>
+        /// Converts to odatafilterstring.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="columns">The columns.</param>
+        /// <returns>System.String.</returns>
         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;
+               (!(c.GetFilterValue() == null || c.GetFilterValue() as string == string.Empty) 
+                || c.GetFilterOperator() == FilterOperator.IsNotNull || c.GetFilterOperator() == FilterOperator.IsNull
+                || c.GetFilterOperator() == FilterOperator.IsEmpty || c.GetFilterOperator() == FilterOperator.IsNotEmpty)
+               && c.GetFilterProperty() != null;
 
             if (columns.Where(canFilter).Any())
             {
@@ -521,10 +789,11 @@ namespace Radzen
                 {
                     var property = column.GetFilterProperty().Replace('.', '/');
 
-                    var value = (string)Convert.ChangeType(column.GetFilterValue(), typeof(string));
-                    var secondValue = (string)Convert.ChangeType(column.GetSecondFilterValue(), typeof(string));
+                    var value = column.GetFilterValue();
+                    var secondValue = column.GetSecondFilterValue();
 
-                    if (!string.IsNullOrEmpty(value))
+                    if (value != null || column.GetFilterOperator() == FilterOperator.IsNotNull || column.GetFilterOperator() == FilterOperator.IsNull
+                        || column.GetFilterOperator() == FilterOperator.IsEmpty || column.GetFilterOperator() == FilterOperator.IsNotEmpty)
                     {
                         var linqOperator = ODataFilterOperators[column.GetFilterOperator()];
                         if (linqOperator == null)
@@ -534,12 +803,12 @@ namespace Radzen
 
                         var booleanOperator = column.LogicalFilterOperator == LogicalFilterOperator.And ? "and" : "or";
 
-                        if (string.IsNullOrEmpty(secondValue))
+                        if (secondValue == null)
                         {
                             whereList.Add(GetColumnODataFilter(column));
                         }
                         else
-                        {
+                        {   
                             whereList.Add($"({GetColumnODataFilter(column)} {booleanOperator} {GetColumnODataFilter(column, true)})");
                         }
                     }
@@ -551,6 +820,13 @@ namespace Radzen
             return "";
         }
 
+        /// <summary>
+        /// Wheres the specified columns.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="source">The source.</param>
+        /// <param name="columns">The columns.</param>
+        /// <returns>IQueryable&lt;T&gt;.</returns>
         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) &&
@@ -591,6 +867,11 @@ namespace Radzen
                             whereList.Add($@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})", new object[] { column.FilterValue });
                             index++;
                         }
+                        else if (comparison == "DoesNotContain")
+                        {
+                            whereList.Add($@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})", new object[] { column.FilterValue });
+                            index++;
+                        }
                         else
                         {
                             whereList.Add($@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}", new object[] { column.FilterValue });
@@ -601,12 +882,14 @@ namespace Radzen
                     {
                         var firstFilter = comparison == "StartsWith" || comparison == "EndsWith" || comparison == "Contains" ?
                             $@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})" :
+                            comparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
                             $@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}";
                         index++;
 
                         var secondComparison = FilterOperators[column.SecondFilterOperator];
                         var secondFilter = secondComparison == "StartsWith" || secondComparison == "EndsWith" || secondComparison == "Contains" ?
                             $@"{property}{filterCaseSensitivityOperator}.{secondComparison}(@{index}{filterCaseSensitivityOperator})" :
+                            secondComparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
                             $@"{property}{filterCaseSensitivityOperator} {secondComparison} @{index}{filterCaseSensitivityOperator}";
                         index++;
 
@@ -620,10 +903,25 @@ namespace Radzen
             return source;
         }
 
+        private static bool IsEnumerable(Type type)
+        {
+            return typeof(IEnumerable).IsAssignableFrom(type) || typeof(IEnumerable<>).IsAssignableFrom(type);
+        }
+
+        /// <summary>
+        /// Wheres the specified columns.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="source">The source.</param>
+        /// <param name="columns">The columns.</param>
+        /// <returns>IQueryable&lt;T&gt;.</returns>
         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;
+               (!(c.GetFilterValue() == null || c.GetFilterValue() as string == string.Empty) 
+                || c.GetFilterOperator() == FilterOperator.IsNotNull || c.GetFilterOperator() == FilterOperator.IsNull
+                || c.GetFilterOperator() == FilterOperator.IsEmpty || c.GetFilterOperator() == FilterOperator.IsNotEmpty)
+               && c.GetFilterProperty() != null;
 
             if (columns.Where(canFilter).Any())
             {
@@ -641,13 +939,18 @@ namespace Radzen
                         property = $"({property})";
                     }
 
-                    if (column.FilterPropertyType == typeof(string))
+                    if (column.FilterPropertyType == typeof(string) && 
+                        !(column.GetFilterOperator() == FilterOperator.IsNotNull || column.GetFilterOperator() == FilterOperator.IsNull
+                            || column.GetFilterOperator() == FilterOperator.IsEmpty || column.GetFilterOperator() == FilterOperator.IsNotEmpty))
                     {
                         property = $@"({property} == null ? """" : {property})";
                     }
 
-                    string filterCaseSensitivityOperator = column.FilterPropertyType == typeof(string) &&
-                        column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
+                    string filterCaseSensitivityOperator = column.FilterPropertyType == typeof(string) 
+                           && column.GetFilterOperator() != FilterOperator.IsNotNull && column.GetFilterOperator() != FilterOperator.IsNull
+                           && column.GetFilterOperator() != FilterOperator.IsEmpty && column.GetFilterOperator() != FilterOperator.IsNotEmpty
+                           && column.Grid.FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
+
 
                     var comparison = LinqFilterOperators[column.GetFilterOperator()];
 
@@ -657,10 +960,31 @@ namespace Radzen
                     {
                         if (comparison == "StartsWith" || comparison == "EndsWith" || comparison == "Contains")
                         {
-                            whereList.Add($@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})", new object[] { column.GetFilterValue() });
+                            if (IsEnumerable(column.FilterPropertyType) && column.FilterPropertyType != typeof(string) && comparison == "Contains")
+                            {
+                                whereList.Add($@"(@{index}).Contains({property})", new object[] { column.GetFilterValue() });
+                            }
+                            else
+                            {
+                                whereList.Add($@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})", new object[] { column.GetFilterValue() });
+                            }
+                            
                             index++;
                         }
-                        else
+                        else if (comparison == "DoesNotContain")
+                        {
+                            if (IsEnumerable(column.FilterPropertyType) && column.FilterPropertyType != typeof(string) && comparison == "DoesNotContain")
+                            {
+                                whereList.Add($@"!(@{index}).Contains({property})", new object[] { column.GetFilterValue() });
+                            }
+                            else
+                            {
+                                whereList.Add($@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})", new object[] { column.GetFilterValue() });
+                            }
+                            
+                            index++;
+                        }
+                        else if (!(IsEnumerable(column.FilterPropertyType) && column.FilterPropertyType != typeof(string)))
                         {
                             whereList.Add($@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}", new object[] { column.GetFilterValue() });
                             index++;
@@ -668,32 +992,65 @@ namespace Radzen
                     }
                     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() });
+                        if (IsEnumerable(column.FilterPropertyType) && column.FilterPropertyType != typeof(string) &&
+                            (comparison == "Contains" || comparison == "DoesNotContain") && 
+                                (secondComparison == "Contains" || secondComparison == "DoesNotContain"))
+                        {
+                            var firstFilter = $@"{(comparison == "DoesNotContain" ? "!" : "")}(@{index}).Contains({property})";
+                            index++;
+
+                            var secondFilter = $@"{(secondComparison == "DoesNotContain" ? "!" : "")}(@{index}).Contains({property})";
+                            index++;
+
+                            whereList.Add($@"({firstFilter} {booleanOperator} {secondFilter})", new object[] { column.GetFilterValue(), column.GetSecondFilterValue() });
+                        }
+                        else
+                        {
+                            var firstFilter = comparison == "StartsWith" || comparison == "EndsWith" || comparison == "Contains" ?
+                                $@"{property}{filterCaseSensitivityOperator}.{comparison}(@{index}{filterCaseSensitivityOperator})" :
+                                comparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
+                                $@"{property}{filterCaseSensitivityOperator} {comparison} @{index}{filterCaseSensitivityOperator}";
+                            index++;
+
+                            var secondFilter = secondComparison == "StartsWith" || secondComparison == "EndsWith" || secondComparison == "Contains" ?
+                                $@"{property}{filterCaseSensitivityOperator}.{secondComparison}(@{index}{filterCaseSensitivityOperator})" :
+                                secondComparison == "DoesNotContain" ? $@"!{property}{filterCaseSensitivityOperator}.Contains(@{index}{filterCaseSensitivityOperator})" :
+                                $@"{property}{filterCaseSensitivityOperator} {secondComparison} @{index}{filterCaseSensitivityOperator}";
+                            index++;
+
+                            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 whereList.Keys.Any() ?
+                    source.Where(string.Join($" {gridBooleanOperator} ", whereList.Keys), whereList.Values.SelectMany(i => i.ToArray()).ToArray())
+                    : source;
             }
 
             return source;
         }
 
+        /// <summary>
+        /// Ases the o data enumerable.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="source">The source.</param>
+        /// <returns>ODataEnumerable&lt;T&gt;.</returns>
         public static ODataEnumerable<T> AsODataEnumerable<T>(this IEnumerable<T> source)
         {
             return new ODataEnumerable<T>(source);
         }
 
+        /// <summary>
+        /// Selects the many recursive.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="source">The source.</param>
+        /// <param name="selector">The selector.</param>
+        /// <returns>IEnumerable&lt;T&gt;.</returns>
         public static IEnumerable<T> SelectManyRecursive<T>(this IEnumerable<T> source, Func<T, IEnumerable<T>> selector)
         {
             var result = source.SelectMany(selector);

Radzen.Blazor/Radzen.Blazor.csproj

@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
   <PropertyGroup>
     <NoWarn>BL9993</NoWarn>
-    <TargetFrameworks>netstandard2.1;net5.0</TargetFrameworks>
+    <TargetFrameworks>netstandard2.1;net5.0;net6.0</TargetFrameworks>
     <RazorLangVersion>3.0</RazorLangVersion>
     <LangVersion>7.3</LangVersion>
     <OutputType>Library</OutputType>
     <IsPackable>true</IsPackable>
     <PackageId>Radzen.Blazor</PackageId>
     <Product>Radzen.Blazor</Product>
-    <Version>3.6.4</Version>
+    <Version>3.20.3</Version>
     <Copyright>Radzen Ltd.</Copyright>
     <Authors>Radzen Ltd.</Authors>
     <Description>Native Blazor UI components by Radzen Ltd.</Description>
@@ -18,63 +18,54 @@
     <PackageLicenseFile>LICENSE.txt</PackageLicenseFile>
     <Title>Radzen Components for Blazor</Title>
     <RepositoryUrl>https://github.com/radzenhq/radzen-blazor</RepositoryUrl>
-  </PropertyGroup>
-  <PropertyGroup Condition="'$(TargetFramework)' == 'net5.0'">
-    <DefineConstants>NET5</DefineConstants>
+    <GenerateDocumentationFile>true</GenerateDocumentationFile>
   </PropertyGroup>
   <ItemGroup>
+    <PackageReference Include="LibSassBuilder" Version="2.0.1" />
     <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" />
     <PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net5.0'" Version="5.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net5.0'" Version="5.0.0" />
+	<PackageReference Include="Microsoft.AspNetCore.Components" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
+	<PackageReference Include="Microsoft.AspNetCore.Components.Web" Condition="'$(TargetFramework)' == 'net6.0'" Version="6.0.0" />
     <PackageReference Include="Microsoft.CSharp" Version="4.7.0" />
-    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.2" />
+    <PackageReference Include="System.Linq.Dynamic.Core" Version="1.2.12" />
   </ItemGroup>
 
   <ItemGroup>
-      <None Include="LICENSE.txt" Pack="true" PackagePath="" />
-      <None Include="icon.png" Pack="true" PackagePath="" />
+    <None Include="LICENSE.txt" Pack="true" PackagePath="" />
+    <None Include="icon.png" Pack="true" PackagePath="" />
   </ItemGroup>
 
   <ItemGroup>
-      <EmbeddedResource Include="LinkerConfig.xml">
-        <LogicalName>$(MSBuildProjectName).xml</LogicalName>
-      </EmbeddedResource>
+    <EmbeddedResource Include="LinkerConfig.xml">
+      <LogicalName>$(MSBuildProjectName).xml</LogicalName>
+    </EmbeddedResource>
   </ItemGroup>
-  
-  <UsingTask
-  TaskName="RemoveSourceMap"
-  TaskFactory="RoslynCodeTaskFactory"
-  AssemblyFile="$(MSBuildToolsPath)\Microsoft.Build.Tasks.Core.dll" >
-    <Task>
-      <Using Namespace="System"/>
-      <Using Namespace="System.IO"/>
-      <Using Namespace="System.Text"/>
-      <Code Type="Fragment" Language="cs">
-        <![CDATA[
-          foreach (var file in Directory.EnumerateFiles("./wwwroot/css", "*.css"))
-          {
-              File.WriteAllText(file, File.ReadAllText(file).Replace("/*# sourceMappingURL=themes" + Path.DirectorySeparatorChar + Path.GetFileName(file) + ".map */", ""), Encoding.UTF8);
-          }
-        ]]>
-      </Code>
-    </Task>
-  </UsingTask>
-  
-  <Target Name="ToolRestore" BeforeTargets="PreBuildEvent">
-    <Exec Command="dotnet tool restore" StandardOutputImportance="high" />
+
+  <PropertyGroup>
+    <LibSassOutputStyle>expanded</LibSassOutputStyle>
+    <EnableDefaultSassItems>false</EnableDefaultSassItems>  
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Sass Include="$(MSBuildProjectDirectory)/themes/*.scss" Exclude="$(MSBuildProjectDirectory)/themes/_*.scss" Condition="'$(TargetFramework)' == 'net6.0'" />
+  </ItemGroup>
+
+ <Target Name="Sass" BeforeTargets="BeforeBuild" Condition="'$(TargetFramework)' == 'net6.0'">
+    <PropertyGroup>
+      <_SassFileList>@(Sass->'&quot;%(FullPath)&quot;', ' ')</_SassFileList>
+      <LibSassBuilderArgs>files $(_SassFileList) --outputstyle $(LibSassOutputStyle) --level $(LibSassOutputLevel)</LibSassBuilderArgs>
+    </PropertyGroup>
+    <Message Text="$(LibSassBuilderArgs)" Importance="$(LibSassMessageLevel)" />
+    <Message Text="Converted SassFile list to argument" Importance="$(LibSassMessageLevel)" />
   </Target>
-  <Target Name="PreBuild" AfterTargets="ToolRestore">
-    <Exec Command="dotnet tool run webcompiler -r themes -o wwwroot/css -z disable -m disable -p disable" StandardOutputImportance="high" />
+
+  <Target Name="MoveCss" AfterTargets="AfterCompile" Condition="'$(TargetFramework)' == 'net6.0'" >
     <ItemGroup>
-      <CssFiles Include="$(MSBuildProjectDirectory)\themes\*.css" />
+        <CssFile Include="$(MSBuildProjectDirectory)/themes/*.css" />
     </ItemGroup>
-    <ItemGroup>
-      <BootstrapFiles Include="$(MSBuildProjectDirectory)\wwwroot\css\bootstrap\**\*.*" />
-    </ItemGroup>
-    <Delete Files="@(CssFiles)" />
-    <Delete Files="@(BootstrapFiles)" />
-    <RemoveDir Directories="$(MSBuildProjectDirectory)\wwwroot\css\bootstrap" />
-    <RemoveSourceMap />
+    <Move SourceFiles="@(CssFile)" DestinationFolder="$(MSBuildProjectDirectory)/wwwroot/css/" />
   </Target>
+
 </Project>

Radzen.Blazor/RadzenAccordion.razor

@@ -17,7 +17,7 @@
         if (!item.Visible)
             continue;
 
-        <div class="rz-accordion-header rz-state-active" @attributes="item.Attributes" style="@item.Style">
+        <div class="rz-accordion-header" @attributes="item.Attributes" style="@item.Style">
             <a @onclick="@((args) => SelectItem(item))" href="javascript:void(0)" role="tab" tabindex="0"
                id="@($"rz-accordiontab-{items.IndexOf(item)}")" aria-controls="@($"rz-accordiontab-{items.IndexOf(item)}-content")" aria-expanded="true">
                 @if (IsSelected(i, item))
@@ -49,112 +49,4 @@
         }
     }
 </div>
-}
-
-@code {
-    protected override string GetComponentCssClass()
-    {
-        return "rz-accordion";
-    }
-
-    [Parameter]
-    public bool Multiple { get; set; }
-
-    [Parameter]
-    public int SelectedIndex { get; set; } = 0;
-
-    [Parameter]
-    public EventCallback<int> Expand { get; set; }
-
-    [Parameter]
-    public EventCallback<int> Collapse { get; set; }
-
-    [Parameter]
-    public RenderFragment Items { get; set; }
-
-    List<RadzenAccordionItem> items = new List<RadzenAccordionItem>();
-
-    public void AddItem(RadzenAccordionItem item)
-    {
-        if (items.IndexOf(item) == -1)
-        {
-            if (item.Selected)
-            {
-                SelectedIndex = items.Count;
-                if (!Multiple)
-                {
-                    expandedIdexes.Clear();
-                }
-
-                if (!expandedIdexes.Contains(SelectedIndex))
-                {
-                    expandedIdexes.Add(SelectedIndex);
-                }
-            }
-
-            items.Add(item);
-            StateHasChanged();
-        }
-    }
-
-    public void RemoveItem(RadzenAccordionItem item)
-    {
-        if (items.Contains(item))
-        {
-            items.Remove(item);
-            try { InvokeAsync(StateHasChanged); } catch { }
-        }
-    }
-
-    internal void Refresh()
-    {
-        StateHasChanged();
-    }
-
-    protected bool IsSelected(int index, RadzenAccordionItem item)
-    {
-        return expandedIdexes.Contains(index);
-    }
-
-    List<int> expandedIdexes = new List<int>();
-
-    internal async System.Threading.Tasks.Task SelectItem(RadzenAccordionItem item)
-    {
-        await CollapseAll(item);
-
-        var itemIndex = items.IndexOf(item);
-        if (!expandedIdexes.Contains(itemIndex))
-        {
-            expandedIdexes.Add(itemIndex);
-            await Expand.InvokeAsync(itemIndex);
-        }
-        else
-        {
-            expandedIdexes.Remove(itemIndex);
-            await Collapse.InvokeAsync(itemIndex);
-        }
-
-        if (!Multiple)
-        {
-            SelectedIndex = itemIndex;
-        }
-
-        StateHasChanged();
-    }
-
-    async System.Threading.Tasks.Task CollapseAll(RadzenAccordionItem item)
-    {
-        if (!Multiple && items.Count > 1)
-        {
-            foreach (var i in items.Where(i => i != item))
-            {
-                var itemIndex = items.IndexOf(i);
-                if (expandedIdexes.Contains(itemIndex))
-                {
-                    expandedIdexes.Remove(itemIndex);
-                    await Collapse.InvokeAsync(items.IndexOf(i));
-                }
-            }
-        }
-    }
 }

Radzen.Blazor/RadzenAccordion.razor.cs

@@ -0,0 +1,173 @@
+using Microsoft.AspNetCore.Components;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenAccordion component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenAccordion&gt;
+    ///     &lt;Items&gt;
+    ///         &lt;RadzenAccordionItem Text="Orders" Icon="account_balance_wallet"&gt;
+    ///             Details for Orders
+    ///         &lt;/RadzenAccordionItem&gt;
+    ///         &lt;RadzenAccordionItem Text="Employees" Icon="account_box"&gt;
+    ///             Details for Employees
+    ///         &lt;/RadzenAccordionItem&gt;
+    ///     &lt;/Items&gt;
+    /// &lt;/RadzenAccordion&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenAccordion : RadzenComponent
+    {
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return "rz-accordion";
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether multiple items can be expanded.
+        /// </summary>
+        /// <value><c>true</c> if multiple items can be expanded; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Multiple { get; set; }
+
+        /// <summary>
+        /// Gets or sets the index of the selected item.
+        /// </summary>
+        /// <value>The index of the selected item.</value>
+        [Parameter]
+        public int SelectedIndex { get; set; } = 0;
+
+        /// <summary>
+        /// Gets or sets a callback raised when the item is expanded.
+        /// </summary>
+        /// <value>The expand.</value>
+        [Parameter]
+        public EventCallback<int> Expand { get; set; }
+
+        /// <summary>
+        /// Gets or sets a callback raised when the item is collapsed.
+        /// </summary>
+        /// <value>The collapse.</value>
+        [Parameter]
+        public EventCallback<int> Collapse { get; set; }
+
+        /// <summary>
+        /// Gets or sets the items.
+        /// </summary>
+        /// <value>The items.</value>
+        [Parameter]
+        public RenderFragment Items { get; set; }
+
+        List<RadzenAccordionItem> items = new List<RadzenAccordionItem>();
+
+        /// <summary>
+        /// Adds the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void AddItem(RadzenAccordionItem item)
+        {
+            if (items.IndexOf(item) == -1)
+            {
+                if (item.Selected)
+                {
+                    SelectedIndex = items.Count;
+                    if (!Multiple)
+                    {
+                        expandedIdexes.Clear();
+                    }
+
+                    if (!expandedIdexes.Contains(SelectedIndex))
+                    {
+                        expandedIdexes.Add(SelectedIndex);
+                    }
+                }
+
+                items.Add(item);
+                StateHasChanged();
+            }
+        }
+
+        /// <summary>
+        /// Removes the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void RemoveItem(RadzenAccordionItem item)
+        {
+            if (items.Contains(item))
+            {
+                items.Remove(item);
+                if (!disposed)
+                {
+                    try { InvokeAsync(StateHasChanged); } catch { }
+                }
+            }
+        }
+
+        /// <summary>
+        /// Refreshes this instance.
+        /// </summary>
+        internal void Refresh()
+        {
+            StateHasChanged();
+        }
+
+        /// <summary>
+        /// Determines whether the specified index is selected.
+        /// </summary>
+        /// <param name="index">The index.</param>
+        /// <param name="item">The item.</param>
+        /// <returns><c>true</c> if the specified index is selected; otherwise, <c>false</c>.</returns>
+        protected bool IsSelected(int index, RadzenAccordionItem item)
+        {
+            return expandedIdexes.Contains(index);
+        }
+
+        List<int> expandedIdexes = new List<int>();
+
+        internal async System.Threading.Tasks.Task SelectItem(RadzenAccordionItem item)
+        {
+            await CollapseAll(item);
+
+            var itemIndex = items.IndexOf(item);
+            if (!expandedIdexes.Contains(itemIndex))
+            {
+                expandedIdexes.Add(itemIndex);
+                await Expand.InvokeAsync(itemIndex);
+            }
+            else
+            {
+                expandedIdexes.Remove(itemIndex);
+                await Collapse.InvokeAsync(itemIndex);
+            }
+
+            if (!Multiple)
+            {
+                SelectedIndex = itemIndex;
+            }
+
+            StateHasChanged();
+        }
+
+        async System.Threading.Tasks.Task CollapseAll(RadzenAccordionItem item)
+        {
+            if (!Multiple && items.Count > 1)
+            {
+                foreach (var i in items.Where(i => i != item))
+                {
+                    var itemIndex = items.IndexOf(i);
+                    if (expandedIdexes.Contains(itemIndex))
+                    {
+                        expandedIdexes.Remove(itemIndex);
+                        await Collapse.InvokeAsync(items.IndexOf(i));
+                    }
+                }
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenAccordionItem.cs

@@ -0,0 +1,113 @@
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Class RadzenAccordionItem.
+    /// </summary>
+    public partial class RadzenAccordionItem : RadzenComponent
+    {
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Gets or sets the icon.
+        /// </summary>
+        /// <value>The icon.</value>
+        [Parameter]
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenAccordionItem"/> is selected.
+        /// </summary>
+        /// <value><c>true</c> if selected; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Selected { get; set; }
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+
+        bool _visible = true;
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenAccordionItem"/> is visible.
+        /// </summary>
+        /// <value><c>true</c> if visible; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public override bool Visible
+        {
+            get
+            {
+                return _visible;
+            }
+            set
+            {
+                if (_visible != value)
+                {
+                    _visible = value;
+                    if (Accordion != null)
+                    {
+                        Accordion.Refresh();
+                    }
+                }
+            }
+        }
+
+        RadzenAccordion _accordion;
+
+        /// <summary>
+        /// Gets or sets the accordion.
+        /// </summary>
+        /// <value>The accordion.</value>
+        [CascadingParameter]
+        public RadzenAccordion Accordion
+        {
+            get
+            {
+                return _accordion;
+            }
+            set
+            {
+                if (_accordion != value)
+                {
+                    _accordion = value;
+                    _accordion.AddItem(this);
+                }
+            }
+        }
+
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            if (parameters.DidParameterChange(nameof(Selected), Selected))
+            {
+                Accordion?.SelectItem(this);
+            }
+
+            await base.SetParametersAsync(parameters);
+        }
+
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            Accordion?.RemoveItem(this);
+        }
+    }
+}

Radzen.Blazor/RadzenAccordionItem.razor

@@ -1,68 +0,0 @@
-@inherits RadzenComponent
-@code {
-    [Parameter]
-    public string Text { get; set; }
-
-    [Parameter]
-    public string Icon { get; set; }
-
-    [Parameter]
-    public bool Selected { get; set; }
-
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    bool _visible = true;
-    [Parameter]
-    public override bool Visible
-    {
-        get
-        {
-            return _visible;
-        }
-        set
-        {
-            if (_visible != value)
-            {
-                _visible = value;
-                Accordion.Refresh();
-            }
-        }
-    }
-
-    RadzenAccordion _accordion;
-
-    [CascadingParameter]
-    public RadzenAccordion Accordion
-    {
-        get
-        {
-            return _accordion;
-        }
-        set
-        {
-            if (_accordion != value)
-            {
-                _accordion = value;
-                _accordion.AddItem(this);
-            }
-        }
-    }
-
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        if (parameters.DidParameterChange(nameof(Selected), Selected))
-        {
-            Accordion?.SelectItem(this);
-        }
-
-        await base.SetParametersAsync(parameters);
-    }
-
-    public override void Dispose()
-    {
-        base.Dispose();
-
-        Accordion?.RemoveItem(this);
-    }
-}

Radzen.Blazor/RadzenArcGaugeScale.razor

@@ -39,149 +39,3 @@
 <CascadingValue Value=@this>
     @ChildContent
 </CascadingValue>
-@code {
-    [CascadingParameter]
-    public RadzenArcGauge Gauge { get; set; }
-
-    [Parameter]
-    public string Stroke { get; set; }
-
-    [Parameter]
-    public double StrokeWidth { get; set; } = 1;
-
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [Parameter]
-    public double TickLength { get; set; } = 10;
-
-    [Parameter]
-    public double MinorTickLength { get; set; } = 5;
-
-    [Parameter]
-    public double TickLabelOffset { get; set; } = 25;
-
-    [Parameter]
-    public string FormatString { get; set; }
-
-    [Parameter]
-    public string Fill { get; set; }
-
-    [Parameter]
-    public double Height { get; set; } = 0.2;
-
-    [Parameter]
-    public Func<double, string> Formatter { get; set; } = value => value.ToString();
-
-    [Parameter]
-    public double StartAngle { get; set; } = -90;
-
-    [Parameter]
-    public GaugeTickPosition TickPosition { get; set; } = GaugeTickPosition.None;
-
-    [Parameter]
-    public double EndAngle { get; set; } = 90;
-
-    [Parameter]
-    public double Radius { get; set; } = 1;
-
-    [Parameter]
-    public bool ShowFirstTick { get; set; } = true;
-
-    [Parameter]
-    public bool ShowLastTick { get; set; } = true;
-
-    [Parameter]
-    public bool ShowTickLabels { get; set; } = true;
-
-    [Parameter]
-    public double X { get; set; } = 0.5;
-
-    [Parameter]
-    public double Min { get; set; } = 0;
-
-    [Parameter]
-    public double Max { get; set; } = 100;
-
-    [Parameter]
-    public double Step { get; set; } = 20;
-
-    [Parameter]
-    public double MinorStep { get; set; }
-
-    [Parameter]
-    public double Y { get; set; } = 0.5;
-
-    [Parameter]
-    public double Margin { get; set; } = 16;
-
-    public double CurrentStrokeWidth
-    {
-        get
-        {
-            if (TickPosition == GaugeTickPosition.None)
-            {
-                return 0;
-            }
-
-            return StrokeWidth;
-        }
-    }
-
-    public double CurrentRadius
-    {
-        get
-        {
-            var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
-
-            radius *= Radius;
-
-            if (TickPosition == GaugeTickPosition.Outside)
-            {
-                radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
-            }
-
-            return radius;
-        }
-    }
-
-
-    double CurrentScaleRadius
-    {
-        get
-        {
-            if (TickPosition == GaugeTickPosition.Inside)
-            {
-                return CurrentRadius - CurrentSize;
-            }
-
-            return CurrentRadius;
-        }
-    }
-
-    public double CurrentSize
-    {
-        get
-        {
-            var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
-
-            if (TickPosition == GaugeTickPosition.Outside)
-            {
-                radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
-            }
-
-            return radius * Height;
-        }
-    }
-
-    public Point CurrentCenter
-    {
-        get
-        {
-            var x = X * Gauge.Width;
-            var y = Y * Gauge.Height;
-
-            return new Point { X = x.Value, Y = y.Value };
-        }
-    }
-}

Radzen.Blazor/RadzenArcGaugeScale.razor.cs

@@ -0,0 +1,272 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenArcGaugeScale component.
+    /// </summary>
+    public partial class RadzenArcGaugeScale: ComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the gauge.
+        /// </summary>
+        /// <value>The gauge.</value>
+        [CascadingParameter]
+        public RadzenArcGauge Gauge { get; set; }
+
+        /// <summary>
+        /// Gets or sets the stroke.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Gets or sets the width of the stroke.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; } = 1;
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        /// <summary>
+        /// Gets or sets the length of the tick.
+        /// </summary>
+        /// <value>The length of the tick.</value>
+        [Parameter]
+        public double TickLength { get; set; } = 10;
+
+        /// <summary>
+        /// Gets or sets the length of the minor tick.
+        /// </summary>
+        /// <value>The length of the minor tick.</value>
+        [Parameter]
+        public double MinorTickLength { get; set; } = 5;
+
+        /// <summary>
+        /// Gets or sets the tick label offset.
+        /// </summary>
+        /// <value>The tick label offset.</value>
+        [Parameter]
+        public double TickLabelOffset { get; set; } = 25;
+
+        /// <summary>
+        /// Gets or sets the format string.
+        /// </summary>
+        /// <value>The format string.</value>
+        [Parameter]
+        public string FormatString { get; set; }
+
+        /// <summary>
+        /// Gets or sets the fill.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Gets or sets the height.
+        /// </summary>
+        /// <value>The height.</value>
+        [Parameter]
+        public double Height { get; set; } = 0.2;
+
+        /// <summary>
+        /// Gets or sets the formatter.
+        /// </summary>
+        /// <value>The formatter.</value>
+        [Parameter]
+        public Func<double, string> Formatter { get; set; } = value => value.ToString();
+
+        /// <summary>
+        /// Gets or sets the start angle.
+        /// </summary>
+        /// <value>The start angle.</value>
+        [Parameter]
+        public double StartAngle { get; set; } = -90;
+
+        /// <summary>
+        /// Gets or sets the tick position.
+        /// </summary>
+        /// <value>The tick position.</value>
+        [Parameter]
+        public GaugeTickPosition TickPosition { get; set; } = GaugeTickPosition.None;
+
+        /// <summary>
+        /// Gets or sets the end angle.
+        /// </summary>
+        /// <value>The end angle.</value>
+        [Parameter]
+        public double EndAngle { get; set; } = 90;
+
+        /// <summary>
+        /// Gets or sets the radius.
+        /// </summary>
+        /// <value>The radius.</value>
+        [Parameter]
+        public double Radius { get; set; } = 1;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether first tick is shown.
+        /// </summary>
+        /// <value><c>true</c> if first tick is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowFirstTick { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether last tick is shown.
+        /// </summary>
+        /// <value><c>true</c> if last tick is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowLastTick { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to show tick labels.
+        /// </summary>
+        /// <value><c>true</c> if tick labels are shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowTickLabels { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the x.
+        /// </summary>
+        /// <value>The x.</value>
+        [Parameter]
+        public double X { get; set; } = 0.5;
+
+        /// <summary>
+        /// Determines the minimum value.
+        /// </summary>
+        /// <value>The minimum value.</value>
+        [Parameter]
+        public double Min { get; set; } = 0;
+
+        /// <summary>
+        /// Determines the maximum value.
+        /// </summary>
+        /// <value>The maximum value.</value>
+        [Parameter]
+        public double Max { get; set; } = 100;
+
+        /// <summary>
+        /// Gets or sets the step.
+        /// </summary>
+        /// <value>The step.</value>
+        [Parameter]
+        public double Step { get; set; } = 20;
+
+        /// <summary>
+        /// Gets or sets the minor step.
+        /// </summary>
+        /// <value>The minor step.</value>
+        [Parameter]
+        public double MinorStep { get; set; }
+
+        /// <summary>
+        /// Gets or sets the y.
+        /// </summary>
+        /// <value>The y.</value>
+        [Parameter]
+        public double Y { get; set; } = 0.5;
+
+        /// <summary>
+        /// Gets or sets the margin.
+        /// </summary>
+        /// <value>The margin.</value>
+        [Parameter]
+        public double Margin { get; set; } = 16;
+
+        /// <summary>
+        /// Gets the width of the current stroke.
+        /// </summary>
+        /// <value>The width of the current stroke.</value>
+        public double CurrentStrokeWidth
+        {
+            get
+            {
+                if (TickPosition == GaugeTickPosition.None)
+                {
+                    return 0;
+                }
+
+                return StrokeWidth;
+            }
+        }
+
+        /// <summary>
+        /// Gets the current radius.
+        /// </summary>
+        /// <value>The current radius.</value>
+        public double CurrentRadius
+        {
+            get
+            {
+                var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
+
+                radius *= Radius;
+
+                if (TickPosition == GaugeTickPosition.Outside)
+                {
+                    radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
+                }
+
+                return radius;
+            }
+        }
+
+        double CurrentScaleRadius
+        {
+            get
+            {
+                if (TickPosition == GaugeTickPosition.Inside)
+                {
+                    return CurrentRadius - CurrentSize;
+                }
+
+                return CurrentRadius;
+            }
+        }
+
+        /// <summary>
+        /// Gets the current size.
+        /// </summary>
+        /// <value>The current size.</value>
+        public double CurrentSize
+        {
+            get
+            {
+                var radius = Math.Min(Gauge.Width.Value, Gauge.Height.Value) / 2 - Margin * 2;
+
+                if (TickPosition == GaugeTickPosition.Outside)
+                {
+                    radius -= TextMeasurer.TextWidth(Max.ToString(), 16);
+                }
+
+                return radius * Height;
+            }
+        }
+
+        /// <summary>
+        /// Gets the current center.
+        /// </summary>
+        /// <value>The current center.</value>
+        public Point CurrentCenter
+        {
+            get
+            {
+                var x = X * Gauge.Width;
+                var y = Y * Gauge.Height;
+
+                return new Point { X = x.Value, Y = y.Value };
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenArcGaugeScaleValue.razor

@@ -17,54 +17,3 @@
         Size=@Scale.CurrentSize
     />
 </g>
-@code {
-    [Parameter]
-    public double Value { get; set; }
-
-    [CascadingParameter]
-    public RadzenArcGaugeScale Scale { get; set; }
-
-    [Parameter]
-    public string Stroke { get; set; }
-
-    [Parameter]
-    public double StrokeWidth { get; set; }
-
-    [Parameter]
-    public string Fill { get; set; }
-
-    [Parameter]
-    public bool ShowValue { get; set; } = true;
-
-    [Parameter]
-    public string FormatString { get; set; }
-
-    [Parameter]
-    public RenderFragment<RadzenArcGaugeScaleValue> Template { get; set; }
-
-    [CascadingParameter]
-    public RadzenArcGauge Gauge { get; set; }
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        Gauge.AddValue(this);
-    }
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        var shouldRefresh = false;
-
-        if (parameters.DidParameterChange(nameof(Value), Value) || parameters.DidParameterChange(nameof(ShowValue), ShowValue))
-        {
-            shouldRefresh = true;
-        }
-
-        await base.SetParametersAsync(parameters);
-
-        if (shouldRefresh)
-        {
-            Gauge.Reload();
-        }
-    }
-}

Radzen.Blazor/RadzenArcGaugeScaleValue.razor.cs

@@ -0,0 +1,99 @@
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenArcGaugeScaleValue component.
+    /// </summary>
+    public partial class RadzenArcGaugeScaleValue : ComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
+        [Parameter]
+        public double Value { get; set; }
+
+        /// <summary>
+        /// Gets or sets the scale.
+        /// </summary>
+        /// <value>The scale.</value>
+        [CascadingParameter]
+        public RadzenArcGaugeScale Scale { get; set; }
+
+        /// <summary>
+        /// Gets or sets the stroke.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Gets or sets the width of the stroke.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; }
+
+        /// <summary>
+        /// Gets or sets the fill.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether to show value.
+        /// </summary>
+        /// <value><c>true</c> if value is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowValue { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the format string.
+        /// </summary>
+        /// <value>The format string.</value>
+        [Parameter]
+        public string FormatString { get; set; }
+
+        /// <summary>
+        /// Gets or sets the template.
+        /// </summary>
+        /// <value>The template.</value>
+        [Parameter]
+        public RenderFragment<RadzenArcGaugeScaleValue> Template { get; set; }
+
+        /// <summary>
+        /// Gets or sets the gauge.
+        /// </summary>
+        /// <value>The gauge.</value>
+        [CascadingParameter]
+        public RadzenArcGauge Gauge { get; set; }
+
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            Gauge.AddValue(this);
+        }
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var shouldRefresh = false;
+
+            if (parameters.DidParameterChange(nameof(Value), Value) || parameters.DidParameterChange(nameof(ShowValue), ShowValue))
+            {
+                shouldRefresh = true;
+            }
+
+            await base.SetParametersAsync(parameters);
+
+            if (shouldRefresh)
+            {
+                Gauge.Reload();
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenAreaSeries.razor

@@ -6,64 +6,6 @@
   @ChildContent
 </CascadingValue>
 @code {
-  [Parameter]
-  public string Stroke { get; set; }
-
-  [Parameter]
-  public string Fill { get; set; }
-
-  [Parameter]
-  public double StrokeWidth { get; set; } = 2;
-
-  [Parameter]
-  public LineType LineType { get; set; }
-
-  [Parameter]
-  public bool Smooth { get; set; }
-
-  public override string Color
-  {
-    get
-    {
-      return Stroke;
-    }
-  }
-
-  public override bool Contains(double x, double y)
-  {
-      var tolerance = 25;
-      var category = ComposeCategory(Chart.CategoryScale);
-      var value = ComposeValue(Chart.ValueScale);
-
-      var points =  Items.Select(item => new Point { X = category(item), Y = value(item) }).ToArray();
-
-      var valueTicks = Chart.ValueScale.Ticks(Chart.ValueAxis.TickDistance);
-      var axisY = Chart.ValueScale.Scale(Math.Max(0, valueTicks.Start));
-
-      if (points.Any())
-      {
-        for (var i = 0; i < points.Length - 1; i++)
-        {
-            var start = points[i];
-            var end = points[i + 1];
-
-            var polygon = new[] {
-                new Point { X = start.X, Y = start.Y - tolerance },
-                new Point { X = end.X, Y = end.Y - tolerance },
-                new Point { X = end.X, Y = axisY },
-                new Point { X = start.X, Y = axisY },
-            };
-
-            if (InsidePolygon(new Point { X = x, Y = y }, polygon))
-            {
-              return true;
-            }
-        }
-      }
-
-      return false;
-  }
-
   public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
   {
     var category = ComposeCategory(categoryScale);

Radzen.Blazor/RadzenAreaSeries.razor.cs

@@ -0,0 +1,137 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Renders area series in <see cref="RadzenChart" />.
+    /// </summary>
+    public partial class RadzenAreaSeries<TItem> : CartesianSeries<TItem>
+    {
+        /// <summary>
+        /// Specifies the color of the line.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Specifies the fill (background color) of the area series.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Gets or sets the pixel width of the line. Set to <c>2</c> by default.
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; } = 2;
+
+        /// <summary>
+        /// Specifies the line type.
+        /// </summary>
+        [Parameter]
+        public LineType LineType { get; set; }
+
+        /// <summary>
+        /// Specifies whether to render a smooth line. Set to <c>false</c> by default.
+        /// </summary>
+        [Parameter]
+        public bool Smooth { get; set; }
+
+        /// <inheritdoc />
+        public override string Color
+        {
+            get
+            {
+                return Stroke;
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipStyle(TItem item)
+        {
+            var style = base.TooltipStyle(item);
+
+            var index = Items.IndexOf(item);
+
+            if (index >= 0)
+            {
+                var color = Fill;
+
+                if (color != null)
+                {
+                    style = $"{style}; border-color: {color};";
+                }
+            }
+
+            return style;
+        }
+
+        /// <inheritdoc />
+        public override bool Contains(double x, double y, double tolerance)
+        {
+            var category = ComposeCategory(Chart.CategoryScale);
+            var value = ComposeValue(Chart.ValueScale);
+
+            var points = Items.Select(item => new Point { X = category(item), Y = value(item) }).ToArray();
+
+            var valueTicks = Chart.ValueScale.Ticks(Chart.ValueAxis.TickDistance);
+            var axisY = Chart.ValueScale.Scale(Math.Max(0, valueTicks.Start));
+
+            if (points.Length > 0)
+            {
+                if (points.Length == 1)
+                {
+                    var point = points[0];
+
+                    var polygon = new[] {
+                        new Point { X = point.X - tolerance, Y = point.Y - tolerance },
+                        new Point { X = point.X - tolerance, Y = point.Y + tolerance },
+                        new Point { X = point.X + tolerance, Y = point.Y + tolerance },
+                        new Point { X = point.X + tolerance, Y = point.Y - tolerance },
+                    };
+
+                    if (InsidePolygon(new Point { X = x, Y = y }, polygon))
+                    {
+                        return true;
+                    }
+                }
+                else
+                {
+                    for (var i = 0; i < points.Length - 1; i++)
+                    {
+                        var start = points[i];
+                        var end = points[i + 1];
+
+                        var polygon = new[]
+                        {
+                            new Point { X = start.X, Y = start.Y - tolerance },
+                            new Point { X = end.X, Y = end.Y - tolerance },
+                            new Point { X = end.X, Y = axisY },
+                            new Point { X = start.X, Y = axisY },
+                        };
+
+                        if (InsidePolygon(new Point { X = x, Y = y }, polygon))
+                        {
+                            return true;
+                        }
+                    }
+                }
+            }
+
+            return false;
+        }
+
+        /// <inheritdoc />
+        public override IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
+        {
+            return base.GetDataLabels(offsetX, offsetY - 16);
+        }
+    }
+}

Radzen.Blazor/RadzenAutoComplete.razor

@@ -1,4 +1,5 @@
 @using Radzen
+@using Radzen.Blazor.Rendering
 @using System.Collections
 @using System.Linq.Dynamic.Core
 @using Microsoft.AspNetCore.Components.Forms
@@ -9,19 +10,18 @@
 @if (Visible)
 {
     <div @ref="@Element" style="@($"{Style};display:inline-block;")" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
-        <span class="rz-autocomplete" style="width:100%">
-            <input @ref="@search" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
-                   onfocus="@OpenScript()" onkeypress="@OpenScript()" tabindex="@TabIndex"  @onchange="@OnChange"
-                   aria-autocomplete="list" aria-haspopup="true" autocomplete="off" role="combobox"
-                   class="@getCssClasses()"
-                   type="text" id="@Name" aria-expanded="true" placeholder="@Placeholder" />
-        </span><div id="@PopupID" class="rz-autocomplete-panel" style="display:none; transform: none; box-sizing: border-box; max-height: 200px;">
+        <input @ref="@search" @onkeydown="@OnFilterKeyPress" value="@Value" disabled="@Disabled"
+                onkeypress="@OpenScript()" tabindex="@TabIndex"  @onchange="@OnChange"
+                aria-autocomplete="list" aria-haspopup="true" autocomplete="off" role="combobox"
+                class="@InputClassList"
+                type="text" id="@Name" aria-expanded="true" placeholder="@Placeholder" />
+        <div id="@PopupID" class="rz-autocomplete-panel" style="display:none; transform: none; box-sizing: border-box; max-height: 200px;">
             <ul @ref="@list" class="rz-autocomplete-items rz-autocomplete-list" role="listbox">
                 @if (!string.IsNullOrEmpty(searchText) || !string.IsNullOrEmpty(customSearchText))
                 {
                     @foreach (var item in LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>()))
                     {
-                        <li role="option" class="rz-autocomplete-list-item" @onclick="@(() => OnSelectItem(item))">
+                        <li role="option" class="rz-autocomplete-list-item" @onclick="@(() => OnSelectItem(item))" onmousedown="Radzen.activeElement = null">
                             <span>@PropertyAccess.GetItemOrValueFromProperty(item, TextProperty)</span>
                         </li>
                     }
@@ -30,197 +30,3 @@
         </div>
     </div>
 }
-@code {
-    [Parameter]
-    public int MinLength { get; set; } = 1;
-
-    [Parameter]
-    public int FilterDelay { get; set; } = 500;
-
-    protected ElementReference search;
-    protected ElementReference list;
-    string customSearchText;
-
-    int selectedIndex = -1;
-
-    protected async Task OnFilterKeyPress(KeyboardEventArgs args)
-    {
-        var items = (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).OfType<object>();
-
-        var key = args.Code != null ? args.Code : args.Key;
-
-        if (key == "ArrowDown" || key == "ArrowUp")
-        {
-            try
-            {
-                selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown", selectedIndex);
-            }
-            catch (Exception)
-            {
-                //
-            }
-        }
-        else if (key == "Enter")
-        {
-            if (selectedIndex >= 0 && selectedIndex <= items.Count() - 1)
-            {
-                await OnSelectItem(items.ElementAt(selectedIndex));
-                selectedIndex = -1;
-            }
-        }
-        else if (key == "Escape")
-        {
-            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
-        }
-        else if(key != "Tab")
-        {
-            selectedIndex = -1;
-
-            Debounce(DebounceFilter, FilterDelay);
-        }
-    }
-
-    async Task DebounceFilter()
-    {
-        var value = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
-
-        if (value.Length < MinLength)
-            return;
-
-        if (!LoadData.HasDelegate)
-        {
-            searchText = value;
-            await InvokeAsync(() => { StateHasChanged(); });
-        }
-        else
-        {
-            customSearchText = value;
-            await InvokeAsync(() => { LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Filter = customSearchText }); });
-        }
-    }
-
-    private string PopupID
-    {
-        get
-        {
-            return $"popup{UniqueID}";
-        }
-    }
-
-    private async Task OnSelectItem(object item)
-    {
-        await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
-
-        await SelectItem(item);
-    }
-
-    protected override IQueryable Query
-    {
-        get
-        {
-            return Data != null && !string.IsNullOrEmpty(searchText) ? Data.AsQueryable() : null;
-        }
-    }
-
-    protected override IEnumerable View
-    {
-        get
-        {
-            if (Query != null)
-            {
-                string filterCaseSensitivityOperator = FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
-
-                return Query.Where($"{TextProperty}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)",
-                    FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? searchText.ToLower() : searchText);
-            }
-
-            return null;
-        }
-    }
-
-    protected async System.Threading.Tasks.Task OnChange(ChangeEventArgs args)
-    {
-        Value = args.Value;
-
-        await ValueChanged.InvokeAsync($"{Value}");
-        if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-        await Change.InvokeAsync(Value);
-    }
-
-    async System.Threading.Tasks.Task SelectItem(object item)
-    {
-        if (!string.IsNullOrEmpty(TextProperty))
-        {
-            Value = PropertyAccess.GetItemOrValueFromProperty(item, TextProperty);
-        }
-        else
-        {
-            Value = item;
-        }
-
-        await ValueChanged.InvokeAsync($"{Value}");
-        if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-        await Change.InvokeAsync(Value);
-
-        StateHasChanged();
-    }
-
-    private string getCssClasses()
-    {
-        return $"rz-inputtext rz-autocomplete-input{(Disabled ? " rz-state-disabled" : "")}";
-    }
-
-    private string OpenScript()
-    {
-        if (Disabled)
-        {
-            return string.Empty;
-        }
-
-        return $"Radzen.openPopup(this.parentNode, '{PopupID}', true)";
-    }
-
-    protected override string GetComponentCssClass()
-    {
-        var fieldCssClass = FieldIdentifier.FieldName != null ? EditContext?.FieldCssClass(FieldIdentifier) : "";
-
-        return $"{base.GetComponentCssClass()} {fieldCssClass}";
-    }
-
-    public override void Dispose()
-    {
-        base.Dispose();
-
-        if (IsJSRuntimeAvailable)
-        {
-            JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
-        }
-    }
-
-    private bool firstRender = true;
-
-    protected override Task OnAfterRenderAsync(bool firstRender)
-    {
-        this.firstRender = firstRender;
-
-        return base.OnAfterRenderAsync(firstRender);
-    }
-
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        var shouldClose = false;
-
-        if (parameters.DidParameterChange(nameof(Visible), Visible))
-        {
-            var visible = parameters.GetValueOrDefault<bool>(nameof(Visible));
-            shouldClose = !visible;
-        }
-
-        await base.SetParametersAsync(parameters);
-
-        if (shouldClose && !firstRender)
-        {
-            await JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
-        }
-    }
-}

Radzen.Blazor/RadzenAutoComplete.razor.cs

@@ -0,0 +1,253 @@
+using Radzen;
+using Radzen.Blazor.Rendering;
+using System.Collections;
+using System.Linq.Dynamic.Core;
+using Microsoft.AspNetCore.Components.Forms;
+using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System.Linq;
+using System;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenAutoComplete component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenAutoComplete Data=@customers TextProperty="CompanyName" Change=@(args => Console.WriteLine($"Selected text: {args}")) /&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenAutoComplete : DataBoundFormComponent<string>
+    {
+        /// <summary>
+        /// Gets or sets the minimum length.
+        /// </summary>
+        /// <value>The minimum length.</value>
+        [Parameter]
+        public int MinLength { get; set; } = 1;
+
+        /// <summary>
+        /// Gets or sets the filter delay.
+        /// </summary>
+        /// <value>The filter delay.</value>
+        [Parameter]
+        public int FilterDelay { get; set; } = 500;
+
+        /// <summary>
+        /// Gets search input reference.
+        /// </summary>
+        protected ElementReference search;
+
+        /// <summary>
+        /// Gets list element reference.
+        /// </summary>
+        protected ElementReference list;
+
+        string customSearchText;
+        int selectedIndex = -1;
+
+        /// <summary>
+        /// Handles the <see cref="E:FilterKeyPress" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="KeyboardEventArgs"/> instance containing the event data.</param>
+        protected async Task OnFilterKeyPress(KeyboardEventArgs args)
+        {
+            var items = (LoadData.HasDelegate ? Data != null ? Data : Enumerable.Empty<object>() : (View != null ? View : Enumerable.Empty<object>())).OfType<object>();
+
+            var key = args.Code != null ? args.Code : args.Key;
+
+            if (key == "ArrowDown" || key == "ArrowUp")
+            {
+                try
+                {
+                    selectedIndex = await JSRuntime.InvokeAsync<int>("Radzen.focusListItem", search, list, key == "ArrowDown", selectedIndex);
+                }
+                catch (Exception)
+                {
+                    //
+                }
+            }
+            else if (key == "Enter")
+            {
+                if (selectedIndex >= 0 && selectedIndex <= items.Count() - 1)
+                {
+                    await OnSelectItem(items.ElementAt(selectedIndex));
+                    selectedIndex = -1;
+                }
+            }
+            else if (key == "Escape" || key == "Tab")
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+            }
+            else
+            {
+                selectedIndex = -1;
+
+                Debounce(DebounceFilter, FilterDelay);
+            }
+        }
+
+        async Task DebounceFilter()
+        {
+            var value = await JSRuntime.InvokeAsync<string>("Radzen.getInputValue", search);
+
+            if (value.Length < MinLength)
+                return;
+
+            if (!LoadData.HasDelegate)
+            {
+                searchText = value;
+                await InvokeAsync(() => { StateHasChanged(); });
+            }
+            else
+            {
+                customSearchText = value;
+                await InvokeAsync(() => { LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Filter = customSearchText }); });
+            }
+        }
+
+        private string PopupID
+        {
+            get
+            {
+                return $"popup{UniqueID}";
+            }
+        }
+
+        private async Task OnSelectItem(object item)
+        {
+            await JSRuntime.InvokeVoidAsync("Radzen.closePopup", PopupID);
+
+            await SelectItem(item);
+        }
+
+        /// <summary>
+        /// Gets the IQueryable.
+        /// </summary>
+        /// <value>The IQueryable.</value>
+        protected override IQueryable Query
+        {
+            get
+            {
+                return Data != null && !string.IsNullOrEmpty(searchText) ? Data.AsQueryable() : null;
+            }
+        }
+
+        /// <summary>
+        /// Gets the view - the Query with filtering applied.
+        /// </summary>
+        /// <value>The view.</value>
+        protected override IEnumerable View
+        {
+            get
+            {
+                if (Query != null)
+                {
+                    string filterCaseSensitivityOperator = FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? ".ToLower()" : "";
+
+                    return Query.Where($"{TextProperty}{filterCaseSensitivityOperator}.{Enum.GetName(typeof(StringFilterOperator), FilterOperator)}(@0)",
+                        FilterCaseSensitivity == FilterCaseSensitivity.CaseInsensitive ? searchText.ToLower() : searchText);
+                }
+
+                return null;
+            }
+        }
+
+        /// <summary>
+        /// Handles the <see cref="E:Change" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="ChangeEventArgs"/> instance containing the event data.</param>
+        protected async System.Threading.Tasks.Task OnChange(ChangeEventArgs args)
+        {
+            Value = args.Value;
+
+            await ValueChanged.InvokeAsync($"{Value}");
+            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
+            await Change.InvokeAsync(Value);
+        }
+
+        async System.Threading.Tasks.Task SelectItem(object item)
+        {
+            if (!string.IsNullOrEmpty(TextProperty))
+            {
+                Value = PropertyAccess.GetItemOrValueFromProperty(item, TextProperty);
+            }
+            else
+            {
+                Value = item;
+            }
+
+            await ValueChanged.InvokeAsync($"{Value}");
+            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
+            await Change.InvokeAsync(Value);
+
+            StateHasChanged();
+        }
+
+        ClassList InputClassList => ClassList.Create("rz-inputtext rz-autocomplete-input")
+                                             .AddDisabled(Disabled);
+
+        private string OpenScript()
+        {
+            if (Disabled)
+            {
+                return string.Empty;
+            }
+
+            return $"Radzen.openPopup(this.parentNode, '{PopupID}', true)";
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return GetClassList("rz-autocomplete").ToString();
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            if (IsJSRuntimeAvailable)
+            {
+                JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+            }
+        }
+
+        private bool firstRender = true;
+
+        /// <summary>
+        /// Called on after render asynchronous.
+        /// </summary>
+        /// <param name="firstRender">if set to <c>true</c> is first render.</param>
+        /// <returns>Task.</returns>
+        protected override Task OnAfterRenderAsync(bool firstRender)
+        {
+            this.firstRender = firstRender;
+
+            return base.OnAfterRenderAsync(firstRender);
+        }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var shouldClose = false;
+
+            if (parameters.DidParameterChange(nameof(Visible), Visible))
+            {
+                var visible = parameters.GetValueOrDefault<bool>(nameof(Visible));
+                shouldClose = !visible;
+            }
+
+            await base.SetParametersAsync(parameters);
+
+            if (shouldClose && !firstRender)
+            {
+                await JSRuntime.InvokeVoidAsync("Radzen.destroyPopup", PopupID);
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenAxisTitle.cs

@@ -0,0 +1,44 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Represents the title configuration of a <see cref="AxisBase" />.
+    /// </summary>
+    public class RadzenAxisTitle : RadzenChartComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the text displayed by the title.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Sets the axis with this configuration applies to.
+        /// </summary>
+        /// <value>The axis.</value>
+        [CascadingParameter]
+        public AxisBase Axis
+        {
+            set
+            {
+                value.Title = this;
+            }
+        }
+
+        internal double Size
+        {
+            get
+            {
+                return 16 * 0.875;
+            }
+        }
+
+        /// <inheritdoc />
+        protected override bool ShouldRefreshChart(ParameterView parameters)
+        {
+            return DidParameterChange(parameters, nameof(Text), Text);
+        }
+    }
+}

Radzen.Blazor/RadzenAxisTitle.razor

@@ -1,28 +0,0 @@
-@inherits RadzenChartComponentBase
-
-@code {
-    [Parameter]
-    public string Text { get; set; }
-
-    [CascadingParameter]
-    public AxisBase Axis
-    {
-        set
-        {
-            value.Title = this;
-        }
-    }
-
-    internal double Size
-    {
-        get
-        {
-            return 16 * 0.875;
-        }
-    }
-
-    protected override bool ShouldRefreshChart(ParameterView parameters)
-    {
-        return DidParameterChange(parameters, nameof(Text), Text);
-    }
-}

Radzen.Blazor/RadzenBadge.razor

@@ -0,0 +1,14 @@
+@inherits RadzenComponent
+@if (Visible)
+{
+<span @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
+    @if (ChildContent != null)
+    {
+        @ChildContent
+    }
+    else
+    {
+        @Text
+    }
+</span>
+}

Radzen.Blazor/RadzenBadge.razor.cs

@@ -0,0 +1,60 @@
+using Microsoft.AspNetCore.Components;
+using System.Collections.Generic;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenBadge component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="Primary" /&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenBadge : RadzenComponent
+    {
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            var classList = new List<string>();
+
+            classList.Add("rz-badge");
+            classList.Add($"rz-badge-{BadgeStyle.ToString().ToLowerInvariant()}");
+
+            if (IsPill)
+            {
+                classList.Add("rz-badge-pill");
+            }
+
+            return string.Join(" ", classList);
+        }
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Gets or sets the badge style.
+        /// </summary>
+        /// <value>The badge style.</value>
+        [Parameter]
+        public BadgeStyle BadgeStyle { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this instance is pill.
+        /// </summary>
+        /// <value><c>true</c> if this instance is pill; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool IsPill { get; set; }
+    }
+}

Radzen.Blazor/RadzenBarOptions.cs

@@ -0,0 +1,36 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Common configuration of <see cref="RadzenBarSeries{TItem}" />.
+    /// </summary>
+    public partial class RadzenBarOptions : RadzenChartComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the border radius of the bars. 
+        /// </summary>
+        /// <value>The radius. Values greater than <c>0</c> make rounded corners.</value>
+        [Parameter]
+        public double Radius { get; set; }
+
+        /// <summary>
+        /// Gets or sets the margin between bars.
+        /// </summary>
+        /// <value>The margin. By default set to <c>10</c></value>
+        [Parameter]
+        public double Margin { get; set; } = 10;
+
+        /// <inheritdoc />
+        protected override void Initialize()
+        {
+            Chart.BarOptions = this;
+        }
+
+        /// <inheritdoc />
+        protected override bool ShouldRefreshChart(ParameterView parameters)
+        {
+            return DidParameterChange(parameters, nameof(Radius), Radius) || DidParameterChange(parameters, nameof(Margin), Margin);
+        }
+    }
+}

Radzen.Blazor/RadzenBarOptions.razor

@@ -1,18 +0,0 @@
-@inherits RadzenChartComponentBase
-@code {
-    [Parameter]
-    public double Radius { get; set; }
-
-    [Parameter]
-    public double Margin { get; set; } = 10;
-
-    protected override void Initialize()
-    {
-        Chart.BarOptions = this;
-    }
-
-    protected override bool ShouldRefreshChart(ParameterView parameters)
-    {
-        return DidParameterChange(parameters, nameof(Radius), Radius) || DidParameterChange(parameters, nameof(Margin), Margin);
-    }
-}

Radzen.Blazor/RadzenBarSeries.razor

@@ -10,142 +10,6 @@
 </CascadingValue>
 
 @code {
-   [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; }
-
-   [Parameter]
-   public LineType LineType { get; set; }
-
-   public override string Color
-   {
-       get
-       {
-           return Fill;
-       }
-   }
-
-    public override ScaleBase TransformCategoryScale(ScaleBase scale)
-    {
-        return base.TransformValueScale(scale);
-    }
-
-    public override ScaleBase TransformValueScale(ScaleBase scale)
-    {
-        return base.TransformCategoryScale(scale);
-    }
-
-   private IList<IChartSeries> BarSeries
-   {
-        get
-        {
-            return Chart.Series.Where(series => series is IChartBarSeries).Cast<IChartSeries>().ToList();
-        }
-   }
-
-   private IList<IChartSeries> VisibleBarSeries
-   {
-       get
-       {
-           return BarSeries.Where(series => series.Visible).ToList();
-       }
-   }
-
-   private double BandHeight
-   {
-       get
-       {
-            var availableHeight = Chart.ValueScale.OutputSize; // - (Chart.ValueAxis.Padding * 2);
-            var bands = VisibleBarSeries.Cast<IChartBarSeries>().Max(series => series.Count) + 2;
-            return availableHeight / bands;
-       }
-   }
-
-   int IChartBarSeries.Count
-   {
-       get
-       {
-           return Items.Count;
-       }
-   }
-
-   public override bool Contains(double x, double y)
-   {
-       return DataAt(x, y) != null;
-   }
-
-   protected override double TooltipX(TItem item)
-   {
-        var value = Chart.CategoryScale.Compose(Value);
-        var x = value(item);
-
-        return x;
-   }        
-
-   protected override string TooltipValue(TItem item)
-   {
-       return Chart.ValueAxis.Format(Chart.CategoryScale, Chart.CategoryScale.Value(Value(item)));
-   }
-    protected override string TooltipTitle(TItem item)
-    {
-        var category = Category(Chart.ValueScale);
-        return Chart.CategoryAxis.Format(Chart.ValueScale, Chart.ValueScale.Value(category(item)));
-    }
-
-   public override object DataAt(double x, double y)
-   {
-        var value = ComposeValue(Chart.CategoryScale);
-        var category = ComposeCategory(Chart.ValueScale);
-        var ticks = Chart.CategoryScale.Ticks(Chart.ValueAxis.TickDistance);
-        var x0 = Chart.CategoryScale.Scale(Math.Max(0, ticks.Start));
-
-        var barSeries = VisibleBarSeries;
-        var index = barSeries.IndexOf(this);
-        var padding = Chart.BarOptions.Margin;
-        var bandHeight = BandHeight;
-        var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
-
-        foreach(var data in Items)
-        {
-            var startY = category(data) - bandHeight / 2 + index * height + index * padding;
-            var endY = startY + height;
-            var dataX = value(data);
-            var startX = Math.Min(dataX, x0);
-            var endX = Math.Max(dataX, x0);
-
-            if (startX <= x && x <= endX && startY <= y && y <= endY)
-            {
-                return data;
-            }
-        }
-
-        return null;
-    }
-
-    protected override double TooltipY(TItem item)
-    {
-       var category = ComposeCategory(Chart.ValueScale);
-       var barSeries = VisibleBarSeries;
-       var index = barSeries.IndexOf(this);
-       var padding = Chart.BarOptions.Margin;
-       var bandHeight = BandHeight;
-       var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
-       var y = category(item) - bandHeight / 2 + index * height + index * padding;
-
-       return y + height / 2;
-    }
-
    public override RenderFragment Render(ScaleBase categoryScale, ScaleBase valueScale)
    {
         var value = ComposeValue(categoryScale);

Radzen.Blazor/RadzenBarSeries.razor.cs

@@ -0,0 +1,229 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Renders bar series in <see cref="RadzenChart" />.
+    /// </summary>
+    /// <typeparam name="TItem">The type of the series data item.</typeparam>
+    public partial class RadzenBarSeries<TItem> : CartesianSeries<TItem>, IChartBarSeries
+    {
+        /// <summary>
+        /// Specifies the fill (background color) of the bar series.
+        /// </summary>
+        /// <value>The fill.</value>
+        [Parameter]
+        public string Fill { get; set; }
+
+        /// <summary>
+        /// Specifies a list of colors that will be used to set the individual bar backgrounds.
+        /// </summary>
+        /// <value>The fills.</value>
+        [Parameter]
+        public IEnumerable<string> Fills { get; set; }
+
+        /// <summary>
+        /// Specifies the stroke (border color) of the bar series.
+        /// </summary>
+        /// <value>The stroke.</value>
+        [Parameter]
+        public string Stroke { get; set; }
+
+        /// <summary>
+        /// Specifies a list of colors that will be used to set the individual bar borders.
+        /// </summary>
+        /// <value>The strokes.</value>
+        [Parameter]
+        public IEnumerable<string> Strokes { get; set; }
+
+        /// <summary>
+        /// Gets or sets the width of the stroke (border).
+        /// </summary>
+        /// <value>The width of the stroke.</value>
+        [Parameter]
+        public double StrokeWidth { get; set; }
+
+        /// <summary>
+        /// Gets or sets the type of the line used to render the bar border.
+        /// </summary>
+        /// <value>The type of the line.</value>
+        [Parameter]
+        public LineType LineType { get; set; }
+
+        /// <inheritdoc />
+        public override string Color
+        {
+            get
+            {
+                return Fill;
+            }
+        }
+
+        /// <inheritdoc />
+        public override ScaleBase TransformCategoryScale(ScaleBase scale)
+        {
+            return base.TransformValueScale(scale);
+        }
+
+        /// <inheritdoc />
+        public override ScaleBase TransformValueScale(ScaleBase scale)
+        {
+            return base.TransformCategoryScale(scale);
+        }
+
+        /// <inheritdoc />
+        protected override IList<object> GetCategories()
+        {
+            return base.GetCategories().Reverse().ToList();
+        }
+
+        private IList<IChartSeries> BarSeries
+        {
+            get
+            {
+                return Chart.Series.Where(series => series is IChartBarSeries).Cast<IChartSeries>().ToList();
+            }
+        }
+
+        private IList<IChartSeries> VisibleBarSeries
+        {
+            get
+            {
+                return BarSeries.Where(series => series.Visible).ToList();
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipStyle(TItem item)
+        {
+            var style = base.TooltipStyle(item);
+
+            var index = Items.IndexOf(item);
+
+            if (index >= 0)
+            {
+                var color = PickColor(index, Fills, Fill);
+
+                if (color != null)
+                {
+                    style = $"{style}; border-color: {color};";
+                }
+            }
+
+            return style;
+        }
+
+        private double BandHeight
+        {
+            get
+            {
+                var availableHeight = Chart.ValueScale.OutputSize; // - (Chart.ValueAxis.Padding * 2);
+                var bands = VisibleBarSeries.Cast<IChartBarSeries>().Max(series => series.Count) + 2;
+                return availableHeight / bands;
+            }
+        }
+
+        int IChartBarSeries.Count
+        {
+            get
+            {
+                return Items.Count;
+            }
+        }
+
+        /// <inheritdoc />
+        public override bool Contains(double x, double y, double tolerance)
+        {
+            return DataAt(x, y) != null;
+        }
+
+        /// <inheritdoc />
+        internal override double TooltipX(TItem item)
+        {
+            var value = Chart.CategoryScale.Compose(Value);
+            var x = value(item);
+
+            return x;
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipValue(TItem item)
+        {
+            return Chart.ValueAxis.Format(Chart.CategoryScale, Chart.CategoryScale.Value(Value(item)));
+        }
+
+        /// <inheritdoc />
+        protected override string TooltipTitle(TItem item)
+        {
+            var category = Category(Chart.ValueScale);
+            return Chart.CategoryAxis.Format(Chart.ValueScale, Chart.ValueScale.Value(category(item)));
+        }
+
+        /// <inheritdoc />
+        public override object DataAt(double x, double y)
+        {
+            var value = ComposeValue(Chart.CategoryScale);
+            var category = ComposeCategory(Chart.ValueScale);
+            var ticks = Chart.CategoryScale.Ticks(Chart.ValueAxis.TickDistance);
+            var x0 = Chart.CategoryScale.Scale(Math.Max(0, ticks.Start));
+
+            var barSeries = VisibleBarSeries;
+            var index = barSeries.IndexOf(this);
+            var padding = Chart.BarOptions.Margin;
+            var bandHeight = BandHeight;
+            var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
+
+            foreach (var data in Items)
+            {
+                var startY = category(data) - bandHeight / 2 + index * height + index * padding;
+                var endY = startY + height;
+                var dataX = value(data);
+                var startX = Math.Min(dataX, x0);
+                var endX = Math.Max(dataX, x0);
+
+                if (startX <= x && x <= endX && startY <= y && y <= endY)
+                {
+                    return data;
+                }
+            }
+
+            return null;
+        }
+
+        /// <inheritdoc />
+        internal override double TooltipY(TItem item)
+        {
+            var category = ComposeCategory(Chart.ValueScale);
+            var barSeries = VisibleBarSeries;
+            var index = barSeries.IndexOf(this);
+            var padding = Chart.BarOptions.Margin;
+            var bandHeight = BandHeight;
+            var height = bandHeight / barSeries.Count() - padding + padding / barSeries.Count();
+            var y = category(item) - bandHeight / 2 + index * height + index * padding;
+
+            return y + height / 2;
+        }
+
+        /// <inheritdoc />
+        public override IEnumerable<ChartDataLabel> GetDataLabels(double offsetX, double offsetY)
+        {
+            var list = new List<ChartDataLabel>();
+            
+            foreach (var d in Data)
+            {
+                list.Add(new ChartDataLabel 
+                { 
+                    Position = new Point() { X = TooltipX(d) + offsetX + 8, Y = TooltipY(d) + offsetY },
+                    TextAnchor = "start",
+                    Text = Chart.ValueAxis.Format(Chart.CategoryScale, Value(d))
+                });
+            }
+
+            return list;
+        }
+    }
+}

Radzen.Blazor/RadzenBody.razor

@@ -6,41 +6,3 @@
         @ChildContent
     </div>
 }
-@code {
-    [Parameter]
-    public override string Style { get; set; } = "margin-top: 51px; margin-bottom: 57px; margin-left:250px;";
-
-    protected override string GetComponentCssClass()
-    {
-        return "body";
-    }
-
-    public void Toggle()
-    {
-        Expanded = !Expanded;
-
-        StateHasChanged();
-    }
-
-    protected string GetStyle()
-    {
-        var marginLeft = 250;
-
-        if (!string.IsNullOrEmpty(Style))
-        {
-            var marginLeftStyle = Style.Split(';').Where(i => i.Split(':')[0].Contains("margin-left")).FirstOrDefault();
-            if (!string.IsNullOrEmpty(marginLeftStyle) && marginLeftStyle.Contains("px"))
-            {
-                marginLeft = int.Parse(marginLeftStyle.Split(':')[1].Trim().Replace("px", "").Split('.')[0].Trim());
-            }
-        }
-
-        return $"{Style}; margin-left: {(Expanded ? 0 : marginLeft)}px";
-    }
-
-    [Parameter]
-    public bool Expanded { get; set; } = false;
-
-    [Parameter]
-    public EventCallback<bool> ExpandedChanged { get; set; }
-}

Radzen.Blazor/RadzenBody.razor.cs

@@ -0,0 +1,126 @@
+using Microsoft.AspNetCore.Components;
+using System.Linq;
+using Radzen.Blazor.Rendering;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.JSInterop;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenBody component.
+    /// </summary>
+    public partial class RadzenBody : RadzenComponentWithChildren
+    {
+        private const string DefaultStyle = "margin-top: 51px; margin-bottom: 57px; margin-left:250px;";
+
+        /// <summary>
+        /// Gets or sets the style.
+        /// </summary>
+        /// <value>The style.</value>
+        [Parameter]
+        public override string Style { get; set; } = DefaultStyle;
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            var classList = ClassList.Create("rz-body")
+                                     .Add("body")
+                                     .Add("body-expanded", Expanded);
+                                     
+            return classList.ToString();
+        }
+
+        /// <summary>
+        /// Toggles this instance width and left margin.
+        /// </summary>
+        public void Toggle()
+        {
+            Expanded = !Expanded;
+
+            StateHasChanged();
+        }
+
+        /// <summary>
+        /// The <see cref="RadzenLayout" /> this component is nested in.
+        /// </summary>
+        [CascadingParameter]
+        public RadzenLayout Layout { get; set; }
+
+        /// <summary>
+        /// Gets the style.
+        /// </summary>
+        /// <returns>System.String.</returns>
+        protected string GetStyle()
+        {
+            if (Layout == null)
+            {
+                var marginLeft = 250;
+                var style = Style;
+
+                if (!string.IsNullOrEmpty(Style))
+                {
+                    var marginLeftStyle = Style.Split(';').Where(i => i.Split(':')[0].Contains("margin-left")).FirstOrDefault();
+                    if (!string.IsNullOrEmpty(marginLeftStyle) && marginLeftStyle.Contains("px"))
+                    {
+                        marginLeft = int.Parse(marginLeftStyle.Split(':')[1].Trim().Replace("px", "").Split('.')[0].Trim());
+                    }
+                }
+
+                return $"{Style}; margin-left: {(Expanded ? 0 : marginLeft)}px";
+            }
+            else
+            {
+                var style = Style;
+
+                if (!string.IsNullOrEmpty(style))
+                {
+                    style = style.Replace(DefaultStyle, "");
+                }
+
+                return $"{style}";
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenBody"/> is expanded.
+        /// </summary>
+        /// <value><c>true</c> if expanded; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Expanded { get; set; } = false;
+
+        /// <summary>
+        /// Gets or sets a callback raised when the component is expanded or collapsed.
+        /// </summary>
+        /// <value>The expanded changed callback.</value>
+        [Parameter]
+        public EventCallback<bool> ExpandedChanged { get; set; }
+
+        [Inject]
+        NavigationManager NavigationManager { get; set; }
+
+        /// <inheritdoc />
+        protected override Task OnInitializedAsync()
+        {
+            NavigationManager.LocationChanged += OnLocationChanged;
+
+            return base.OnInitializedAsync();
+        }
+
+        private void OnLocationChanged(object sender, LocationChangedEventArgs e)
+        {
+            if (IsJSRuntimeAvailable && Layout != null)
+            {
+                JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('{GetId()}').scrollTop = 0");
+            }
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            NavigationManager.LocationChanged -= OnLocationChanged;
+
+            base.Dispose();
+        }
+    }
+}

Radzen.Blazor/RadzenBreadCrumb.razor

@@ -0,0 +1,13 @@
+@inherits RadzenComponentWithChildren
+
+<CascadingValue Value="@Template">
+@if (Visible)
+{
+  <div class="@GetCssClass()" style="@Style" @attributes="@Attributes" id="@GetId()">
+    @if (ChildContent != null)
+    {
+        @ChildContent
+    }
+  </div>
+}
+</CascadingValue>

Radzen.Blazor/RadzenBreadCrumb.razor.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// A component to display a Bread Crumb style menu
+    /// </summary>
+    public partial class RadzenBreadCrumb : RadzenComponentWithChildren
+    {
+        /// <summary>
+        /// An optional RenderFragment that is rendered per Item
+        /// </summary>
+        [Parameter]
+        public RenderFragment<RadzenBreadCrumbItem> Template { get; set; }
+
+        /// <inheritdoc/>
+        protected override string GetComponentCssClass()
+        {
+            return "rz-breadcrumb";
+        }
+    }
+
+}

Radzen.Blazor/RadzenBreadCrumbItem.razor

@@ -0,0 +1,30 @@
+@inherits RadzenComponent
+
+@if (Visible)
+{
+    <div class="@GetCssClass()" id="@GetId()" style="@Style" @attributes="@Attributes">
+        @if (ChildContent != null)
+        {
+            @ChildContent
+        }
+        else if (Template != null)
+        {
+            @Template(this)
+        }
+        else
+        {
+            @if (!string.IsNullOrWhiteSpace(Path))
+            {
+                <RadzenLink Icon="@Icon" Path="@Path" Text="@Text" />
+            }
+            else
+            {
+                @if (!string.IsNullOrWhiteSpace(Icon))
+                {
+                    <RadzenIcon Icon="@Icon" />
+                }
+                <RadzenLabel Text="@Text" />
+            }
+        }
+    </div>
+}

Radzen.Blazor/RadzenBreadCrumbItem.razor.cs

@@ -0,0 +1,47 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Bread Crumb Item Component
+    /// </summary>
+    public partial class RadzenBreadCrumbItem : RadzenComponent
+    {
+        /// <summary>
+        /// Cascaded Template Parameter from <see cref="RadzenBreadCrumb"/> Component
+        /// </summary>
+        [CascadingParameter]
+        public RenderFragment<RadzenBreadCrumbItem> Template { get; set; }
+
+        /// <summary>
+        /// The Displayed Text
+        /// </summary>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// An optional Link to be rendendered
+        /// </summary>
+        [Parameter]
+        public string Path { get; set; }
+
+        /// <summary>
+        /// An optional Icon to be rendered
+        /// </summary>
+        [Parameter]
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Template Parameter used only for this Item
+        /// Note: this overrides the <see cref="Template"/> Cascading Parameter
+        /// </summary>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        /// <inheritdoc/>
+        protected override string GetComponentCssClass()
+        {
+            return "rz-breadcrumb-item";
+        }
+    }
+}

Radzen.Blazor/RadzenButton.razor

@@ -5,7 +5,7 @@
     <button @ref="@Element" style="@Style" disabled="@IsDisabled"
             type="@Enum.GetName(typeof(ButtonType), ButtonType).ToLower()"
             @attributes="Attributes" class="@GetCssClass()" id="@GetId()"
-            @onclick="@((args) => OnClick(args))">
+            @onclick="@OnClick">
         @if (ChildContent != null)
         {
             @ChildContent
@@ -38,69 +38,3 @@
         }
     </button>
 }
-@code {
-    private string getButtonSize()
-    {
-        return Size == ButtonSize.Medium ? "md" : "sm";
-    }
-
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [Parameter]
-    public string Text { get; set; } = "";
-
-    [Parameter]
-    public string Icon { get; set; }
-
-    [Parameter]
-    public string Image { get; set; }
-
-    [Parameter]
-    public ButtonStyle ButtonStyle { get; set; } = ButtonStyle.Primary;
-
-    [Parameter]
-    public ButtonType ButtonType { get; set; } = ButtonType.Button;
-
-    [Parameter]
-    public ButtonSize Size { get; set; } = ButtonSize.Medium;
-
-    [Parameter]
-    public bool Disabled { get; set; }
-
-    [Parameter]
-    public EventCallback<MouseEventArgs> Click { get; set; }
-
-    [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)
-    {
-        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()}{(IsDisabled ? " rz-state-disabled" : "")}{(string.IsNullOrEmpty(Text) && !string.IsNullOrEmpty(Icon) ? " rz-button-icon-only" : "")}";
-    }
-}

Radzen.Blazor/RadzenButton.razor.cs

@@ -0,0 +1,137 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenButton component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenButton Click=@(args => Console.WriteLine("Button clicked")) Text="Button" /&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenButton : RadzenComponent
+    {
+        private string getButtonSize()
+        {
+            return Size == ButtonSize.Medium ? "md" : "sm";
+        }
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; } = "";
+
+        /// <summary>
+        /// Gets or sets the icon.
+        /// </summary>
+        /// <value>The icon.</value>
+        [Parameter]
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the image.
+        /// </summary>
+        /// <value>The image.</value>
+        [Parameter]
+        public string Image { get; set; }
+
+        /// <summary>
+        /// Gets or sets the button style.
+        /// </summary>
+        /// <value>The button style.</value>
+        [Parameter]
+        public ButtonStyle ButtonStyle { get; set; } = ButtonStyle.Primary;
+
+        /// <summary>
+        /// Gets or sets the type of the button.
+        /// </summary>
+        /// <value>The type of the button.</value>
+        [Parameter]
+        public ButtonType ButtonType { get; set; } = ButtonType.Button;
+
+        /// <summary>
+        /// Gets or sets the size.
+        /// </summary>
+        /// <value>The size.</value>
+        [Parameter]
+        public ButtonSize Size { get; set; } = ButtonSize.Medium;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenButton"/> is disabled.
+        /// </summary>
+        /// <value><c>true</c> if disabled; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Disabled { get; set; }
+
+        /// <summary>
+        /// Gets or sets the click callback.
+        /// </summary>
+        /// <value>The click callback.</value>
+        [Parameter]
+        public EventCallback<MouseEventArgs> Click { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this instance busy text is shown.
+        /// </summary>
+        /// <value><c>true</c> if this instance busy text is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool IsBusy { get; set; }
+
+        /// <summary>
+        /// Gets or sets the busy text.
+        /// </summary>
+        /// <value>The busy text.</value>
+        [Parameter]
+        public string BusyText { get; set; } = "";
+
+        /// <summary>
+        /// Gets a value indicating whether this instance is disabled.
+        /// </summary>
+        /// <value><c>true</c> if this instance is disabled; otherwise, <c>false</c>.</value>
+        public bool IsDisabled { get => Disabled || IsBusy; }
+
+
+        bool clicking;
+        /// <summary>
+        /// Handles the <see cref="E:Click" /> event.
+        /// </summary>
+        /// <param name="args">The <see cref="MouseEventArgs"/> instance containing the event data.</param>
+        public async Task OnClick(MouseEventArgs args)
+        {
+            if (clicking)
+            {
+                return;
+            }
+
+            try
+            {
+                clicking = true;
+
+                await Click.InvokeAsync(args);
+            }
+            finally
+            {
+                clicking = false;
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return $"rz-button rz-button-{getButtonSize()} btn-{Enum.GetName(typeof(ButtonStyle), ButtonStyle).ToLowerInvariant()}{(IsDisabled ? " rz-state-disabled" : "")}{(string.IsNullOrEmpty(Text) && !string.IsNullOrEmpty(Icon) ? " rz-button-icon-only" : "")}";
+        }
+    }
+}

Radzen.Blazor/RadzenCard.razor

@@ -4,10 +4,3 @@
 {
     <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">@ChildContent</div>
 }
-
-@code {
-    protected override string GetComponentCssClass()
-    {
-        return "rz-card card";
-    }
-}

Radzen.Blazor/RadzenCard.razor.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using System;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenCard component.
+    /// </summary>
+    public partial class RadzenCard : RadzenComponentWithChildren
+    {
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return "rz-card card";
+        }
+    }
+}

Radzen.Blazor/RadzenChart.razor

@@ -26,6 +26,7 @@
                     @if (series.Visible)
                     {
                         @series.Render(CategoryScale, ValueScale);
+                        @series.RenderOverlays(CategoryScale, ValueScale);
                     }
                 }
             </g>
@@ -45,398 +46,3 @@
 }
 </div>
 }
-@code {
-    [Parameter]
-    public ColorScheme ColorScheme { get; set; }
-
-    double? Width { get; set; }
-
-    double? Height { get; set; }
-
-    double MarginTop { get; set; }
-
-    double MarginLeft { get; set; }
-
-    double MarginRight { get; set; }
-
-    double MarginBottom { get; set; }
-
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    internal ScaleBase CategoryScale { get; set; } = new LinearScale();
-    internal ScaleBase ValueScale { get; set; } = new LinearScale();
-    internal IList<IChartSeries> Series { get; set; } = new List<IChartSeries>();
-    internal RadzenColumnOptions ColumnOptions { get; set; } = new RadzenColumnOptions();
-    internal RadzenBarOptions BarOptions { get; set; } = new RadzenBarOptions();
-
-    internal RadzenLegend Legend { get; set; } = new RadzenLegend();
-    internal RadzenCategoryAxis CategoryAxis { get; set; } = new RadzenCategoryAxis();
-    internal RadzenValueAxis ValueAxis { get; set; } = new RadzenValueAxis();
-    internal RadzenChartTooltipOptions Tooltip { get; set; } = new RadzenChartTooltipOptions();
-
-    internal void AddSeries(IChartSeries series)
-    {
-        if (!Series.Contains(series))
-        {
-            Series.Add(series);
-        }
-    }
-
-    internal void RemoveSeries(IChartSeries series)
-    {
-        Series.Remove(series);
-    }
-
-    private bool ShouldRenderAxes()
-    {
-        var pieType = typeof(RadzenPieSeries<>);
-        var donutType = typeof(RadzenDonutSeries<>);
-
-        return !Series.All(series =>
-        {
-            var type = series.GetType().GetGenericTypeDefinition();
-
-            return type == pieType || type == donutType;
-        });
-    }
-
-    internal bool ShouldInvertAxes()
-    {
-        return Series.Count > 0 && Series.All(series => series is IChartBarSeries);
-    }
-
-    private bool UpdateScales()
-    {
-        var valueScale = ValueScale;
-        var categoryScale = CategoryScale;
-
-        CategoryScale = new LinearScale { Output = CategoryScale.Output };
-        ValueScale = new LinearScale { Output = ValueScale.Output };
-
-        var visibleSeries = Series.Where(series => series.Visible).ToList();
-
-        if (!visibleSeries.Any() && invisibleSeries.Any())
-        {
-            visibleSeries.Add(invisibleSeries.Last());
-        }
-
-        foreach (var series in visibleSeries)
-        {
-            CategoryScale = series.TransformCategoryScale(CategoryScale);
-            ValueScale = series.TransformValueScale(ValueScale);
-        }
-
-        AxisBase xAxis = CategoryAxis;
-        AxisBase yAxis = ValueAxis;
-
-        if (ShouldInvertAxes())
-        {
-            xAxis = ValueAxis;
-            yAxis = CategoryAxis;
-        }
-        else
-        {
-            CategoryScale.Padding = CategoryAxis.Padding;
-        }
-
-        CategoryScale.Resize(xAxis.Min, xAxis.Max);
-
-        if (xAxis.Step != null)
-        {
-            CategoryScale.Step = xAxis.Step;
-            CategoryScale.Round = false;
-        }
-
-        ValueScale.Resize(yAxis.Min, yAxis.Max);
-
-        if (yAxis.Step != null)
-        {
-            ValueScale.Step = yAxis.Step;
-            ValueScale.Round = false;
-        }
-
-        var legendSize = Legend.Measure(this);
-        var valueAxisSize = ValueAxis.Measure(this);
-        var categoryAxisSize = CategoryAxis.Measure(this);
-
-        if (!ShouldRenderAxes())
-        {
-            valueAxisSize = categoryAxisSize = 0;
-        }
-
-        MarginTop = MarginRight = 32;
-        MarginLeft = valueAxisSize;
-        MarginBottom = Math.Max(32, categoryAxisSize);
-
-        if (Legend.Visible)
-        {
-            if (Legend.Position == LegendPosition.Right || Legend.Position == LegendPosition.Left)
-            {
-                if (Legend.Position == LegendPosition.Right)
-                {
-                    MarginRight = legendSize + 16;
-                }
-                else
-                {
-                    MarginLeft = legendSize + 16 + valueAxisSize;
-                }
-            }
-            else if (Legend.Position == LegendPosition.Top || Legend.Position == LegendPosition.Bottom)
-            {
-                if (Legend.Position == LegendPosition.Top)
-                {
-                    MarginTop = legendSize + 16;
-                }
-                else
-                {
-                    MarginBottom = legendSize + 16 + categoryAxisSize;
-                }
-            }
-        }
-
-        CategoryScale.Output = new ScaleRange { Start = MarginLeft, End = Width.Value - MarginRight };
-        ValueScale.Output = new ScaleRange { Start = Height.Value - MarginBottom, End = MarginTop };
-
-        ValueScale.Fit(ValueAxis.TickDistance);
-        CategoryScale.Fit(CategoryAxis.TickDistance);
-
-        var stateHasChanged = false;
-
-        if (!ValueScale.IsEqualTo(valueScale))
-        {
-            stateHasChanged = true;
-        }
-
-        if (!CategoryScale.IsEqualTo(categoryScale))
-        {
-            stateHasChanged = true;
-        }
-
-        return stateHasChanged;
-    }
-
-    [JSInvokable]
-    public void Resize(double width, double height)
-    {
-        var stateHasChanged = false;
-
-        if (width != Width)
-        {
-            Width = width;
-            stateHasChanged = true;
-
-            CategoryScale.Output = new ScaleRange { Start = MarginLeft, End = Width.Value - MarginRight };
-        }
-
-        if (height != Height)
-        {
-            Height = height;
-            stateHasChanged = true;
-
-            ValueScale.Output = new ScaleRange { Start = Height.Value - MarginBottom, End = MarginTop };
-        }
-
-        if (stateHasChanged)
-        {
-            Refresh();
-        }
-    }
-
-    RenderFragment tooltip;
-    object tooltipData;
-    double mouseX;
-    double mouseY;
-
-    [JSInvokable]
-    public void MouseMove(double x, double y)
-    {
-        mouseX = x;
-        mouseY = y;
-
-        DisplayTooltip();
-    }
-
-    internal void DisplayTooltip()
-    {
-        if (Tooltip.Visible)
-        {
-            foreach (var series in Series)
-            {
-                if (series.Visible && series.Contains(mouseX - MarginLeft, mouseY - MarginTop))
-                {
-                    var data = series.DataAt(mouseX - MarginLeft, mouseY - MarginTop);
-
-                    if (data != tooltipData)
-                    {
-                        tooltipData = data;
-                        tooltip = series.RenderTooltip(data, MarginLeft, MarginTop);
-                        StateHasChanged();
-                    }
-
-                    return;
-                }
-            }
-
-            if (tooltip != null)
-            {
-                tooltipData = null;
-                tooltip = null;
-
-                StateHasChanged();
-            }
-        }
-    }
-
-    private IList<IChartSeries> invisibleSeries = new List<IChartSeries>();
-
-    internal void ToggleSeries(IChartSeries series)
-    {
-        series.Visible = !series.Visible;
-
-        if (series.Visible)
-        {
-            invisibleSeries.Remove(series);
-        }
-        else
-        {
-            invisibleSeries.Add(series);
-        }
-
-        Refresh();
-    }
-
-    private bool widthAndHeightAreSet = false;
-    private bool firstRender = true;
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await base.OnAfterRenderAsync(firstRender);
-
-        this.firstRender = firstRender;
-
-        if (firstRender || visibleChanged)
-        {
-            visibleChanged = false;
-
-            if (Visible)
-            {
-                var rect = await JSRuntime.InvokeAsync<Rect>("Radzen.createChart", Element, Reference);
-
-                if (!widthAndHeightAreSet)
-                {
-                    widthAndHeightAreSet = true;
-
-                    Resize(rect.Width, rect.Height);
-                }
-            }
-        }
-    }
-
-    internal string ClipPath { get; set; }
-
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        ClipPath = $"clipPath{UniqueID}";
-        CategoryAxis.Chart = this;
-        ValueAxis.Chart = this;
-
-        Initialize();
-    }
-
-    private void Initialize()
-    {
-        double width = 0;
-        double height = 0;
-
-        if (CurrentStyle.ContainsKey("height"))
-        {
-            var pixelHeight = CurrentStyle["height"];
-
-            if (pixelHeight.EndsWith("px"))
-            {
-                height = Convert.ToDouble(pixelHeight.TrimEnd("px".ToCharArray()));
-            }
-        }
-
-        if (CurrentStyle.ContainsKey("width"))
-        {
-            var pixelWidth = CurrentStyle["width"];
-
-            if (pixelWidth.EndsWith("px"))
-            {
-                width = Convert.ToDouble(pixelWidth.TrimEnd("px".ToCharArray()));
-            }
-        }
-
-        if (width > 0 && height > 0)
-        {
-            widthAndHeightAreSet = true;
-
-            Width = width;
-            Height = height;
-
-            CategoryScale.Output = new ScaleRange { Start = MarginLeft, End = Width.Value - MarginRight };
-            ValueScale.Output = new ScaleRange { Start = Height.Value - MarginBottom, End = MarginTop };
-        }
-    }
-
-    private bool visibleChanged = false;
-
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        bool shouldRefresh = parameters.DidParameterChange(nameof(Style), Style);
-
-        visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);
-
-        await base.SetParametersAsync(parameters);
-
-        if (shouldRefresh)
-        {
-            Initialize();
-        }
-
-        if (visibleChanged && !firstRender)
-        {
-            if (Visible == false)
-            {
-                await JSRuntime.InvokeVoidAsync("Radzen.destroyChart", Element);
-            }
-        }
-    }
-
-    internal void Refresh(bool force = true)
-    {
-        if (widthAndHeightAreSet)
-        {
-            var stateHasChanged = UpdateScales();
-
-            if (stateHasChanged || force)
-            {
-                StateHasChanged();
-            }
-        }
-    }
-
-    public void Reload()
-    {
-        Refresh(true);
-    }
-
-    public override void Dispose()
-    {
-        base.Dispose();
-
-        if (Visible && IsJSRuntimeAvailable)
-        {
-            JSRuntime.InvokeVoidAsync("Radzen.destroyChart", Element);
-        }
-    }
-
-    protected override string GetComponentCssClass()
-    {
-        return $"rz-chart rz-scheme-{ColorScheme.ToString().ToLower()}";
-    }
-}

Radzen.Blazor/RadzenChart.razor.cs

@@ -0,0 +1,495 @@
+using Microsoft.JSInterop;
+using Radzen.Blazor.Rendering;
+using Microsoft.AspNetCore.Components;
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Linq;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Displays line, area, donut, pie, bar or column series.
+    /// </summary>
+    /// <example>
+    /// <code>
+    ///   &lt;RadzenChart&gt;
+    ///       &lt;RadzenColumnSeries Data=@revenue CategoryProperty="Quarter" ValueProperty="Revenue" /&gt;
+    ///   &lt;/RadzenChart&gt;
+    ///   @code {
+    ///       class DataItem
+    ///       {
+    ///           public string Quarter { get; set; }
+    ///           public double Revenue { get; set; }
+    ///       }
+    ///       DataItem[] revenue = new DataItem[]
+    ///       {
+    ///           new DataItem { Quarter = "Q1", Revenue = 234000 },
+    ///           new DataItem { Quarter = "Q2", Revenue = 284000 },
+    ///           new DataItem { Quarter = "Q3", Revenue = 274000 },
+    ///           new DataItem { Quarter = "Q4", Revenue = 294000 }
+    ///       };
+    ///   }
+    /// </code>
+    /// </example>
+    public partial class RadzenChart : RadzenComponent
+    {
+        /// <summary>
+        /// Gets or sets the color scheme used to render the series.
+        /// </summary>
+        /// <value>The color scheme.</value>
+        [Parameter]
+        public ColorScheme ColorScheme { get; set; }
+
+        /// <summary>
+        /// A callback that will be invoked when the user clicks on a series. 
+        /// </summary>
+        [Parameter]
+        public EventCallback<SeriesClickEventArgs> SeriesClick { get; set; }
+
+        /// <summary>
+        /// A callback that will be invoked when the user clicks on a legend. 
+        /// </summary>
+        [Parameter]
+        public EventCallback<LegendClickEventArgs> LegendClick { get; set; }
+        double? Width { get; set; }
+
+        double? Height { get; set; }
+
+        double MarginTop { get; set; }
+
+        double MarginLeft { get; set; }
+
+        double MarginRight { get; set; }
+
+        double MarginBottom { get; set; }
+
+        /// <summary>
+        /// Gets or sets the child content. Used to specify series and other configuration.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        internal ScaleBase CategoryScale { get; set; } = new LinearScale();
+        internal ScaleBase ValueScale { get; set; } = new LinearScale();
+        internal IList<IChartSeries> Series { get; set; } = new List<IChartSeries>();
+        internal RadzenColumnOptions ColumnOptions { get; set; } = new RadzenColumnOptions();
+        internal RadzenBarOptions BarOptions { get; set; } = new RadzenBarOptions();
+        internal RadzenLegend Legend { get; set; } = new RadzenLegend();
+        internal RadzenCategoryAxis CategoryAxis { get; set; } = new RadzenCategoryAxis();
+        internal RadzenValueAxis ValueAxis { get; set; } = new RadzenValueAxis();
+        internal RadzenChartTooltipOptions Tooltip { get; set; } = new RadzenChartTooltipOptions();
+        internal void AddSeries(IChartSeries series)
+        {
+            if (!Series.Contains(series))
+            {
+                Series.Add(series);
+            }
+        }
+
+        internal void RemoveSeries(IChartSeries series)
+        {
+            Series.Remove(series);
+        }
+
+        private bool ShouldRenderAxes()
+        {
+            var pieType = typeof(RadzenPieSeries<>);
+            var donutType = typeof(RadzenDonutSeries<>);
+
+            return !Series.All(series =>
+            {
+                var type = series.GetType().GetGenericTypeDefinition();
+
+                return type == pieType || type == donutType;
+            });
+        }
+
+        internal bool ShouldInvertAxes()
+        {
+            return Series.Count > 0 && Series.All(series => series is IChartBarSeries);
+        }
+
+        private bool UpdateScales()
+        {
+            var valueScale = ValueScale;
+            var categoryScale = CategoryScale;
+
+            CategoryScale = new LinearScale { Output = CategoryScale.Output };
+            ValueScale = new LinearScale { Output = ValueScale.Output };
+
+            var visibleSeries = Series.Where(series => series.Visible).ToList();
+            var invisibleSeries = Series.Where(series => series.Visible == false).ToList();
+
+            if (!visibleSeries.Any() && invisibleSeries.Any())
+            {
+                visibleSeries.Add(invisibleSeries.Last());
+            }
+
+            foreach (var series in visibleSeries)
+            {
+                CategoryScale = series.TransformCategoryScale(CategoryScale);
+                ValueScale = series.TransformValueScale(ValueScale);
+            }
+
+            AxisBase xAxis = CategoryAxis;
+            AxisBase yAxis = ValueAxis;
+
+            if (ShouldInvertAxes())
+            {
+                xAxis = ValueAxis;
+                yAxis = CategoryAxis;
+            }
+            else
+            {
+                CategoryScale.Padding = CategoryAxis.Padding;
+            }
+
+            CategoryScale.Resize(xAxis.Min, xAxis.Max);
+
+            if (xAxis.Step != null)
+            {
+                CategoryScale.Step = xAxis.Step;
+                CategoryScale.Round = false;
+            }
+
+            ValueScale.Resize(yAxis.Min, yAxis.Max);
+
+            if (yAxis.Step != null)
+            {
+                ValueScale.Step = yAxis.Step;
+                ValueScale.Round = false;
+            }
+
+            var legendSize = Legend.Measure(this);
+            var valueAxisSize = ValueAxis.Measure(this);
+            var categoryAxisSize = CategoryAxis.Measure(this);
+
+            if (!ShouldRenderAxes())
+            {
+                valueAxisSize = categoryAxisSize = 0;
+            }
+
+            MarginTop = MarginRight = 32;
+            MarginLeft = valueAxisSize;
+            MarginBottom = Math.Max(32, categoryAxisSize);
+
+            if (Legend.Visible)
+            {
+                if (Legend.Position == LegendPosition.Right || Legend.Position == LegendPosition.Left)
+                {
+                    if (Legend.Position == LegendPosition.Right)
+                    {
+                        MarginRight = legendSize + 16;
+                    }
+                    else
+                    {
+                        MarginLeft = legendSize + 16 + valueAxisSize;
+                    }
+                }
+                else if (Legend.Position == LegendPosition.Top || Legend.Position == LegendPosition.Bottom)
+                {
+                    if (Legend.Position == LegendPosition.Top)
+                    {
+                        MarginTop = legendSize + 16;
+                    }
+                    else
+                    {
+                        MarginBottom = legendSize + 16 + categoryAxisSize;
+                    }
+                }
+            }
+
+            CategoryScale.Output = new ScaleRange { Start = MarginLeft, End = Width.Value - MarginRight };
+            ValueScale.Output = new ScaleRange { Start = Height.Value - MarginBottom, End = MarginTop };
+
+            ValueScale.Fit(ValueAxis.TickDistance);
+            CategoryScale.Fit(CategoryAxis.TickDistance);
+
+            var stateHasChanged = false;
+
+            if (!ValueScale.IsEqualTo(valueScale))
+            {
+                stateHasChanged = true;
+            }
+
+            if (!CategoryScale.IsEqualTo(categoryScale))
+            {
+                stateHasChanged = true;
+            }
+
+            return stateHasChanged;
+        }
+
+        /// <summary>
+        /// Invoked via interop when the RadzenChart resizes. Display the series with the new dimensions.
+        /// </summary>
+        /// <param name="width">The width.</param>
+        /// <param name="height">The height.</param>
+        [JSInvokable]
+        public async Task Resize(double width, double height)
+        {
+            var stateHasChanged = false;
+
+            if (width != Width)
+            {
+                Width = width;
+                stateHasChanged = true;
+
+                CategoryScale.Output = new ScaleRange { Start = MarginLeft, End = Width.Value - MarginRight };
+            }
+
+            if (height != Height)
+            {
+                Height = height;
+                stateHasChanged = true;
+
+                ValueScale.Output = new ScaleRange { Start = Height.Value - MarginBottom, End = MarginTop };
+            }
+
+            if (stateHasChanged)
+            {
+                await Refresh();
+            }
+        }
+
+        RenderFragment tooltip;
+        object tooltipData;
+        double mouseX;
+        double mouseY;
+
+        /// <summary>
+        /// Invoked via interop when the user moves the mouse over the RadzenChart. Displays the tooltip.
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
+        [JSInvokable]
+        public async Task MouseMove(double x, double y)
+        {
+            mouseX = x;
+            mouseY = y;
+
+            await DisplayTooltip();
+        }
+
+        /// <summary>
+        /// Invoked via interop when the user clicks the RadzenChart. Raises the <see cref="SeriesClick" /> handler.
+        /// </summary>
+        /// <param name="x">The x.</param>
+        /// <param name="y">The y.</param>
+        [JSInvokable]
+        public async Task Click(double x, double y)
+        {
+            foreach (var series in Series)
+            {
+                if (series.Visible && series.Contains(mouseX - MarginLeft, mouseY - MarginTop, 5))
+                {
+                    var data = series.DataAt(mouseX - MarginLeft, mouseY - MarginTop);
+
+                    if (data != null)
+                    {
+                        await series.InvokeClick(SeriesClick, data);
+                    }
+
+                    return;
+                }
+            }
+        }
+
+        internal async Task DisplayTooltip()
+        {
+            if (Tooltip.Visible)
+            {
+                var orderedSeries = Series.OrderBy(s => s.RenderingOrder).Reverse();
+
+                foreach (var series in orderedSeries)
+                {
+                    if (series.Visible)
+                    {
+                        foreach (var overlay in series.Overlays.Reverse())
+                        {
+                            if (overlay.Visible && overlay.Contains(mouseX - MarginLeft, mouseY - MarginTop, 25))
+                            {
+                                tooltipData = null;
+                                tooltip = overlay.RenderTooltip(mouseX, mouseY, MarginLeft, MarginTop);
+                                StateHasChanged();
+                                await Task.Yield();
+                                
+                                return;
+                            }
+                        }
+
+                        if (series.Contains(mouseX - MarginLeft, mouseY - MarginTop, 25))
+                        {
+                            var data = series.DataAt(mouseX - MarginLeft, mouseY - MarginTop);
+
+                            if (data != tooltipData)
+                            {
+                                tooltipData = data;
+                                tooltip = series.RenderTooltip(data, MarginLeft, MarginTop);
+                                StateHasChanged();
+                                await Task.Yield();
+                            }
+
+                            return;
+                        }
+                    }
+                }
+
+                if (tooltip != null)
+                {
+                    tooltipData = null;
+                    tooltip = null;
+
+                    StateHasChanged();
+                    await Task.Yield();
+                }
+            }
+        }
+
+        private bool widthAndHeightAreSet = false;
+        private bool firstRender = true;
+
+        /// <inheritdoc />
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            await base.OnAfterRenderAsync(firstRender);
+
+            this.firstRender = firstRender;
+
+            if (firstRender || visibleChanged)
+            {
+                visibleChanged = false;
+
+                if (Visible)
+                {
+                    var rect = await JSRuntime.InvokeAsync<Rect>("Radzen.createChart", Element, Reference);
+
+                    if (!widthAndHeightAreSet)
+                    {
+                        widthAndHeightAreSet = true;
+
+                        await Resize(rect.Width, rect.Height);
+                    }
+                }
+            }
+        }
+
+        internal string ClipPath { get; set; }
+
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            ClipPath = $"clipPath{UniqueID}";
+            CategoryAxis.Chart = this;
+            ValueAxis.Chart = this;
+
+            Initialize();
+        }
+
+        private void Initialize()
+        {
+            double width = 0;
+            double height = 0;
+
+            if (CurrentStyle.ContainsKey("height"))
+            {
+                var pixelHeight = CurrentStyle["height"];
+
+                if (pixelHeight.EndsWith("px"))
+                {
+                    height = Convert.ToDouble(pixelHeight.TrimEnd("px".ToCharArray()));
+                }
+            }
+
+            if (CurrentStyle.ContainsKey("width"))
+            {
+                var pixelWidth = CurrentStyle["width"];
+
+                if (pixelWidth.EndsWith("px"))
+                {
+                    width = Convert.ToDouble(pixelWidth.TrimEnd("px".ToCharArray()));
+                }
+            }
+
+            if (width > 0 && height > 0)
+            {
+                widthAndHeightAreSet = true;
+
+                Width = width;
+                Height = height;
+
+                CategoryScale.Output = new ScaleRange { Start = MarginLeft, End = Width.Value - MarginRight };
+                ValueScale.Output = new ScaleRange { Start = Height.Value - MarginBottom, End = MarginTop };
+            }
+        }
+
+        private bool visibleChanged = false;
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            bool shouldRefresh = parameters.DidParameterChange(nameof(Style), Style);
+
+            visibleChanged = parameters.DidParameterChange(nameof(Visible), Visible);
+
+            await base.SetParametersAsync(parameters);
+
+            if (shouldRefresh)
+            {
+                Initialize();
+            }
+
+            if (visibleChanged && !firstRender)
+            {
+                if (Visible == false)
+                {
+                    await JSRuntime.InvokeVoidAsync("Radzen.destroyChart", Element);
+                }
+            }
+        }
+
+        internal async Task Refresh(bool force = true)
+        {
+            if (widthAndHeightAreSet)
+            {
+
+                var stateHasChanged = UpdateScales();
+
+                if (stateHasChanged || force)
+                {
+                    StateHasChanged();
+                    await DisplayTooltip();
+                }
+            }
+        }
+
+        /// <summary>
+        /// Causes all series to refresh. Use it when <see cref="CartesianSeries{TItem}.Data" /> has changed.
+        /// </summary>
+        public async Task Reload()
+        {
+            await Refresh(true);
+        }
+
+        /// <inheritdoc />
+        public override void Dispose()
+        {
+            base.Dispose();
+
+            if (Visible && IsJSRuntimeAvailable)
+            {
+                JSRuntime.InvokeVoidAsync("Radzen.destroyChart", Element);
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return $"rz-chart rz-scheme-{ColorScheme.ToString().ToLowerInvariant()}";
+        }
+    }
+}

Radzen.Blazor/RadzenChartComponentBase.cs

@@ -1,13 +1,19 @@
-using System.Collections.Generic;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 
 namespace Radzen.Blazor
 {
+    /// <summary>
+    /// Base class of components that are rendered inside a <see cref="RadzenChart" />.
+    /// </summary>
     public abstract class RadzenChartComponentBase : ComponentBase
     {
         private RadzenChart chart;
 
+        /// <summary>
+        /// Used to inject the RadzenChart instance. Invokes <see cref="Initialize" />.
+        /// </summary>
+        /// <value>The chart.</value>
         [CascadingParameter]
         public RadzenChart Chart
         {
@@ -22,16 +28,24 @@ namespace Radzen.Blazor
             }
         }
 
+        /// <summary>
+        /// Perform initialization when <see cref="Chart" /> is set.
+        /// </summary>
         protected virtual void Initialize()
         {
 
         }
 
+        /// <summary>
+        /// Determines if RadzenChart should render.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
         protected virtual bool ShouldRefreshChart(ParameterView parameters)
         {
             return false;
         }
 
+        /// <inheritdoc />
         public override async Task SetParametersAsync(ParameterView parameters)
         {
             bool shouldRefresh = ShouldRefreshChart(parameters);
@@ -42,14 +56,25 @@ namespace Radzen.Blazor
 
             if (shouldRefresh)
             {
-                Chart.Refresh();
+                await Chart.Refresh();
             }
         }
 
+        /// <summary>
+        /// Validates the parameters.
+        /// </summary>
         protected virtual void ValidateParameters()
         {
         }
 
+        /// <summary>
+        /// Checks if the specified parameter changed.
+        /// </summary>
+        /// <typeparam name="T"></typeparam>
+        /// <param name="parameters">The parameters.</param>
+        /// <param name="parameterName">Name of the parameter.</param>
+        /// <param name="parameterValue">The parameter value.</param>
+        /// <returns><c>true</c> if the parameter changed, <c>false</c> otherwise.</returns>
         protected bool DidParameterChange<T>(ParameterView parameters, string parameterName, T parameterValue)
         {
             return parameters.DidParameterChange(parameterName, parameterValue);

Radzen.Blazor/RadzenChartTooltipOptions.cs

@@ -0,0 +1,36 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Contains <see cref="RadzenChart" /> tooltip configuration.
+    /// </summary>
+    public partial class RadzenChartTooltipOptions : RadzenChartComponentBase
+    {
+        /// <summary>
+        /// Gets or sets a value indicating whether to show tooltips. By defaults RadzenChart displays tooltips.
+        /// </summary>
+        /// <value><c>true</c> to display tooltips; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool Visible { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the CSS style of the tooltip.
+        /// </summary>
+        /// <value>The style.</value>
+        [Parameter]
+        public string Style { get; set; }
+
+        /// <inheritdoc />
+        protected override void Initialize()
+        {
+            Chart.Tooltip = this;
+        }
+
+        /// <inheritdoc />
+        protected override bool ShouldRefreshChart(ParameterView parameters)
+        {
+            return parameters.DidParameterChange(nameof(Style), Style);
+        }
+    }
+}

Radzen.Blazor/RadzenChartTooltipOptions.razor

@@ -1,18 +0,0 @@
-@inherits RadzenChartComponentBase
-@code {
-    [Parameter]
-    public bool Visible { get; set; } = true;
-
-    [Parameter]
-    public string Style { get; set; }
-
-    protected override void Initialize()
-    {
-        Chart.Tooltip = this;
-    }
-
-    protected override bool ShouldRefreshChart(ParameterView parameters)
-    {
-        return parameters.DidParameterChange(nameof(Style), Style);
-    }
-}

Radzen.Blazor/RadzenCheckBox.razor

@@ -1,88 +1,17 @@
 @using Radzen
+@using Radzen.Blazor.Rendering
 @using Microsoft.AspNetCore.Components.Forms
 @typeparam TValue
 @inherits FormComponent<TValue>
 @if (Visible)
 {
-    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" 
-         @onmouseup="@OnMouseUp" @onkeypress="@(async (args) => { if (args.Code == "Space") { await Toggle(); } })" style="@Style" tabindex="@TabIndex" id="@GetId()">
-        <div class="rz-helper-hidden-accessible">
-            <input type="text" name="@Name" value="@Value" tabindex="-1">
-        </div>
-        <div class="@getInnerCssClass()">
-            <span class="@getCheckBoxCssClass()"></span>
-        </div>
+<div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" @onkeypress=@OnKeyPress @onkeypress:preventDefault style="@Style" tabindex="@TabIndex" id="@GetId()">
+    <div class="rz-helper-hidden-accessible">
+        <input type="checkbox" @onchange=@Toggle value=@CheckBoxValue name=@Name id=@Name checked=@CheckBoxChecked
+            tabindex="-1">
     </div>
-}
-@code {
-    [Parameter]
-    public bool TriState { get; set; } = false;
-
-    string getInnerCssClass()
-    {
-        string activeState = !object.Equals(Value, false) ? " rz-state-active" : "";
-        string disabledState = Disabled ? " rz-state-disabled" : "";
-        return $"rz-chkbox-box {activeState}{disabledState}";
-    }
-
-    string getCheckBoxCssClass()
-    {
-        if (object.Equals(Value, true))
-        {
-            return "rz-chkbox-icon rzi rzi-check";
-        }
-        else if (object.Equals(Value, false))
-        {
-            return "rz-chkbox-icon";
-        }
-        else if (object.Equals(Value, null))
-        {
-            return "rz-chkbox-icon rzi rzi-times";
-        }
-
-        return "";
-    }
-
-    protected override string GetComponentCssClass()
-    {
-        var fieldCssClass = FieldIdentifier.FieldName != null ? EditContext?.FieldCssClass(FieldIdentifier) : "";
-        return $"rz-chkbox {(Disabled ? " rz-state-disabled" : "")} {fieldCssClass}";
-    }
-
-    public async Task OnMouseUp(MouseEventArgs args)
-    {
-        await Toggle();
-    }
-
-    async System.Threading.Tasks.Task Toggle()
-    {
-        if (Disabled)
-        {
-            return;
-        }
-
-        if (object.Equals(Value, false))
-        {
-            if (TriState)
-            {
-                Value = default(TValue);
-            }
-            else
-            {
-                Value = (TValue)(object)true;
-            }
-        }
-        else if (Value == null)
-        {
-            Value = (TValue)(object)true;
-        }
-        else if (object.Equals(Value, true))
-        {
-            Value = (TValue)(object)false;
-        }
-
-        await ValueChanged.InvokeAsync(Value);
-        if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-        await Change.InvokeAsync(Value);
-    }
+    <div class=@BoxClassList @onclick=@Toggle @onclick:preventDefault>
+        <span class=@IconClassList></span>
+    </div>
+</div>
 }

Radzen.Blazor/RadzenCheckBox.razor.cs

@@ -0,0 +1,84 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Radzen.Blazor.Rendering;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenCheckBox component.
+    /// </summary>
+    /// <typeparam name="TValue">The type of the value.</typeparam>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenCheckBox @bind-Value=@someValue TValue="bool" Change=@(args => Console.WriteLine($"Is checked: {args}")) /&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenCheckBox<TValue> : FormComponent<TValue>
+    {
+        /// <summary>
+        /// Gets or sets a value indicating whether is tri-state (true, false or null).
+        /// </summary>
+        /// <value><c>true</c> if tri-state; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool TriState { get; set; } = false;
+
+        ClassList BoxClassList => ClassList.Create("rz-chkbox-box")
+                                           .Add("rz-state-active", !object.Equals(Value, false))
+                                           .AddDisabled(Disabled);
+
+        ClassList IconClassList => ClassList.Create("rz-chkbox-icon")
+                                            .Add("rzi rzi-check", object.Equals(Value, true))
+                                            .Add("rzi rzi-times", object.Equals(Value, null));
+
+        string CheckBoxValue => CheckBoxChecked ? "true" : "false";
+
+        bool CheckBoxChecked => object.Equals(Value, true);
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return GetClassList("rz-chkbox").ToString();
+        }
+
+        async Task OnKeyPress(KeyboardEventArgs args)
+        {
+            if (args.Code == "Space")
+            {
+                await Toggle();
+            }
+        }
+
+        async Task Toggle()
+        {
+            if (Disabled)
+            {
+                return;
+            }
+
+            if (object.Equals(Value, false))
+            {
+                if (TriState)
+                {
+                    Value = default;
+                }
+                else
+                {
+                    Value = (TValue)(object)true;
+                }
+            }
+            else if (Value == null)
+            {
+                Value = (TValue)(object)true;
+            }
+            else if (object.Equals(Value, true))
+            {
+                Value = (TValue)(object)false;
+            }
+
+            await ValueChanged.InvokeAsync(Value);
+            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
+            await Change.InvokeAsync(Value);
+        }
+    }
+}

Radzen.Blazor/RadzenCheckBoxList.razor

@@ -1,6 +1,7 @@
 @using System.Linq
 @using System.Collections
 @using Radzen
+@using Radzen.Blazor.Rendering
 @using Microsoft.AspNetCore.Components.Forms
 @typeparam TValue
 @inherits FormComponent<IEnumerable<TValue>>
@@ -21,138 +22,12 @@
                     <div class="rz-helper-hidden-accessible">
                         <input type="checkbox" name="@Name" value="@item.Value" disabled="@Disabled" tabindex="-1">
                     </div>
-
-                    @if (IsSelected(item))
-                    {
-                        <div class="@($"rz-chkbox-box rz-state-active{getDisabledState(item)}")">
-                            <span class="rz-chkbox-icon rzi rzi-check"></span>
-                        </div>
-                    }
-                    else
-                    {
-                        <div class="@($"rz-chkbox-box {getDisabledState(item)}")">
-                            <span class="rz-chkbox-icon "></span>
-                        </div>
-                    }
+                    <div class=@ItemClassList(item)>
+                        <span class=@IconClassList(item)></span>
+                    </div>
                 </div>
                 <label class="rz-chkbox-label">@item.Text</label>
             </div>
         }
     </div>
 }
-
-@code {
-    [Parameter]
-    public string ValueProperty { get; set; }
-
-    [Parameter]
-    public string TextProperty { get; set; }
-
-    IEnumerable<RadzenCheckBoxListItem<TValue>> allItems
-    {
-        get
-        {
-            return items.Concat((Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()).Select(i =>
-            {
-                var item = new RadzenCheckBoxListItem<TValue>();
-                item.SetText((string)PropertyAccess.GetItemOrValueFromProperty(i, TextProperty));
-                item.SetValue((TValue)PropertyAccess.GetItemOrValueFromProperty(i, ValueProperty));
-                return item;
-            }));
-        }
-    }
-
-    IEnumerable _data = null;
-    [Parameter]
-    public virtual IEnumerable Data
-    {
-        get
-        {
-            return _data;
-        }
-        set
-        {
-            if (_data != value)
-            {
-                _data = value;
-                StateHasChanged();
-            }
-        }
-    }
-
-    protected override string GetComponentCssClass()
-    {
-        var fieldCssClass = FieldIdentifier.FieldName != null ? EditContext?.FieldCssClass(FieldIdentifier) : "";
-
-        return $"{(Orientation == Orientation.Horizontal ? "rz-checkbox-list-horizontal" : "rz-checkbox-list-vertical")} {fieldCssClass}";
-    }
-
-    public override bool HasValue
-    {
-        get
-        {
-            return Value != null && Value.Any();
-        }
-    }
-
-    [Parameter]
-    public Orientation Orientation { get; set; } = Orientation.Horizontal;
-
-    [Parameter]
-    public RenderFragment Items { get; set; }
-
-    List<RadzenCheckBoxListItem<TValue>> items = new List<RadzenCheckBoxListItem<TValue>>();
-
-    public void AddItem(RadzenCheckBoxListItem<TValue> item)
-    {
-        if (items.IndexOf(item) == -1)
-        {
-            items.Add(item);
-            StateHasChanged();
-        }
-    }
-
-    public void RemoveItem(RadzenCheckBoxListItem<TValue> item)
-    {
-        if (items.Contains(item))
-        {
-            items.Remove(item);
-            try { InvokeAsync(StateHasChanged); } catch { }
-        }
-    }
-
-    protected bool IsSelected(RadzenCheckBoxListItem<TValue> item)
-    {
-        return Value != null && Value.Contains(item.Value);
-    }
-
-    protected async System.Threading.Tasks.Task SelectItem(RadzenCheckBoxListItem<TValue> item)
-    {
-        if (Disabled || item.Disabled)
-            return;
-
-        List<TValue> selectedValues = new List<TValue>(Value != null ? Value : Enumerable.Empty<TValue>());
-
-        if (!selectedValues.Contains(item.Value))
-        {
-            selectedValues.Add(item.Value);
-        }
-        else
-        {
-            selectedValues.Remove(item.Value);
-        }
-
-        Value = selectedValues;
-
-        await ValueChanged.InvokeAsync(Value);
-        if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
-        await Change.InvokeAsync(Value);
-
-        StateHasChanged();
-    }
-
-    private string getDisabledState(RadzenCheckBoxListItem<TValue> item)
-    {
-        return Disabled || item.Disabled ? " rz-state-disabled" : "";
-    }
-}

Radzen.Blazor/RadzenCheckBoxList.razor.cs

@@ -0,0 +1,191 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Radzen.Blazor.Rendering;
+using System.Collections;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenCheckBoxList component.
+    /// </summary>
+    /// <typeparam name="TValue">The type of the value.</typeparam>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenCheckBoxList @bind-Value=@checkedValues TValue="int" &gt;
+    ///     &lt;Items&gt;
+    ///         &lt;RadzenCheckBoxListItem Text="Orders" Value="1" /&gt;
+    ///         &lt;RadzenCheckBoxListItem Text="Employees" Value="2" /&gt;
+    ///     &lt;/Items&gt;
+    /// &lt;/RadzenCheckBoxList&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenCheckBoxList<TValue> : FormComponent<IEnumerable<TValue>>
+    {
+        ClassList ItemClassList(RadzenCheckBoxListItem<TValue> item) => ClassList.Create("rz-chkbox-box")
+                                                                            .Add("rz-state-active", IsSelected(item))
+                                                                            .AddDisabled(Disabled || item.Disabled);
+
+        ClassList IconClassList(RadzenCheckBoxListItem<TValue> item) => ClassList.Create("rz-chkbox-icon")
+                                                                            .Add("rzi rzi-check", IsSelected(item));
+
+        /// <summary>
+        /// Gets or sets the value property.
+        /// </summary>
+        /// <value>The value property.</value>
+        [Parameter]
+        public string ValueProperty { get; set; }
+
+        /// <summary>
+        /// Gets or sets the text property.
+        /// </summary>
+        /// <value>The text property.</value>
+        [Parameter]
+        public string TextProperty { get; set; }
+
+        IEnumerable<RadzenCheckBoxListItem<TValue>> allItems
+        {
+            get
+            {
+                return items.Concat((Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()).Select(i =>
+                {
+                    var item = new RadzenCheckBoxListItem<TValue>();
+                    item.SetText((string)PropertyAccess.GetItemOrValueFromProperty(i, TextProperty));
+                    item.SetValue((TValue)PropertyAccess.GetItemOrValueFromProperty(i, ValueProperty));
+                    return item;
+                }));
+            }
+        }
+
+        IEnumerable _data = null;
+        /// <summary>
+        /// Gets or sets the data used to generate items.
+        /// </summary>
+        /// <value>The data.</value>
+        [Parameter]
+        public virtual IEnumerable Data
+        {
+            get
+            {
+                return _data;
+            }
+            set
+            {
+                if (_data != value)
+                {
+                    _data = value;
+                    StateHasChanged();
+                }
+            }
+        }
+
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            return GetClassList(Orientation == Orientation.Horizontal ? "rz-checkbox-list-horizontal" : "rz-checkbox-list-vertical").ToString();
+        }
+
+        /// <summary>
+        /// Gets a value indicating whether this instance has value.
+        /// </summary>
+        /// <value><c>true</c> if this instance has value; otherwise, <c>false</c>.</value>
+        public override bool HasValue
+        {
+            get
+            {
+                return Value != null && Value.Any();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the orientation.
+        /// </summary>
+        /// <value>The orientation.</value>
+        [Parameter]
+        public Orientation Orientation { get; set; } = Orientation.Horizontal;
+
+        /// <summary>
+        /// Gets or sets the items that will be concatenated with generated items from Data.
+        /// </summary>
+        /// <value>The items.</value>
+        [Parameter]
+        public RenderFragment Items { get; set; }
+
+        List<RadzenCheckBoxListItem<TValue>> items = new List<RadzenCheckBoxListItem<TValue>>();
+
+        /// <summary>
+        /// Adds the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void AddItem(RadzenCheckBoxListItem<TValue> item)
+        {
+            if (items.IndexOf(item) == -1)
+            {
+                items.Add(item);
+                StateHasChanged();
+            }
+        }
+
+        /// <summary>
+        /// Removes the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        public void RemoveItem(RadzenCheckBoxListItem<TValue> item)
+        {
+            if (items.Contains(item))
+            {
+                items.Remove(item);
+                if (!disposed)
+                {
+                    try { InvokeAsync(StateHasChanged); } catch { }
+                }
+            }
+        }
+
+        /// <summary>
+        /// Determines whether the specified item is selected.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        /// <returns><c>true</c> if the specified item is selected; otherwise, <c>false</c>.</returns>
+        protected bool IsSelected(RadzenCheckBoxListItem<TValue> item)
+        {
+            return Value != null && Value.Contains(item.Value);
+        }
+
+        /// <summary>
+        /// Selects the item.
+        /// </summary>
+        /// <param name="item">The item.</param>
+        protected async System.Threading.Tasks.Task SelectItem(RadzenCheckBoxListItem<TValue> item)
+        {
+            if (Disabled || item.Disabled)
+                return;
+
+            List<TValue> selectedValues = new List<TValue>(Value != null ? Value : Enumerable.Empty<TValue>());
+
+            if (!selectedValues.Contains(item.Value))
+            {
+                selectedValues.Add(item.Value);
+            }
+            else
+            {
+                selectedValues.Remove(item.Value);
+            }
+
+            Value = selectedValues;
+
+            await ValueChanged.InvokeAsync(Value);
+            if (FieldIdentifier.FieldName != null) { EditContext?.NotifyFieldChanged(FieldIdentifier); }
+            await Change.InvokeAsync(Value);
+
+            StateHasChanged();
+        }
+
+        private string getDisabledState(RadzenCheckBoxListItem<TValue> item)
+        {
+            return Disabled || item.Disabled ? " rz-state-disabled" : "";
+        }
+    }
+}

Radzen.Blazor/RadzenCheckBoxListItem.cs

@@ -0,0 +1,74 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenCheckBoxListItem component.
+    /// </summary>
+    /// <typeparam name="TValue">The type of the value.</typeparam>
+    public partial class RadzenCheckBoxListItem<TValue> : RadzenComponent
+    {
+        /// <summary>
+        /// Gets or sets the text.
+        /// </summary>
+        /// <value>The text.</value>
+        [Parameter]
+        public string Text { get; set; }
+
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
+        [Parameter]
+        public TValue Value { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this <see cref="RadzenCheckBoxListItem{TValue}"/> is disabled.
+        /// </summary>
+        /// <value><c>true</c> if disabled; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public virtual bool Disabled { get; set; }
+
+        RadzenCheckBoxList<TValue> _checkBoxList;
+
+        /// <summary>
+        /// Gets or sets the CheckBox list.
+        /// </summary>
+        /// <value>The CheckBox list.</value>
+        [CascadingParameter]
+        public RadzenCheckBoxList<TValue> CheckBoxList
+        {
+            get
+            {
+                return _checkBoxList;
+            }
+            set
+            {
+                if (_checkBoxList != value)
+                {
+                    _checkBoxList = value;
+                    _checkBoxList.AddItem(this);
+                }
+            }
+        }
+
+        /// <summary>
+        /// Disposes this instance.
+        /// </summary>
+        public override void Dispose()
+        {
+            base.Dispose();
+            CheckBoxList?.RemoveItem(this);
+        }
+
+        internal void SetText(string value)
+        {
+            Text = value;
+        }
+
+        internal void SetValue(TValue value)
+        {
+            Value = value;
+        }
+    }
+}

Radzen.Blazor/RadzenCheckBoxListItem.razor

@@ -1,47 +0,0 @@
-@typeparam TValue
-@inherits RadzenComponent
-@code {
-    [Parameter]
-    public string Text { get; set; }
-
-    [Parameter]
-    public TValue Value { get; set; }
-
-    [Parameter]
-    public virtual bool Disabled { get; set; }
-
-    RadzenCheckBoxList<TValue> _checkBoxList;
-
-    [CascadingParameter]
-    public RadzenCheckBoxList<TValue> CheckBoxList
-    {
-        get
-        {
-            return _checkBoxList;
-        }
-        set
-        {
-            if (_checkBoxList != value)
-            {
-                _checkBoxList = value;
-                _checkBoxList.AddItem(this);
-            }
-        }
-    }
-
-    public override void Dispose()
-    {
-        base.Dispose();
-        CheckBoxList?.RemoveItem(this);
-    }
-
-    internal void SetText(string value)
-    {
-        Text = value;
-    }
-
-    internal void SetValue(TValue value)
-    {
-        Value = value;
-    }
-}

Radzen.Blazor/RadzenColorPicker.razor

@@ -11,23 +11,23 @@
             <i class="rzi">@Icon</i>
         }
         <div class="rz-colorpicker-value" style="background-color: @Color" ></div>
-        <button type="button" class="rz-colorpicker-trigger" disabled=@Disabled @onclick:preventDefault><i class="rzi" /></button>
+        <button type="button" tabindex="-1" class="rz-colorpicker-trigger" disabled=@Disabled @onclick:preventDefault><i class="rzi" /></button>
         <Popup @ref=@Popup class="rz-colorpicker-popup" Close=@Close Open=@Open>
             @if (ShowHSV)
             {
                 <Draggable class="rz-saturation-picker rz-colorpicker-section" style=@($"background-color: {HSV.ToRGB().ToCSS()}") Drag=@OnSaturationMove>
                     <div class="rz-saturation-white">
                         <div class="rz-saturation-black"></div>
-                        <div class="rz-saturation-handle" style=@($"top: {SaturationHandleTop*100}%; left: {SaturationHandleLeft * 100}%")></div>
+                        <div class="rz-saturation-handle" style=@($"top: {(SaturationHandleTop*100).ToInvariantString()}%; left: {(SaturationHandleLeft * 100).ToInvariantString()}%")></div>
                     </div>
                 </Draggable>
                 <div class="rz-colorpicker-preview-area rz-colorpicker-section">
                     <div class="rz-hue-and-alpha">
                         <Draggable class="rz-hue-picker" Drag=@OnHueMove>
-                            <div class="rz-hue-handle" style=@($"top: 0; left: {HueHandleLeft * 100}%")></div>
+                            <div class="rz-hue-handle" style=@($"top: 0; left: {(HueHandleLeft * 100).ToInvariantString()}%")></div>
                         </Draggable>
                         <Draggable style=@($"background-image: linear-gradient(to right, {AlphaGradientStart} 0%, {AlphaGradientEnd} 100%)") class="rz-alpha-picker" Drag=@OnAlphaMove>
-                            <div class="rz-alpha-handle" style=@($"top: 0; left: {AlphaHandleLeft * 100}%")></div>
+                            <div class="rz-alpha-handle" style=@($"top: 0; left: {(AlphaHandleLeft * 100).ToInvariantString()}%")></div>
                         </Draggable>
                     </div>
                     <div class="rz-colorpicker-preview" style=@($"background-color: {Color}")></div>
@@ -110,334 +110,9 @@
             @if(ShowButton)
             {
                 <div class="rz-colorpicker-button rz-colorpicker-section">
-                    <RadzenButton ButtonStyle="ButtonStyle.Secondary" Click=@OnClick Text=@ButtonText @onclick:preventDefault />
+                    <RadzenButton ButtonStyle="ButtonStyle.Primary" Click=@OnClick Text=@ButtonText @onclick:preventDefault />
                 </div>
             }
         </Popup>
     </div>
 }
-@code {
-    [Parameter]
-    public EventCallback Open { get; set; }
-
-    [Parameter]
-    public EventCallback Close { get; set; }
-
-    [Parameter]
-    public string Icon {get; set;}
-
-    [Parameter]
-    public string HexText { get; set; } = "Hex";
-
-    [Parameter]
-    public string RedText { get; set; } = "R";
-
-    [Parameter]
-    public string GreenText { get; set; } = "G";
-
-    [Parameter]
-    public string BlueText { get; set; } = "B";
-
-    [Parameter]
-    public string AlphaText { get; set; } = "A";
-
-    [Parameter]
-    public string ButtonText { get; set; } = "OK";
-
-    Popup Popup { get; set; }
-
-    string AlphaGradientStart
-    {
-        get
-        {
-            var rgb = RGB.Parse(Color);
-            rgb.Alpha = 0;
-            return rgb.ToCSS();
-        }
-    }
-
-    string AlphaGradientEnd
-    {
-        get
-        {
-            var rgb = RGB.Parse(Color);
-            rgb.Alpha = 1;
-            return rgb.ToCSS();
-        }
-    }
-
-    string Hex
-    {
-        get
-        {
-            var rgb = RGB.Parse(Color);
-
-            if (rgb != null)
-            {
-                return rgb.ToHex();
-            }
-
-            return String.Empty;
-        }
-    }
-
-
-    double Red
-    {
-        get
-        {
-            var rgb = RGB.Parse(Color);
-            return rgb.Red;
-        }
-    }
-
-    double Alpha
-    {
-        get
-        {
-            return Math.Round(AlphaHandleLeft * 100);
-        }
-    }
-
-    double Green
-    {
-        get
-        {
-            var rgb = RGB.Parse(Color);
-            return rgb.Green;
-        }
-    }
-
-    double Blue
-    {
-        get
-        {
-            var rgb = RGB.Parse(Color);
-            return rgb.Blue;
-        }
-    }
-
-
-    void OnSaturationMove(DraggableEventArgs args)
-    {
-        SaturationHandleLeft = Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1);
-        SaturationHandleTop = Math.Clamp((args.ClientY - args.Rect.Top) / args.Rect.Height, 0, 1);
-
-        var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
-
-        Color = hsv.ToRGB().ToCSS();
-
-        TriggerChange();
-    }
-
-    void TriggerChange()
-    {
-        if (!ShowButton)
-        {
-            ValueChanged.InvokeAsync(Color);
-            Change.InvokeAsync(Color);
-        }
-
-        StateHasChanged();
-    }
-
-    void ChangeRGB(object value)
-    {
-        SetValue(value as string);
-    }
-
-    void SetValue(string value)
-    {
-        var rgb = RGB.Parse(value);
-
-        if (rgb != null)
-        {
-            Color = rgb.ToCSS();
-            UpdateColor(rgb);
-        }
-    }
-
-    internal async Task SelectColor(string value)
-    {
-        SetValue(value);
-
-        if (!ShowButton)
-        {
-            await Popup.CloseAsync();
-        }
-    }
-
-    void UpdateColor(RGB rgb)
-    {
-        Color = rgb.ToCSS();
-
-        HSV = rgb.ToHSV();
-
-        SaturationHandleLeft = HSV.Saturation;
-        SaturationHandleTop = 1 - HSV.Value;
-        HueHandleLeft = HSV.Hue;
-
-        TriggerChange();
-    }
-
-    void ChangeAlpha(double value)
-    {
-        if (value >= 0 && value <= 100)
-        {
-            var rgb = RGB.Parse(Color);
-            AlphaHandleLeft = rgb.Alpha = Math.Round(value / 100, 2);
-
-            Color = rgb.ToCSS();
-
-            TriggerChange();
-        }
-    }
-
-    void ChangeAlpha(object alpha)
-    {
-        if (Double.TryParse((string)alpha, out var value))
-        {
-            ChangeAlpha(value);
-        }
-    }
-
-    void ChangeColor(double value, Action<RGB, double> update)
-    {
-        if (value >= 0 && value <= 255)
-        {
-            var rgb = RGB.Parse(Color);
-
-            update(rgb, value);
-
-            UpdateColor(rgb);
-        }
-    }
-
-    void ChangeColor(object color, Action<RGB, double> update)
-    {
-        if (Double.TryParse((string)color, out var value))
-        {
-            ChangeColor(value, update);
-        }
-    }
-
-    void OnAlphaMove(DraggableEventArgs args)
-    {
-        AlphaHandleLeft = Math.Round(Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1), 2);
-
-        HSV.Alpha = AlphaHandleLeft;
-
-        var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
-
-        Color = hsv.ToRGB().ToCSS();
-
-        TriggerChange();
-    }
-
-    void OnHueMove(DraggableEventArgs args)
-    {
-        HueHandleLeft = Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1);
-
-        HSV.Hue = HueHandleLeft;
-        var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
-
-        Color = hsv.ToRGB().ToCSS();
-
-        TriggerChange();
-    }
-
-    async Task OnClick()
-    {
-        await ValueChanged.InvokeAsync(Color);
-        await Change.InvokeAsync(Color);
-        await Popup.CloseAsync();
-    }
-
-    [Parameter]
-    public bool ShowButton { get; set; }
-
-    [Parameter]
-    public bool ShowHSV { get; set; } = true;
-
-    [Parameter]
-    public bool ShowRGBA { get; set; } = true;
-
-    [Parameter]
-    public bool ShowColors { get; set; } = true;
-
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    double SaturationHandleLeft { get; set; }
-    double HueHandleLeft { get; set; }
-    double AlphaHandleLeft { get; set; } = 1;
-    double SaturationHandleTop { get; set; }
-
-    HSV HSV { get; set; } = new HSV { Hue = 0, Saturation = 1, Value = 1 };
-
-    string Color { get; set; } = "rgb(255, 255, 255)";
-
-    async Task Toggle()
-    {
-        if (!Disabled)
-        {
-            await Popup.ToggleAsync(Element);
-        }
-    }
-    protected override string GetComponentCssClass()
-    {
-        var classList = new List<string>() { "rz-colorpicker" };
-
-        if (Disabled)
-        {
-            classList.Add("rz-disabled");
-        }
-
-        return string.Join(" ", classList);
-    }
-
-    protected override void OnInitialized()
-    {
-        Init();
-
-        base.OnInitialized();
-    }
-
-    void Init()
-    {
-        var value = Value;
-        if (String.IsNullOrEmpty(Value))
-        {
-            value = "rgb(255, 255, 255)";
-        }
-
-        if (value != Color)
-        {
-            Color = value;
-
-            HSV = RGB.Parse(Color).ToHSV();
-            SaturationHandleLeft = HSV.Saturation;
-            SaturationHandleTop = 1 - HSV.Value;
-            HSV.Saturation = 1;
-            HSV.Value = 1;
-            HueHandleLeft = HSV.Hue;
-
-            if (value.StartsWith("rgba"))
-            {
-                AlphaHandleLeft = HSV.Alpha;
-            }
-        }
-    }
-
-    public override async Task SetParametersAsync(ParameterView parameters)
-    {
-        var valueChanged = parameters.DidParameterChange(nameof(Value), Value);
-
-        await base.SetParametersAsync(parameters);
-
-        if (valueChanged)
-        {
-            Init();
-        }
-    }
-}

Radzen.Blazor/RadzenColorPicker.razor.cs

@@ -0,0 +1,398 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenColorPicker component.
+    /// </summary>
+    /// <example>
+    /// <code>
+    /// &lt;RadzenColorPicker @bind-Value=@color Change=@(args => Console.WriteLine($"Selected color: {args}")) /&gt;
+    /// </code>
+    /// </example>
+    public partial class RadzenColorPicker : FormComponent<string>
+    {
+        /// <summary>
+        /// Gets or sets the open callback.
+        /// </summary>
+        /// <value>The open callback.</value>
+        [Parameter]
+        public EventCallback Open { get; set; }
+
+        /// <summary>
+        /// Gets or sets the close callback.
+        /// </summary>
+        /// <value>The close callback.</value>
+        [Parameter]
+        public EventCallback Close { get; set; }
+
+        /// <summary>
+        /// Gets or sets the icon.
+        /// </summary>
+        /// <value>The icon.</value>
+        [Parameter]
+        public string Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the hexadecimal color label text.
+        /// </summary>
+        /// <value>The hexadecimal text.</value>
+        [Parameter]
+        public string HexText { get; set; } = "Hex";
+
+        /// <summary>
+        /// Gets or sets the red color label text.
+        /// </summary>
+        /// <value>The red text.</value>
+        [Parameter]
+        public string RedText { get; set; } = "R";
+
+        /// <summary>
+        /// Gets or sets the green color label text.
+        /// </summary>
+        /// <value>The green text.</value>
+        [Parameter]
+        public string GreenText { get; set; } = "G";
+
+        /// <summary>
+        /// Gets or sets the blue color label text.
+        /// </summary>
+        /// <value>The blue text.</value>
+        [Parameter]
+        public string BlueText { get; set; } = "B";
+
+        /// <summary>
+        /// Gets or sets the alpha label text.
+        /// </summary>
+        /// <value>The alpha text.</value>
+        [Parameter]
+        public string AlphaText { get; set; } = "A";
+
+        /// <summary>
+        /// Gets or sets the button text.
+        /// </summary>
+        /// <value>The button text.</value>
+        [Parameter]
+        public string ButtonText { get; set; } = "OK";
+
+        Popup Popup { get; set; }
+
+        string AlphaGradientStart
+        {
+            get
+            {
+                var rgb = RGB.Parse(Color);
+                rgb.Alpha = 0;
+                return rgb.ToCSS();
+            }
+        }
+
+        string AlphaGradientEnd
+        {
+            get
+            {
+                var rgb = RGB.Parse(Color);
+                rgb.Alpha = 1;
+                return rgb.ToCSS();
+            }
+        }
+
+        string Hex
+        {
+            get
+            {
+                var rgb = RGB.Parse(Color);
+
+                if (rgb != null)
+                {
+                    return rgb.ToHex();
+                }
+
+                return String.Empty;
+            }
+        }
+
+        double Red
+        {
+            get
+            {
+                var rgb = RGB.Parse(Color);
+                return rgb.Red;
+            }
+        }
+
+        double Alpha
+        {
+            get
+            {
+                return Math.Round(AlphaHandleLeft * 100);
+            }
+        }
+
+        double Green
+        {
+            get
+            {
+                var rgb = RGB.Parse(Color);
+                return rgb.Green;
+            }
+        }
+
+        double Blue
+        {
+            get
+            {
+                var rgb = RGB.Parse(Color);
+                return rgb.Blue;
+            }
+        }
+
+        void OnSaturationMove(DraggableEventArgs args)
+        {
+            SaturationHandleLeft = Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1);
+            SaturationHandleTop = Math.Clamp((args.ClientY - args.Rect.Top) / args.Rect.Height, 0, 1);
+
+            var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
+
+            Color = hsv.ToRGB().ToCSS();
+
+            TriggerChange();
+        }
+
+        void TriggerChange()
+        {
+            if (!ShowButton)
+            {
+                ValueChanged.InvokeAsync(Color);
+                Change.InvokeAsync(Color);
+            }
+
+            StateHasChanged();
+        }
+
+        void ChangeRGB(object value)
+        {
+            SetValue(value as string);
+        }
+
+        void SetValue(string value)
+        {
+            var rgb = RGB.Parse(value);
+
+            if (rgb != null)
+            {
+                Color = rgb.ToCSS();
+                UpdateColor(rgb);
+            }
+        }
+
+        internal async Task SelectColor(string value)
+        {
+            SetValue(value);
+
+            if (!ShowButton)
+            {
+                await Popup.CloseAsync();
+            }
+        }
+
+        void UpdateColor(RGB rgb)
+        {
+            Color = rgb.ToCSS();
+
+            HSV = rgb.ToHSV();
+
+            SaturationHandleLeft = HSV.Saturation;
+            SaturationHandleTop = 1 - HSV.Value;
+            HueHandleLeft = HSV.Hue;
+
+            TriggerChange();
+        }
+
+        void ChangeAlpha(double value)
+        {
+            if (value >= 0 && value <= 100)
+            {
+                var rgb = RGB.Parse(Color);
+                AlphaHandleLeft = rgb.Alpha = Math.Round(value / 100, 2);
+
+                Color = rgb.ToCSS();
+
+                TriggerChange();
+            }
+        }
+
+        void ChangeAlpha(object alpha)
+        {
+            if (Double.TryParse((string)alpha, out var value))
+            {
+                ChangeAlpha(value);
+            }
+        }
+
+        void ChangeColor(double value, Action<RGB, double> update)
+        {
+            if (value >= 0 && value <= 255)
+            {
+                var rgb = RGB.Parse(Color);
+
+                update(rgb, value);
+
+                UpdateColor(rgb);
+            }
+        }
+
+        void ChangeColor(object color, Action<RGB, double> update)
+        {
+            if (Double.TryParse((string)color, out var value))
+            {
+                ChangeColor(value, update);
+            }
+        }
+
+        void OnAlphaMove(DraggableEventArgs args)
+        {
+            AlphaHandleLeft = Math.Round(Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1), 2);
+
+            HSV.Alpha = AlphaHandleLeft;
+
+            var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
+
+            Color = hsv.ToRGB().ToCSS();
+
+            TriggerChange();
+        }
+
+        void OnHueMove(DraggableEventArgs args)
+        {
+            HueHandleLeft = Math.Clamp((args.ClientX - args.Rect.Left) / args.Rect.Width, 0, 1);
+
+            HSV.Hue = HueHandleLeft;
+            var hsv = new HSV { Hue = HSV.Hue, Saturation = SaturationHandleLeft, Value = 1 - SaturationHandleTop, Alpha = AlphaHandleLeft };
+
+            Color = hsv.ToRGB().ToCSS();
+
+            TriggerChange();
+        }
+
+        async Task OnClick()
+        {
+            await ValueChanged.InvokeAsync(Color);
+            await Change.InvokeAsync(Color);
+            await Popup.CloseAsync();
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether button is shown.
+        /// </summary>
+        /// <value><c>true</c> if button shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowButton { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether HSV is shown.
+        /// </summary>
+        /// <value><c>true</c> if HSV is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowHSV { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether RGBA is shown.
+        /// </summary>
+        /// <value><c>true</c> if RGBA is shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowRGBA { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether colors are shown.
+        /// </summary>
+        /// <value><c>true</c> if colors are shown; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool ShowColors { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets the child content.
+        /// </summary>
+        /// <value>The child content.</value>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        double SaturationHandleLeft { get; set; }
+        double HueHandleLeft { get; set; }
+        double AlphaHandleLeft { get; set; } = 1;
+        double SaturationHandleTop { get; set; }
+        HSV HSV { get; set; } = new HSV { Hue = 0, Saturation = 1, Value = 1 };
+        string Color { get; set; } = "rgb(255, 255, 255)";
+
+        async Task Toggle()
+        {
+            if (!Disabled)
+            {
+                await Popup.ToggleAsync(Element);
+            }
+        }
+        /// <inheritdoc />
+        protected override string GetComponentCssClass()
+        {
+            var classList = new List<string>() { "rz-colorpicker" };
+
+            if (Disabled)
+            {
+                classList.Add("rz-disabled");
+            }
+
+            return string.Join(" ", classList);
+        }
+
+        /// <inheritdoc />
+        protected override void OnInitialized()
+        {
+            Init();
+
+            base.OnInitialized();
+        }
+
+        void Init()
+        {
+            var value = Value;
+            if (String.IsNullOrEmpty(Value))
+            {
+                value = "rgb(255, 255, 255)";
+            }
+
+            if (value != Color)
+            {
+                Color = value;
+
+                HSV = RGB.Parse(Color).ToHSV();
+                SaturationHandleLeft = HSV.Saturation;
+                SaturationHandleTop = 1 - HSV.Value;
+                HSV.Saturation = 1;
+                HSV.Value = 1;
+                HueHandleLeft = HSV.Hue;
+
+                if (value.StartsWith("rgba"))
+                {
+                    AlphaHandleLeft = HSV.Alpha;
+                }
+            }
+        }
+
+        /// <inheritdoc />
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            var valueChanged = parameters.DidParameterChange(nameof(Value), Value);
+
+            await base.SetParametersAsync(parameters);
+
+            if (valueChanged)
+            {
+                Init();
+            }
+        }
+    }
+}

Radzen.Blazor/RadzenColorPickerItem.razor

@@ -1,25 +1,3 @@
 @using Radzen.Blazor.Rendering
 
 <div class="rz-colorpicker-item" style="background-color: @Background" @onmousedown:preventDefault @onclick=@OnClick></div>
-@code {
-    [Parameter]
-    public string Value { get; set; }
-
-    string Background
-    {
-        get
-        {
-            RGB rgb = RGB.Parse(Value);
-
-            return rgb?.ToCSS();
-        }
-    }
-
-    [CascadingParameter]
-    public RadzenColorPicker ColorPicker { get; set; }
-
-    async Task OnClick()
-    {
-        await ColorPicker.SelectColor(Value);
-    }
-}

Radzen.Blazor/RadzenColorPickerItem.razor.cs

@@ -0,0 +1,41 @@
+using Microsoft.AspNetCore.Components;
+using Radzen.Blazor.Rendering;
+using System.Threading.Tasks;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// RadzenColorPickerItem component.
+    /// </summary>
+    public partial class RadzenColorPickerItem
+    {
+        /// <summary>
+        /// Gets or sets the value.
+        /// </summary>
+        /// <value>The value.</value>
+        [Parameter]
+        public string Value { get; set; }
+
+        string Background
+        {
+            get
+            {
+                RGB rgb = RGB.Parse(Value);
+
+                return rgb?.ToCSS();
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the color picker.
+        /// </summary>
+        /// <value>The color picker.</value>
+        [CascadingParameter]
+        public RadzenColorPicker ColorPicker { get; set; }
+
+        async Task OnClick()
+        {
+            await ColorPicker.SelectColor(Value);
+        }
+    }
+}

Radzen.Blazor/RadzenColumnOptions.cs

@@ -0,0 +1,36 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Radzen.Blazor
+{
+    /// <summary>
+    /// Common configuration of <see cref="RadzenColumnSeries{TItem}" />.
+    /// </summary>
+    public partial class RadzenColumnOptions : RadzenChartComponentBase
+    {
+        /// <summary>
+        /// Gets or sets the border radius of the bars. 
+        /// </summary>
+        /// <value>The radius. Values greater than <c>0</c> make rounded corners.</value>
+        [Parameter]
+        public double Radius { get; set; }
+
+        /// <summary>
+        /// Gets or sets the margin between columns.
+        /// </summary>
+        /// <value>The margin. By default set to <c>10</c></value>
+        [Parameter]
+        public double Margin { get; set; } = 10;
+
+        /// <inheritdoc />
+        protected override void Initialize()
+        {
+            Chart.ColumnOptions = this;
+        }
+
+        /// <inheritdoc />
+        protected override bool ShouldRefreshChart(ParameterView parameters)
+        {
+            return DidParameterChange(parameters, nameof(Radius), Radius) || DidParameterChange(parameters, nameof(Margin), Margin);
+        }
+    }
+}

Radzen.Blazor/RadzenColumnOptions.razor

@@ -1,18 +0,0 @@
-@inherits RadzenChartComponentBase
-@code {
-    [Parameter]
-    public double Radius { get; set; }
-
-    [Parameter]
-    public double Margin { get; set; } = 10;
-
-    protected override void Initialize()
-    {
-        Chart.ColumnOptions = this;
-    }
-
-    protected override bool ShouldRefreshChart(ParameterView parameters)
-    {
-        return DidParameterChange(parameters, nameof(Radius), Radius) || DidParameterChange(parameters, nameof(Margin), Margin);
-    }
-}