Hello Indra,

I have been looking into your question and this is the expected behavior of the igGrid. The grid selection feature could be a row selection or a cell selection, but it cannot be both at the same time. The grid implements only one of the two selections, and with the declaration that you used SelectionMode.Cell, it is then expected that only the cells of the grid, but not the rows, will be selected. Therefore, since the rows cannot be selected from and the methods for taking selected rows or the events that are fired will also not work because initially the cell selection mode is set.

What I could say is that it is recommended to use one of the two selection modes and implement your custom logic on the one you use. However, the given requirements could be achieved at the application level, but you will have to redefine all your functions that you have implemented that have worked on row selection until now.

What I propose as an approach is to initially call AddClientEvent to feature.RowSelectors(), as the event will be of type RowSelectorClicked and the given function rowSelectorClicked will be passed. When you click on the row selector in the given function, you will select all the cells of that row with the selectCell() method, passing the row index and the column indices to simulate row selection.

feature.RowSelectors().AddClientEvent(GridRowSelectorsClientEvents.RowSelectorClicked, "rowSelectorClicked");

function rowSelectorClicked(evt, ui) {
        for (let i = 0; i < 4; i++) {
            $("#Grid").igGridSelection("selectCell", ui.rowIndex, i);
        }
  }

Before the function itself, two variables will be defined that will hold the rowIDs (primary key of the grid) of the selected rows, one will be an array for multi selection and the other a string (primary key data type) for single selection. When the event is fired, it will be checked if a row is selected only by clicking on it, then the rowID of the row will be taken or if it is selected with ctrl + click, which means multi selection, then the rowIDs of all selected rows will be taken.

if (evt.ctrlKey) {
            if (rowKey){
                rowKeys.push(rowKey);
            }
            rowKeys.push(ui.rowKey);
            rowKey = '';
        } else {
            rowKey = ui.rowKey;
      }

Then for example when implementing the delete function on the grid with a given button when the delete button is pressed it will check if we have a multi selection by checking the size of the array, if so we foreach through the array clearing the row selection with clearSelection() method and then delete the each row with deleteRow() method. If we do not have a multi selection and we do not have the size of the array, we will check if we have a single selection, that is, if we have one rowId from the variable, if so, we clear the selection again and delete this row. If we have no selected row, we display a message.

if (rowKeys.length > 0) {
                     $.each(rowKeys, function (ix, el) {
                         $("#Grid").igGridSelection("clearSelection");
                         $("#Grid").igGridUpdating("deleteRow", el);
                     });
                 } else if (rowKey !== '') {
                     $("#Grid").igGridSelection("clearSelection");
                     $("#Grid").igGridUpdating("deleteRow", rowKey);
                 } else {
                     alert('No rows selected!');
                 }
                 rowKeys = [];
                 rowKey = '';
}

Thus, your custom logic needs to be rewritten if you continue with this approach.

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found attached here. Please test it on your side and let me know how it behaves.

8054.igGridSelection.zip

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics