Updated the latest files into master
This commit is contained in:
Deepak Raj Sundar
Родитель
9de162b8d3
Коммит
b1bafee965
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor Accordion Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor Accordion component of Syncfusion, and more details.
|
||||
description: Checkout and learn about getting started with Blazor Accordion component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: Accordion
|
||||
documentation: ug
|
||||
|
|
@ -9,101 +9,245 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor Accordion Component
|
||||
|
||||
This section briefly explains about how to include a [Accordion](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html) in the Blazor server-side application. Refer [Getting Started with Syncfusion Blazor for Server-Side in Visual Studio](../getting-started/blazor-server-side-visual-studio/) page for the introduction and configuring the common specifications.
|
||||
This section briefly explains about how to include [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
To get start quickly with Blazor Accordion, check on the following video:
|
||||
|
||||
{% youtube
|
||||
"youtube:https://www.youtube.com/watch?v=c5TX84Fc9SE"%}
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
## Prerequisites
|
||||
|
||||
Any one of the following standards can be used to install the Syncfusion Blazor library in the application.
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
### Using Syncfusion Blazor individual NuGet Packages [New standard]
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
> Starting with Volume 4, 2020 (v18.4.0.30) release, Syncfusion provides [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for the Syncfusion Blazor components. This new standard is highly recommended for the Blazor production applications. Refer to [this section](https://blazor.syncfusion.com/documentation/nuget-packages#benefits-of-using-individual-nuget-packages) to know the benefits of the individual NuGet packages.
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
1. Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) NuGet package to the application using the `NuGet Package Manager`.
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
2. Add the client-side style resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from the [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
## Install Syncfusion Blazor Navigations NuGet in the App
|
||||
|
||||
W> `Syncfusion.Blazor` package should not be installed along with the [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). Hence, add the above [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) static web assets (styles) in the application.
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
### Using Syncfusion.Blazor NuGet Package [Old standard]
|
||||
To add Blazor Accordion component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and then install it.
|
||||
|
||||
W> If the above new standard ([individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages)) is preferred , then skip this section. Using both the old and new standards in the same application will throw ambiguous compilation errors.
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the newly created application by using the `NuGet Package Manager`.
|
||||
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
2. Add the client-side style resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
@*<link href="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css" rel="stylesheet" />*@
|
||||
</head>
|
||||
```
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
> For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](../common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```html
|
||||
<head>
|
||||
...
|
||||
<link href="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css" rel="stylesheet" />
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
...
|
||||
</head>
|
||||
```
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
## Adding component package to the application
|
||||
### Blazor Server App
|
||||
|
||||
Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor.Navigations` package.
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Navigations
|
||||
```
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
## Add SyncfusionBlazor service in Startup file
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
Open the **Startup.cs** file and add services required by the Syncfusion components using the **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows.
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Adding Accordion component to the application
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, add the Syncfusion Blazor Accordion component in any web page (razor) in the `Pages` folder. For example, the Accordion component is added in the `~/Pages/Index.razor` page.
|
||||
## Add Style Sheet
|
||||
|
||||
```cshtml
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor Accordion component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Navigations** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Navigations
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion Blazor Accordion component in razor file. Here, the Accordion component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfAccordion>
|
||||
<AccordionItems>
|
||||
<AccordionItem Header="Margeret Peacock" Content="Margeret Peacock was born on Saturday , 01 December 1990. Now lives at Coventry House Miner Rd., London,UK. Margeret Peacock holds a position of Sales Coordinator in our WA department, (Seattle USA). Joined our company on Saturday , 01 May 2010"></AccordionItem>
|
||||
|
|
@ -111,11 +255,11 @@ Now, add the Syncfusion Blazor Accordion component in any web page (razor) in th
|
|||
<AccordionItem Header="Albert Dodsworth" Content="Albert Dodsworth was born on Thursday , 19 October 1989. Now lives at 4726 - 11th Ave. N.E., Seattle,USA.Albert Dodsworth holds a position of Sales Representative in our WA department, (Seattle USA). Joined our company on Friday , 01 May 2009"></AccordionItem>
|
||||
</AccordionItems>
|
||||
</SfAccordion>
|
||||
```
|
||||
|
||||
## Run the application
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
After successful compilation of the application, simply press `F5` to run the application.
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor Accordion` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Stared with Blazor Accumulation Chart in Server | Syncfusion
|
||||
description: Learn here all about Getting Started with Syncfusion Blazor Accumulation Chart in Blazor Server Side App using Visual Studio and more.
|
||||
description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: Accumulation Chart
|
||||
documentation: ug
|
||||
|
|
@ -9,121 +9,242 @@ documentation: ug
|
|||
|
||||
<!-- markdownlint-disable MD040 -->
|
||||
|
||||
# Blazor Accumulation Chart in Server Side App using Visual Studio
|
||||
# Getting Started with Blazor Accumulation Chart Component
|
||||
|
||||
This section briefly explains about how to include a [Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) in the Blazor Server-Side application. Refer [Getting Started with Syncfusion Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio/) page for the introduction and configuring the common specifications.
|
||||
This section briefly explains about how to include [Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
## Prerequisites
|
||||
|
||||
1. Install the [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the [NuGet Package Manager](https://blazor.syncfusion.com/documentation/nuget-packages/).
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
2. Add the client-side resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the **HEAD** element of the **~/Pages/_Host.cshtml** page. For Internet Explorer 11, kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
```html
|
||||
<head>
|
||||
<environment include="Development">
|
||||
....
|
||||
....
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
</environment>
|
||||
</head>
|
||||
```
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
3. Now add the lodash script to the **HEAD** element of the **/Pages/Host.cshtml** page, since it is been used in the [chart interactive]([https://www.syncfusion.com/blazor-components/blazor-charts/interactive-chart]) features. The absence of the script will result in console errors.
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<environment include="Development">
|
||||
....
|
||||
....
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
|
||||
</environment>
|
||||
</head>
|
||||
```
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
## Adding component package to the application
|
||||
## Install Syncfusion Blazor Chart NuGet in the App
|
||||
|
||||
Open `**~/_Imports.razor` file and include the `Syncfusion.Blazor.**` namespaces.
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
To add Blazor Accumulation Chart component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) and then install it.
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Accumulation Chart component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Charts** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Charts
|
||||
```
|
||||
|
||||
## Add SyncfusionBlazor service in Startup.cs
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Open the **Startup.cs** file and add services required by Syncfusion components using **service.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows.
|
||||
* Now, add the Syncfusion Blazor Accumulation Chart component in razor file. Here, the Accumulation Chart component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
During initial loading, collect and send the individual character size information in-order to render the chart. To avoid any disconnection, increase the buffer size to 64 KB or more over the SignalR connection.
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
services.AddSignalR(e => {
|
||||
e.MaximumReceiveMessageSize = 65536;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> Use the following configuration to host the Blazor server application on **Azure SignalR**.
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
services.AddSignalR(e => {e.MaximumReceiveMessageSize = 65536;}).AddAzureSignalR();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Add Accumulation Chart
|
||||
|
||||
To initialize the accumulation chart component add the following code to the **Index.razor** view page under **~/Pages** folder. In a new application, if the **Index.razor** page has any default content template, then those content can be completely removed and the following code can be added.
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
@using Syncfusion.Blazor.Charts
|
||||
<SfAccumulationChart>
|
||||
<AccumulationChartSeriesCollection>
|
||||
<AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
|
||||
|
|
@ -150,9 +271,11 @@ To initialize the accumulation chart component add the following code to the **
|
|||
new ChartData { Country= "Brazil", Medals= 20 },
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
On successful compilation of the application, the Syncfusion Blazor Accumulation Chart component will render in the web browser.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor Accumulation Chart` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
|
|
@ -160,9 +283,8 @@ On successful compilation of the application, the Syncfusion Blazor Accumulation
|
|||
|
||||
Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property, a title to the accumulation chart is added to provide the user with quick information about the data plotted in the chart.
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
@using Syncfusion.Blazor.Charts
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfAccumulationChart Title="Olympic Medal Details">
|
||||
<AccumulationChartSeriesCollection>
|
||||
|
|
@ -189,17 +311,18 @@ Using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
|
|||
new ChartData { Country= "Brazil", Medals= 20 },
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Add Data Label
|
||||
|
||||
The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to **true** in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html).
|
||||
The data labels are added to improve the readability of the accumulation chart. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property to `true` in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html).
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
@using Syncfusion.Blazor.Charts
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfAccumulationChart Title="Olympic Medal Details">
|
||||
<AccumulationChartSeriesCollection>
|
||||
|
|
@ -209,36 +332,17 @@ The data labels are added to improve the readability of the accumulation chart.
|
|||
</AccumulationChartSeriesCollection>
|
||||
</SfAccumulationChart>
|
||||
|
||||
@code{
|
||||
public class ChartData
|
||||
{
|
||||
public string Country { get; set; }
|
||||
public double Medals { get; set; }
|
||||
}
|
||||
|
||||
public List<ChartData> MedalDetails = new List<ChartData>
|
||||
{
|
||||
new ChartData { Country= "United States of America", Medals= 46 },
|
||||
new ChartData { Country= "Great Britain", Medals= 27 },
|
||||
new ChartData { Country= "China", Medals= 26 },
|
||||
new ChartData { Country= "United Kingdom", Medals= 23 },
|
||||
new ChartData { Country= "Australia", Medals= 16 },
|
||||
new ChartData { Country= "India", Medals= 36 },
|
||||
new ChartData { Country= "Nigeria", Medals= 12 },
|
||||
new ChartData { Country= "Brazil", Medals= 20 },
|
||||
};
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Enable Tooltip
|
||||
|
||||
When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to **true**.
|
||||
When space constraints prevent from displaying the information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to `true`.
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
@using Syncfusion.Blazor.Charts
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfAccumulationChart Title="Olympic Medal Details">
|
||||
<AccumulationChartSeriesCollection>
|
||||
|
|
@ -248,67 +352,30 @@ When space constraints prevent from displaying the information using data labels
|
|||
<AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
|
||||
</SfAccumulationChart>
|
||||
|
||||
@code{
|
||||
public class ChartData
|
||||
{
|
||||
public string Country { get; set;}
|
||||
public double Medals {get; set;}
|
||||
}
|
||||
|
||||
public List<ChartData> MedalDetails = new List<ChartData>
|
||||
{
|
||||
new ChartData { Country= "United States of America", Medals= 46 },
|
||||
new ChartData { Country= "Great Britain", Medals= 27 },
|
||||
new ChartData { Country= "China", Medals= 26 },
|
||||
new ChartData { Country= "United Kingdom", Medals= 23 },
|
||||
new ChartData { Country= "Australia", Medals= 16 },
|
||||
new ChartData { Country= "India", Medals= 36 },
|
||||
new ChartData { Country= "Nigeria", Medals= 12 },
|
||||
new ChartData { Country= "Brazil", Medals= 20 },
|
||||
};
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
## Enable Legend
|
||||
|
||||
Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to **true** in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html).
|
||||
Legend is used for the accumulation chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Visible) property to `true` in the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html).
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
@using Syncfusion.Blazor.Charts
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfAccumulationChart Title="Olympic Medal Details">
|
||||
<AccumulationChartSeriesCollection>
|
||||
<AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
|
||||
<AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
|
||||
</AccumulationChartSeries>
|
||||
</AccumulationChartSeriesCollection>
|
||||
<AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
|
||||
<AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
|
||||
</SfAccumulationChart>
|
||||
<SfAccumulationChart Title="Olympic Medal Details">
|
||||
<AccumulationChartSeriesCollection>
|
||||
<AccumulationChartSeries DataSource="@MedalDetails" XName="Country" YName="Medals">
|
||||
<AccumulationDataLabelSettings Visible="true"></AccumulationDataLabelSettings>
|
||||
</AccumulationChartSeries>
|
||||
</AccumulationChartSeriesCollection>
|
||||
<AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
|
||||
<AccumulationChartLegendSettings Visible="true"></AccumulationChartLegendSettings>
|
||||
</SfAccumulationChart>
|
||||
|
||||
@code{
|
||||
public class ChartData
|
||||
{
|
||||
public string Country { get; set;}
|
||||
public double Medals { get; set;}
|
||||
}
|
||||
|
||||
public List<ChartData> MedalDetails = new List<ChartData>
|
||||
{
|
||||
new ChartData { Country= "United States of America", Medals= 46 },
|
||||
new ChartData { Country= "Great Britain", Medals= 27 },
|
||||
new ChartData { Country= "China", Medals= 26 },
|
||||
new ChartData { Country= "United Kingdom", Medals= 23 },
|
||||
new ChartData { Country= "Australia", Medals= 16 },
|
||||
new ChartData { Country= "India", Medals= 36 },
|
||||
new ChartData { Country= "Nigeria", Medals= 12 },
|
||||
new ChartData { Country= "Brazil", Medals= 20 },
|
||||
};
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,17 +15,17 @@ Theme Studio for Syncfusion Blazor can be used to customize a new theme from an
|
|||
|
||||
The Syncfusion Blazor themes are developed under the SCSS environment. Each theme has a unique common variable list. When you change the common variable color code value, it will reflect in all the Syncfusion Blazor components. All Syncfusion Blazor component styles are derived from these [theme-based common variables](#common-variables). This common variable list is handled inside the Theme Studio application for customizing theme-based colors.
|
||||
|
||||
**Step 1:** Navigate to the Theme Studio application from this link: [Theme Studio](https://blazor.syncfusion.com/themestudio/).
|
||||
1. Open [Blazor Theme Studio](https://blazor.syncfusion.com/themestudio/) application.
|
||||
|
||||
**Step 2:** The Theme Studio application page can be divided into two sections: the controls preview section on the left, and the theme customization section on the right.
|
||||
2. The Theme Studio application page can be divided into two sections: the controls preview section on the left, and the theme customization section on the right.
|
||||
|
||||
|
||||
|
||||
**Step 3:** Click the color pickers in the theme customization section to select your desired colors.
|
||||
3. Click the color pickers in the theme customization section to select your desired colors.
|
||||
|
||||
|
||||
|
||||
**Step 4:** The Syncfusion Blazor components will be rendered with the newly selected colors in the preview section after selecting a custom color form picker.
|
||||
4. The Syncfusion Blazor components will be rendered with the newly selected colors in the preview section after selecting a custom color form picker.
|
||||
|
||||
|
||||
|
||||
|
|
@ -33,15 +33,15 @@ The Syncfusion Blazor themes are developed under the SCSS environment. Each them
|
|||
|
||||
Using the theme studio, you can apply custom themes to a list of specific controls. This option is used when you integrate a selective list of Syncfusion Blazor components in your application. The theme studio will filter the selected controls and customize the final output for the controls’ styles alone by reducing the final output file size.
|
||||
|
||||
**Step 1:** Click the Filter icon at the top-right corner, and select the controls whose theme you want to customize.
|
||||
1. Click the Filter icon at the top-right corner, and select the controls whose theme you want to customize.
|
||||
|
||||
|
||||
|
||||
**Step 2:** Click the Apply button in the Filter dialog. Now, only the selected controls will be rendered in the controls preview section.
|
||||
2. Click the Apply button in the Filter dialog. Now, only the selected controls will be rendered in the controls preview section.
|
||||
|
||||
|
||||
|
||||
**Step 3:** Now, you can customize the colors in the theme customization section for the controls selected.
|
||||
3. Now, you can customize the colors in the theme customization section for the controls selected.
|
||||
|
||||
|
||||
|
||||
|
|
@ -49,15 +49,15 @@ Using the theme studio, you can apply custom themes to a list of specific contro
|
|||
|
||||
You can download the custom styles after customizing the theme colors.
|
||||
|
||||
**Step 1:** Click the Download button at the top-right corner, and the Download dialog will appear.
|
||||
1. Click the Download button at the top-right corner, and the Download dialog will appear.
|
||||
|
||||
|
||||
|
||||
**Step 2:** Assign a theme name in the File Name field, and click the Download button.
|
||||
2. Assign a theme name in the File Name field, and click the Download button.
|
||||
|
||||
|
||||
|
||||
**Step 3:** The download styles will come as a zip file that contains SCSS and CSS files for the selected Syncfusion Blazor components. The current settings are stored in the `settings.json` file.
|
||||
3. The download styles will come as a zip file that contains SCSS and CSS files for the selected Syncfusion Blazor components. The current settings are stored in the `settings.json` file.
|
||||
|
||||
|
||||
|
||||
|
|
@ -65,37 +65,42 @@ You can download the custom styles after customizing the theme colors.
|
|||
|
||||
You can directly use the customized CSS file in the web application.
|
||||
|
||||
**Step 1:** Copy and paste the customized CSS file from the download folder into any folder, e.g., `~/wwwroot/styles/{file-name}.css`.
|
||||
1. Copy and paste the customized CSS file from the download folder into any folder, e.g., `~/wwwroot/styles/{file-name}.css`.
|
||||
|
||||
**Step 2:** Refer the customized CSS file reference in the `~/wwwroot/index.html` or `~/Pages/_Host.cshtml` main page head section.
|
||||
2. Refer the customized CSS file reference as follows,
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="styles/{file-name}.css" rel="stylesheet"/>
|
||||
</head>
|
||||
```
|
||||
* For **Blazor WebAssembly application**, refer style sheet inside the `<head>` of **wwwroot/index.html** file.
|
||||
* For **Blazor Server application**, refer style sheet inside the `<head>` of
|
||||
* **~/Pages/_Host.cshtml** file for .NET 3 and .NET 5.
|
||||
* **~/Pages/_Layout.cshtml** for .NET 6.
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="styles/{file-name}.css" rel="stylesheet"/>
|
||||
</head>
|
||||
```
|
||||
|
||||
## Import previously changed settings into theme studio
|
||||
|
||||
If you need to change your application theme and UI design in the future, do not customize the Syncfusion Blazor components from scratch in the theme studio. Just import the old `settings.json` file to review and update your stored settings in the Theme Studio application.
|
||||
|
||||
**Step 1:** Click the Import icon at the top-right corner.
|
||||
1. Click the Import icon at the top-right corner.
|
||||
|
||||
|
||||
|
||||
**Step 2:** The Import Theme dialog will open. Click the Browse button and select the `settings.json` file you exported previously.
|
||||
2. The Import Theme dialog will open. Click the Browse button and select the `settings.json` file you exported previously.
|
||||
|
||||
|
||||
|
||||
**Step 3:** Click the Import button.
|
||||
3. Click the Import button.
|
||||
|
||||
|
||||
|
||||
**Step 4:** The stored data will be reflected in the Theme Studio application. Now, you can change the theme colors based on your latest design and export the theme again.
|
||||
4. The stored data will be reflected in the Theme Studio application. Now, you can change the theme colors based on your latest design and export the theme again.
|
||||
|
||||
|
||||
|
||||
**Step 5:** The exported file contains your latest changes. You can just replace the older custom style with a new style to refresh your application.
|
||||
5. The exported file contains your latest changes. You can just replace the older custom style with a new style to refresh your application.
|
||||
|
||||
## Common Variables
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor W
|
|||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
|
@ -73,7 +73,7 @@ var app = builder.Build();
|
|||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="12" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -100,7 +100,7 @@ namespace BlazorApplication
|
|||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="11" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
|
|
@ -118,7 +118,7 @@ await builder.Build().RunAsync();
|
|||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -140,7 +140,7 @@ namespace WebApplication1
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
|
|
@ -184,7 +184,7 @@ The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroo
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` as follows,
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
|
|
@ -193,20 +193,22 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -215,11 +217,12 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -229,7 +232,7 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
|
||||
## Add Syncfusion Blazor Autocomplete component
|
||||
|
||||
* Open `~/_Imports.razor` file or any other page under the `~/Pages` folder where the component is to be added and import the `Syncfusion.Blazor.DropDowns` package.
|
||||
* Open `~/_Imports.razor` file or any other page under the `~/Pages` folder where the component is to be added and import the `Syncfusion.Blazor.DropDowns` namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
|
@ -269,7 +272,7 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press `F5` to run the application. Then, the Syncfusion `Blazor AutoComplete` component will be rendered in the default web browser.
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor AutoComplete` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor Badge Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor Badge component of Syncfusion, and more details.
|
||||
description: Checkout and learn about getting started with Blazor Badge component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: Badge
|
||||
documentation: ug
|
||||
|
|
@ -11,47 +11,234 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor Badge Component
|
||||
|
||||
This section briefly explains about how to include a `Badge` in your Blazor server-side application. You can refer [Getting Started with Syncfusion Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) page for the introduction and configuring the common specifications.
|
||||
This section briefly explains about how to include Blazor `Badge` component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
## Prerequisites
|
||||
|
||||
* Install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
* You can add the client-side style resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
* For `Internet Explorer` 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
## Install Syncfusion Blazor NuGet in the App
|
||||
|
||||
## Adding Badge component to the application
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
Now, add the Syncfusion Blazor Badge component in any web page `razor` in the `Pages` folder. For example, the Badge component is added in the `~/Pages/Index.razor` page.
|
||||
To add Blazor Badge component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) and then install it.
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor Badge component
|
||||
|
||||
* Now, add the Syncfusion Blazor Badge component in razor file. Here, the Badge component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
```cshtml
|
||||
<h1>Badge Component <span class="e-badge">New</span></h1>
|
||||
```
|
||||
|
||||
## Run the application
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
After successful compilation of your application, simply press `F5` to run the application.
|
||||
|
||||
Output be like the below.
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor Badge` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor Barcode Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor Barcode component of Syncfusion, and more details.
|
||||
description: Checkout and learn about getting started with Blazor Barcode component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: Barcode
|
||||
documentation: ug
|
||||
|
|
@ -9,85 +9,246 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor Barcode Component
|
||||
|
||||
This section briefly explains about how to include a BarcodeGenerator in your Blazor Server-Side application. You can refer [Getting Started with Syncfusion Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio/) page for the introduction and configuring the common specifications.
|
||||
This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
## Prerequisites
|
||||
|
||||
1. Install the [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) NuGet package to the application by using the [NuGet Package Manager](https://blazor.syncfusion.com/documentation/nuget-packages/).
|
||||
2. You can add the client-side resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
<environment include="Development">
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
|
||||
</environment>
|
||||
</head>
|
||||
```
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
> For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
<environment include="Development">
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
</environment>
|
||||
</head>
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
```
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
## Adding component package to the application
|
||||
## Install Syncfusion Blazor BarcodeGenerator NuGet in the App
|
||||
|
||||
Open **~/_Imports.Blazor** file and import the `Syncfusion.Blazor.BarcodeGenerator` packages.
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
To add Blazor Barcode component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and then install it.
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.BarcodeGenerator
|
||||
```
|
||||
|
||||
## Add SyncfusionBlazor service in Startup.cs
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Open the **Startup.cs** file and add services required by Syncfusion components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows.
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor;
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Note**: To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by `AddSyncfusionBlazor(true)` and load the scripts in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
<environment include="Development">
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js"></script>
|
||||
</environment>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
|
||||
## Adding BarcodeGenerator component to the Application
|
||||
{% endhighlight %}
|
||||
|
||||
BarcodeGenerator component can be rendered by using the [SfBarcodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html) tag helper in ASP.NET Core Blazor application. Add the BarcodeGenerator component in any web page `Blazor` in the `Pages` folder. For example, the BarcodeGenerator component is added in the `~/Pages/Index.Blazor` page.
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
The following example shows a basic BarcodeGenerator component.
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
```cshtml
|
||||
<SfBarcodeGenerator Width="200px" Height="150px" Mode="@RenderingMode.SVG" Type="@BarcodeType.Codabar" Value="123456789"></SfBarcodeGenerator>
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor Barcode component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.BarcodeGenerator** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.BarcodeGenerator
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion Blazor Barcode component in razor file. Here, the Barcode component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfBarcodeGenerator Width="200px" Height="150px" Type="@BarcodeType.Codabar" Value="123456789"></SfBarcodeGenerator>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor Barcode` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
|
|
@ -97,10 +258,13 @@ The following example shows a basic BarcodeGenerator component.
|
|||
|
||||
You can add the QR code in our barcode generator component.
|
||||
|
||||
```cshtml
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfQRCodeGenerator Width="200px" Height="150px" Value="Syncfusion"></SfQRCodeGenerator>
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
|
@ -108,10 +272,13 @@ You can add the QR code in our barcode generator component.
|
|||
|
||||
You can add the Data Matrix code in our barcode generator component.
|
||||
|
||||
```cshtml
|
||||
<SfDataMatrixGenerator Width="200" Height="150" Mode="@RenderingMode.SVG" Value="SYNCFUSION"></SfDataMatrixGenerator>
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
```
|
||||
<SfDataMatrixGenerator Width="200" Height="150" Mode="@RenderingMode.SVG" Value="SYNCFUSION"></SfDataMatrixGenerator>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor W
|
|||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
|
@ -68,7 +68,7 @@ var app = builder.Build();
|
|||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="12" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -95,7 +95,7 @@ namespace BlazorApplication
|
|||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
|
|
@ -105,7 +105,7 @@ var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
|||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
await builder.Build().RunAsync();
|
||||
|
|
@ -113,7 +113,8 @@ await builder.Build().RunAsync();
|
|||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
|
|
@ -133,7 +134,7 @@ namespace WebApplication1
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
|
|
@ -180,7 +181,7 @@ The theme style sheet from NuGet can be referred inside the `<head>` element of
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` as follows,
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
|
|
@ -189,20 +190,22 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -211,11 +214,12 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor Bullet Chart Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor Bullet Chart component of Syncfusion, and more details.
|
||||
description: Checkout and learn about getting started with Blazor Bullet Chart component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: Bullet Chart
|
||||
documentation: ug
|
||||
|
|
@ -9,70 +9,239 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor Bullet Chart Component
|
||||
|
||||
This section briefly explains how to include a Bullet Chart component in the Blazor server-side application. Refer to [Getting Started with Syncfusion Blazor for server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio/) page for introduction and configuring common specifications.
|
||||
This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
## Importing Syncfusion Blazor Bullet Chart component in the application
|
||||
## Prerequisites
|
||||
|
||||
1. Install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the [NuGet Package Manager](https://blazor.syncfusion.com/documentation/nuget-packages/).
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
2. Add the client-side resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
|
||||
<!---CDN--->
|
||||
@*<link href="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css" rel="stylesheet" />*@
|
||||
</head>
|
||||
```
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
> For Internet Explorer 11, kindly refer to the polyfills. Refer to the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css" rel="stylesheet" />
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
## Adding component package to the application
|
||||
## Install Syncfusion Blazor Charts NuGet in the App
|
||||
|
||||
Open the **~/_Imports.razor** file and include the `Syncfusion.Blazor.Charts` namespace.
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Charts
|
||||
```
|
||||
To add Blazor Bullet Chart component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts) and then install it.
|
||||
|
||||
## Adding SyncfusionBlazor service in Startup.cs
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open the **Startup.cs** file and add services required by Syncfusion components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows.
|
||||
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
```csharp
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> To enable the custom client-side source loading from CRG or CDN, please refer to the section about [custom resources in Blazor application](https://blazor.syncfusion.com/documentation/common/custom-resource-generator/#how-to-use-custom-resources-in-the-blazor-application).
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Adding Bullet Chart component
|
||||
## Add Style Sheet
|
||||
|
||||
To initialize the Bullet Chart component, add the below code to the **Index.razor** view page under **~/Pages** folder. In a new application, if **Index.razor** page has any default content template, then those content can be completely removed, and following code can be added.
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor Bullet Chart component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Charts** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Charts
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion Blazor Barcode component in razor file. Here, the Barcode component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" TargetField="TargetValue" Minimum="0" Maximum="300" Interval="50">
|
||||
</SfBulletChart>
|
||||
|
|
@ -88,9 +257,11 @@ To initialize the Bullet Chart component, add the below code to the **Index.raz
|
|||
new ChartData { FieldValue = 270, TargetValue = 250 }
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
On successful compilation of the application, the Syncfusion Blazor Bullet Chart component will render in the web browser as follows.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor Bullet Chart` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
|
|
@ -98,24 +269,14 @@ On successful compilation of the application, the Syncfusion Blazor Bullet Chart
|
|||
|
||||
Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Title) property in the Bullet Chart, to provide quick information to the user about the data plotted in the component.
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" TargetField="TargetValue" Minimum="0" Maximum="300" Interval="50" Title="Revenue">
|
||||
</SfBulletChart>
|
||||
|
||||
@code{
|
||||
public class ChartData
|
||||
{
|
||||
public double FieldValue { get; set; }
|
||||
public double TargetValue { get; set; }
|
||||
}
|
||||
public List<ChartData> BulletChartData = new List<ChartData>
|
||||
{
|
||||
new ChartData { FieldValue = 270, TargetValue = 250 }
|
||||
};
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
|
@ -123,8 +284,8 @@ Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusio
|
|||
|
||||
Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRangeCollection.html) to measure the qualitative state by observing the distance between each range.
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" TargetField="TargetValue" Minimum="0" Maximum="300" Interval="50" Title="Revenue">
|
||||
<BulletChartRangeCollection>
|
||||
|
|
@ -134,18 +295,8 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com
|
|||
</BulletChartRangeCollection>
|
||||
</SfBulletChart>
|
||||
|
||||
@code{
|
||||
public class ChartData
|
||||
{
|
||||
public double FieldValue { get; set; }
|
||||
public double TargetValue { get; set; }
|
||||
}
|
||||
public List<ChartData> BulletChartData = new List<ChartData>
|
||||
{
|
||||
new ChartData { FieldValue = 270, TargetValue = 250 }
|
||||
};
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
|
@ -153,8 +304,8 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com
|
|||
|
||||
Use the tooltip to show the measured values by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Enable) property to **true** in the [BulletChartTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html).
|
||||
|
||||
```cshtml
|
||||
@page "/"
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" TargetField="TargetValue" Minimum="0" Maximum="300" Interval="50" Title="Revenue">
|
||||
<BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
|
||||
|
|
@ -165,17 +316,7 @@ Use the tooltip to show the measured values by setting the [Enable](https://help
|
|||
</BulletChartRangeCollection>
|
||||
</SfBulletChart>
|
||||
|
||||
@code{
|
||||
public class ChartData
|
||||
{
|
||||
public double FieldValue { get; set; }
|
||||
public double TargetValue { get; set; }
|
||||
}
|
||||
public List<ChartData> BulletChartData = new List<ChartData>
|
||||
{
|
||||
new ChartData { FieldValue = 270, TargetValue = 250 }
|
||||
};
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor Button Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor Button component of Syncfusion, and more details.
|
||||
description: Checkout and learn about getting started with Blazor Button component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: Button
|
||||
documentation: ug
|
||||
|
|
@ -11,99 +11,251 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor Button Component
|
||||
|
||||
This section briefly explains about how to include [Button](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html) Component in your Blazor server-side application. You can refer [Getting Started with Syncfusion Blazor for Server-side in Visual Studio 2019 page](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio-2019/) page for the introduction and configuring the common specifications.
|
||||
This section briefly explains about how to include [Blazor Button](https://www.syncfusion.com/blazor-components/blazor-button) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
To get start quickly with Button Component using Blazor, you can check on this video:
|
||||
|
||||
{% youtube
|
||||
"youtube:https://www.youtube.com/watch?v=qkHqP_CymrI"%}
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
## Prerequisites
|
||||
|
||||
1. Install the [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
2. You can add the client-side style resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
@*<link href="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css" rel="stylesheet" />*@
|
||||
</head>
|
||||
```
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
## Adding component package to the application
|
||||
## Install Syncfusion Blazor Buttons NuGet in the App
|
||||
|
||||
Open `/_Imports.razor file` and import the **Syncfusion.Blazor.Buttons** package.
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
```cshtml
|
||||
To add Blazor Button component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) and then install it.
|
||||
|
||||
@using Syncfusion.Blazor.Buttons
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
```
|
||||
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
||||
|
||||
## Add SyncfusionBlazor service in Startup.cs
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
Open the **Startup.cs** file and add services required by Syncfusion components.
|
||||
Add **services.AddSyncfusionBlazor()** method in the ConfigureServices function as follows.
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
```csharp
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by **AddSyncfusionBlazor(true)** and load the scripts in the HEAD element of the **~/Pages/_Host.cshtml** page.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
<environment include="Development">
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js">
|
||||
</script>
|
||||
</environment>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
|
||||
## Adding component package to the application
|
||||
{% endhighlight %}
|
||||
|
||||
Open `/_Imports.razor file` and import the Syncfusion.Blazor.Buttons packages otherwise import these packages in the individual `razor` pages.
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor Button component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Buttons** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Buttons
|
||||
```
|
||||
|
||||
## Adding Button component to the application
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, add the Syncfusion Blazor Button component in `razor` page in the `Pages` folder. For example the Button component is added in the `~/Pages/Index.razor` page.
|
||||
* Now, add the Syncfusion Blazor Button component in razor file. Here, the Button component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
```cshtml
|
||||
<SfButton>Button</SfButton>
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Run the application
|
||||
|
||||
After successful compilation of your application, simply press F5 to run the application. The Blazor Button component will render in the web browser as shown below
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor Button` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -25,92 +25,91 @@ The Syncfusion Blazor components supports to refer scripts externally at the app
|
|||
|
||||
### Blazor Server App
|
||||
|
||||
* If you're using `.NET 6` Blazor Server App, set [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` using `AddSyncfusionBlazor` service method in `~/Program.cs` file.
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle="~/Program.cs" hl_lines="10 11" %}
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service by setting `IgnoreScriptIsolation`.
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service by setting `IgnoreScriptIsolation`.
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="10" %}
|
||||
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
....
|
||||
// Set IgnoreScriptIsolation as true to load scripts externally.
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
var app = builder.Build();
|
||||
....
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
* If you're using `.NET 5 or 3.X project` Blazor Server App, set [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` using `AddSyncfusionBlazor` service method in `~/Startup.cs` file.
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle="~/Startup.cs" hl_lines="10 11" %}
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
namespace WebApplication1
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
public class Startup
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
....
|
||||
// Set IgnoreScriptIsolation as true to load scripts externally.
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WASM App
|
||||
|
||||
If you're using Blazor WebAssembly App, set [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` using `AddSyncfusionBlazor` service method in `~/Program.cs` file.
|
||||
For Blazor WebAssembly App, set [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` using `AddSyncfusionBlazor` service method in `~/Program.cs` file.
|
||||
|
||||
* .NET 6 Blazor WebAssembly App
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" %}
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle="~/Program.cs" hl_lines="8 11" %}
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
....
|
||||
// Set IgnoreScriptIsolation as true to load scripts externally.
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
var app = builder.Build();
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
{% endhighlight %}
|
||||
|
||||
* .NET 5 or .NET Core 3.X Blazor WebAssembly App
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" %}
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle="~/Program.cs" hl_lines="7 8" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
....
|
||||
public static async Task Main(string[] args)
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args) ;
|
||||
....
|
||||
// Set IgnoreScriptIsolation as true to load scripts externally.
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> If you set [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true`, You need to reference scripts externally via [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) or [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) or and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator).
|
||||
|
||||
|
|
@ -158,18 +157,6 @@ In addition to above, Syncfusion Blazor components provides latest scripts in CD
|
|||
|
||||
You can refer the Syncfusion Blazor scripts through the NuGet package's static web assets using [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) as `true` in our Syncfusion Blazor Service.
|
||||
|
||||
|
||||
* If you are using [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) NuGet package, refer to the below code to refer script from static web assets.
|
||||
|
||||
It is not recommended to use [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) NuGet for production environment. Use individual NuGet packages for production.
|
||||
|
||||
```html
|
||||
<head>
|
||||
...
|
||||
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
* If you are using Syncfusion [Blazor individual NuGet package](https://blazor.syncfusion.com/documentation/nuget-packages), the combined scripts available in [Syncfusion.Blazor.Core](https://www.nuget.org/packages/Syncfusion.Blazor.Core/) package. You refer to the below code to refer script from static web assets
|
||||
|
||||
```html
|
||||
|
|
@ -189,6 +176,17 @@ You can refer the Syncfusion Blazor scripts through the NuGet package's static w
|
|||
</head>
|
||||
```
|
||||
|
||||
* If you are using [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) NuGet package, refer to the below code to refer script from static web assets.
|
||||
|
||||
It is not recommended to use [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) NuGet for production environment. Use individual NuGet packages for production.
|
||||
|
||||
```html
|
||||
<head>
|
||||
...
|
||||
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
> The PDF Viewer and Document Editor component scripts are available in static web assets from 19.3.* version. If you are using PDF Viewer or Document Editor component with 19.2.* version, it automatically switch to the JavaScript isolation in the application end.
|
||||
|
||||
## Custom Resource Generator
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ Search and select the required Syncfusion Blazor UI components from the CRG to g
|
|||
|
||||
Refer to the following steps to search and select the components in CRG:
|
||||
|
||||
1. Navigate to the Custom Resource Generator (CRG) application at [CRG](https://blazor.syncfusion.com/crg).
|
||||
1. Open [Syncfusion Custom Resource Generator](https://blazor.syncfusion.com/crg) (CRG) application.
|
||||
|
||||
2. Type the required component name in the search bar, and then select the checkbox. The dependency of the selected component is resolved in the application itself, so you do not need to choose each dependent component manually.
|
||||
|
||||
|
|
@ -53,90 +53,102 @@ Refer to the following steps to download the custom resources in CRG:
|
|||
|
||||
## How to use custom resources in the Blazor application
|
||||
|
||||
1. Copy or paste the downloaded custom resources in the Blazor application `~/wwwroot` folder.
|
||||
1. Copy and paste the downloaded custom resources in the Blazor application `~/wwwroot` folder.
|
||||
|
||||
2. Set `IgnoreScriptIsolation` as true in `AddSyncfusionBlazor` service in `~/Startup.cs` file for Blazor Server app or `~/Program.cs` file for Blazor WebAssembly app.
|
||||
2. Set [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) as `true` while adding Syncfusion blazor service using `AddSyncfusionBlazor()` as follows,
|
||||
|
||||
**Blazor Server App (~/Startup.cs)**
|
||||
```c#
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service by setting `IgnoreScriptIsolation`.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service by setting `IgnoreScriptIsolation`.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
|
||||
// Set IgnoreScriptIsolation as true to load custom scripts
|
||||
services.AddSyncfusionBlazor(options => {
|
||||
options.IgnoreScriptIsolation = true;
|
||||
});
|
||||
|
||||
services.AddSingleton<WeatherForecastService>();
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
}
|
||||
...
|
||||
}
|
||||
```
|
||||
}
|
||||
|
||||
> If you are using Blazor Server App with net6.0 SDK, the **Startup.cs** file is not available in the Application. Set `IgnoreScriptIsolation` as true in `AddSyncfusionBlazor` service in `~/Program.cs` file for Blazor Server app.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```c#
|
||||
// For .NET 6 project, add the Syncfusion Blazor Service in Program.cs file.
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
### Blazor WASM App
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
For Blazor WebAssembly App, set [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` using `AddSyncfusionBlazor` service method in `~/Program.cs` file.
|
||||
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
var app = builder.Build();
|
||||
....
|
||||
....
|
||||
```
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" %}
|
||||
|
||||
**Blazor WebAssembly App (~/Program.cs)**
|
||||
```c#
|
||||
// For .NET 6 project.
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor();
|
||||
var app = builder.Build();
|
||||
....
|
||||
....
|
||||
```
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
```c#
|
||||
// For .NET 5 or .NET Core SDK 3.1 project.
|
||||
using Syncfusion.Blazor;
|
||||
....
|
||||
....
|
||||
public static async Task Main(string[] args)
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" %}
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args) ;
|
||||
....
|
||||
....
|
||||
|
||||
// Set IgnoreScriptIsolation as true to load custom scripts
|
||||
builder.Services.AddSyncfusionBlazor(options => {
|
||||
options.IgnoreScriptIsolation = true;
|
||||
});
|
||||
|
||||
await builder.Build().RunAsync();
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
```
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
3. Now, manually add the custom interop script and styles in the Blazor App.
|
||||
|
||||
a) For `.NET 6` Blazor Server app, add the custom interop script and styles in the `~/Pages/_Layout.cshtml` page.
|
||||
|
||||
b) For `.NET 5 / .NET Core SDK 3.1` Blazor Server app, add the custom interop script and styles in the `~/Pages/_Host.cshtml` page.
|
||||
|
||||
c) For Blazor WebAssembly app, add the custom interop script and styles in the `~/wwwroot/index.html` page.
|
||||
* For **Blazor WASM App**, reference custom interop script in `~/wwwroot/index.html` file.
|
||||
* For **Blazor Server App**, reference custom interop script in `~/Pages/_Layout.cshtml` file for `.NET 6` project and in `~/Pages/_Host.cshtml` file for `.NET 5 and .NET Core 3.X` project.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -146,26 +158,6 @@ Refer to the following steps to download the custom resources in CRG:
|
|||
<script src="syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
***How to use CDN resources in the Blazor application***
|
||||
|
||||
The same theme and script files can be referred through the CDN version by setting the `IgnoreScriptIsolation` to true in `AddSyncfusionBlazor` service in `~/Startup.cs` file for Blazor Server app or `~/Program.cs` file for Blazor WebAssembly app which is in step 2.
|
||||
|
||||
a) For `.NET 6` Blazor Server app, add the CDN interop script and styles in the `~/Pages/_Layout.cshtml` page.
|
||||
|
||||
b) For `.NET 5 / .NET Core SDK 3.1` Blazor Server app, add the CDN interop script and styles in the `~/Pages/_Host.cshtml` page.
|
||||
|
||||
c) For Blazor WebAssembly app, add the CDN interop script and styles in the `~/wwwroot/index.html` page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
....
|
||||
<link href="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
4. Run the application and it will load the resources with application required components.
|
||||
|
||||
## Import previously generated settings into CRG
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor DataGrid Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor DataGrid component of Syncfusion, and more details.
|
||||
description: Checkout and learn about getting started with Blazor DataGrid component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -11,83 +11,282 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor DataGrid Component
|
||||
|
||||
This section briefly explains about how to include a [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) Component in your Blazor Server-Side and Client-Side application. You can refer to our Getting Started with [Blazor Server-Side DataGrid](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio-2019/) and [Blazor WebAssembly DataGrid](https://blazor.syncfusion.com/documentation/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio/) documentation pages for configuration specifications.
|
||||
This section briefly explains about how to include [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
To get start quickly with Blazor DataGrid component, you can check on this video.
|
||||
|
||||
{% youtube
|
||||
"youtube:https://www.youtube.com/watch?v=ClAlwPUv0_s" %}
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
## Prerequisites
|
||||
|
||||
1. Install the **Syncfusion.Blazor.Grid** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
2. You can add the client-side resources through [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference) or from [NuGet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
```html
|
||||
<head>
|
||||
<environment include="Development">
|
||||
....
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" />
|
||||
</environment>
|
||||
</head>
|
||||
```
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie) for more information.
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
## Adding component package to the application
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
Open **~/_Imports.razor** file and import the **Syncfusion.Blazor.Grids** package.
|
||||
## Install Syncfusion Blazor Grid NuGet in the App
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
```
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
## Add SyncfusionBlazor service in Startup.cs
|
||||
To add Blazor DataGrid component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and then install it.
|
||||
|
||||
Open the **Startup.cs** file and add services required by Syncfusion components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows.
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Add DataGrid Component
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
To initialize the DataGrid component add the below code to your **Index.razor** view page which is present under **~/Pages** folder.
|
||||
## Add Style Sheet
|
||||
|
||||
```csharp
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
<SfGrid>
|
||||
</SfGrid>
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
```
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor DataGrid component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Grid** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion DataGrid component in razor file. Here, the DataGrid component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 5).Select(x => new Order()
|
||||
{
|
||||
OrderID = 0 + x,
|
||||
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
|
||||
}).ToList();
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public int? OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor DataGrid` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
## Defining Row Data
|
||||
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the **OnInitialized** life cycle of the page.
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders">
|
||||
|
||||
</SfGrid>
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
|
@ -110,7 +309,9 @@ To bind data for the DataGrid component, you can assign a IEnumerable object to
|
|||
public double? Freight { get; set; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Defining Columns
|
||||
|
||||
|
|
@ -124,8 +325,8 @@ Let’s check the properties used here:
|
|||
* We have used [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, we need to define [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) as **Right**.
|
||||
* Also, we have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, we can format number and date values to standard or custom formats.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders">
|
||||
<GridColumns>
|
||||
|
|
@ -136,35 +337,15 @@ Let’s check the properties used here:
|
|||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Paging
|
||||
|
||||
The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
|
|
@ -176,35 +357,15 @@ The paging feature enables users to view the datagrid record in a paged view. It
|
|||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Sorting
|
||||
|
||||
The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
|
|
@ -216,35 +377,15 @@ The sorting feature enables you to order the records. It can be enabled by setti
|
|||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Filtering
|
||||
|
||||
The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
|
|
@ -256,35 +397,15 @@ The filtering feature enables you to view reduced amount of records based on fil
|
|||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Grouping
|
||||
|
||||
The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
|
|
@ -296,30 +417,9 @@ The grouping feature enables you to view the datagrid record in a grouped view.
|
|||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The following image represents datagrid with paging, sorting, filtering and grouping.
|
||||
|
||||
|
||||
## Handling exceptions
|
||||
|
|
@ -328,14 +428,14 @@ Exceptions occurred during grid actions can be handled without stopping applicat
|
|||
|
||||
The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event contains the error details returned from the server.
|
||||
|
||||
> We recommend you to bind **OnActionFailure** event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible.
|
||||
> We recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible.
|
||||
|
||||
The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
@using Syncfusion.Blazor.Data
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
<span class="error">@ErrorDetails</span>
|
||||
<SfGrid TValue="Order" AllowPaging="true">
|
||||
|
|
@ -372,7 +472,9 @@ The following sample code demonstrates notifying user when server-side exception
|
|||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Stared with Blazor DataGrid in WebAssembly | Syncfusion
|
||||
description: Learn here all about Getting Started with Syncfusion Blazor DataGrid Component in Blazor WebAssembly (WASM) App using CLI and more.
|
||||
description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid Component in Visual Studio using .NET CLI and more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -11,124 +11,260 @@ documentation: ug
|
|||
|
||||
# Blazor DataGrid Component in WebAssembly App using CLI
|
||||
|
||||
This article provides a step-by-step introduction to configure Syncfusion Blazor setup, build and run a simple Blazor WebAssembly application using [.NET Core CLI](https://dotnet.microsoft.com/download/dotnet-core/3.1).
|
||||
|
||||
> Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Please refer to this [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#blazor) for more information.
|
||||
This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using the [.NET CLI](https://dotnet.microsoft.com/download/dotnet-core/3.1).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
* [.NET Core SDK 3.1.3](https://dotnet.microsoft.com/download/dotnet-core/3.1)
|
||||
Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
## Create a Blazor WebAssembly project using .NET Core CLI
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
1. Install the Blazor project templates by using below command line in the command prompt:
|
||||
dotnet --version
|
||||
|
||||
```bash
|
||||
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
2. Once project templates installed, run the following command line to create a new Blazor WebAssembly application.
|
||||
## Create a Blazor WebAssembly project using .NET CLI
|
||||
|
||||
```bash
|
||||
dotnet new blazorwasm -o WebApplication1
|
||||
cd WebApplication1
|
||||
```
|
||||
Install the Blazor project templates by using below command line in the command prompt.
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
1. Now, add **Syncfusion.Blazor** NuGet package to the new application using the below command line.
|
||||
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
|
||||
|
||||
```bash
|
||||
dotnet add package Syncfusion.Blazor -v '{:nuget-version:}'
|
||||
dotnet restore
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
2. The Syncfusion Blazor package will be included in the newly created project after the installation process is completed.
|
||||
Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
3. Open **~/_Imports.razor** file and import the `Syncfusion.Blazor`.
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet new blazorwasm -o BlazorApp
|
||||
cd BlazorApp
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
For a hosted Blazor WebAssembly experience, add the hosted option (-ho or –hosted) option to the command.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet new blazorwasm -o BlazorApp -ho
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> If you have installed multiple SDK versions and need any specific framework version (net5.0/netcoreapp3.1) project, then add -f flag along with dotnet new blazorwasm comment. Refer [here](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new#blazorwasm) for the available options.
|
||||
|
||||
## Install Syncfusion Blazor packages in the App
|
||||
|
||||
Install Syncfusion Blazor packages in the App
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
Add `Syncfusion.Blazor.Grid` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See [Install and manage packages using the dotnet CLI](https://docs.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet add package Syncfusion.Blazor.Grid --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Grids
|
||||
```
|
||||
|
||||
4. Open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
Now, Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
namespace WebApplication1
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight razor tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApp
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public class Program
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor();
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
```
|
||||
}
|
||||
|
||||
5. Add the Syncfusion bootstrap4 theme in the `<head>` element of the **~/wwwroot/index.html** page.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
## Add Style Sheet
|
||||
|
||||
> The same theme file can be referred through the CDN version by using [https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css](https://cdn.syncfusion.com/blazor/18.2.44/styles/bootstrap4.css).
|
||||
> To use manual scripts other than the scripts from NuGet package, register the Blazor service in **~/Program.cs** file by using true parameter as mentioned below.
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
```csharp
|
||||
using Syncfusion.Blazor;
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(true);
|
||||
await builder.Build.RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
To add theme to the app, Add `Syncfusion.Blazor.Themes` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the NuGet package.
|
||||
|
||||
## Add DataGrid Component
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
To initialize the DataGrid component add the below code to your **Index.razor** view page which is present under **~/Pages** folder. For example, the DataGrid component is added in the **~/Pages/Index.razor** page.
|
||||
dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
||||
```cshtml
|
||||
<SfGrid >
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
</SfGrid>
|
||||
```
|
||||
Then the theme style from can be referred inside the `<head>` of the **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor DataGrid Component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Grids** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion DataGrid component in razor file. Here, the DataGrid component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 5).Select(x => new Order()
|
||||
{
|
||||
OrderID = 0 + x,
|
||||
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
|
||||
}).ToList();
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public int? OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* In the command prompt (Windows) or terminal (Linux and macOS) to run the following command to build and start the app. The app listening on `http://localhost:<port number>` and view it in the browser.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet run
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
> You need to include a valid license key (either paid or trial key) within your applications. Please refer to this [help topic](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) for more information.
|
||||
|
||||
## Defining Row Data
|
||||
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [dataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the **OnInitialized** life cycle of the page.
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [dataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
</SfGrid>
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<OrdersDetails> gridData { get; set; }
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Defining Columns
|
||||
|
||||
|
|
@ -143,129 +279,102 @@ Let’s check the properties used here:
|
|||
* We have used [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, we need to define `TextAlign` as `Right`.
|
||||
* Also, we have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, we can format number and date values to standard or custom formats.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders">
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Paging
|
||||
|
||||
The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Sorting
|
||||
|
||||
The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Filtering
|
||||
|
||||
The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Grouping
|
||||
|
||||
The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Output be like the below.
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Stared with Blazor DataGrid in WebAssembly | Syncfusion
|
||||
description: Learn here all about Getting Started with Syncfusion Blazor DataGrid in Blazor Server Side App using Visual Studio and more.
|
||||
description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid Component in Visual Studio and much more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -11,142 +11,196 @@ documentation: ug
|
|||
|
||||
# Blazor DataGrid Component in WebAssembly App using Visual Studio
|
||||
|
||||
This article provides a step-by-step instructions to configure Syncfusion Blazor DataGrid in a simple Blazor WebAssembly application using [Visual Studio 2019](https://visualstudio.microsoft.com/vs/).
|
||||
|
||||
> Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Please refer to this [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#blazor) for more information.
|
||||
This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using [Visual Studio](https://visualstudio.microsoft.com/vs/).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
* [Visual Studio 2019](https://visualstudio.microsoft.com/vs/)
|
||||
* [.NET Core SDK 3.1.3](https://dotnet.microsoft.com/download/dotnet-core/3.1)
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
> .NET Core SDK 3.1.3 requires Visual Studio 2019 16.6 or later.
|
||||
>
|
||||
> Syncfusion Blazor components are compatible with .NET Core 5.0 Preview 6 and it requires Visual Studio 16.7 Preview 1 or later.
|
||||
## Create a Blazor WebAssembly App in Visual Studio
|
||||
|
||||
## Create a Blazor WebAssembly project in Visual Studio 2019
|
||||
You can create **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
1. Install the essential project templates in the Visual Studio 2019 by running the below command line in the command prompt.
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
```bash
|
||||
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
|
||||
```
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
2. Choose **Create a new project** from the Visual Studio dashboard.
|
||||
## Install Syncfusion Blazor Packages in the App
|
||||
|
||||
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
3. Select **Blazor App** from the template and click **Next** button.
|
||||
To add Blazor DataGrid component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and then install it.
|
||||
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
4. Now, the project configuration window will popup. Click **Create** button to create a new project with the default project configuration.
|
||||
Open ~/_Imports.razor file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
5. Choose **Blazor WebAssembly App** from the dashboard and click **Create** button to create a new Blazor WebAssembly application. Make sure **.NET Core** and **ASP.NET Core 3.1** is selected at the top.
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> ASP.NET Core 3.1 available in Visual Studio 2019 version.
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
Now, Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
1. Now, install **Syncfusion.Blazor** NuGet package to the newly created application by using the **NuGet Package Manager**. Right-click the project and select Manage NuGet Packages.
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
2. Search **Syncfusion.Blazor** keyword in the Browser tab and install **Syncfusion.Blazor** NuGet package in the application.
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
3. The Syncfusion Blazor package will be installed in the project, once the installation process is completed.
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
4. Open **~/_Imports.razor** file and import the `Syncfusion.Blazor`.
|
||||
{% endhighlight %}
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Grids.
|
||||
```
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
5. Open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public class Program
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor();
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
```
|
||||
}
|
||||
|
||||
6. Add the Syncfusion bootstrap4 theme in the `<head>` element of the **~/wwwroot/index.html** page.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
## Add Style Sheet
|
||||
|
||||
> The same theme file can be referred through the CDN version by using [https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css](https://cdn.syncfusion.com/blazor/18.2.44/styles/bootstrap4.css).
|
||||
> To use manual scripts other than the scripts from NuGet package, register the Blazor service in **~/Program.cs** file by using true parameter as mentioned below.
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
```csharp
|
||||
using Syncfusion.Blazor;
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(true);
|
||||
await builder.Build.RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
## Add DataGrid Component
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
To initialize the DataGrid component add the below code to your **Index.razor** view page which is present under **~/Pages** folder. For example, the DataGrid component is added in the **~/Pages/Index.razor** page.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```cshtml
|
||||
<SfGrid >
|
||||
## Add Script Reference
|
||||
|
||||
</SfGrid>
|
||||
```
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application. Generate scripts and theme assets using [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by selecting the components you were using in the application.
|
||||
|
||||
## Add Blazor DataGrid Component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Grids** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion DataGrid component in razor file. Here, the DataGrid component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 5).Select(x => new Order()
|
||||
{
|
||||
OrderID = 0 + x,
|
||||
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
|
||||
}).ToList();
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public int? OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion Blazor DataGrid component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
> You need to include a valid license key (either paid or trial key) within your applications. Please refer to this [help topic](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) for more information.
|
||||
|
||||
## Defining Row Data
|
||||
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [dataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the **OnInitialized** life cycle of the page.
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [dataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
</SfGrid>
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<OrdersDetails> gridData { get; set; }
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Defining Columns
|
||||
|
||||
|
|
@ -161,129 +215,102 @@ Let’s check the properties used here:
|
|||
* We have used [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, we need to define `TextAlign` as `Right`.
|
||||
* Also, we have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, we can format number and date values to standard or custom formats.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders">
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Paging
|
||||
|
||||
The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
|
||||
The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to `true`. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Sorting
|
||||
|
||||
The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
|
||||
The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as `true`. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Filtering
|
||||
|
||||
The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
|
||||
The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as `true`. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Grouping
|
||||
|
||||
The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
|
||||
The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as `true`. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
|
||||
|
||||
```cshtml
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Output be like the below.
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Stared with Blazor DataGrid in Server Side | Syncfusion
|
||||
description: Learn here all about Getting Started with Syncfusion Blazor DataGrid in Blazor Server Side App using CLI and more.
|
||||
description: Checkout the documentation for getting started with Syncfusion Blazor DataGrid Component in Visual Side using .NET CLI and much more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
|
|
@ -11,120 +11,272 @@ documentation: ug
|
|||
|
||||
# Blazor DataGrid Component in Server Side App using CLI
|
||||
|
||||
This article provides a step-by-step instructions to configure Syncfusion Blazor Data Grid in Blazor Server side application using [.NET Core CLI](https://dotnet.microsoft.com/download/dotnet-core/3.1).
|
||||
|
||||
> Starting with version 17.4.0.39 (2019 Volume 4), you need to include a valid license key (either paid or trial key) within your applications. Please refer to this [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#blazor) for more information.
|
||||
This article provides a step-by-step instructions for building Blazor Server App with `Blazor DataGrid` using the [.NET CLI](https://dotnet.microsoft.com/download/dotnet-core/3.1).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
* [.NET Core SDK 3.1.3](https://dotnet.microsoft.com/download/dotnet-core/3.1)
|
||||
Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet --version
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Create a Blazor Server side project using .NET Core CLI
|
||||
|
||||
1. Run the following command line to create a new Blazor Server application.
|
||||
Run the `dotnet new blazorserver` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
```bash
|
||||
dotnet new blazorserver -o WebApplication1
|
||||
cd WebApplication1
|
||||
```
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
dotnet new blazorserver -o BlazorApp
|
||||
cd BlazorApp
|
||||
|
||||
1. Now, add **Syncfusion.Blazor** NuGet package to the new application using the below command line.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```bash
|
||||
dotnet add package Syncfusion.Blazor -v '{:nuget-version:}'
|
||||
dotnet restore
|
||||
```
|
||||
This command creates new Blazor app project and places it in a new directory called BlazorApp inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new) command topics for more details.
|
||||
|
||||
2. The Syncfusion Blazor package will be included in the newly created project after the installation process is completed.
|
||||
> If you have installed multiple SDK versions and need any specific framework version (net5.0/netcoreapp3.1) project, then add -f flag along with dotnet new blazorserver comment. Refer [here](https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for the available options.
|
||||
|
||||
3. Open **~/_Imports.razor** file and import the `Syncfusion.Blazor`.
|
||||
## Install Syncfusion Blazor packages in the App
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Grids
|
||||
```
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
4. Open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
Add `Syncfusion.Blazor.Grid` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See [Install and manage packages using the dotnet CLI](https://docs.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
|
||||
|
||||
```c#
|
||||
using Syncfusion.Blazor;
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
namespace WebApplication1
|
||||
dotnet add package Syncfusion.Blazor.Grid --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtile="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApp
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
public class Startup
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
}
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
5. Add the Syncfusion bootstrap4 theme in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
|
||||
> The same theme file can be referred through the CDN version by using [https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/bootstrap4.css](https://cdn.syncfusion.com/blazor/18.2.44/styles/bootstrap4.css).
|
||||
> To use manual scripts other than the scripts from NuGet package, register the Blazor service in **~/Startup.cs** file by using true parameter as mentioned below.
|
||||
|
||||
```csharp
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
## Add DataGrid Component
|
||||
|
||||
To initialize the DataGrid component add the below code to your **Index.razor** view page which is present under **~/Pages** folder. For example, the DataGrid component is added in the **~/Pages/Index.razor** page.
|
||||
|
||||
```csharp
|
||||
|
||||
<SfGrid>
|
||||
|
||||
</SfGrid>
|
||||
|
||||
```
|
||||
|
||||
## Defining Row Data
|
||||
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the **OnInitialized** life cycle of the page.
|
||||
|
||||
```csharp
|
||||
|
||||
<SfGrid DataSource="@gridData">
|
||||
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, Add `Syncfusion.Blazor.Themes` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Then, the theme style sheet from NuGet can be referred inside the `<head>` as follows,
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6**.
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X**.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
* **~/Pages/_Layout.cshtml** for **.NET 6**.
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X**.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/19.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application. Generate scripts and theme assets using [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by selecting the components you were using in the application.
|
||||
|
||||
## Add Blazor DataGrid Component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.Grids** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion DataGrid component in razor file. Here, the DataGrid component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 5).Select(x => new Order()
|
||||
{
|
||||
OrderID = 0 + x,
|
||||
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
|
||||
}).ToList();
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public int? OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* In the command prompt (Windows) or terminal (Linux and macOS) to run the following command to build and start the app. The app listening on `http://localhost:<port number>` and view it in the browser.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet run
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
> You need to include a valid license key (either paid or trial key) within your applications. Please refer to this [help topic](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) for more information.
|
||||
|
||||
## Defining Row Data
|
||||
|
||||
To bind data for the DataGrid component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@Orders" />
|
||||
|
||||
@code{
|
||||
public List<Order> Orders { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Orders = Enumerable.Range(1, 75).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; }
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Defining Columns
|
||||
|
||||
|
|
@ -139,139 +291,102 @@ Let’s check the properties used here:
|
|||
* We have used [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) to change the alignment of columns. By default, columns will be left aligned. To change columns to right align, we need to define `TextAlign` as `Right`.
|
||||
* Also, we have used another useful property, [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format). Using this, we can format number and date values to standard or custom formats.
|
||||
|
||||
```csharp
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@gridData">
|
||||
<SfGrid DataSource="@Orders">
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Paging
|
||||
|
||||
The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
|
||||
|
||||
```csharp
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true">
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Sorting
|
||||
|
||||
The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
|
||||
|
||||
```csharp
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true">
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Filtering
|
||||
|
||||
The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
|
||||
|
||||
```csharp
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable Grouping
|
||||
|
||||
The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
|
||||
|
||||
```csharp
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfGrid DataSource="@gridData" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
|
||||
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
|
||||
<GridPageSettings PageSize="5"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
|
||||
<GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<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<OrdersDetails> gridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
gridData = OrdersDetails.GetAllRecords();
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
```
|
||||
|
||||
Output be like the below.
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.7 KiB |
|
|
@ -16,7 +16,7 @@ This articles provides a step-by-step instructions for building Blazor ASP.NET C
|
|||
Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet --version
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ dotnet --version
|
|||
Run the `dotnet new blazorwasm` command with option `-ho` or `--hosted` to create a new Blazor ASP.NET Core Hosted WebAssembly application in the command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet new blazorwasm -o BlazorApp --hosted
|
||||
cd BlazorApp
|
||||
|
|
@ -47,7 +47,7 @@ Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/
|
|||
Add `Syncfusion.Blazor.Calendars` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See [Install and manage packages using the dotnet CLI](https://docs.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
cd client
|
||||
dotnet add package Syncfusion.Blazor.Calendars --version {{ site.releaseversion }}
|
||||
|
|
@ -71,7 +71,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
|||
Now, Open the **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
|
@ -82,14 +82,14 @@ var builder = WebApplication.CreateBuilder(args);
|
|||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="11" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 11" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -101,7 +101,7 @@ namespace BlazorApp.Client
|
|||
{
|
||||
....
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
|
|
@ -112,12 +112,12 @@ namespace BlazorApp.Client
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, Add `Syncfusion.Blazor.Themes` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the NuGet package.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
|
@ -140,15 +140,17 @@ Then the theme style from can be referred inside the `<head>` of the **wwwroot/i
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -180,7 +182,7 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
* In the command prompt (Windows) or terminal (Linux and macOS) to run the following command to build and start the app. The app listening on `http://localhost:<port number>` and view it in the browser.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet run
|
||||
|
||||
|
|
|
|||
|
|
@ -25,8 +25,6 @@ You can create Blazor ASP.NET Core Hosted WebAssembly app using Visual Studio in
|
|||
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
|
||||
|
||||
## Install Syncfusion Blazor Packages in the App
|
||||
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
|
@ -48,7 +46,7 @@ Open **~/_imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
|||
Now, Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
|
@ -59,14 +57,14 @@ var builder = WebApplication.CreateBuilder(args);
|
|||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="11" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 11" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -78,7 +76,7 @@ namespace BlazorApp.Client
|
|||
{
|
||||
....
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
|
|
@ -89,7 +87,7 @@ namespace BlazorApp.Client
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred inside the `<head>` of **~/wwwroot/index.html** file of client web app.
|
||||
|
||||
|
|
@ -106,15 +104,17 @@ To add theme to the app, open the NuGet package manager in Visual Studio (*Tools
|
|||
|
||||
## Add Script reference
|
||||
|
||||
Checkout [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ This article provides a step-by-step instructions for building Blazor Server App
|
|||
Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet --version
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ dotnet --version
|
|||
Run the `dotnet new blazorserver` command to create a new Blazor Server application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet new blazorserver -o BlazorApp
|
||||
cd BlazorApp
|
||||
|
|
@ -47,7 +47,7 @@ Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/
|
|||
Add `Syncfusion.Blazor.Calendars` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See [Install and manage packages using the dotnet CLI](https://docs.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet add package Syncfusion.Blazor.Calendars --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
|
@ -74,7 +74,7 @@ Now, register the Syncfusion Blazor Service in the Blazor Server App. Here, Sync
|
|||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
|
|
@ -85,13 +85,13 @@ var builder = WebApplication.CreateBuilder(args);
|
|||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="12" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -114,12 +114,12 @@ namespace BlazorApp
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, Add `Syncfusion.Blazor.Themes` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
|
@ -154,28 +154,28 @@ Then, the theme style sheet from NuGet can be referred inside the `<head>` as fo
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` as follows,
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X**.
|
||||
* **~/Pages/_Layout.cshtml** for **.NET 6**.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -209,7 +209,7 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
* In the command prompt (Windows) or terminal (Linux and macOS) to run the following command to build and start the app. The app listening on `http://localhost:<port number>` and view it in the browser.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet run
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ Open `~/_Imports.razor` file and import the `Syncfusion.Blazor` namespace.
|
|||
Now, register the Syncfusion Blazor Service in the Blazor Server App. Open the `~/Startup.cs` file and register the Syncfusion Blazor Service. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle="~/Startup.cs" hl_lines="12" %}
|
||||
{% highlight c# tabtitle="~/Startup.cs" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ namespace BlazorApp
|
|||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ namespace BlazorApp
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred inside the `<head>` of the **~/Pages/_Host.cshtml** page.
|
||||
|
||||
|
|
@ -84,15 +84,15 @@ To add theme to the app, open the NuGet package manager in Visual Studio (*Tools
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` as follows,
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/_Host.cshtml" %}
|
||||
{% highlight cshtml tabtitle="~/_Host.cshtml" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -47,11 +47,12 @@ Now, register the Syncfusion Blazor Service in the Blazor Server App. Here, Sync
|
|||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="9" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
|
|
@ -63,7 +64,7 @@ var app = builder.Build();
|
|||
....
|
||||
|
||||
{% endhighlight %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="12" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="3 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -88,9 +89,10 @@ namespace BlazorApplication
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred inside the `<head>` as follows,
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X**.
|
||||
* **~/Pages/_Layout.cshtml** for **.NET 6**.
|
||||
|
||||
|
|
@ -115,26 +117,27 @@ To add theme to the app, open the NuGet package manager in Visual Studio (*Tools
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` as follows,
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X**.
|
||||
* **~/Pages/_Layout.cshtml** for **.NET 6**.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ This article provides a step-by-step instructions for building Blazor WebAssembl
|
|||
Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet --version
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ dotnet --version
|
|||
Run the `dotnet new blazorwasm` command to create a new Blazor WebAssembly application in a command prompt (Windows) or terminal (macOS) or command shell (Linux).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet new blazorwasm -o BlazorApp
|
||||
cd BlazorApp
|
||||
|
|
@ -39,7 +39,7 @@ cd BlazorApp
|
|||
For a hosted Blazor WebAssembly experience, add the hosted option (-ho or --hosted) option to the command.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet new blazorwasm -o BlazorApp -ho
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/
|
|||
Add Syncfusion.Blazor.Calendars NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See [Install and manage packages using the dotnet CLI](https://docs.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet add package Syncfusion.Blazor.Calendars --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
|
@ -80,7 +80,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
|||
Now, Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="11" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
|
|
@ -92,13 +92,13 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
|
|||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ namespace BlazorApp
|
|||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
|
|
@ -120,12 +120,12 @@ namespace BlazorApp
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, Add `Syncfusion.Blazor.Themes` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the NuGet package.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
|
||||
dotnet restore
|
||||
|
|
@ -146,15 +146,17 @@ Then the theme style from can be referred inside the `<head>` of the **wwwroot/i
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -186,7 +188,7 @@ Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documenta
|
|||
* In the command prompt (Windows) or terminal (Linux and macOS) to run the following command to build and start the app. The app listening on `http://localhost:<port number>` and view it in the browser.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cmd tabtitle=".NET CLI" %}
|
||||
{% highlight c# tabtitle=".NET CLI" %}
|
||||
|
||||
dotnet run
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
|||
Now, Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle="~/Program.cs" hl_lines="10" %}
|
||||
{% highlight c# tabtitle="~/Program.cs" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApp
|
||||
|
|
@ -54,7 +55,7 @@ namespace BlazorApp
|
|||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; );
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
|
|
@ -64,7 +65,7 @@ namespace BlazorApp
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file of client web app.
|
||||
|
||||
|
|
@ -79,15 +80,17 @@ To add theme to the app, open the NuGet package manager in Visual Studio (*Tools
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` of **wwwroot/index.html** file in client web app
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
|||
Now, Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as `true` to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="11" %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
|
@ -53,14 +54,15 @@ var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
|||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="10" %}
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
|
|
@ -80,7 +82,7 @@ namespace BlazorApplication
|
|||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
|
|
@ -95,15 +97,17 @@ To add theme to the app, open the NuGet package manager in Visual Studio (*Tools
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ The Scheduler renders events based on current system time zone of server in serv
|
|||
|
||||
|
||||
>**NOTE**
|
||||
* The given value for the Timezone property for both the Scheduler and the appointments should be in the [IANA](https://www.iana.org/time-zones) format.
|
||||
* The given value for the Timezone property for both the Scheduler and the appointments should be in the [IANA](https://www.iana.org/time-zones) format(Windows time zone IDs is not compatible).
|
||||
* The WASM application has supported the limited [time zones](https://github.com/dotnet/runtime/issues/44840#issuecomment-764991667) in .Net5. But in .Net6, it supported all the [time zones](https://github.com/dotnet/runtime/pull/50650).
|
||||
|
||||
## Create appointments in different time zones
|
||||
|
|
|
|||
|
|
@ -29,40 +29,147 @@ Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/
|
|||
|
||||
To add Blazor Signature component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Inputs](https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/) and then install it.
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Style Sheet
|
||||
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** page.
|
||||
{% tabs %}
|
||||
{% highlight cshtml %}
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
{% tabs %}
|
||||
{% highlight cshtml %}
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` element of **wwwroot/index.html** file of client web app.
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` element of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html %}
|
||||
{% highlight html tabtitle="~/index.html" %}
|
||||
<head>
|
||||
...
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
|
|
@ -72,125 +179,74 @@ The theme style sheet from NuGet can be referred inside the `<head>` element of
|
|||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referenced automatically via javascript script isolation approach.
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
@using Syncfusion.Blazor
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App.
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
{% tabs %}
|
||||
{% highlight c# %}
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor();
|
||||
|
||||
var app = builder.Build();
|
||||
<head>
|
||||
....
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
{% tabs %}
|
||||
{% highlight c# %}
|
||||
using Syncfusion.Blazor;
|
||||
{% endhighlight %}
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor();
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
* For **.NET 6** app,
|
||||
{% tabs %}
|
||||
{% highlight c# %}
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor();
|
||||
await builder.Build().RunAsync();
|
||||
<head>
|
||||
....
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app
|
||||
{% tabs %}
|
||||
{% highlight c# %}
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
builder.Services.AddSyncfusionBlazor();
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Syncfusion Blazor Signature component
|
||||
|
||||
* Open **~/_Imports.razor** file or any razor page under the `~/Pages` folder where the component is to be added and import the `Syncfusion.Blazor.Inputs` namespace.
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Inputs
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
* Open **~/_Imports.razor** file or any razor page under the `~/Pages` folder where the component is to be added and import the `Syncfusion.Blazor.Inputs` namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.Inputs
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Now, add the Syncfusion Signature component in razor file. Here, the Signature component is added in the **~/Pages/Index.razor** page under the `~/Pages` folder.
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
<SfSignature></SfSignature>
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Index.razor" %}
|
||||
|
||||
<SfSignature></SfSignature>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion Blazor Signature component will be rendered in the default web browser.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor TreeGrid Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor TreeGrid component of Syncfusion, and more details.
|
||||
description: Checkout and learn about getting started with Blazor TreeGrid component in Blazor Server App and Blazor WebAssembly App.
|
||||
platform: Blazor
|
||||
control: Tree Grid
|
||||
documentation: ug
|
||||
|
|
@ -11,83 +11,287 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor TreeGrid Component
|
||||
|
||||
This section briefly explains about how to include a **Tree Grid** Component in the Blazor server-side application. It also includes initializing Tree Grid Blazor component and usage of features such as paging and sorting using the [Visual Studio 2019](https://visualstudio.microsoft.com/vs/preview/). Refer [Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019](https://ej2.syncfusion.com/aspnet-core-blazor/documentation/getting-started/vs-blazor-server/) page for the introduction and configuring the common specifications.
|
||||
This section briefly explains about how to include [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio.
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
## Prerequisites
|
||||
|
||||
<!-- markdownlint-disable MD033 -->
|
||||
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
|
||||
|
||||
1. Install **Syncfusion.Blazor.TreeGrid** NuGet package to the application by using the **NuGet Package Manager**. Please ensure to check the **Include prerelease** option.
|
||||
2. The client-side resources can be added through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
## Create a new Blazor App in Visual Studio
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
|
||||
</head>
|
||||
```
|
||||
You can create **Blazor Server App** or **Blazor WebAssembly App** using Visual Studio in one of the following ways,
|
||||
|
||||
> For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
* [Create a Project using Microsoft Templates](https://docs.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=windows)
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
|
||||
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
|
||||
</head>
|
||||
```
|
||||
* [Create a Project using Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/vs2019-extensions/create-project)
|
||||
|
||||
## Add SyncfusionBlazor service in Startup.cs
|
||||
## Install Syncfusion Blazor TreeGrid NuGet in the App
|
||||
|
||||
Open the **Startup.cs** file and add services required by Syncfusion components using **services.AddSyncfusionBlazor()** method. Add this method in the **ConfigureServices** function as follows.
|
||||
Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). To use Syncfusion Blazor components in the application, add reference to the corresponding NuGet. Refer to [NuGet packages topic](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details.
|
||||
|
||||
To add Blazor TreeGrid component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for [Syncfusion.Blazor.TreeGrid](https://www.nuget.org/packages/Syncfusion.Blazor.TreeGrid/) and then install it.
|
||||
|
||||
## Register Syncfusion Blazor Service
|
||||
|
||||
Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/_Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, register the Syncfusion Blazor Service in the Blazor Server App or Blazor WebAssembly App. Here, Syncfusion Blazor Service is registered by setting [IgnoreScriptIsolation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.GlobalOptions.html#Syncfusion_Blazor_GlobalOptions_IgnoreScriptIsolation) property as true to load the scripts externally in the [next steps](#add-script-reference).
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For **.NET 6** app, open the **~/Program.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
* For **.NET 5 and .NET 3.X** app, open the **~/Startup.cs** file and register the Syncfusion Blazor Service.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 10" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorPages();
|
||||
builder.Services.AddServerSideBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
|
||||
var app = builder.Build();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Startup.cs)" hl_lines="1 12" %}
|
||||
|
||||
```csharp
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace BlazorApplication
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
....
|
||||
....
|
||||
...
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
services.AddRazorPages();
|
||||
services.AddServerSideBlazor();
|
||||
services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
}
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
Open **~/Program.cs** file and register the Syncfusion Blazor Service in the client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight C# tabtitle=".NET 6 (~/Program.cs)" hl_lines="3 11" %}
|
||||
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
var builder = WebAssemblyHostBuilder.CreateDefault(args);
|
||||
builder.RootComponents.Add<App>("#app");
|
||||
builder.RootComponents.Add<HeadOutlet>("head::after");
|
||||
|
||||
builder.Services.AddScoped(serviceProvider => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
....
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight c# tabtitle=".NET 5 and .NET 3.X (~/Program.cs)" hl_lines="1 10" %}
|
||||
|
||||
using Syncfusion.Blazor;
|
||||
|
||||
namespace WebApplication1
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static async Task Main(string[] args)
|
||||
{
|
||||
....
|
||||
....
|
||||
services.AddSyncfusionBlazor();
|
||||
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
|
||||
await builder.Build().RunAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Adding component package to the application
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Open **~/_Imports.razor** file and import the **Syncfusion.Blazor.TreeGrid** packages.
|
||||
## Add Style Sheet
|
||||
|
||||
```cshtml
|
||||
Checkout the [Blazor Themes topic](https://blazor.syncfusion.com/documentation/appearance/themes) to learn different ways ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://sfblazor.azurewebsites.net/staging/documentation/appearance/themes#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to refer themes in Blazor application, and to have the expected appearance for Syncfusion Blazor components. Here, the theme is referred using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets).
|
||||
|
||||
To add theme to the app, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and then install it. Then, the theme style sheet from NuGet can be referred as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* For .NET 6 app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Layout.cshtml** file.
|
||||
|
||||
* For .NET 5 and .NET 3.X app, add the Syncfusion bootstrap5 theme in the `<head>` element of the **~/Pages/_Host.cshtml** file.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
The theme style sheet from NuGet can be referred inside the `<head>` of **wwwroot/index.html** file in client web app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle="~/index.html" %}
|
||||
|
||||
<head>
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Add Script Reference
|
||||
|
||||
Checkout [Adding Script Reference topic](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different ways to add script reference in Blazor Application. In this getting started walk-through, the required scripts are referred using [Static Web Assets](https://sfblazor.azurewebsites.net/staging/documentation/common/adding-script-references#static-web-assets) externally inside the `<head>` as follows,
|
||||
|
||||
### Blazor Server App
|
||||
|
||||
* **~/Pages/_Layout.cshtml** file for **.NET 6** app.
|
||||
|
||||
* **~/Pages/_Host.cshtml** file for **.NET 5 and .NET 3.X** app.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight cshtml tabtitle=".NET 6 (~/_Layout.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
|
||||
{% highlight cshtml tabtitle=".NET 5 and .NET 3.X (~/_Host.cshtml)" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
### Blazor WebAssembly App
|
||||
|
||||
{% tabs %}
|
||||
{% highlight html tabtitle="~/index.html" hl_lines="4" %}
|
||||
|
||||
<head>
|
||||
....
|
||||
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
|
||||
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
> Syncfusion recommends to reference scripts using [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference) and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) by [disabling JavaScript isolation](https://blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation) for better loading performance of the Blazor application.
|
||||
|
||||
## Add Blazor TreeGrid component
|
||||
|
||||
* Open **~/_Imports.razor** file or any other page under the `~/Pages` folder where the component is to be added and import the **Syncfusion.Blazor.TreeGrid** namespace.
|
||||
|
||||
{% tabs %}
|
||||
{% highlight razor tabtitle="~/Imports.razor" %}
|
||||
|
||||
@using Syncfusion.Blazor
|
||||
@using Syncfusion.Blazor.TreeGrid
|
||||
```
|
||||
|
||||
## Add Tree Grid component to the application
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
Now, add the Syncfusion Blazor Tree Grid component in any web page (razor) in the **Pages** folder. For example, the Tree Grid component is added in the **~/Pages/Index.razor** page.
|
||||
* Now, add the Syncfusion Blazor TreeGrid component in razor file. Here, the TreeGrid component is added in the **~/Pages/Index.razor** file under the **~/Pages** folder.
|
||||
|
||||
```cshtml
|
||||
<SfTreeGrid>
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
|
||||
<TreeGridColumns>
|
||||
<TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="5" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
|
||||
<TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="30" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></TreeGridColumn>
|
||||
</TreeGridColumns>
|
||||
</SfTreeGrid>
|
||||
```
|
||||
|
||||
@code
|
||||
{
|
||||
public class BusinessObject
|
||||
{
|
||||
public int TaskId { get; set; }
|
||||
public string TaskName { get; set; }
|
||||
public int? ParentId { get; set; }
|
||||
}
|
||||
|
||||
public List<BusinessObject> TreeData = new List<BusinessObject>();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 });
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. Then, the Syncfusion `Blazor TreeGrid` component will be rendered in the default web browser.
|
||||
|
||||
|
||||
|
||||
## Defining columns
|
||||
|
||||
The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the **TreeGridColumn** directive there are properties to customize columns.
|
||||
The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns.
|
||||
|
||||
Let’s check the properties used here:
|
||||
* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~Field.html) to map with a property name in datasource is been added.
|
||||
* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~HeaderText.html) to change the title of columns is been added.
|
||||
* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~TextAlign.html) to change the alignment of columns is been used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*.
|
||||
|
||||
```cshtml
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1">
|
||||
<TreeGridColumns>
|
||||
|
|
@ -126,7 +330,9 @@ Let’s check the properties used here:
|
|||
TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding/#self-referential-data-binding-flat-data) data binding is represented in which the [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~IDMapping.html) and [ParentIdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ParentIdMapping.html) properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding/#hierarchy-data-source-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ChildMapping.html) denotes the hierarchy relationship.
|
||||
|
||||
|
|
@ -136,7 +342,8 @@ The paging feature enables users to view the tree grid record in a paged view. I
|
|||
|
||||
In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridPageSettings~PageSizeMode.html) property.
|
||||
|
||||
```cshtml
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true">
|
||||
<TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
|
||||
|
|
@ -149,44 +356,17 @@ In root-level paging mode, paging is based on the root-level rows only, i.e., it
|
|||
</TreeGridColumns>
|
||||
</SfTreeGrid>
|
||||
|
||||
@code {
|
||||
|
||||
public class BusinessObject
|
||||
{
|
||||
public int TaskId { get; set; }
|
||||
public string TaskName { get; set; }
|
||||
public int Duration { get; set; }
|
||||
public int Progress { get; set; }
|
||||
public string Priority { get; set; }
|
||||
public int? ParentId { get; set; }
|
||||
}
|
||||
|
||||
public List<BusinessObject> TreeData = new List<BusinessObject>();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
## Enable sorting
|
||||
|
||||
The sorting feature enables to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AllowSorting.html) property to **true**.
|
||||
The sorting feature enables to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~AllowSorting.html) property to `true`.
|
||||
|
||||
```cshtml
|
||||
{% tabs %}
|
||||
{% highlight razor %}
|
||||
|
||||
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1"
|
||||
AllowPaging="true" AllowSorting="true">
|
||||
<SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1" AllowPaging="true" AllowSorting="true">
|
||||
<TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="2"></TreeGridPageSettings>
|
||||
<TreeGridColumns>
|
||||
<TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
|
||||
|
|
@ -197,39 +377,8 @@ The sorting feature enables to order the records. It can be enabled by setting t
|
|||
</TreeGridColumns>
|
||||
</SfTreeGrid>
|
||||
|
||||
@code {
|
||||
|
||||
public class BusinessObject
|
||||
{
|
||||
public int TaskId { get; set; }
|
||||
public string TaskName { get; set; }
|
||||
public int Duration { get; set; }
|
||||
public int Progress { get; set; }
|
||||
public string Priority { get; set; }
|
||||
public int? ParentId { get; set; }
|
||||
}
|
||||
|
||||
public List<BusinessObject> TreeData = new List<BusinessObject>();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" });
|
||||
TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" });
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## Run the application
|
||||
|
||||
After successful compilation of the application, simply press F5 to run the application. The Blazor Tree Grid component will render in the web browser as shown below.
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 5.1 KiB |
Загрузка…
Ссылка в новой задаче