The NOV Blazor WebAssembly Grid is a high-performance Data Grid component for displaying and editing tabular data within your web applications.
The NOV installation comes with Blazor Example Solution, including many Grid Control examples with source code. You can use the NOV Blazor Grid to replace the standard DataGridView, or any Grid control for your business applications, whether you are working on a new or extending an existing web application.
The NOV Grid will help your web application development and allow you to start with your cross-platform .NET development and target multiple platforms and devices.
When you start developing with NOV, you can build cross-platform applications using a single code base.
NOV Grid for Blazor WebAssembly includes:
Filtering
Grouping
Sorting
Tree Grid View
Alternating Rows
Gridlines
Master Details
Row Headers
Frozen Rows
Frozen Columns
Null Values
Calculated Columns
Data Columns
Column Editors
Column Formats
Conditional Formatting
Column Width
Protection
Scrolling
Selection
Tooltips
Widget Hosting
NOV Blazor WebAssembly Grid provides support for binding to diverse data sources. The Grid displays data from a data source assigned by the DataSource property.
A data source is an attribute that aggregates a Data Table. Data Tables help you define data in memory or bind to different collections of objects.
You can work with all types of data tables consistently and intuitively.
The Data Table exposes various operations that help you add/remove fields and rows, get or set cell values, and perform different queries.
With NOV Blazor WebAssembly Grid you can load 1M+ records (million records) without compromising performance.
The Blazor WebAssembly Grid allows end-users to perform smooth scrolling, Grouping, Sorting and Filtering on hundreds of thousands of records instantly, without lags or delays.
The
NOV Blazor WebAssembly Grid Data Processing allows to easily perform Filtering, Grouping, Sorting, or Self-Referencing operations on your data. Both the Table Grid and Tree Grid are performing the Filtering and Sorting processes, however the order of the data processing algorithm is different for each type of grid. Following is an overview of the data processing algorithm for each type of grid.
-
The Blazor WebAssembly Table Grid allows Filtering, Grouping and Sorting
-
The Blazor WebAssembly Tree Grid allows Filtering, Self-Referencing and Sorting
Filtering is the process of passing only certain records from the data source to be displayed by the grid.
NOV Blazor WebAssembly Grid allows you to create filter rules that work on a column and field-provided row values.
This makes it possible to create filter rules that work on calculated columns (i.e., columns that do not have an associated field in the data source) and create filter rules that work on data source fields, regardless of whether columns in the grid represent them.
Sorting is the process of sorting the rows that reside on the same hierarchical level. The Blazor WebAssembly Grid support multiple sorting rules that define a certain sorting order of the rows that reside at the same level in the grid grouping or self-referencing level.
Sorting can be visually performed by the user in several ways:
- Clicking on the Column Headers or Sorting Buttons - when the user clicks on the column headers or the sorting buttons, this will toggle the sorting direction in which that specific column is sorted. Additionally, when the user holds down the Ctrl key, it is possible to perform sorting on multiple grid columns.
- Selecting the Sort Ascending or Sort Descending command from the Column Context Menu - the user can sort by a specific column by selecting the respective commands in the column context menu.
The purpose of the Blazor WebAssembly Table Grid Grouping is to create a hierarchical organization of the grid rows, such that the rows that reside in each group share some common grouping defined common value.
The Blazor WebAssembly Table Grid supports multi-level grouping. Because each grouping rule can produce multiple groups and because there are multiple grouping rules, this creates a hierarchically grouped grid. There is a sorting direction associated with each grouping rule.
Self-referencing is only applicable to the Blazor WebAssembly Tree Grid. Self-referencing produces a tree-like structure from a tabular data source.
This is achieved by specifying two fields of the data source - one that identifies each record uniquely and another that specifies the record's parent record.
Master - Details is a feature of the Blazor WebAssembly Table Grid that allows you to display additional information (details) for each record data row.
Master - Details allows you to display other tables data that is related to the master table rows - NTableGridDetail and NTreeGridDetail are master-details that can display a Table Grid or Tree Grid showing information from a slave data source.
Unlike Data Columns, calculated columns do not show a specific data source field. Instead, it is the user's responsibility to define a value for each data source row. Typically this value is a product of other data source fields. For example, the TOTAL column in many grids is derived by multiplying the PRICE * QUANTITY values.
Calculated columns can also be used when extracting information about a specific data row from another data source. There are two types of calculated columns:
- Formula Calculated Column - this is a calculated column that is defined as a formula. The value that this column assigns to each row is the result of a formula evaluation, where you can use other column values.
- Custom Calculated Column - this is a calculated column that calls a user-handled delegate to obtain a row value on-demand.
Filtering, Grouping and Sorting can be performed on the calculated columns.
Column Conditional Formatting helps you format particular data cell views according to specific rules. NOV Blazor WebAssembly Grid provides strong support for authoring complex cell conditions.
Besides static fill rules, NOV Blazor WebAssembly Grid also supports gradient background and text fill declarations that can be defined as two- or three-color gradients.
The NOV Blazor WebAssembly Grid Column Format allows the modification of the visualization of the data cell value.
Generally, the Column Formats are logically divided into two categories:
- Default Column Formats - these are the standard column formats that the grid, by default, uses for specific row value types.
- Extended Column Formats - these are column formats that the grid does not use by default, but you can manually assign to certain columns.
NOV Blazor WebAssembly Grid also provides support for Custom Column Formatting - this allows you to use any NOV widget to represent the row values e.g. Charts, Gauges, Barcodes, or other widgets.
Resizing Blazor WebAssembly Grid columns - the width of the column can be determined in several ways:
- Auto
- Fixed
- Size To Cells
- Size To Header
- Percent
Additionally, the user can also resize the columns or double-click the column separators to "best fit" the columns.
Reordering Blazor WebAssembly Grid columns – allows the user to change the order of the columns by dragging them.
NOV Blazor WebAssembly Grid provides support for Frozen Columns and Frozen Rows.
Frozen Columns can be frozen to the left or right side of the grid window area.
Frozen Rows appear pinned to the column headers, and the FrozenRows grid property controls them. It specifies the count of rows from the top of the grid that is non-scrollable.
The Blazor WebAssembly Grid protection refers to the set of properties that can help you restrict the user from performing specific actions with the grid.
For operations that apply to columns, a respective Column Protection property can restrict the same operation for a specific column only.
NOV Blazor WebAssembly Grid provides support for Null Values. The Grid also supports editing of null values.
The Grid selection is organized to work around grid rows and to maintain the notion of a Current Row and Current Cell.
Selection can be configured to operate in two modes via its Mode property:
- Single - only a single row can be selected;
- Multiple - multiple rows can be selected;
The Grid selection is also responsible for performing a variety of navigation commands that can alter the current cell, select/deselect rows, and change the current cell. The selection also exposes properties that control the events that trigger the current cell editing.
The Grid alternating rows are helpful when you display grids with many columns since the user can easily follow the values that belong to the same row.
Thus alternating rows increase the readability of the grid.
NOV Blazor WebAssembly Grid provides full control over the alternating rows appearance, interval and length.
NOV Blazor WebAssembly Grid features several gridlines displayed by the Grid cells, Columns, and Row Headers.
- Grid Gridlines - the gridlines that separate the rows and data cells;
- Columns Gridlines - Top Gridline, Bottom Gridline and Vertical Columns Gridlines;
- Row Headers Gridlines - Left Gridline, Right Gridline and Horizontal Row Headers Gridlines;
NOV Grid provides full control over the appearance of the gridlines stroke.
NOV Blazor WebAssembly Grid provides full localization support and right-to-left support.
The NOV Framework Localization support allows you to translate the entire user interface (UI) of your applications.
The architecture of the NOV Framework allows you to host any NOV Widget into other NOV Widget.
This allows you to use NOV widgets to represent the Blazor WebAssembly Grid row values, for example, Charts, Gauges, Barcodes, or other widgets.
Open Vision for .NET
NOV Chart for .NET
NOV Diagram for .NET
NOV Rich Text Editor for .NET
NOV Grid for .NET
NOV Schedule for .NET
NOV Gauge for .NET
NOV Barcode for .NET
NOV User Interface for .NET
Vision for .NET
Chart for .NET
Diagram for .NET
User Interface for .NET
Vision for SSRS
Chart for SSRS
Gauge for SSRS
Map for SSRS
Barcode for SSRS
Vision for SharePoint
Chart for SharePoint
Gauge for SharePoint
Map for SharePoint
Barcode for SharePoint
