Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
e357a8ee03
Коммит
078ba0541f
|
|
@ -274,28 +274,28 @@
|
|||
<li>
|
||||
<a href="/blazor/visual-studio-integration/overview">Overview</a>
|
||||
</li>
|
||||
<li>Visual Studio Extension
|
||||
<li>VS 2019 Extension
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/blazor/visual-studio-integration/visual-studio-extensions/download-and-installation">Download and Installation</a>
|
||||
<a href="/blazor/visual-studio-integration/vs2019-extensions/download-and-installation">Download and Installation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/visual-studio-integration/visual-studio-extensions/template-studio">Template Studio</a>
|
||||
<a href="/blazor/visual-studio-integration/vs2019-extensions/template-studio">Template Studio</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/visual-studio-integration/visual-studio-extensions/code-generator">Code Generator</a>
|
||||
<a href="/blazor/visual-studio-integration/vs2019-extensions/code-generator">Code Generator</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/visual-studio-integration/visual-studio-extensions/convert-project">Convert Project</a>
|
||||
<a href="/blazor/visual-studio-integration/vs2019-extensions/convert-project">Convert Project</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/visual-studio-integration/visual-studio-extensions/upgrade-project">Upgrade Project</a>
|
||||
<a href="/blazor/visual-studio-integration/vs2019-extensions/upgrade-project">Upgrade Project</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/visual-studio-integration/visual-studio-extensions/scaffolding">Scaffolding</a>
|
||||
<a href="/blazor/visual-studio-integration/vs2019-extensions/scaffolding">Scaffolding</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/visual-studio-integration/visual-studio-extensions/create-project">Create Project</a>
|
||||
<a href="/blazor/visual-studio-integration/vs2019-extensions/create-project">Create Project</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -1199,7 +1199,7 @@
|
|||
<a href="/blazor/datagrid/scrolling">Scrolling</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/datagrid/virtual">Virtualization</a>
|
||||
<a href="/blazor/datagrid/virtualization">Virtualization</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blazor/datagrid/selection">Selection</a>
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ Any one of the following standards can be used to install the Syncfusion Blazor
|
|||
|
||||
### Using Syncfusion Blazor individual NuGet Packages [New standard]
|
||||
|
||||
> 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.
|
||||
> 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.
|
||||
|
||||
1. Install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) NuGet package to the application using the `NuGet Package Manager`.
|
||||
|
||||
2. Add the client-side style resources from the NuGet package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -36,15 +36,15 @@ Any one of the following standards can be used to install the Syncfusion Blazor
|
|||
</head>
|
||||
```
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
### Using Syncfusion.Blazor NuGet Package [Old standard]
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the newly created application by using the `NuGet Package Manager`.
|
||||
|
||||
2. Add the client-side style resources through CDN or from NuGet package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include a [Accumulation Chart](https:
|
|||
|
||||
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/).
|
||||
|
||||
2. Add the client-side resources through CDN or from NuGet 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.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Syncfusion blazor components supports touch (bigger theme) and normal size modes
|
|||
|
||||
## Size mode for application
|
||||
|
||||
You can enable touch mode (bigger theme) for an application by adding `.e-bigger` class in `~/wwwroot/css/site.css` file.
|
||||
You can enable touch mode (bigger theme) for an application by adding `.e-bigger` class in `~/wwwroot/css/site.css` file and assign to the `body` element in `Pages/_Host.cshtml` (Blazor Server App) or `wwwroot/index.html` (Blazor WebAssembly App).
|
||||
|
||||
```css
|
||||
.e-bigger {
|
||||
|
|
@ -21,6 +21,10 @@ You can enable touch mode (bigger theme) for an application by adding `.e-bigger
|
|||
}
|
||||
```
|
||||
|
||||
```cshtml
|
||||
<body class="e-bigger">...</body>
|
||||
```
|
||||
|
||||
## Size mode for a control
|
||||
|
||||
You can enable touch mode (bigger theme) for a control by adding `.e-bigger` class and assign to the `div` which contains the control.
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ To get start quickly with Blazor AutoComplete component, you can check on this v
|
|||
|
||||
* Install [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@ This section briefly explains about how to include a `Avatar` in your Blazor app
|
|||
|
||||
* Install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor app.
|
||||
> You can also add the client-side style resources through CDN.
|
||||
* 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 app.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@ This section briefly explains about how to include a `Badge` in your Blazor serv
|
|||
|
||||
* Install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
> You can also add the client-side style resources through CDN.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ This section briefly explains about how to include a BarcodeGenerator in your Bl
|
|||
## Importing Syncfusion Blazor component in the application
|
||||
|
||||
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 or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Bullet Chart component in the Bla
|
|||
|
||||
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/).
|
||||
|
||||
2. Add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include [ButtonGroup](https://help.sy
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ To get start quickly with Button Component using Blazor, you can check on this v
|
|||
|
||||
1. Install the [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,9 @@ To get start quickly with Blazor Calendar component, you can check on this video
|
|||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
|
||||
* Install `Syncfusion.Blazor.Calendars` NuGet package to the application by using the `NuGet Package Manager`.
|
||||
* Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
> Please ensure to check the `Include prerelease` option for our Beta release.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.html** page.
|
||||
* 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 **~/wwwroot/index.html** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -94,7 +92,7 @@ After successful compilation of your application, press `F5` to run the applicat
|
|||
|
||||
The output will be as follows.
|
||||
|
||||
|
||||
|
||||
|
||||
## Setting the Value, Min, and Max dates
|
||||
|
||||
|
|
@ -114,7 +112,7 @@ Here, the Calendar allows you to select a date within the range from 5th to 27th
|
|||
|
||||
The output will be as follows.
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ To get start quickly with Blazor Card component, you can check on this video.
|
|||
|
||||
1. Install **Syncfusion.Blazor.Card** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side style resources from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include a `Chart` in your Blazor Serv
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side resources through CDN or from NuGet 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.
|
||||
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. 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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ This article provides a step-by-step instructions to configure Syncfusion Blazor
|
|||
|
||||
|
||||
|
||||
3. You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.html** page. For Internet Explorer 11, kindly refer the polyfills.
|
||||
3. 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 **~/wwwroot/index.html** page. For Internet Explorer 11, kindly refer the polyfills.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor CheckBox Component
|
||||
|
||||
This section briefly explains about how to include Checkbox 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 [Checkbox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.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.
|
||||
|
||||
To get start quickly with CheckBox Component using Blazor, you can check on this video:
|
||||
|
||||
|
|
@ -20,11 +20,9 @@ To get start quickly with CheckBox Component using Blazor, you can check on this
|
|||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
1. Install the [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -111,7 +109,7 @@ Now, add the Syncfusion Blazor Checkbox component in `razor` page in the `Pages`
|
|||
|
||||
After successful compilation of your application, simply press F5 to run the application. The Blazor Checkbox component will render in the web browser as shown below
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -9,22 +9,22 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor Chip Component
|
||||
|
||||
This section briefly explains how to include a `Chip` in your Blazor Server-Side application. Refer to the [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/) for the introduction and configuring the common specifications.
|
||||
This section briefly explains how to include a [Chip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfChip.html) in your Blazor Server-Side application. Refer to the [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/) for the introduction and configuring the common specifications.
|
||||
|
||||
## Importing Syncfusion Blazor component in the application
|
||||
|
||||
### Using Syncfusion.Blazor NuGet Package [New standard]
|
||||
|
||||
1. Install **Syncfusion.Blazor.Buttons** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
1. Install [Syncfusion.Blazor.Buttons](https://www.nuget.org/packages/Syncfusion.Blazor.Buttons) NuGet package to the application by using the `NuGet Package Manager`.
|
||||
Refer to the Individual NuGet Packages section for the available NuGet packages.
|
||||
|
||||
|
||||
2. Search Syncfusion.Blazor.Buttons keyword in the Browse tab and install Syncfusion.Blazor.Buttons NuGet package in the application.
|
||||
|
||||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor Buttons package will be installed in the project.
|
||||
|
||||
W> `Syncfusion.Blazor` package should not be installed along with [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/). Hence, you have to add the below `Syncfusion.Blazor.Themes` static web assets (styles) in the application.
|
||||
|
||||
You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -39,13 +39,11 @@ Refer to the Individual NuGet Packages section for the available NuGet packages.
|
|||
### Using Syncfusion.Blazor NuGet Package [Old standard]
|
||||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.Right-click the project and then select Manage NuGet Packages.
|
||||
|
||||
|
||||
2. Search Syncfusion.Blazor keyword in the Browse tab and install Syncfusion.Blazor NuGet package in the application.
|
||||
|
||||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor package will be installed in the project. You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
|
||||
> You can also add the client-side style resources through CDN.
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
|
|
@ -151,7 +149,7 @@ After successful compilation of your application, simply press `F5` to run the a
|
|||
|
||||
Output be like the below.
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Circular Gauge component in your
|
|||
|
||||
1. Install **Syncfusion.Blazor.CircularGauge** NuGet package in the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side resources through CDN or local npm package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ documentation: ug
|
|||
|
||||
The web accessibility makes web content and web applications more accessible for people with disabilities. It especially helps in dynamic content change and development of advanced user interface controls with AJAX, HTML, JavaScript, and related technologies. It helps to provide information about the widget for assistive technology to the disabled person in screen reader.
|
||||
|
||||
Color Picker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/) specifications. WAI-ARIA supports is achieved through the attributes like `aria-label`and `aria-selected` applied to the color palette tiles.
|
||||
Color Picker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/) specifications. WAI-ARIA support is achieved through the attributes like `aria-label`and `aria-selected` applied to the color palette tiles.
|
||||
|
||||
| Properties | Functionality |
|
||||
| ------------ | ----------------------- |
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Getting Started with Blazor Color Picker Component | Syncfusion
|
||||
description: Checkout and learn about getting started with Blazor Color Picker component of Syncfusion, and more details.
|
||||
description: Checkout and learn more details about getting started with the Blazor Color Picker component of Syncfusion.
|
||||
platform: Blazor
|
||||
control: Color Picker
|
||||
documentation: ug
|
||||
|
|
@ -9,9 +9,9 @@ documentation: ug
|
|||
|
||||
# Getting Started with Blazor Color Picker Component
|
||||
|
||||
This section briefly explains about how to include Color Picker 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 Color Picker 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.
|
||||
|
||||
To get start quickly with Color Picker Component using Blazor, you can check on this video:
|
||||
To get started quickly with Color Picker Component using Blazor, you can check out this video:
|
||||
|
||||
{% youtube
|
||||
"youtube:https://www.youtube.com/watch?v=lI_5h-ZUSHw"%}
|
||||
|
|
@ -20,9 +20,7 @@ To get start quickly with Color Picker Component using Blazor, you can check on
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -31,7 +29,7 @@ To get start quickly with Color Picker Component using Blazor, you can check on
|
|||
</head>
|
||||
```
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -72,7 +70,7 @@ namespace BlazorApplication
|
|||
}
|
||||
```
|
||||
|
||||
> 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.
|
||||
> 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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
@ -95,7 +93,7 @@ Now, add the Blazor Color Picker component in `razor` page in the `Pages` folder
|
|||
|
||||
The Blazor Color Picker component will render in the web browser as shown below,
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ The Color Picker component supports no color functionality. By clicking the no c
|
|||
|
||||
## Default no color
|
||||
|
||||
To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property as true. In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile you can achieve the above functionalities.
|
||||
To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property as true. In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile, you can achieve the above functionalities.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -41,12 +41,12 @@ To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
|
||||
Output will be as follows
|
||||
|
||||
|
||||
## Custom No Color
|
||||
|
||||
The following sample show the color palette with custom no color option.
|
||||
The following sample shows the color palette with custom no color option.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -122,5 +122,5 @@ The following sample show the color palette with custom no color option.
|
|||
|
||||
```
|
||||
|
||||
Output be like
|
||||
|
||||
Output will be as follows
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor
|
|||
<SfColorPicker Mode="ColorPickerMode.Palette" ModeSwitcher="false" ShowButtons="false"></SfColorPicker>
|
||||
```
|
||||
|
||||
Output be like
|
||||
|
||||
Output will be as follows
|
||||
|
||||
|
||||
> To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'.
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ The following sample shows the inline type rendering of ColorPicker.
|
|||
<SfColorPicker Value="035a" Inline="true" ShowButtons="false"></SfColorPicker>
|
||||
```
|
||||
|
||||
Output be like below,
|
||||
Output will be like below,
|
||||
|
||||
|
||||
|
||||
|
||||
> The `ShowButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons).
|
||||
|
|
|
|||
|
|
@ -30,15 +30,15 @@ You can modify the default value in `.res` file added to Resource folder. Enter
|
|||
|
||||
```
|
||||
|
||||
Output be like below,
|
||||
Output will be like below,
|
||||
|
||||
|
||||
|
||||
|
||||
## RTL
|
||||
|
||||
Color Picker component has `RTL` support. It helps to render the Color Picker from right-to-left direction. It improves the user experiences and accessibility for users who use right-to-left languages(Arabic, Farsi, Urdu, etc). This can be achieved by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_EnableRtl) property to true.
|
||||
|
||||
In the following example Color Picker component is rendered in RTL mode with `arabic` locale.
|
||||
In the following example, Color Picker component is rendered in RTL mode with `arabic` locale.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -48,6 +48,6 @@ In the following example Color Picker component is rendered in RTL mode with `ar
|
|||
|
||||
```
|
||||
|
||||
Output be like below,
|
||||
Output will be like below,
|
||||
|
||||
|
||||
|
||||
|
|
@ -22,14 +22,14 @@ In the following sample, it will render the `Palette` at initial load.
|
|||
<SfColorPicker Mode="ColorPickerMode.Palette"></SfColorPicker>
|
||||
```
|
||||
|
||||
Output be like
|
||||
|
||||
Output will be like
|
||||
|
||||
|
||||
## Color value
|
||||
|
||||
The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property can be used to specify the color value to the Color Picker. It supports either `three` or `six` digit hex codes. To include `opacity`, set the color value as `four` or `eight` digit hex code.
|
||||
|
||||
In the following sample, the color value sets as `four` digit hex code, the last digit represents the `opacity` value.
|
||||
In the following sample, the color value is set as `four` digit hex code, the last digit represents the `opacity` value.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Inputs
|
||||
|
|
@ -38,7 +38,7 @@ In the following sample, the color value sets as `four` digit hex code, the last
|
|||
<SfColorPicker Value="035a" ModeSwitcher="false"></SfColorPicker>
|
||||
```
|
||||
|
||||
Output be like below,
|
||||
|
||||
Output will be like below,
|
||||
|
||||
|
||||
> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex code with or without `#` prefix.
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ To modify the ColorPicker appearance, you need to override the default CSS of Co
|
|||
|
||||
|CSS Class | Purpose of Class|
|
||||
|-----|-----|
|
||||
|.e-colorpicker-popup .e-container .e-handler|To customized Color Picker selection handler. |
|
||||
|.e-colorpicker-popup .e-container .e-handler|To customize Color Picker selection handler. |
|
||||
|.e-colorpicker-popup .e-container.e-color-picker|To customize the Color Picker container. |
|
||||
|.e-colorpicker-popup .e-container .e-palette .e-tile|To customize the Color Picker pallete item. |
|
||||
|.e-colorpicker-popup .e-container .e-switch-ctrl-btn |To customize the Color Picker switch control. |
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Accessibility in Blazor ComboBox Component
|
||||
|
||||
The ComboBox component has been designed, keeping in mind the `WAI-ARIA` specifications, and applies the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized
|
||||
The ComboBox component has been designed with the `WAI-ARIA` specifications in mind, and applies the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized
|
||||
by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
|
||||
|
||||
## ARIA attributes
|
||||
|
|
@ -33,7 +33,7 @@ You can use the following key shortcuts to access the ComboBox without interrupt
|
|||
|
||||
| **Keyboard shortcuts** | **Actions** |
|
||||
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <kbd>Arrow Down</kbd> | Selects the first item in the ComboBox when no item selected. Otherwise, selects the item next to the currently selected item. |
|
||||
| <kbd>Arrow Down</kbd> | Selects the first item in the ComboBox when no item is selected. Otherwise, selects the item next to the currently selected item. |
|
||||
| <kbd>Arrow Up</kbd> | Selects the item previous to the currently selected one. |
|
||||
| <kbd>Page Down</kbd> | Scrolls down to the next page and selects the first item when popup list opens. |
|
||||
| <kbd>Page Up</kbd> | Scrolls up to the previous page and selects the first item when popup list opens. |
|
||||
|
|
@ -41,10 +41,10 @@ You can use the following key shortcuts to access the ComboBox without interrupt
|
|||
| <kbd>Tab</kbd> | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
|
||||
| <kbd>Shift + tab </kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
|
||||
| <kbd>Alt + Down</kbd> | Open the popup list |
|
||||
| <kbd>Alt + Up</kbd> | Close the popup list |
|
||||
| <kbd>Alt + Up</kbd> | Closes the popup list |
|
||||
| <kbd>Esc(Escape)</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
|
||||
| <kbd>Home</kbd> | Cursor moves to before of first character in input |
|
||||
| <kbd>End</kbd> | Cursor moves to next of last character in input |
|
||||
| <kbd>Home</kbd> | Cursor moves before the first character in input |
|
||||
| <kbd>End</kbd> | Cursor moves next to the last character in input |
|
||||
|
||||
> In the following sample, disable the ComboBox component using <kbd>t</kbd> keys.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ documentation: ug
|
|||
|
||||
# Data Binding in Blazor ComboBox Component
|
||||
|
||||
Data binding can be achieved by using the `bind-Value` attribute and its supports string, int, Enum, and bool types. If component value has been changed, it will affect the all places where we bind the variable for the **bind-value** attribute.
|
||||
Data binding can be achieved by using the `bind-Value` attribute and it supports string, int, Enum, and bool types. If the component value is changed, it will affect all the places where we bind the variable for the **bind-value** attribute.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.DropDowns
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ The output will be as follows.
|
|||
|
||||
The ComboBox supports retrieval of data from remote data services with the help of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_Query) property is used to fetch data from the database and bind it to the ComboBox.
|
||||
|
||||
In the following sample, displayed first 6 contacts from the **Customers** table of `Northwind` Data Service.
|
||||
In the following sample, First 6 contacts are displayed from the **Customers** table of `Northwind` Data Service.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Data
|
||||
|
|
@ -191,7 +191,7 @@ Use the `WebApiAdaptor` to bind ComboBox with Web API created using OData.
|
|||
}
|
||||
```
|
||||
|
||||
Output be like the below.
|
||||
Output will be like the below.
|
||||
|
||||
|
||||
|
||||
|
|
@ -382,7 +382,7 @@ namespace EFDropDown.Shared.DataAccess
|
|||
|
||||
### Create data access layer to perform data operation
|
||||
|
||||
Now you need to create a class named **OrderDataAccessLayer**, which act as data access layer for retrieving the records from the database table.
|
||||
Now, you need to create a class named **OrderDataAccessLayer**, which act as data access layer for retrieving the records from the database table.
|
||||
|
||||
```csharp
|
||||
using Microsoft.EntityFrameworkCore;
|
||||
|
|
@ -463,7 +463,7 @@ namespace EFDropDown.Controllers
|
|||
|
||||
### Configure ComboBox component using Web API adaptor
|
||||
|
||||
Now you can configure the ComboBox using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor.
|
||||
Now, you can configure the ComboBox using the **'SfDataManager'** to interact with the created Web API and consume the data appropriately. To interact with web api, you need to use WebApiAdaptor.
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Data
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Filtering in Blazor ComboBox Component | Syncfusion
|
||||
description: Checkout and learn here all about Filtering in Syncfusion Blazor ComboBox component and much more details.
|
||||
description: Checkout and learn here all about Filtering in the Syncfusion Blazor ComboBox component and much more.
|
||||
platform: Blazor
|
||||
control: ComboBox
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ documentation: ug
|
|||
|
||||
This section briefly explains how to include a **ComboBox** Component in your Blazor client-side application. You can refer to the [Getting Started with Syncfusion Blazor for Client-side in Visual Studio 2019](../getting-started/blazor-webassembly-visual-studio-2019/) page for introduction and configure the common specifications.
|
||||
|
||||
To get start quickly with Blazor ComboBox component, you can check on this video.
|
||||
To get started quickly with Blazor ComboBox component, you can check out this video.
|
||||
|
||||
{% youtube
|
||||
"youtube:https://www.youtube.com/watch?v=VYK2xHC_Lrg"%}
|
||||
|
|
@ -20,7 +20,7 @@ To get start quickly with Blazor ComboBox component, you can check on this video
|
|||
|
||||
* Install `Syncfusion.Blazor.DropDowns` NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -29,7 +29,7 @@ To get start quickly with Blazor ComboBox component, you can check on this video
|
|||
</head>
|
||||
```
|
||||
|
||||
> For Internet Explorer 11 kindly refer the polyfills. Refer the [documentation](https://ej2.syncfusion.com/blazor/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
> For Internet Explorer 11, kindly refer the polyfills. Refer the [documentation](https://ej2.syncfusion.com/blazor/documentation/common/how-to/render-blazor-server-app-in-ie/) for more information.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -79,7 +79,7 @@ namespace BlazorApplication
|
|||
|
||||
## Adding ComboBox component to the application
|
||||
|
||||
To initialize the ComboBox component add the below code to your `Index.razor` view page which is present under `~/Pages` folder.
|
||||
To initialize the ComboBox component, add the following code to your `Index.razor` view page which is present under `~/Pages` folder.
|
||||
|
||||
```cshtml
|
||||
<SfComboBox TValue="string" Placeholder="Select a game"></SfComboBox>
|
||||
|
|
@ -132,7 +132,7 @@ The output will be as follows.
|
|||
## Custom values
|
||||
|
||||
The ComboBox allows the users to give input as custom value, which is not required to present in predefined
|
||||
set of values. By default, this support is enabled by [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, both text field and value field is considered as same. The custom value will be sent to post back handler when a form is about to be submitted.
|
||||
set of values. By default, this support is enabled by [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) property. In this case, both text field and value field are considered as same. The custom value will be sent to post back handler when a form is about to be submitted.
|
||||
|
||||
```cshtml
|
||||
<SfComboBox TValue="string" TItem="Games" AllowCustom=true Placeholder="Select a game" DataSource="@LocalData">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Grouping in Blazor ComboBox Component | Syncfusion
|
||||
description: Checkout and learn here all about Grouping in Syncfusion Blazor ComboBox component and much more details.
|
||||
description: Checkout and learn here all about Grouping in the Syncfusion Blazor ComboBox component and much more.
|
||||
platform: Blazor
|
||||
control: ComboBox
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ namespace BlazorApplication
|
|||
|
||||
The **Localization** library allows you to localize default text content. The ComboBox component has static text that can be changed to other cultures (Arabic, Deutsch, French, etc.).
|
||||
|
||||
In the following examples, demonstrate how to enable **Localization** for ComboBox in server side Blazor samples. Here, we have used Resource file to translate the static text.
|
||||
The following example demonstrates how to enable **Localization** for ComboBox in server side Blazor samples. Here, we have used Resource file to translate the static text.
|
||||
|
||||
The Resource file is an XML file which contains the strings(key and value pairs) that you want to translate into different language. You can also refer Localization [link](https://blazor.syncfusion.com/documentation/common/localization/) to know more about how to configure and use localization in the ASP.NET Core application framework.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
title: Templates in Blazor ComboBox Component | Syncfusion
|
||||
description: Checkout and learn here all about Templates in Syncfusion Blazor ComboBox component and much more details.
|
||||
description: Checkout and learn here all about Templates in the Syncfusion Blazor ComboBox component and much more.
|
||||
platform: Blazor
|
||||
control: ComboBox
|
||||
documentation: ug
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ To get started quickly with Context Menu Component using Blazor, you can check o
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,7 @@ This section briefly explains about how to include a `Dashboard Layout` componen
|
|||
|
||||
* Install **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
|
||||
> You can also add the client-side style resources through CDN.
|
||||
* You can add the client-side style resources using [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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -50,7 +48,7 @@ This section briefly explains about how to include a `Dashboard Layout` componen
|
|||
|
||||
W> `Syncfusion.Blazor` package should not be installed along with [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/). Hence, you have to add the below `Syncfusion.Blazor.Themes` static web assets (styles) in the application.
|
||||
|
||||
* You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section explains about how to connect the [SfDataManager](https://help.sync
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side resources through CDN or from NuGet package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ To get start quickly with Blazor DataGrid component, you can check on this video
|
|||
|
||||
1. Install the **Syncfusion.Blazor.Grid** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side resources from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,372 @@
|
|||
---
|
||||
layout: post
|
||||
title: Virtualization in Blazor DataGrid Component | Syncfusion
|
||||
description: Checkout and learn here all about Virtualization in Syncfusion Blazor DataGrid component and much more.
|
||||
platform: Blazor
|
||||
control: DataGrid
|
||||
documentation: ug
|
||||
---
|
||||
|
||||
# Virtualization in Blazor DataGrid Component
|
||||
|
||||
DataGrid allows you to load large amount of data without [performance](https://www.syncfusion.com/blazor-components/blazor-datagrid/performance) degradation.
|
||||
|
||||
## Row Virtualization
|
||||
|
||||
Row virtualization allows you to load and render rows only in the content viewport. It is an alternative way of paging in which the data will be loaded while scrolling vertically. To setup the row virtualization, you need to define
|
||||
[EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) as true and content height by [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property.
|
||||
|
||||
The number of records displayed in the DataGrid is determined implicitly by height of the content area. Also, you have an option to define a visible number of records by
|
||||
the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property of [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. The loaded data will be cached and reused when it is needed for next time.
|
||||
|
||||
```csharp
|
||||
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
<SfGrid DataSource="@GridData" Height="600" EnableVirtualization="true">
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee ID" 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>
|
||||
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShipAddress) HeaderText="Ship Address" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShippedDate) HeaderText="Shipped Date" Width="150"></GridColumn>
|
||||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> GridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
List<Order> Order = new List<Order>();
|
||||
int Code = 10000;
|
||||
for (int i = 1; i < 10000; i++)
|
||||
{
|
||||
Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
|
||||
Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
|
||||
Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
|
||||
Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
|
||||
Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
|
||||
Code += 5;
|
||||
}
|
||||
GridData = Order;
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
|
||||
{
|
||||
this.OrderID = OrderID;
|
||||
this.CustomerID = CustomerID;
|
||||
this.EmployeeID = EmployeeID;
|
||||
this.Freight = Freight;
|
||||
this.Verified = Verified;
|
||||
this.OrderDate = OrderDate;
|
||||
this.ShipCity = ShipCity;
|
||||
this.ShipCountry = ShipCountry;
|
||||
this.ShippedDate = ShippedDate;
|
||||
this.ShipAddress = ShipAddress;
|
||||
}
|
||||
public int? OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
public int? EmployeeID { get; set; }
|
||||
public double? Freight { get; set; }
|
||||
public DateTime? OrderDate { get; set; }
|
||||
public bool Verified { get; set; }
|
||||
public DateTime? ShippedDate { get; set; }
|
||||
public string ShipCountry { get; set; }
|
||||
public string ShipCity { get; set; }
|
||||
public string ShipAddress { get; set; }
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
The following GIF represent a datagrid with Row virtualization.
|
||||
|
||||
|
||||
## Column Virtualization
|
||||
|
||||
Column virtualization allows you to virtualize columns. It will render columns which are in the viewport. You can scroll horizontally to view more columns.
|
||||
|
||||
To setup the column virtualization, set the
|
||||
[EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and
|
||||
[EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) properties as **true**.
|
||||
|
||||
```csharp
|
||||
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
<SfGrid DataSource="@GridData" Height="600" Width="300" EnableVirtualization="true" EnableColumnVirtualization="true">
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee ID" 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>
|
||||
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShipAddress) HeaderText="Ship Address" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShippedDate) HeaderText="Shipped Date" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.Verified) HeaderText="Ship Name" Type="ColumnType.Boolean" Width="150"></GridColumn>
|
||||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> GridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
List<Order> Order = new List<Order>();
|
||||
int Code = 10000;
|
||||
for (int i = 1; i < 10000; i++)
|
||||
{
|
||||
Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
|
||||
Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
|
||||
Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
|
||||
Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
|
||||
Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
|
||||
Code += 5;
|
||||
}
|
||||
GridData = Order;
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
|
||||
{
|
||||
this.OrderID = OrderID;
|
||||
this.CustomerID = CustomerID;
|
||||
this.EmployeeID = EmployeeID;
|
||||
this.Freight = Freight;
|
||||
this.Verified = Verified;
|
||||
this.OrderDate = OrderDate;
|
||||
this.ShipCity = ShipCity;
|
||||
this.ShipCountry = ShipCountry;
|
||||
this.ShippedDate = ShippedDate;
|
||||
this.ShipAddress = ShipAddress;
|
||||
}
|
||||
public int? OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
public int? EmployeeID { get; set; }
|
||||
public double? Freight { get; set; }
|
||||
public DateTime? OrderDate { get; set; }
|
||||
public bool Verified { get; set; }
|
||||
public DateTime? ShippedDate { get; set; }
|
||||
public string ShipCountry { get; set; }
|
||||
public string ShipCity { get; set; }
|
||||
public string ShipAddress { get; set; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> Column's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) is required for column virtualization. If column's width is not defined then DataGrid will consider its value as **200px**.
|
||||
|
||||
The following GIF represent a datagrid with Column virtualization.
|
||||
|
||||
|
||||
> The collapsed/expanded state will persist only for local dataSource while scrolling.
|
||||
|
||||
## Enable Cell placeholder during Virtualization
|
||||
|
||||
This enable cell placeholder during virtualization feature much of a muchness of row virtualization and column virtualization feature and the difference is loading placeholder indicator was shown on the cells while loading the new data. Also same set of DOM elements is reused to improve performance.
|
||||
|
||||
To setup the enable cell placeholder during virtualization, you need to define [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) as true along with [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization)/[EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) property.
|
||||
|
||||
```csharp
|
||||
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
<SfGrid DataSource="@GridData" Height="600" Width="300" RowHeight="38" EnableVirtualMaskRow="true" EnableVirtualization="true" EnableColumnVirtualization="true">
|
||||
<GridPageSettings PageSize="32"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee ID" 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>
|
||||
<GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShipAddress) HeaderText="Ship Address" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.ShippedDate) HeaderText="Shipped Date" Width="150"></GridColumn>
|
||||
<GridColumn Field=@nameof(Order.Verified) HeaderText="Ship Name" Type="ColumnType.Boolean" Width="150"></GridColumn>
|
||||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<Order> GridData { get; set; }
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
List<Order> Order = new List<Order>();
|
||||
int Code = 10000;
|
||||
for (int i = 1; i < 10000; i++)
|
||||
{
|
||||
Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
|
||||
Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
|
||||
Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
|
||||
Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
|
||||
Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
|
||||
Code += 5;
|
||||
}
|
||||
GridData = Order;
|
||||
}
|
||||
|
||||
public class Order
|
||||
{
|
||||
public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
|
||||
{
|
||||
this.OrderID = OrderID;
|
||||
this.CustomerID = CustomerID;
|
||||
this.EmployeeID = EmployeeID;
|
||||
this.Freight = Freight;
|
||||
this.Verified = Verified;
|
||||
this.OrderDate = OrderDate;
|
||||
this.ShipCity = ShipCity;
|
||||
this.ShipCountry = ShipCountry;
|
||||
this.ShippedDate = ShippedDate;
|
||||
this.ShipAddress = ShipAddress;
|
||||
}
|
||||
public int? OrderID { get; set; }
|
||||
public string CustomerID { get; set; }
|
||||
public int? EmployeeID { get; set; }
|
||||
public double? Freight { get; set; }
|
||||
public DateTime? OrderDate { get; set; }
|
||||
public bool Verified { get; set; }
|
||||
public DateTime? ShippedDate { get; set; }
|
||||
public string ShipCountry { get; set; }
|
||||
public string ShipCity { get; set; }
|
||||
public string ShipAddress { get; set; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The following GIF represent a datagrid with Mask row virtualization.
|
||||
|
||||
|
||||
## Frozen Columns Virtualization
|
||||
|
||||
This feature virtualize the row and movable column data. Column virtualization allows you to virtualize the movable columns and cell placeholder renders before new columns loading the viewport.
|
||||
|
||||
Row virtualization allows you to virtualize the vertical data with cell placeholder. This placeholder renders before new row data loading in the viewport.
|
||||
|
||||
To setup the frozen right/left columns, you need to define Column property of **Freeze** as Right/Left along with enabling the column property of [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen).
|
||||
|
||||
```cshtml
|
||||
@using Syncfusion.Blazor.Grids
|
||||
|
||||
<SfGrid DataSource="@GridData" Height="400" Width="500" EnableHover="false" RowHeight="38" EnableVirtualization="true" EnableColumnVirtualization="true" EnableVirtualMaskRow="true">
|
||||
<GridPageSettings PageSize="40"></GridPageSettings>
|
||||
<GridColumns>
|
||||
<GridColumn Field="Field1" HeaderText="Player Name" IsFrozen="true" Freeze="FreezeDirection.Left" Width="120"></GridColumn>
|
||||
<GridColumn Field="Field2" HeaderText="Year" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field3" HeaderText="Stint" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field4" HeaderText="TMID" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field5" HeaderText="LGID" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field6" HeaderText="Game Paused" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field7" HeaderText="Game Started" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field8" HeaderText="Minutes" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field9" HeaderText="Points" IsFrozen="true" Freeze="FreezeDirection.Right" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field10" HeaderText="Offensive Rebounds" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field11" HeaderText="Defensive Rebounds" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field12" HeaderText="Rebounds" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field13" HeaderText="Assists" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field14" HeaderText="Steals" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field15" HeaderText="Blocks" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field16" HeaderText="TurnOvers" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field17" HeaderText="Power Forward" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field18" HeaderText="fgAttempted" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field19" HeaderText="fgMade" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
<GridColumn Field="Field20" HeaderText="ftAttempted" TextAlign="TextAlign.Right" Width="150"></GridColumn>
|
||||
</GridColumns>
|
||||
</SfGrid>
|
||||
|
||||
@code{
|
||||
public List<VirtualData> GridData { get; set; } = new List<VirtualData>();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
List<VirtualData> data = new List<VirtualData>();
|
||||
Random Random = new Random();
|
||||
string[] Name = new string[] {"hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa",
|
||||
"Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", "Robin Hood",
|
||||
"Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn",
|
||||
"Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", "Abdisalam", "Abdul", "Abdul-Aziz",
|
||||
"Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur",
|
||||
"Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar",
|
||||
"Ace", "Adain", "Adam", "Adam-James", "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya",
|
||||
"Adnan", "Adrian", "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham",
|
||||
"Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee" };
|
||||
GridData = Enumerable.Range(1, 1000).Select(x => new VirtualData()
|
||||
{
|
||||
Field1 = Name[Random.Next(96)],
|
||||
Field2 = 1967 + (x % 10),
|
||||
Field3 = (int)Math.Floor(Random.NextDouble() * 200),
|
||||
Field4 = (int)Math.Floor(Random.NextDouble() * 100),
|
||||
Field5 = (int)Math.Floor(Random.NextDouble() * 2000),
|
||||
Field6 = (int)Math.Floor(Random.NextDouble() * 1000),
|
||||
Field7 = (int)Math.Floor(Random.NextDouble() * 100),
|
||||
Field8 = (int)Math.Floor(Random.NextDouble() * 10),
|
||||
Field9 = (int)Math.Floor(Random.NextDouble() * 10),
|
||||
Field10 = (int)Math.Floor(Random.NextDouble() * 100),
|
||||
Field11 = (int)Math.Floor(Random.NextDouble() * 100),
|
||||
Field12 = (int)Math.Floor(Random.NextDouble() * 1000),
|
||||
Field13 = (int)Math.Floor(Random.NextDouble() * 10),
|
||||
Field14 = (int)Math.Floor(Random.NextDouble() * 10),
|
||||
Field15 = (int)Math.Floor(Random.NextDouble() * 1000),
|
||||
Field16 = (int)Math.Floor(Random.NextDouble() * 200),
|
||||
Field17 = (int)Math.Floor(Random.NextDouble() * 300),
|
||||
Field18 = (int)Math.Floor(Random.NextDouble() * 400),
|
||||
Field19 = (int)Math.Floor(Random.NextDouble() * 500),
|
||||
Field20 = (int)Math.Floor(Random.NextDouble() * 700)
|
||||
|
||||
}).ToList();
|
||||
}
|
||||
|
||||
public class VirtualData
|
||||
{
|
||||
public string Field1 { get; set; }
|
||||
public int Field2 { get; set; }
|
||||
public int Field3 { get; set; }
|
||||
public int Field4 { get; set; }
|
||||
public int Field5 { get; set; }
|
||||
public int Field6 { get; set; }
|
||||
public int Field7 { get; set; }
|
||||
public int Field8 { get; set; }
|
||||
public int Field9 { get; set; }
|
||||
public int Field10 { get; set; }
|
||||
public int Field11 { get; set; }
|
||||
public int Field12 { get; set; }
|
||||
public int Field13 { get; set; }
|
||||
public int Field14 { get; set; }
|
||||
public int Field15 { get; set; }
|
||||
public int Field16 { get; set; }
|
||||
public int Field17 { get; set; }
|
||||
public int Field18 { get; set; }
|
||||
public int Field19 { get; set; }
|
||||
public int Field20 { get; set; }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The following GIF represent a datagrid with Frozen columns/row virtualization.
|
||||
|
||||
|
||||
## Limitations for Virtualization
|
||||
|
||||
* While using column virtualization, column width should be in the pixel. Percentage values are not accepted.
|
||||
* Due to the element height limitation in browsers, the maximum number of records loaded by the datagrid is limited by the browser capability.
|
||||
* Cell selection will not be persisted in both row and column virtualization.
|
||||
* Virtual scrolling is not compatible with detail template, and hierarchy features
|
||||
* Group expand and collapse state will not be persisted.
|
||||
* Since data is virtualized in datagrid, the aggregated information and total group items are displayed based on the current view items.
|
||||
* The page size provided must be two times larger than the number of visible rows in the datagrid. If the page size is failed to meet this condition then the size will be determined by datagrid.
|
||||
* The height of the datagrid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. If you want to increase the row height to accommodate the content then you can specify the row height using **RowHeight** property to ensure all the table rows are in same height.
|
||||
* Programmatic selection using the **SelectRows** method is not supported in virtual scrolling.
|
||||
|
||||
## See Also
|
||||
|
||||
* [Row virtualization with Lazy load grouping in DataGrid](https://blazor.syncfusion.com/documentation/datagrid/grouping/#lazy-load-grouping-with-row-virtualization)
|
||||
|
||||
> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
|
||||
|
|
@ -20,7 +20,7 @@ To get start quickly with Blazor DatePicker component, you can check on this vid
|
|||
|
||||
* Install `Syncfusion.Blazor.Calendars` NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.html** page.
|
||||
* 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 **~/wwwroot/index.html** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ To get start quickly with Blazor DateRangePicker component, you can check on thi
|
|||
|
||||
* Install `Syncfusion.Blazor.Calendars` NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.html** page.
|
||||
* 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 **~/wwwroot/index.html** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ To get start quickly with Blazor DateTimePicker component, you can check on this
|
|||
|
||||
* Install `Syncfusion.Blazor.Calendars` NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.html** page.
|
||||
* 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 **~/wwwroot/index.html** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ This section briefly explains about how to include a Diagram in your Blazor WebA
|
|||
## Importing Syncfusion Blazor component in the application
|
||||
|
||||
1. Install **Syncfusion.Blazor.Diagram** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
2. You can add the style resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.cshtml** page.
|
||||
2. You can add the 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 **~/wwwroot/index.cshtml** page.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ This section briefly explains about how to include a Diagram in your Blazor Serv
|
|||
## Importing Syncfusion Blazor component in the application
|
||||
|
||||
1. Install **Syncfusion.Blazor.Diagrams** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ To get start quickly with Blazor Dialog component, you can check on this video:
|
|||
|
||||
* Install **Syncfusion.Blazor.Popups** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ Steps to get started with Word processor component for Blazor:
|
|||
}
|
||||
```
|
||||
|
||||
10. Add the client-side resources through CDN or local npm package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
10. 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include Dropdown Menu Component in yo
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ To get start quickly with Blazor DropDownList component, you can check on this v
|
|||
|
||||
> Please ensure to check the `Include prerelease` option for our Beta release.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ This section briefly explains how to include a `File Manager` in your Blazor Ser
|
|||
|
||||
W> `Syncfusion.Blazor` package should not be installed along with [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/). Hence, you have to add the below `Syncfusion.Blazor.Themes` static web assets (styles) in the application.
|
||||
|
||||
You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -45,8 +45,6 @@ This section briefly explains how to include a `File Manager` in your Blazor Ser
|
|||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor package will be installed in the project. You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
|
||||
> You can also add the client-side style resources through CDN.
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include a [Blazor File Upload](https:
|
|||
|
||||
> Please ensure to check the `Include prerelease` option for our Beta release.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ This section briefly explains about how to include a **Gantt Chart** Component i
|
|||
## Importing Syncfusion Blazor component in the application
|
||||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
2. You can add the client-side style resources through CDN or from NuGet packages in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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) packages in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -71,4 +71,4 @@ In the Gantt Chart component, you can hide chart part and display Tree Grid part
|
|||
|
||||
The following screenshot shows the output of the above code snippet.
|
||||
|
||||
|
||||
|
||||
|
|
@ -115,4 +115,4 @@ Gantt Chart add and edit dialogs can be opened dynamically by using `OpenAddDial
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -32,19 +32,19 @@ Syncfusion Blazor components are compatible with .NET Core 5.0 Preview 6 and it
|
|||
|
||||
2. Choose **Create a new project** from the Visual Studio dashboard.
|
||||
|
||||
|
||||
|
||||
|
||||
3. Select **Blazor App** from the template, and then click **Next** button.
|
||||
|
||||
|
||||
|
||||
|
||||
4. Now, the project configuration window will popup. Click **Create** button to create a new project with the default project configuration.
|
||||
|
||||
|
||||
|
||||
|
||||
5. Choose **Blazor WebAssembly App** from the dashboard, and then click **Create** button to create a new Blazor WebAssembly application.
|
||||
|
||||
|
||||
|
||||
|
||||
**Note**: ASP.NET Core 3.1 available in Visual Studio 2019 version.
|
||||
|
||||
|
|
@ -575,8 +575,7 @@ You can show the relationship in tasks by using the `Dependency` property as sho
|
|||
|
||||
```
|
||||
|
||||
You can find the full information regarding Predecessors from [here](/task-dependencies/)
|
||||
You can find the full information regarding Predecessors from [here](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies)
|
||||
|
||||
The following image represents Gantt with Editing, Sorting, Filtering and Predecessors.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 41 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 41 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 52 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 41 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 21 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 38 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 35 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 61 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 31 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 39 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 29 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 24 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 36 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 17 KiB |
|
|
@ -108,7 +108,7 @@ It is possible to change the height of the row in Gantt Chart by setting row hei
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Expand or Collapse Row
|
||||
|
||||
|
|
@ -213,7 +213,7 @@ All tasks available in Gantt Chart was rendered in collapsed state by setting `C
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Define Expand / Collapse Status of Tasks
|
||||
|
||||
|
|
@ -955,7 +955,7 @@ You can customize the appearance of a row in grid side, by using the `RowDataBou
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Styling Alternate Rows
|
||||
|
||||
|
|
@ -1063,6 +1063,6 @@ You can customize the appearance of a row in grid side, by using the `RowDataBou
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to knows how to render and configure the gantt.
|
||||
|
|
@ -129,7 +129,7 @@ The following table shows built-in toolbar items and its actions.
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
> The `Toolbar` has options to define both built-in and custom toolbar items.
|
||||
|
||||
|
|
@ -360,7 +360,7 @@ In the following example, the `ExpandAll` and `CollapseAll` are built-in toolbar
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## Enable or Disable Toolbar Items
|
||||
|
||||
|
|
@ -486,6 +486,6 @@ You can enable or disable the toolbar items by using the `EnableItems` method.
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to knows how to render and configure the gantt.
|
||||
|
|
@ -25,7 +25,7 @@ To perform `tap` action on a column header, trigger [Sorting](sorting/#sorting)
|
|||
|
||||
The following screenshot shows Gantt touch sorting,
|
||||
|
||||
|
||||
|
||||
|
||||
## Column Resize
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ When the right edge of the column header cell is `tapped`, a floating handler wi
|
|||
|
||||
The following screenshot represents the Gantt column resizing in touch device.
|
||||
|
||||
|
||||
|
||||
|
||||
## Editing
|
||||
|
||||
|
|
@ -72,6 +72,6 @@ When you `tap` gantt row, tapped row will be selected.
|
|||
|
||||
[Multiple selection](selection/#multiple-row-selection) : To perform multiple selection, `tap` on the multiple selection popup, and then tap the desired rows or cells.
|
||||
|
||||
|
||||
|
||||
|
||||
> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to knows how to render and configure the gantt.
|
||||
|
|
@ -23,7 +23,7 @@ This section briefly explains how to include a `HeatMap Chart` in your Blazor Se
|
|||
|
||||
W> `Syncfusion.Blazor` package should not be installed along with [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/). Hence, you have to add the below `Syncfusion.Blazor.Themes` static web assets (styles) in the application.
|
||||
|
||||
* You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -43,8 +43,6 @@ This section briefly explains how to include a `HeatMap Chart` in your Blazor Se
|
|||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor package will be installed in the project. You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
|
||||
> You can also add the client-side style resources through CDN.
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains how to include a In-Place Editor component in your
|
|||
|
||||
* Install **Syncfusion.Blazor.InPlaceEditor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ To get start quickly with Blazor MaskedTextBox component, you can check on this
|
|||
|
||||
> Please ensure to check the `Include prerelease` option for our Beta release.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.html** page.
|
||||
* 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 **~/wwwroot/index.html** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains how to include a Kanban component in your Blazor S
|
|||
|
||||
1. Install **Syncfusion.Blazor.Kanban** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side style resources from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains how to include a Linear gauge in your Blazor serve
|
|||
|
||||
1. Install **Syncfusion.Blazor.LinearGauge** NuGet package in the application using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side resources through CDN or local npm package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ You can refer [Getting Started with Syncfusion Blazor for Server-side in Visual
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@ This section briefly explains about how to include a `ListView` in your Blazor s
|
|||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor Lists package will be installed in the project. You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
|
||||
> You can also add the client-side style resources through CDN.
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
|
|
@ -60,7 +58,7 @@ This section briefly explains about how to include a `ListView` in your Blazor s
|
|||
|
||||
W> `Syncfusion.Blazor` package should not be installed along with [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/). Hence, you have to add the below `Syncfusion.Blazor.Themes` static web assets (styles) in the application.
|
||||
|
||||
You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Maps component in your Blazor ser
|
|||
|
||||
1. Install **Syncfusion.Blazor.Maps** NuGet package in the application using the **NuGet Package Manager**.
|
||||
|
||||
2. You can add the client-side resources through CDN or local npm package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ To get start quickly with Menu Bar Component using Blazor, you can check on this
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include a **MultiSelect** Component i
|
|||
|
||||
> Please ensure to check the `Include prerelease` option for our Beta release.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ To get start quickly with Blazor NumericTextBox component, you can check on this
|
|||
|
||||
> Please ensure to check the `Include prerelease` option for our Beta release.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/wwwroot/index.html** page.
|
||||
* 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 **~/wwwroot/index.html** page.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ To get start quickly with Blazor Pivot Table component, you can check out this v
|
|||
## Importing Syncfusion Blazor Pivot Table component in the application
|
||||
|
||||
1. Install the **Syncfusion.Blazor.PivotTable** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
2. You can add the client-side resources through CDN or local npm package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -454,11 +454,11 @@ The filter axis contains collection of fields that would act as master filter ov
|
|||
|
||||
```
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
## Calculated Field
|
||||
|
||||
|
|
@ -504,11 +504,11 @@ The calculated field feature allows user to insert or add a new calculated field
|
|||
|
||||
```
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
> You can also explore our [Blazor Pivot Table example](https://blazor.syncfusion.com/demos/pivot-table/default-functionalities?theme=bootstrap4) to knows how to render and configure the pivot table.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Progress Bar component in the Bla
|
|||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. Add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
2. Add the client-side resources using 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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include Progress Button Component in
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ To get start quickly with Query Builder Component using Blazor, you can check on
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
|
||||
|
|
@ -124,7 +124,7 @@ Now, add the [Blazor Query Builder](https://www.syncfusion.com/blazor-components
|
|||
|
||||
After successful compilation of your application, simply press F5 to run the application. The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder) component will render in the web browser as shown below
|
||||
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 36 KiB |
|
|
@ -22,7 +22,7 @@ To get start quickly with Radio Button Component using Blazor, you can check on
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
2. You can add the client-side style resource 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.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Range Navigator component in the
|
|||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. Add the client-side resources through CDN or from the NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,6 @@ This section briefly explains how to include a simple `Range Slider` in your Bla
|
|||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor Inputs package will be installed in the project. You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
|
||||
> You can also add the client-side style resources through CDN.
|
||||
|
||||
```html
|
||||
<head>
|
||||
....
|
||||
|
|
@ -58,7 +56,7 @@ This section briefly explains how to include a simple `Range Slider` in your Bla
|
|||
|
||||
W> `Syncfusion.Blazor` package should not be installed along with [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages/). Hence, you have to add the below `Syncfusion.Blazor.Themes` static web assets (styles) in the application.
|
||||
|
||||
You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ To get start quickly with Blazor Rich Text Editor components, you can check on t
|
|||
|
||||
* Install **Syncfusion.Blazor.RichTextEditor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
Двоичные данные
blazor/rich-text-editor/images/rte-image.png
Двоичные данные
blazor/rich-text-editor/images/rte-image.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 172 KiB После Ширина: | Высота: | Размер: 43 KiB |
|
|
@ -26,7 +26,7 @@ You can use any one of the below standards to install the Syncfusion Blazor libr
|
|||
|
||||
1. Install **Syncfusion.Blazor.Schedule** NuGet package to the application using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources from NuGet package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -44,7 +44,7 @@ W> If you prefer the above new standard (individual NuGet packages), then skip t
|
|||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the newly created application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ You can use any one of the below standards to install the Syncfusion Blazor libr
|
|||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor Navigation package will be installed in the project.
|
||||
|
||||
4. You can add the client-side style resources from NuGet package in the `<head>` element of the **~/Pages/_Host.cshtml** page.
|
||||
4. 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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -57,9 +57,7 @@ W> If you prefer the above new standard (individual NuGet packages), then skip t
|
|||
|
||||
3. Once the installation process is completed, the Syncfusion Blazor package will be installed in the project.
|
||||
|
||||
4. You can add the client-side style resources using NuGet package to the `<head>` element of the `~/wwwroot/index.html` page in Blazor WebAssembly app or `~/Pages/_Host.cshtml` page in Blazor Server app.
|
||||
|
||||
> You can also add the client-side style resources through CDN.
|
||||
4. 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.
|
||||
|
||||
```cshtml
|
||||
<head>
|
||||
|
|
@ -477,7 +475,7 @@ Output be like the below.
|
|||
|
||||
|
||||
|
||||
# Blazor Sidebar vs native sidebar
|
||||
## Blazor Sidebar vs native sidebar
|
||||
|
||||
1. Simply customizable and responsive design.
|
||||
2. Different sliding types provides the user to adjust the main content by pushing, overlaying or sliding the content.
|
||||
|
|
|
|||
Двоичные данные
blazor/sidebar/images/navigation.png
Двоичные данные
blazor/sidebar/images/navigation.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 138 KiB После Ширина: | Высота: | Размер: 38 KiB |
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Smith Chart component in the Blaz
|
|||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. Add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Sparkline component in the Blazor
|
|||
|
||||
1. Install **Syncfusion.Blazor** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
2. Add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
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.
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ This section briefly explains how to include a Spinner component in your Blazor
|
|||
|
||||
* Install **Syncfusion.Blazor.Spinner** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ This section briefly explains how to include a Spinner component in your Blazor
|
|||
</environment>
|
||||
</head>
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
## Adding component package to the application
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains about how to include Split Button Component in you
|
|||
|
||||
1. Install the **Syncfusion.Blazor** NuGet package to the application by using the `NuGet Package Manager`.
|
||||
|
||||
2. You can add the client-side style resources through CDN or from NuGet package in the `<head>` element of the `~/Pages/_Host.cshtml` page.
|
||||
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.
|
||||
|
||||
> Please ensure to check the **Include prerelease** option.
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ This section briefly explains how to include a Splitter component in your Blazor
|
|||
|
||||
* Install **Syncfusion.Blazor.Layouts** NuGet package to the application by using the **NuGet Package Manager**.
|
||||
|
||||
* You can add the client-side resources through CDN or from NuGet package in the **HEAD** element of the **~/Pages/_Host.cshtml** page.
|
||||
* 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.
|
||||
|
||||
```cshtml
|
||||
|
||||
|
|
|
|||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче