Hello,I am experiencing the same issue described in these topics:
https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/108260/iggrid-row-selector
https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/97078/iggrid-iggridselectionrowselectionchanged-only-fires-once
The grid allows me to make the first selection just fine. However, after the first selection, clicking on any other rows fails to change the selection.
When I change to cell selection, this issue does not occur. My features are:
{ name: "Resizing", allowDoubleClickToResize: true, columnResized: function (evt, args) { // TODO Save column widths. } }, { name: "ColumnMoving", columnMoved: function (evt, args) { var columns = $("#" + gridManager.gridKey).igGrid("option", "columns"); gridManager.saveColumns(gridManager.layouts.selectedLayout, columns); } }, { name: "Paging", type: "local", //pageIndexUrlKey: "pageNumber", //recordCountKey: "Data.TotalNumberOfRecords", //pageSizeUrlKey: "ItemsPerPage", pageSizeDropDownLocation: "inpager", pageSizeList: [25, 50, 100, 150, 200], pageSize: gridManager.getPageSize(), pageSizeChanged: function (evt, ui) { gridManager.savePageSize(gridManager.layouts.selectedLayout, ui.pageSize); }, pagerRendered: function (evt, ui) { gridManager.defaultTableStyle(evt, ui); } }, { name: "Sorting", type: "local", // sortUrlKey: "orderBy", // sortUrlkeyAscValue: "asc", // sortUrlkeyDescValue: "desc", columnSorted: function (evt, ui) { var columnSettings = $("#" + gridManager.gridKey).igGridSorting('option', 'columnSettings'); gridManager.saveSorting(gridManager.layouts.selectedLayout, columnSettings); }, columnSettings: gridManager.getSorting() }, { name: "Filtering", allowFiltering: true, caseSensitive: false, mode: settingsService.getFilterMode(), columnSettings: [ //{ columnKey: "ServiceAlertDate", allowFiltering: false }, ], dataFiltered: function (evt, ui) { gridManager.saveFilters(gridManager.layouts.selectedLayout, ui.expressions); } }, { name: "Selection", mode: "row", multipleSelection: false, cellSelectionChanging: function (evt, ui) { console.log("test"); }, cellSelectionChanged: function (evt, ui) { } }, { name: "ColumnFixing", columnFixing: function (evt, args) { for (i = 0; i < $("#" + gridManager.gridKey).igGrid('rows').length; i++) { var row = $("#" + this.id).igGrid("rowAt", i); // even rows if (i % 2 === 0) { $(row).css("background-color", "#FFFFFF"); } // odd rows else { $(row).css("background-color", "#F5F5F5"); } } } }
Possibly a related issue, if I click off of the grid anywhere (ex, the scrollbar), the selected row deselects.
I am using Infragistics 17.1. Is there a solution to this issue?
Hello James,
Thank you for posting in our community.
After adding the settings you have send I was unable to reproduce the described behavior.
I have tested the sample on Chrome and IE and used 17.1 version.
I am attaching my sample for your reference. Could you please test it on your side and tell me whether or not it works as expected could help me identify the root cause for this matter.
If this is not an accurate demonstration of what you are trying to achieve please feel free to modify my sample and send it back to me for further investigation.
Also if you are using the cellSelectionChanging or cellSelectionChanged event in the Selection feature the mode should be “cell”, because otherwise it won’t fire. If the desired mode is "row" consider using rowSelectionChanging or rowSelectionChanged.
Looking forward to hearing from you.
Best Regards,
Martin Kamenov
Associate Software Developer
Infragistics, Inc.
4064.gridselection.zip
Hi Martin, thanks for your reply and helpful comments.
Using the 'cellClick' event, I have been able to fix my row selection issue.
The remaining issue I am struggling with is the selected row deselects when I click anywhere on the iggrid control, including the scroll bars. I noticed this issue is present in the sample that you provided.
I would like to allow the user to highlight a row by selecting a row, then use the scroll bar to scroll horizontally. If the row is still selected, the user will be able to easily see which row they were looking at before scrolling.
I have code on my grid that highlights the row they've selected by using the .css() method to change the background colour of the row, but I would prefer to simply keep the row selected.Do you have any suggestions for this issue?The rowSelectionChanging or rowSelectionChanged events do not fire when a row is deselected for me.
If I understand correctly, the behavior that you are experiencing is as follows:
When a row is selected and afterwards you click within the igGrid or on the scrollbar the row becomes deselected without any events being fired?
If this is the case, I couldn’t reproduce this behavior on my side. Here is a link with gif showing what steps I am following so feel free to correct me if I have misinterpreted what you meant. If you are following the same scenario and still replicate the behavior on your side, I may need some additional information.
It would be highly appreciated if you could answer the following questions:
1) What browser, browser version and version of Ignite UI you are using?
2) Did you change anything from the sample I have sent you the first time?
3) Which design theme you are using for styling the grid (the default Infragistics theme, iOS theme, any of the Bootstrap themes etc.)?
Additionally, I have a few questions related to the css class that you mentioned for highlighting the selected row.
1) Can you please provide me the code used for the custom styling?
2) What elements you are applying the custom styling to?
3) Can you please test removing all the custom styling and let me know how the grid behaves?