NOV Blazor WebAssembly Grid

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:

Blazor WebAssembly Grid Data Binding - binding to diverse set of data sources 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.

Blazor WebAssembly Grid component optimized for high performance With NOV Blazor WebAssembly Grid you can load 1M+ records (million records) without compromising performance 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.

Blazor WebAssembly Grid Data Processing - Filtering, Grouping, Sorting 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 Blazor WebAssembly Grid Filtering NOV Blazor WebAssembly Grid allows you to create filter rules that work on column and field provided row values 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. Blazor WebAssembly Grid Sorting NOV 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 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. Blazor WebAssembly Table Grid Grouping NOV Blazor WebAssembly Table Grid Grouping - hierarchically grouped grid 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. Blazor WebAssembly Tree Grid Self-Referencing NOV Blazor WebAssembly Tree Grid Self-Referencing produces a tree-like structure from a tabular data source 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.

Blazor WebAssembly Grid Master - Details NOV Blazor WebAssembly Grid Master-Details allows you to display other tables data that is related to the master table rows 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.

Blazor WebAssembly Grid Calculated Columns NOV Blazor WebAssembly Grid provides support for Calculated Columns in this example the Total column displays formula calculated values {PRICE * QUANTITY} 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.

Blazor WebAssembly Grid Column Conditional Formatting NOV Blazor WebAssembly Grid provides support for Column Conditional Formatting 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.

Blazor WebAssembly Grid Column Formats NOV Blazor WebAssembly Grid provides support for Default, Extended and Custom Column Formats 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.

Blazor WebAssembly Grid Column Reordering and Resizing NOV Blazor WebAssembly Grid provides support for Column Reordering and Resizing 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.

Blazor WebAssembly Grid Frozen Columns and Frozen Rows NOV Blazor WebAssembly Grid provides support for Frozen Columns and Frozen Rows 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.

Blazor WebAssembly Grid Protection and Column Protection NOV Blazor WebAssembly Grid provides support for Grid Protection and Column Protection 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.

Blazor WebAssembly Grid Support for Null Values NOV Blazor WebAssembly Grid provides support for Null Values NOV Blazor WebAssembly Grid provides support for Null Values. The Grid also supports editing of null values.

Blazor WebAssembly Grid Selection NOV Blazor WebAssembly Grid - multiple rows selection 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.

Blazor WebAssembly Grid Alternating Rows NOV Blazor WebAssembly Grid provides full control over the alternating rows' appearance, interval, and length 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.

Blazor WebAssembly Grid Gridlines NOV Blazor WebAssembly Grid provides full control over the appearance of the gridlines 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.

Blazor WebAssembly Grid Right-to-Left and Localization Support 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.

NOV Blazor WebAssembly Grid Widget Hosting NOV Blazor WebAssembly Grid - hosting NOV Blazor WebAssembly Widgets 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.