Skip to content

Documentation(954494) - Revamp How to topic in blazor platform #5883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 16 commits into
base: hotfix/hotfix-v29.1.33
Choose a base branch
from
Open

Documentation(954494) - Revamp How to topic in blazor platform #5883

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0bfec2a
Documentation(954494) - Revamp How to topic in blazor platform
Gayathri4135 Apr 25, 2025
a603a4b
Updated the md file
Gayathri4135 Apr 25, 2025
b62f4d7
Update the md file
Gayathri4135 Apr 29, 2025
411c427
updated the md file
Gayathri4135 May 12, 2025
1237244
updated the md file
Gayathri4135 May 12, 2025
945b8bb
updated the md file
Gayathri4135 May 12, 2025
85793c6
Updated the md file
Gayathri4135 May 12, 2025
c187b57
Updated the md file
Gayathri4135 May 12, 2025
f162097
Updated the sample
Gayathri4135 May 13, 2025
4c11673
updated the md file
Gayathri4135 May 13, 2025
d94b75e
Updated the md file
Gayathri4135 May 14, 2025
d0e71c3
Updated the md file
Gayathri4135 May 14, 2025
bd377eb
Updated the md file
Gayathri4135 May 15, 2025
d843200
Updated the md file
Gayathri4135 May 15, 2025
164828e
updated the md file
Gayathri4135 May 16, 2025
d373c23
update the md file
Gayathri4135 May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions blazor-toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2063,7 +2063,13 @@
<a href="/blazor/datagrid/how-to/grid-styling">Styling and appearance</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/customize-empty-grid-display-message">Customize empty grid display message</a>
<a href="/blazor/datagrid/how-to/customize-empty-grid-display-message">Customize the empty record template</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/resize-grid-in-various-dimension">Resize the Grid in various dimension</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template">Use custom helper inside the loop with templates</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/save-new-row-at-particular-index-in-page">Saving a new row at a particular index of the grid page</a>
Expand Down Expand Up @@ -2096,7 +2102,7 @@
<a href="/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox">Use radio button instead of checkbox in single selection mode of Grid</a>
</li>
<li>
<a href="/blazor/datagrid/how-to/enable-or-disable-grid">Enable or Disable the Grid Component</a>
<a href="/blazor/datagrid/how-to/enable-or-disable-grid">Enable/Disable Grid and its actions</a>
</li>
</ul>
</li>
Expand Down
34 changes: 17 additions & 17 deletions blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Getting Started with Blazor DataGrid in WebAssembly | Syncfusion
description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid Component in Visual Studio using .NET CLI and more.
description: Checkout the documentation for getting started with Blazor WebAssembly App and Syncfusion Blazor DataGrid in Visual Studio using .NET CLI and more.
platform: Blazor
control: DataGrid
documentation: ug
---

<!-- markdownlint-disable MD024 -->

# Blazor DataGrid Component in WebAssembly App using CLI
# Blazor DataGrid in WebAssembly App using CLI

This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid component using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet/8.0).
This article provides a step-by-step instructions for building Blazor WebAssembly App with Blazor DataGrid using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet/8.0).

## Prerequisites

Expand Down Expand Up @@ -50,7 +50,7 @@ dotnet new blazorwasm -o BlazorApp -ho

N> If you have installed multiple SDK versions and need any specific framework version (net6.0/net7.0) project, then add -f flag along with dotnet new blazorwasm comment. Refer [here](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new#blazorwasm) for the available options.

## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages in the App
## Install Syncfusion Blazor packages in the App

To Add `Syncfusion.Blazor.Grid` NuGet package to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details.

Expand All @@ -63,9 +63,9 @@ dotnet restore
{% endhighlight %}
{% endtabs %}

N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.

## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
## Register Syncfusion Blazor Service

Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace.

Expand All @@ -76,7 +76,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio

```

Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.

{% tabs %}
{% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
Expand Down Expand Up @@ -113,9 +113,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.

## Add Blazor DataGrid component
## Add Blazor DataGrid

Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid component in the **~/Pages/Index.razor** file.
Add the Syncfusion Blazor DataGrid in the **~/Pages/Index.razor** file.

{% tabs %}
{% highlight razor %}
Expand Down Expand Up @@ -155,11 +155,11 @@ dotnet run
{% endhighlight %}
{% endtabs %}

![Blazor DataGrid Component](../images/blazor-datagrid-component.png)
![Blazor DataGrid](../images/blazor-datagrid-component.png)

## Defining row data

To bind data for the DataGrid component, you can assign a IEnumerable object to the [dataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page.
To bind data for the Syncfusion Blazor DataGrid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the `DataManager`. You can assign the data source through the `OnInitialized` life cycle of the page.

{% tabs %}
{% highlight razor %}
Expand Down Expand Up @@ -195,7 +195,7 @@ To bind data for the DataGrid component, you can assign a IEnumerable object to

The columns are automatically generated when columns declaration is empty or undefined while initializing the datagrid.

The DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. In `GridColumn` component we have properties to customize columns.
The Syncfusion Blazor DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). In `GridColumn` we have properties to customize columns.

Let’s check the properties used here:

Expand All @@ -221,7 +221,7 @@ Let’s check the properties used here:

## Enable paging

The paging feature enables users to view the datagrid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
The Syncfusion Blazor DataGrid allows to view records in a paged format. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to true. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).

{% tabs %}
{% highlight razor %}
Expand All @@ -241,7 +241,7 @@ The paging feature enables users to view the datagrid record in a paged view. It

## Enable sorting

The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
The Syncfusion Blazor DataGrid allows you to sort records in a desired order. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).

{% tabs %}
{% highlight razor %}
Expand All @@ -261,7 +261,7 @@ The sorting feature enables you to order the records. It can be enabled by setti

## Enable filtering

The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
The Syncfusion Blazor DataGrid allows you to filter records and display a reduced set of data based on specific criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).

{% tabs %}
{% highlight razor %}
Expand All @@ -281,7 +281,7 @@ The filtering feature enables you to view reduced amount of records based on fil

## Enable grouping

The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
The Syncfusion Blazor DataGrid allows you to view records in a grouped format. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).

{% tabs %}
{% highlight razor %}
Expand All @@ -299,7 +299,7 @@ The grouping feature enables you to view the datagrid record in a grouped view.
{% endhighlight %}
{% endtabs %}

![Blazor DataGrid Component](../images/blazor-datagrid.gif)
![Blazor DataGrid](../images/blazor-datagrid.gif)

## See also

Expand Down
Loading