The Ignite UI for Blazor Cell Selection in Blazor Grid enables rich data select capabilities and offers powerful API in the IgbGrid component. The Blazor Grid supports three selection modes:
Grid Multiple Cell Selection
Grid Single Selection
Grid None Selection
Let's dive deeper into each of these options.
Blazor Grid Cell Selection Example
The sample below demonstrates the three types of IgbGrid's cell selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Selection Types
Grid Multiple-Cell Selection
How to select cells:
By Mouse drag - Rectangular data selection of cells would be performed.
By CTRL key press + Mouse drag - Multiple range selections would be performed. Any other existing cell selection will be persisted.
Instant multi-cell selection by using SHIFT key. Select single cell and select another single cell by holding the SHIFT key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding SHIFT key the cell selection range will be updated based on the first selected cell position (starting point).
Keyboard multi-cell selection by using the Arrow keys while holding SHIFT key. Multi-cell selection range will be created based on the focused cell.
Keyboard multi-cell selection by using the CTRL + ↑↓←→ keys and CTRL + HOME/END while holding SHIFT key. Multi-cell selection range will be created based on the focused cell.
Clicking with the Left Mouse key while holding CTRL key will add single cell ranges into the selected cells collection.
Continuous multiple cell selection is available, by clicking with the mouse and dragging.
Demo
EXAMPLE
MODULES
RAZOR
JS
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// TODO update names of the following modules for the IgbGrid
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule),
typeof(IgbRadioModule),
typeof(IgbRadioGroupModule),
typeof(IgbSnackbarModule),
typeof(IgbIconModule)
);
await builder.Build().RunAsync();
}
}
}cs
functionRangeSelectionChanging(o, e) {
var g1 = document.querySelector("#grid1");
var g2 = document.querySelector("#grid2");
g2.data = g1.getSelectedData();
}
igRegisterScript("RangeSelectionChanging", RangeSelectionChanging, false);js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Grid Single Selection
When you set the CellSelection to single, this allows you to have only one selected cell in the grid at a time. Also the mode mouse drag will not work and instead of selecting a cell, this will make default text selection.
When single cell is selected Selected event is emitted, no matter if the selection mode is single or multiple. In multi-cell selection mode when you select a range of cells RangeSelected event is emitted.
Grid None Selection
If you want to disable cell selection you can just set CellSelection to none. In this mode when you click over the cell or try to navigate with keyboard, the cell is not selected, only the activation style is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.
Keyboard Navigation Interactions
While Shift Key is Pressed
SHIFT + ↑ to add above cell to the current selection.
SHIFT + ↓ to add below cell to the current selection.
SHIFT + ← to add left cell to the current selection.
SHIFT + → to add right cell to the current selection.
While Ctrl + Shift Keys are Pressed
CTRL + SHIFT + ↑ to select all cells above the focused cell in the column.
CTRL + SHIFT + ↓ to select all cells below the focused cell in the column.
CTRL + SHIFT + ← to select all cells till the start of the row.
CTRL + SHIFT + → to select all cells till the end of the row.
CTRL + SHIFT + HOME to select all cells from the focused cell till the first-most cell in the grid
CTRL + SHIFT + END to select all cells from the focused cell till the last-most cell in the grid
Continuous scroll is possible only within Grid's body.
Api Usage
Below are the methods that you can use in order to select ranges, clear selection or get selected cells data.
Select range
SelectRange - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.
The multi-cell selection is index based (DOM elements selection).
Sorting - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
Paging - On paging selected cells will be cleared. Selection wont be persisted across pages.
Filtering - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
Resizing - On column resizing selected cells will not be cleared.
Hiding - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
Pinning - Selected cell will not be cleared. Same as hiding
GroupBy - On column grouping selected cells will not be cleared.
Styling
In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties.
In case you would like to change some of the colors, you need to set a class for the grid first:
<IgbGridClass="grid"></IgbGrid>razor
Then set the related CSS properties for that class:
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbGridModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
publicclassCustomersDataItem
{
publicstring ID { get; set; }
publicstring Company { get; set; }
publicstring ContactName { get; set; }
publicstring ContactTitle { get; set; }
publicstring Address { get; set; }
publicstring City { get; set; }
publicstring Region { get; set; }
publicdouble PostalCode { get; set; }
publicstring Country { get; set; }
publicstring Phone { get; set; }
publicstring Fax { get; set; }
}
publicclassCustomersData
: List<CustomersDataItem>
{
publicCustomersData()
{
this.Add(new CustomersDataItem() { ID = @"ALFKI", Company = @"Alfreds Futterkiste", ContactName = @"Maria Anders", ContactTitle = @"Sales Representative", Address = @"Obere Str. 57", City = @"Berlin", Region = @"East", PostalCode = 12209, Country = @"Germany", Phone = @"030-0074321", Fax = @"030-0076545" });
this.Add(new CustomersDataItem() { ID = @"ANATR", Company = @"Ana Trujillo Emparedados y helados", ContactName = @"Ana Trujillo", ContactTitle = @"Owner", Address = @"Avda. de la Constitución 2222", City = @"México D.F.", Region = @"South", PostalCode = 5021, Country = @"Mexico", Phone = @"(5) 555-4729", Fax = @"(5) 555-3745" });
this.Add(new CustomersDataItem() { ID = @"ANTON", Company = @"Antonio Moreno Taquería", ContactName = @"Antonio Moreno", ContactTitle = @"Owner", Address = @"Mataderos 2312", City = @"México D.F.", Region = @"South", PostalCode = 5023, Country = @"Mexico", Phone = @"(5) 555-3932", Fax = @"(5) 555-3745" });
this.Add(new CustomersDataItem() { ID = @"AROUT", Company = @"Around the Horn", ContactName = @"Thomas Hardy", ContactTitle = @"Sales Representative", Address = @"120 Hanover Sq.", City = @"London", Region = @"East", PostalCode = 22000, Country = @"UK", Phone = @"(171) 555-7788", Fax = @"(171) 555-6750" });
this.Add(new CustomersDataItem() { ID = @"BERGS", Company = @"Berglunds snabbköp", ContactName = @"Christina Berglund", ContactTitle = @"Order Administrator", Address = @"Berguvsvägen 8", City = @"Luleå", Region = @"South", PostalCode = 17000, Country = @"Sweden", Phone = @"0921-12 34 65", Fax = @"0921-12 34 67" });
this.Add(new CustomersDataItem() { ID = @"BLAUS", Company = @"Blauer See Delikatessen", ContactName = @"Hanna Moos", ContactTitle = @"Sales Representative", Address = @"Forsterstr. 57", City = @"Mannheim", Region = @"East", PostalCode = 68306, Country = @"Germany", Phone = @"0621-08460", Fax = @"0621-08924" });
this.Add(new CustomersDataItem() { ID = @"BLONP", Company = @"Blondesddsl père et fils", ContactName = @"Frédérique Citeaux", ContactTitle = @"Marketing Manager", Address = @"24, place Kléber", City = @"Strasbourg", Region = @"East", PostalCode = 67000, Country = @"France", Phone = @"88.60.15.31", Fax = @"88.60.15.32" });
this.Add(new CustomersDataItem() { ID = @"BOLID", Company = @"Bólido Comidas preparadas", ContactName = @"Martín Sommer", ContactTitle = @"Owner", Address = @"C/ Araquil, 67", City = @"Madrid", Region = @"East", PostalCode = 28023, Country = @"Spain", Phone = @"(91) 555 22 82", Fax = @"(91) 555 91 99" });
this.Add(new CustomersDataItem() { ID = @"BONAP", Company = @"Bon app'", ContactName = @"Laurence Lebihan", ContactTitle = @"Owner", Address = @"12, rue des Bouchers", City = @"Marseille", Region = @"West", PostalCode = 13008, Country = @"France", Phone = @"91.24.45.40", Fax = @"91.24.45.41" });
this.Add(new CustomersDataItem() { ID = @"BOTTM", Company = @"Bottom-Dollar Markets", ContactName = @"Elizabeth Lincoln", ContactTitle = @"Accounting Manager", Address = @"23 Tsawassen Blvd.", City = @"Tsawassen", Region = @"BC", PostalCode = 28000, Country = @"Canada", Phone = @"(604) 555-4729", Fax = @"(604) 555-3745" });
this.Add(new CustomersDataItem() { ID = @"BSBEV", Company = @"B's Beverages", ContactName = @"Victoria Ashworth", ContactTitle = @"Sales Representative", Address = @"Fauntleroy Circus", City = @"London", Region = @"South", PostalCode = 10000, Country = @"UK", Phone = @"(171) 555-1212", Fax = @"(5) 555-3745" });
this.Add(new CustomersDataItem() { ID = @"CACTU", Company = @"Cactus Comidas para llevar", ContactName = @"Patricio Simpson", ContactTitle = @"Sales Agent", Address = @"Cerrito 333", City = @"Buenos Aires", Region = @"East", PostalCode = 1010, Country = @"Argentina", Phone = @"(1) 135-5555", Fax = @"(1) 135-4892" });
this.Add(new CustomersDataItem() { ID = @"CENTC", Company = @"Centro comercial Moctezuma", ContactName = @"Francisco Chang", ContactTitle = @"Marketing Manager", Address = @"Sierras de Granada 9993", City = @"México D.F.", Region = @"South", PostalCode = 5022, Country = @"Mexico", Phone = @"(5) 555-3392", Fax = @"(5) 555-7293" });
this.Add(new CustomersDataItem() { ID = @"CHOPS", Company = @"Chop-suey Chinese", ContactName = @"Yang Wang", ContactTitle = @"Owner", Address = @"Hauptstr. 29", City = @"Bern", Region = @"East", PostalCode = 3012, Country = @"Switzerland", Phone = @"0452-076545", Fax = @"(5) 555-3745" });
this.Add(new CustomersDataItem() { ID = @"COMMI", Company = @"Comércio Mineiro", ContactName = @"Pedro Afonso", ContactTitle = @"Sales Associate", Address = @"Av. dos Lusíadas, 23", City = @"Sao Paulo", Region = @"SP", PostalCode = 34000, Country = @"Brazil", Phone = @"(11) 555-7647", Fax = @"(5) 555-3745" });
this.Add(new CustomersDataItem() { ID = @"CONSH", Company = @"Consolidated Holdings", ContactName = @"Elizabeth Brown", ContactTitle = @"Sales Representative", Address = @"Berkeley Gardens 12 Brewery", City = @"London", Region = @"South", PostalCode = 27000, Country = @"UK", Phone = @"(171) 555-2282", Fax = @"(171) 555-9199" });
this.Add(new CustomersDataItem() { ID = @"DRACD", Company = @"Drachenblut Delikatessen", ContactName = @"Sven Ottlieb", ContactTitle = @"Order Administrator", Address = @"Walserweg 21", City = @"Aachen", Region = @"South", PostalCode = 52066, Country = @"Germany", Phone = @"0241-039123", Fax = @"0241-059428" });
this.Add(new CustomersDataItem() { ID = @"DUMON", Company = @"Du monde entier", ContactName = @"Janine Labrune", ContactTitle = @"Owner", Address = @"67, rue des Cinquante Otages", City = @"Nantes", Region = @"East", PostalCode = 44000, Country = @"France", Phone = @"40.67.88.88", Fax = @"40.67.89.89" });
this.Add(new CustomersDataItem() { ID = @"EASTC", Company = @"Eastern Connection", ContactName = @"Ann Devon", ContactTitle = @"Sales Agent", Address = @"35 King George", City = @"London", Region = @"East", PostalCode = 41000, Country = @"UK", Phone = @"(171) 555-0297", Fax = @"(171) 555-3373" });
this.Add(new CustomersDataItem() { ID = @"ERNSH", Company = @"Ernst Handel", ContactName = @"Roland Mendel", ContactTitle = @"Sales Manager", Address = @"Kirchgasse 6", City = @"Graz", Region = @"South", PostalCode = 8010, Country = @"Austria", Phone = @"7675-3425", Fax = @"7675-3426" });
this.Add(new CustomersDataItem() { ID = @"FAMIA", Company = @"Familia Arquibaldo", ContactName = @"Aria Cruz", ContactTitle = @"Marketing Assistant", Address = @"Rua Orós, 92", City = @"Sao Paulo", Region = @"SP", PostalCode = 27000, Country = @"Brazil", Phone = @"(11) 555-9857", Fax = @"(5) 555-3745" });
this.Add(new CustomersDataItem() { ID = @"FISSA", Company = @"FISSA Fabrica Inter. Salchichas S.A.", ContactName = @"Diego Roel", ContactTitle = @"Accounting Manager", Address = @"C/ Moralzarzal, 86", City = @"Madrid", Region = @"East", PostalCode = 28034, Country = @"Spain", Phone = @"(91) 555 94 44", Fax = @"(91) 555 55 93" });
this.Add(new CustomersDataItem() { ID = @"FOLIG", Company = @"Folies gourmandes", ContactName = @"Martine Rancé", ContactTitle = @"Assistant Sales Agent", Address = @"184, chaussée de Tournai", City = @"Lille", Region = @"South", PostalCode = 59000, Country = @"France", Phone = @"20.16.10.16", Fax = @"20.16.10.17" });
this.Add(new CustomersDataItem() { ID = @"FOLKO", Company = @"Folk och fä HB", ContactName = @"Maria Larsson", ContactTitle = @"Owner", Address = @"Åkergatan 24", City = @"Bräcke", Region = @"East", PostalCode = 36000, Country = @"Sweden", Phone = @"0695-34 67 21", Fax = @"0695 33-4455" });
this.Add(new CustomersDataItem() { ID = @"FRANK", Company = @"Frankenversand", ContactName = @"Peter Franken", ContactTitle = @"Marketing Manager", Address = @"Berliner Platz 43", City = @"München", Region = @"East", PostalCode = 80805, Country = @"Germany", Phone = @"089-0877310", Fax = @"089-0877451" });
this.Add(new CustomersDataItem() { ID = @"FRANR", Company = @"France restauration", ContactName = @"Carine Schmitt", ContactTitle = @"Marketing Manager", Address = @"54, rue Royale", City = @"Nantes", Region = @"South", PostalCode = 44000, Country = @"France", Phone = @"40.32.21.21", Fax = @"40.32.21.20" });
this.Add(new CustomersDataItem() { ID = @"FRANS", Company = @"Franchi S.p.A.", ContactName = @"Paolo Accorti", ContactTitle = @"Sales Representative", Address = @"Via Monte Bianco 34", City = @"Torino", Region = @"East", PostalCode = 10100, Country = @"Italy", Phone = @"011-4988260", Fax = @"011-4988261" });
}
}cs
@using IgniteUI.Blazor.Controls<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#grid {
--cell-selected-text-color: #FFFFFF;
--cell-active-border-color: #f2c43c;
--cell-selected-background: #0062a3;
}
</style><divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbGridName="grid"
@ref="grid"Id="grid"Data="CustomersData"ColumnSelection="GridSelectionMode.Single"><IgbColumnField="ID"></IgbColumn><IgbColumnField="Company"Header="Company"></IgbColumn><IgbColumnField="Address"Header="Address"></IgbColumn><IgbColumnField="PostalCode"Header="Postal Code"></IgbColumn></IgbGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
}
private IgbGrid grid;
private CustomersData _customersData = null;
public CustomersData CustomersData
{
get
{
if (_customersData == null)
{
_customersData = new CustomersData();
}
return _customersData;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#grid {
--cell-selected-text-color: #FFFFFF;
--cell-active-border-color: #f2c43c;
--cell-selected-background: #0062a3;
}
css