Smart.Blazor 9.0.3

There is a newer version of this package available.
See the version list below for details.
dotnet add package Smart.Blazor --version 9.0.3
NuGet\Install-Package Smart.Blazor -Version 9.0.3
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Smart.Blazor" Version="9.0.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Smart.Blazor --version 9.0.3
#r "nuget: Smart.Blazor, 9.0.3"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Smart.Blazor as a Cake Addin
#addin nuget:?package=Smart.Blazor&version=9.0.3

// Install Smart.Blazor as a Cake Tool
#tool nuget:?package=Smart.Blazor&version=9.0.3

Smart.Blazor Component Library

Smart Blazor Components is a commercial set of 60+ Blazor UI controls. Both server-side and client-side.

Getting Started

Create a new Blazor App

To start building .NET apps, download and install the .NET SDK (Software Development Kit).

  • Check everything installed correctly

Once you've installed, open a new command prompt and run the following command:

dotnet

If the command runs, printing out information about how to use dotnet, you're good to go.

  • Got an error?

If you receive a 'dotnet' is not recognized as an internal or external command error, make sure you opened a new command prompt

  • The Blazor framework provides templates to develop apps for each of the Blazor hosting models:

Blazor WebAssembly (blazorwasm)

dotnet new blazorwasm -o BlazorApp

Blazor Server (blazorserver)

dotnet new blazorserver -o BlazorServerApp

Installation

Smart.Blazor Components are distributed as the Smart.Blazor Nuget package. You can use any of the following options:

  • Install the package from command line by running dotnet add package Smart.Blazor.

  • Alternatively, you can add the project from the Visual Nuget Package Manager.

  • Edit the .csproj file and add a project reference

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <RootNamespace>BlazorApp</RootNamespace>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Smart.Blazor" Version="8.1.3" />
  </ItemGroup>

</Project>

Import the Smart.Blazor namespace.

Open the _Imports.razor file of your Blazor application and add @using Smart.Blazor

Set a Theme

Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include a theme CSS file by adding this snippet

<link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" />

You can include 14+ additional CSS themes for the Controls - 7 dark and 7 light themes.

Source files

Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include this snippet

<script src="_content/Smart.Blazor/js/smart.blazor.js"></script>
<script src="_content/Smart.Blazor/js/smart.elements.js"></script>

If you would like to use only a specific component, instead of referring the smart.elements.js, you can refer the component like that:

<script type="module" src="_content/Smart.Blazor/js/modules/smart.table.js"></script>

Registrations

Blazor WebAssembly

This step is mandatory for Blazor WebAssembly(client-side) and also for ASP.NET Core hosted project types. You should place the code into the Program.cs of your client project

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Smart.Blazor;

namespace BlazorApp
{
    public class Program
    {
	public static async Task Main(string[] args)
	{
	    var builder = WebAssemblyHostBuilder.CreateDefault(args);
	    builder.RootComponents.Add<App>("#app");

	    builder.Services.AddSmart();
	    builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

	    await builder.Build().RunAsync();
	}
    }
}
Blazor Server

This step is going only into the Startup.cs of your Blazor Server project. You will need to add services.AddSmart(); in the ConfigureServices method and using Smart.Blazor; in the using statements.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using BlazorApp.Data;
using Smart.Blazor;

namespace BlazorApp
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
	    services.AddSmart();
	   }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }
}

Using Smart.Blazor Components

Use any Smart Blazor component by typing its tag name in a Blazor page e.g. <Button>Click Me</Button> If you are using client-side WebAssembly Blazor also add the following code to your .csproj file (after the closing RazorLangVersion element): <BlazorLinkOnBuild>false</BlazorLinkOnBuild>

Data binding a property

<Input Value="@text"></Input>
@code {
	string text = " Hi from Smart!";
}

Events Handing

<Calendar id="calendar" OnChange=@OnChange></Calendar>
<div class="options">
	<div class="caption">Events</div>
	<div class="option" id="log">
	@eventLog
	</div>
</div>

