1
Infragistics Blazor Grid
A Grid control is a graphical user interface element used in software development to display and manipulate tabular data. It is commonly used in applications that need to present data in a structured format, such as tabular or spreadsheets.
Infragistics Blazor Grid Controls is a specific implementation of a Grid control designed to be used with Blazor - a framework for building interactive web applications using C# and .NET.
The Blazor Grid Control by Infragistics is a powerful user interface component that allows developers to display, edit, and manage tabular data in Blazor applications. It provides a range of features and functionalities to make working with data in web applications more efficient and user-friendly.
Here are some of the key features and functionalities that Infragistics Blazor Grid Controls typically offer:
- Data Binding
The Grid Control allows you to easily bind it to various data sources, including collections, databases, and web services. This means you can display and work with data from a wide range of back-end systems.
- Sorting and Grouping
Users can sort data by clicking on column headers and you can also group data based on specific columns to create a hierarchical view.
- Filtering
Users can apply filters to display specific subsets of data, making it easier to find and analyze information.
- Editing
The Grid Control supports inline editing, allowing users to modify data directly within the Grid. This is especially useful for applications that require data manipulation.
- Selection and Multi-Selection
Users can select single or multiple rows within the Grid, which can be used for various purposes like deletion, copying, or performing operations on the selected data.
- Paging
If dealing with a large dataset, the Grid Control can implement pagination to display a limited set of data at a time, with options to navigate between pages.
- Events and Event Handling
The control generates events based on user interactions (like clicking on a cell or row), allowing developers to respond to these events with custom logic.
- Templates
Developers can create custom templates to control the appearance and layout of the Grid.
- Exporting Data
Users can export data from the Grid to various formats like Excel, PDF, or CSV for further analysis or reporting.
- Styling and Theming
Developers can customize the appearance of the Grid, including things like color schemes, fonts, and layout.
- Accessibility and Localization
This control is designed with accessibility in mind, making it usable by people with disabilities. It also supports localization for multi-language applications.
3
Getting Started With Infragistics Blazor Grid
These are the steps to use in Infragistics Grid for any Blazor project:
Step 1: Create a Blazor project
Step 2: Give the project a Name
Step 3: Install the Infragistics Blazor package
Package Manager Console with the following command:
Install-Package IgniteUI.Blazor
Alternatively, you can use the NuGet Package Manager GUI to search for and install the package.
Note that you will have to add Infragistics Licenced Nuget Feed.
Step 4: Open the Program.cs file and register the Ignite UI for Blazor Service by calling builder.Services.AddIgniteUIBlazor function like in the image given below:
Step 5: Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file
Step 6: Go to the _Host.cshtml page and register the bootstrap.css file
<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
Step 7: Go to Index.razor page and write the code to load Grid
@page "/"
<PageTitle>Index</PageTitle>
<h3>Infragistics Blazor Grid</h3>
<br />
<div class="container vertical">
<div class="container vertical fill">
<IgbGrid Id="grid" AutoGenerate="false" Data="@dataSource">
<IgbColumn Width="50%" Field="Id" />
<IgbColumn Width="50%" Field="Name" />
</IgbGrid>
</div>
</div>
@code
{
List<Employee> dataSource = new List<Employee>
{
new Employee { Id = "1", Name = "James" },
new Employee { Id = "2", Name = "John" },
new Employee { Id = "3", Name = "Robert" },
};
public class Employee
{
public string Id { get; set; }
public string Name { get; set; }
}
}
Step 8: Run the application
