With Ignite UI for Angular Grid you can easily select data by using variety of events, rich API or with simple mouse interactions like single select.
Angular Grid Selection ExampleThe sample below demonstrates the three types of Grid'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.
Angular Grid Selection OptionsIgniteUI for Angular Grid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the Grid. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.
Property rowSelection enables you to specify the following options:
Row selectors, with a key combination like ctrl + click, or by pressing the space key once a cell is focusedAngular Cell SelectionGo to Row selection topic for more information.
Property cellSelection enables you to specify the following options:
Angular Column SelectionGo to Cell selection topic for more information.
The selectable property enables you to specify the following options for each column:
Go to Column selection topic for more information.
Using the contextMenu event you can add a custom context menu to facilitate your work with IgxGrid. With a right click on the grid's body, the event emits the cell on which it is triggered. The context menu will operate with the emitted cell.
If there is a multi-cell selection, we will put logic, which will check whether the selected cell is in the area of the multi-cell selection. If it is, we will also emit the values of the selected cells.
Basically the main function will look like this:
public rightClick(eventArgs: any) {
// Prevent the default behavior of the right click
eventArgs.event.preventDefault();
this.multiCellArgs = {};
// If we have multi-cell selection, check if selected cell is within the ranges
if (this.multiCellSelection) {
const node = eventArgs.cell.selectionNode;
const isCellWithinRange = this.grid1.getSelectedRanges().some(range => {
if (node.column >= range.columnStart &&
node.column <= range.columnEnd &&
node.row >= range.rowStart &&
node.row <= range.rowEnd) {
return true;
}
return false;
})
// If the cell is within a multi-cell selection range, bind all the selected cells data
if (isCellWithinRange) {
this.multiCellArgs = { data: this.multiCellSelection.data };
}
}
// Set the position of the context menu
this.contextmenuX = eventArgs.event.clientX;
this.contextmenuY = eventArgs.event.clientY;
this.clickedCell = eventArgs.cell;
// Enable the context menu
this.contextmenu = true;
}
The context menu will have the following functions:
//contextmenu.component.ts
public copySelectedCellData(event) {
const selectedData = { [this.cell.column.field]: this.cell.value };
this.copyData(JSON.stringify({ [this.cell.column.field]: this.cell.value }));
this.onCellValueCopy.emit({ data: selectedData });
}
public copyRowData(event) {
const selectedData = this.cell.row.data ;
this.copyData(JSON.stringify(this.cell.row.data));
this.onCellValueCopy.emit({ data: selectedData });
}
public copySelectedCells(event) {
const selectedData = this.selectedCells.data;
this.copyData(JSON.stringify(selectedData));
this.onCellValueCopy.emit({ data: selectedData });
}
The IgxGrid will fetch the copied data and will paste it in a container element.
The template we are going to use to combine the grid with the context menu:
<div class="wrapper">
<div class="grid__wrapper" (window:click)="disableContextMenu()">
<igx-grid #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
(contextMenu)="rightClick($event)" (rangeSelected)="getCells($event)"
(selected)="cellSelection($event)">
<!-- Columns area -->
</igx-grid>
<div *ngIf="contextmenu==true">
<contextmenu [x]="contextmenuX" [y]="contextmenuY" [cell]="clickedCell" [selectedCells]="multiCellArgs" (onCellValueCopy)="copy($event)">
</contextmenu>
</div>
</div>
<div class="selected-data-area">
<div>
<pre>{{copiedData}}</pre>
</div>
</div>
</div>
Select multiple cells and press the right mouse button. The context menu will appear and after selecting Copy cells data the selected data will appear in the right empty box. The result is:
Using the Grid with Selection enabled on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application. IE11 is no longer supported as of version 13.0.0.
import 'core-js/es7/array';
When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4