@code {
	private string eventLog;

	private void OnChange(Event eventObj)
	{
		CalendarChangeEventDetail detail = eventObj\[" Detail & quot;\];

		eventLog = detail.Value\[0\].ToString();
	}
}

Alternatively you can do that:

@page "/calendar"

<Calendar OnReady="OnReady" id="calendar" ></Calendar>
<div class="options">
	<div class="caption">Events</div>
	<div class="option" id="log">
	@eventLog
	</div>
</div>


@code {
	private string eventLog;

	private void OnReady(Calendar calendar)
	{
		calendar.Changed += delegate (object sender, CalendarChangedEventArgs args)
		{
			string value = args.Value\[0\].ToString();
			eventLog = value;
			StateHasChanged();
		};
	}
}

OnReady callback is called for each Blazor component, after it is initialized and rendered.

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.1 is compatible. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
18.0.6 1,425 1/19/2024
18.0.0 683 1/16/2024
17.0.89 618 1/16/2024
17.0.35 1,317 12/1/2023
17.0.6 2,379 10/26/2023
16.0.2 4,761 8/4/2023
15.2.1 3,208 5/17/2023
15.1.1 2,832 4/1/2023
15.1.0 1,809 3/31/2023
15.0.63 2,091 3/20/2023
15.0.60 1,749 3/31/2023
14.4.136 3,067 1/18/2023
14.4.39 3,298 10/28/2022
14.2.18 4,464 7/21/2022
14.2.12 1,942 7/18/2022
14.1.1 2,709 7/5/2022
14.1.0 1,978 7/5/2022
14.0.94 2,204 6/15/2022
14.0.75 2,275 6/3/2022
14.0.51 3,159 5/17/2022
14.0.45 2,115 5/14/2022
13.1.29 3,246 4/7/2022
13.1.27 1,988 4/5/2022
13.1.25 1,999 4/4/2022
13.1.21 2,112 4/2/2022
13.1.20 1,690 4/1/2022
13.1.17 1,945 3/31/2022
13.1.12 1,797 3/29/2022
13.1.2 2,048 3/23/2022
13.0.20 1,911 3/8/2022
13.0.10 1,827 2/22/2022
13.0.8 1,963 2/21/2022
12.0.35 1,967 2/15/2022
12.0.20 1,747 2/4/2022
12.0.8 2,787 1/24/2022
12.0.1 1,843 1/20/2022
11.0.46 1,869 1/4/2022
11.0.38 1,654 12/29/2021
11.0.36 1,581 12/29/2021
11.0.35 1,653 12/29/2021
11.0.16 1,845 12/9/2021
11.0.7 1,738 12/3/2021
11.0.6 2,292 12/3/2021
11.0.4 1,607 12/2/2021
11.0.3 1,593 12/2/2021
11.0.0 1,633 11/29/2021
10.2.2 4,137 10/19/2021
10.2.1 1,653 10/19/2021
10.2.0 1,697 10/19/2021
10.0.83 1,689 10/18/2021
10.0.81 1,704 10/17/2021
10.0.77 1,711 10/14/2021
10.0.74 1,654 10/13/2021
10.0.73 1,621 10/13/2021
10.0.48 1,966 9/29/2021
10.0.45 1,657 9/27/2021
10.0.44 1,705 9/26/2021
10.0.41 1,627 9/23/2021
10.0.37 1,577 9/22/2021
10.0.36 1,711 9/22/2021
10.0.35 1,667 9/22/2021
10.0.31 1,802 9/17/2021
10.0.18 1,764 8/27/2021
10.0.15 1,592 8/26/2021
10.0.14 1,658 8/24/2021
10.0.1 1,807 8/16/2021
9.4.18 1,926 7/28/2021
9.4.15 1,646 7/16/2021
9.4.13 1,714 7/15/2021
9.4.8 1,542 7/12/2021
9.4.1 1,780 7/5/2021
9.4.0 1,837 6/30/2021
9.3.115 1,781 7/2/2021
9.3.113 1,672 6/25/2021
9.3.108 1,717 6/21/2021
9.3.97 1,588 6/8/2021
9.3.92 1,745 6/3/2021
9.3.82 1,731 5/26/2021
9.3.80 1,705 5/26/2021
9.3.66 1,662 5/19/2021
9.3.54 1,750 5/10/2021
9.3.45 1,858 5/6/2021
9.3.42 3,944 5/5/2021
9.3.39 1,821 5/1/2021
9.3.38 1,627 4/30/2021
9.3.36 1,632 4/30/2021
9.3.35 1,739 4/30/2021
9.3.34 1,743 4/29/2021
9.3.33 1,739 4/29/2021
9.3.32 1,669 4/28/2021
9.3.31 1,633 4/28/2021
9.3.30 1,831 4/27/2021
9.3.29 1,618 4/27/2021
9.3.25 1,576 4/26/2021
9.3.23 1,687 4/24/2021
9.3.22 1,630 4/23/2021
9.3.21 1,684 4/23/2021
9.3.20 1,660 4/22/2021
9.3.19 1,600 4/22/2021
9.3.18 1,673 4/22/2021
9.3.17 1,683 4/22/2021
9.3.16 1,573 4/22/2021
9.3.15 1,604 4/22/2021
9.3.14 1,709 4/22/2021
9.3.12 1,780 4/22/2021
9.3.11 1,694 4/21/2021
9.3.10 1,646 4/21/2021
9.3.9 1,732 4/21/2021
9.3.8 1,655 4/20/2021
9.3.6 1,731 4/20/2021
9.3.5 1,752 4/20/2021
9.3.4 1,710 4/19/2021
9.3.3 1,665 4/18/2021
9.3.2 1,660 4/17/2021
9.2.7 1,738 4/17/2021
9.2.5 1,631 4/16/2021
9.2.2 1,606 4/15/2021
9.2.1 1,723 4/13/2021
9.2.0 1,764 4/10/2021
9.1.6 1,624 4/7/2021
9.1.5 1,856 3/25/2021
9.1.4 1,891 3/5/2021
9.1.3 1,930 2/26/2021
9.1.1 1,980 2/3/2021
9.1.0 1,782 2/3/2021
9.0.6 1,850 2/2/2021
9.0.5 1,813 1/15/2021
9.0.4 1,926 1/14/2021
9.0.3 1,780 1/11/2021
9.0.2 2,024 12/27/2020
9.0.1 2,022 12/27/2020
9.0.0 1,925 12/27/2020
8.2.0 2,893 12/22/2020
8.1.17 2,003 12/9/2020
8.1.14 1,879 12/8/2020
8.1.13 1,975 12/2/2020
8.1.12 1,888 11/26/2020
8.1.10 1,992 11/25/2020
8.1.9 1,834 11/25/2020
8.1.8 1,835 11/24/2020
8.1.7 1,973 11/5/2020
8.1.6 1,839 11/3/2020
8.1.5 1,986 11/1/2020
8.1.4 1,869 10/29/2020
8.1.3 1,840 10/13/2020
8.1.2 269 10/13/2020
8.1.1 249 10/13/2020
8.1.0 333 10/13/2020

New Scheduler Component