Menu
I am using ui-grid v3.1.1 and have enabled rowSelection. I notice that when I enable row selection, I can no longer select (click-hold-drag) text from the rows.
I noticed the same behaviour in the example in their tutorials (second grid on the page).
It would be great to know if there is some work around by which I can still allow the user to select text, while the rowSelection is enabled.
Here is a plunkr link to the example from the tutorial.
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false
};
868
Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range.
Select a row by clicking on it. Selecting a row will remove previous selection unless you hold down ctrl while clicking. Selecting a row and then holding down shift while clicking a second row will select the range. Remember Row Selection works with all frameworks eg Angular and React as well as plain JavaScript.
One way is to add a cellRenderer function to the column for which the checkbox is need to be implemented. You can enable or disable the checkbox by returning true or false from the cellRenderer function.
There is no option in the library to make a single row disabled(both visually and keyboard event based), the only way we could make a single row disabled is by using a customCellRenderer for both header and subsequent cell checkboxes, this allows full control over the checkbox.
Angular Data Grid: Row Selection Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting a row and holding down Shift while clicking a second row will select the range.
With row selection in Ignite UI for Angular, there is row selector column that precedes all other columns within the row. When a user clicks on the row selector, the row will either become selected or deselected, enabling the user to select multiple rows of data. The sample below demonstrates the three types of Grid's row selection behavior.
You can select a row by clicking on a cell or pressing the space key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected rowSelectionChanging event is emitted. To enable multiple row selection in the igx-grid just set the rowSelection property to multiple.
So you can not select or deselect a row through interaction with the Grid UI, the only way to complete these actions is to use the provided API methods. Single row selection can now be easily set up, the only thing you need to do, is to set [rowSelection] = '"single"' property.
A previous SO answer by @Aman Mahajan offers a fix:
A ui-grid-disable-selection class is added to the grid when both enableRowSelection and enableFullRowSelectionare enabled (can check ui-grid v3.1.1 source in selection.js ~line 903). So you can override the CSS class by adding a specific class to your grid, for example ui-grid-selectable.
<div ui-grid="gridOptions" ui-grid-selection class="grid ui-grid-selectable"></div>
And in your CSS:
.ui-grid-selectable .ui-grid-disable-selection {
-webkit-touch-callout: default;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor:auto;
}
Here's the forked plunker with the added CSS class to override the default behavior.
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
