Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
Problem in igGrid selection (IgniteUI 2021)
posted

Good day!

We recently encountered a problem in igGrid. The problem occurs in selecting rows using Shift + ↓ (down key).

Kindly see below on how to replicate the problem. Take note that we are using Ignite UI 2021.

------

1. Select the first row

2. Press Shift + ↓ (down key) to select rows below

At first, all the rows that you selected will be selected properly.

But it you perform the same steps again, you will notice that the second row is unselected.

------

Please let me know if there is a workaround for this problem.

Looking forward to your support!

Thanks and regards!

  • 60
    Offline posted in reply to Infragistics Customer

    Hello,

    The issue has been successfully logged in our system. However, I am unable to provide a specific timeline or details on when it will be resolved. For the most current updates and progress on this matter, I recommend subscribing to the issue in our GitHub repository. This will ensure you receive notifications directly as any updates occur.

    Thank you for your understanding.

     

    Best regards,

    Arkan Ahmedov,

    Infragistics

  • 60
    Verified Answer
    Offline posted

    Hello,

    Thank you for outlining your concerns. After extensive testing and verification, I have identified that the behavior you reported in the igx-grid's selection mechanism appears to be a bug related to how rows are managed upon re-selection.

    To ensure this issue is addressed appropriately, I have logged it in our GitHub repository. You can view and track the progress of this issue via this link: GitHub Issue Link. I encourage you to subscribe to the issue updates; this will allow you to communicate directly with our development team and receive notifications as updates and potential fixes are posted.

    In the meantime, I have developed a temporary workaround that should mitigate the issue until a permanent fix is implemented.

    Below is the JavaScript snippet that you can integrate into your project:

     

     $(function () {
               $("#grid").igGrid({
                   columns: [  .... ],
                //WORKAROUND 
                   rendered: function (evt, ui) {
                        var grid = ui.owner;
    
                        grid.element.on('keydown', function (e) {
                            if (e.shiftKey && e.which === 40 && grid.activeRow().index===1) { // 40 is the keycode for the down arrow
                                e.preventDefault();
    
                                var activeRow = grid.activeRow(),
                                    activeRowObj = grid.rowAt(activeRow.index);
    
                                if (activeRowObj.ariaSelected === "false") {
                                        $("#grid").igGridSelection("selectRow", activeRow.index);
                                }
                            }
                        });
                    },
                   features: [{
                        name: "Selection",
                        mode: "row",
                        multipleSelection: true,
                        activation: true
                    }],
                   width: "500px",
                   dataSource: products
               });
           });

    The logic in the rendered function of the igGrid configuration involves setting up an event handler for keyboard inputs specifically to address the bug when using the Shift key combined with the down arrow key (). The function initializes when the grid is fully rendered. This is the optimal time to add custom event handlers because the grid and its elements are fully loaded and accessible. The code checks for the combination of shift and the down arrow and also if the current row is with index 1, meaning the second row given zero-based indexing. Inside the condition, if the current row (in this case, the second row due to the index check) is not already selected, the code programmatically selects that row: $("#grid").igGridSelection("selectRow", activeRow.index); This explicitly calls the selection method to select the row, ensuring it is included in the multi-row selection even if the bug attempts to deselect it.

    Here is a link to a sample project for you to review and test: Sample Project

    If you have any additional questions, please let me know.

    Best Regards,

    Arkan Ahmedov,

    Infragistics