Blazor Demo Project using Telerik UI for Blazor Components

This is the repository of the Blazor Coffee Warehouse sample project which contains a ready-to-run Blazor WASM project with some of the most popular Telerik UI for Blazor components.The sample project demonstrates how to use the UI for Blazor components and is available for browsing at https://demos.telerik.com/blazor-coffee/.

In This Article

• Used UI for Blazor Components
• Blazor Demo Features
• Requirements
• Running the sample Blazor project
• Troubleshooting
• Licensing
• Setup with Telerik UI for Blazor Commercial
• Where can I find help?
• Contribution
• Useful Links

Used UI for Blazor Components

In the sample project, you can explore the usage of the following Blazor UI Components:

• Blazor Data Grid UI component
• Blazor Form UI component
• Blazor Card UI component
• Blazor Charts UI component
• Blazor Line Chart UI component
• Blazor Column Bar Chart UI component
• Blazor Floating Label UI component
• Blazor Drawer UI component
• Blazor DateInput UI component
• Blazor DateRangePicker UI component
• Blazor DateTimePicker UI component
• Blazor DropDownList UI component
• Blazor Editor UI component
• Blazor Button UI component
• Blazor ButtonGroup UI component
• Blazor TextBox UI component
• Blazor TextArea UI component
• Blazor MaskedTextBox UI component
• Blazor Checkbox UI component
• Blazor Tooltip UI component

Blazor Demo Features

The current demo app includes examples of the following features in the Blazor WASM application:

• Globalization / Localization
• Full Stack .NET
  • Blazor Client
  • Web API Server
  • Entity Framework Core
  • Shared logic and resources
• Theming
  • Three built-in themes: Default Theme, Material and Bootstrap
  • SASS architecture
  • Compatible with Telerik Theme Builder

Requirements

• .NET 8
• Telerik UI for Blazor (Trial or Commercial)
• npm (node package manager, for sass themes)

Running the sample Blazor project

• Open the solution file in VS 2022 and, if not already, set the BlazingCoffee.Server project as a Startup project.
• Hit Ctrl + F5.

Troubleshooting

If you see a never-ending loader on the home screen, check the browser console for errors. You may see a 404 error about a missing /_framework/blazor-hotreload.js. In this case, disable Hot Reload in the Visual Studio settings:

• Debugging > General and also in
• Debugging > .NET.

Another option is to run the app through the Kestrel web server instead of IIS Express by selecting the BlazingCoffee.Server launch profile. This works even with enabled hot reload:

Licensing

Telerik UI for Blazor is a commercial UI library. To use the components, you need to either register for a free trial or purchase a license.

The 30-day free trial can be obtained from Telerik UI for Blazor product page and gives you access to all Telerik UI for Blazor components and their full functionality. For more infromation regarding the available license and budnle options you can review the product pricing page.

For both active trialist and license holders you get access to our legendary technical support provided directly by the UI for Blazor dev team!

Setup with Telerik UI for Blazor Commercial

If you are using a commercial version of Telerik UI for Blazor.

• In BlazingCoffee.Client.csproj remove .Trial from the package name. You should have:

  <PackageReference Include="Telerik.UI.for.Blazor" Version="x.x.x" />
  

• In BlazingCoffee/Client/Host.razor, remove .Trial from the package name in the script path. You should have

  <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
  

• In BlazingCoffee.Shared.csproj remove .Trial from the package name. You should have:

  <PackageReference Include="Telerik.UI.for.Blazor" Version="x.x.x" />
  

Where can I find help?

1. For community support, we recommend asking questions on Stack Overflow using the telerik-blazor tag.
2. If you have an active trial or license, you can use the official support channel for questions, technical assistance, bug reports or problem resolutions.

Contribution

Issues and Pull Requests are welcome.

To submit a pull request, you should first fork the repo.

Useful Links

• Browse all UI for Blazor component demos live
• Browse the Telerik UI for Blazor documentation
• Follow this link to report bugs and add feature requests
• Browse or contribute to localization texts used in the samples
• Create, run, share and test Blazor code snippets directly in the browser in our Blazor REPL code runner