Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Exploring Syncfusion Blazor Components on Cross-Platform Desktop App using

Exploring Syncfusion Blazor Components on Cross-Platform Desktop Apps Using Electron

Syncfusion’s native Blazor UI components library can be used with all features supported by the Blazor framework. In this blog post, we are going to explore Syncfusion Blazor components on a cross-platform desktop app using the Electron framework.

Electron supports building cross-platform desktop applications with web technologies. It utilizes Node.js and the Chromium rendering engine to run a web application on a desktop shell.

Prerequisites

Create a Blazor server-side application using dotnet-cli

Follow these steps to create a Blazor server-side app using dotnet-cli:

Step 1: First, open the command prompt in any folder. Then, run the following command line to create a new Blazor server-side application without HTTPS support. I am naming the application BlazorElectronApp.

dotnet new blazorserver --no-https -o BlazorElectronApp

Step 2: Navigate to the application folder (BlazorElectronApp) and install the required Syncfusion Blazor NuGet package.

For this blog, we are going to use the Syncfusion.Blazor.Grid NuGet package.

cd BlazorElectronApp
dotnet add package Syncfusion.Blazor.Grid

Step3: Then, open the ~/Startup.cs file from the application and add the Syncfusion Blazor Service in the ConfigureServices method, like in the following code example.

using Syncfusion.Blazor;

public class Startup
{
    ……
    ……
    public void ConfigureServices(IServiceCollection services)
    {
        ……
        ……
        services.AddSyncfusionBlazor();
    }
}

Step 4: Now, open the ~/Pages/_Host.cshtml file and add the Syncfusion theme reference in the <head> tag. Refer to the following code example.

@page "/"
……
……
<!DOCTYPE html>
    <html lang="en">
        <head>
            ……
            ……
            <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
        </head>
        ……
        ……
    </html>

Step 5: Finally, add the Syncfusion Blazor DataGrid component in the ~/Pages/Index.razor page. Refer to the following code example.

@page "/"
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true">
    <GridPageSettings PageSize="5"></GridPageSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
            <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
            <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
            <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        </GridColumns>
</SfGrid>

@code{
public List<Order> Orders { get; set; }

protected override void OnInitialized()
{
    Orders = Enumerable.Range(1, 25).Select(x => new Order()
    {
        OrderID = 1000 + x,
        CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
        Freight = 2.1 * x,
        OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

Now, the created Blazor server-side application with the Syncfusion DataGrid component is ready to launch without the Electron setup.

Configure the Electron setup in application

Please follow these steps to configure the Electron setup into the Blazor server-side application:

Step 1: First, install the ElectronNET.API NuGet package in the application. Electron.NET is a wrapper for the Electron application with embedded .NET API.

dotnet add package ElectronNET.API

Step 2: Next, create a local .NET tool manifest file by running the following command line. This will create a manifest file in the ~/.config/dotnet-tools.json location.

dotnet new tool-manifest

dotnet new tool manifest
Step 3: Then, install the electronize tool locally in the project by running the following command line.

dotnet tool install ElectronNET.CLI

dotnet tool install ElectronNETStep 4: Run the following command to configure the Electron.NET manifest and update the application launch profiles.

dotnet electronize init

dotnet electronize initStep 5: Now, integrate the Electron.NET in the ~/Program.cs file. Refer to the following code example.

using ElectronNET.API;

public class Program
{
    .....
    .....

    public static IHostBuilder CreateHostBuilder(string[] args) =>
    Host.CreateDefaultBuilder(args)
    .ConfigureWebHostDefaults(webBuilder =>
    {
        webBuilder.UseElectron(args);
        webBuilder.UseStartup<Startup>();
    });
}

Step 6: Then, add this code in the ~/Startup.cs file to open the Electron window.

using ElectronNET.API;

public class Startup
{
    ……
    ……

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ……
        ……
        // Open the Electron-Window
        Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
    }
}

Step 7: Now, run the application using the following command line.

dotnet electronize start

Note: The electronize start will take some time for its initial launch. But it will be fast in subsequent launches.

Then, our Blazor server-side application will open in the cross-platform desktop Electron shell with the DataGrid component.

Syncfusion Blazor DataGrid in Desktop Electron Shell
Syncfusion Blazor DataGrid in Desktop Electron Shell

Step 8: Finally, run these command lines to do production builds based on platform.

dotnet electronize build /target win
dotnet electronize build /target osx
dotnet electronize build /target linux

GitHub reference

For more information, refer to the complete working example, Exploring Syncfusion Blazor components on a cross-platform desktop app using Electron.

Conclusion

Thanks for reading! In this blog post, we have seen the steps to integrate Syncfusion Blazor components in a cross-platform desktop app using the Electron framework. Try out the steps given in this blog post and leave your feedback in the comments section.

The Syncfusion Blazor suite offers over 65 high-performance, lightweight, and responsive UI components for the web, including file-format libraries, in a single package. Use them to build stunning web applications!

For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features. Also, try our samples from this GitHub location.

You can contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top