Use multiple selection modes in Wijmo flex grid

Posted by: dmunjal on 18 November 2021, 5:28 pm EST

    • Post Options:
    • Link

    Posted 18 November 2021, 5:28 pm EST

    Hi Team,

    Is there any way we can use multiple selection mode types in a single wj-flex-grid?

    I want to achieve the following things :

    1. If rowHeader is selected - selectionMode should be “MultiRange”
    2. If any other cell is selected - selectionMode should be “ListBox”

    In the previous versions of wijmo, we were able to handle different selection mode using our custom event handler where we used the flex’s hitTest() metho to identify the celltype clicked and assign the selectionMode accordingly.

    However, we recently upgraded the Wijmo to the latest version and this seems to be giving us a problem.

    Problem : On clicking the rowHeader for the first time, the row gets selected and then immediately gets de-selected as well (although the row highlight is still there). However, on subsequent clicks it behaves normally. (To test this - we are using flex.selectedRows.length).

    Note: In debug mode, if we add debug point inside (selectionChanged) event, it works fine but as soon as we exit the debug mode, it again behaves in the previous manner.

    Workaround : When we commented out the existingCode where we were assigning multiple selectionModes, the row selection is working fine.

    Attaching the snippet for your reference :

    We added the below event listener inside (initialise) method.

    public initGrid(flex: WjFlexGrid) {
            flex.select(-1, -1);
            flex.addEventListener(flex.hostElement, 'click', (e) => {
                let ht = flex.hitTest(e.pageX, e.pageY);
                if(ht.cellType == CellType.RowHeader) {  
                    setTimeout(() =>{
                    console.log("Selection Mode ListBox - RowHeader");
                        flex.selectionMode = SelectionMode.ListBox;
                        flex.refresh();
                    }, 0); 
                } else {
                    setTimeout(() =>{  
                    console.log("Selection Mode CellRange - Else");
    
                       flex.selectionMode = SelectionMode.CellRange;
                       flex.refresh();
                    }, 0); 
                }
            }, true);
        }
    

    SelectionChanged method - We want to enable and disable a button based on the row selected.

    public selectionChanged(flex: WjFlexGrid, e){
            this.selectedRows = flex.selectedItems;
            if(this.selectedRows.length>=1 && flex.columns.length === e.range.columnSpan && e.col>-1){
                console.log("Enable!");
                this.rowsSelected = flex.selectedRows.length;
            }else{
                console.log("Disable!");
            }
        }
    

    Here, on the first click, the code somehow reaches the 'Disabled" part after clicking in the row header on the first time but for the subsequent clicks, it works fine.

    So it behaves like this on the first click - button gets enabled for a very short time and then again gets disabled.

    But in debug mode, this behaviour isn’t seen.

  • Posted 22 November 2021, 1:51 pm EST

    Hello,

    We are investigating the issue, will provide you an update at the earliest. Thank you for your patience.

    Regards

  • Posted 23 November 2021, 12:44 am EST

    Hello,

    On investigation, we found that the behaviour can be seen from build 2020V1 and it is by design. As when the selectionMode property gets changed the selectionChanged event gets fired.

    Could you please provide some information on the use case you want to achieve, so that we can provide you with a solution better suitable for your requirement?

    Looking forward to hearing from you.

    Regards

  • Posted 23 November 2021, 12:57 am EST

    Hello,

    Thanks for the prompt reply. So we want to switch between multiple selection modes based on the type of cell which a user has clicked. For eg. -

    1. If rowHeader is selected - selectionMode should be “MultiRange”
    2. If any other cell is selected - selectionMode should be “ListBox”

    Before we were handling this in the initialise event by using the combination of addEventListener and hitTest methods.

    Will be waiting for your swift reply.

    Regards,

    Dipanshu

  • Posted 23 November 2021, 1:23 am EST

    Hello,

    We understand the requirements here, as you want to achieve the 2 points mentioned in your response above. However, we didn’t understand the use-case scenario of the requirement. If possible please provide the use-case of the requirements, in order for us to help you better.

    Regards

  • Posted 23 November 2021, 2:39 am EST

    Hello,

    So let’s consider we want to have two selection modes - “Listbox” and “Cell Range”

    Now, in our flex grids, we have certain buttons that we enable/disable based on row selections. So, if a user clicks on the row headers (multiple non-contiguous rows can be selected) we have to enable/disable a button. And in the other cases, user can select the cell ranges to copy the range content. Hope this clarifies.

    Best,

    Dipanshu

  • Posted 23 November 2021, 7:53 am EST

    Hello,

    As per our understanding, your use-case is to enable/disable certain buttons on change of selectionMode if so then you may directly apply the disabled property with the condition using templates. And toggle between the unable/disable when the selectionMode gets changed. Please refer to the code snippet and sample link below demonstrating the same:

    
      <button [disabled]="grid.selectionMode == 2 ? true : false" class="button">
        button
      </button>
    
    

    Sample link: https://stackblitz.com/edit/angular-cpbebj?file=src%2Fapp%2Fapp.component.html

    Let us know if that’s works for you.

    Regards

  • Posted 24 November 2021, 3:52 am EST - Updated 3 October 2022, 12:07 pm EST

    Hi,

    Thanks for the sample link. Although button enable/disable is working fine but still something fishy is going on in the background. In the following sample link, I added the selectionChanged event to display the no. of rows selected. If you’ll observe carefully, when you click on the rowHeader after clicking on any other cell, the number of rows selected changes to 1 and then immediately it again changes to 0. If you click on the row header again, it will work normally and you’ll see 1.

    Project Link - https://stackblitz.com/edit/angular-zuyojn?file=src%2Fapp%2Fapp.component.html

    So basically, on single click we are not seeing the expected behaviour. Attaching some snapshots for your reference.

    Single click -

    Double click -

  • Posted 24 November 2021, 4:08 am EST

    Just to add on the previous behaviour - We were not facing this issue in the earlier version ‘v5.20173.409’

    Also, we have this enable/disable logic based on the number of rows selected. So if the user clicks the row header for the first time, button won’t behave properly ---- this was working fine with the version mentioned above. But after the update, we are facing this issue.

    I hope this clarifies the problem for you in a better manner.

    Best,

    Dipanshu

  • Posted 26 November 2021, 7:51 am EST

    Hello,

    It seems like a bug when the selectionMode property gets updated, the range values get changed to the original values which causes the issue in your use case. We have escalated the issue to the Dev team for further investigation with an internal tracking ID WJM-21640. We will provide you with an update as soon as we get any response on this.

    Sorry for the inconvenience.

    Regards

  • Posted 8 February 2022, 5:26 am EST

    Hello,

    Sorry for the delay, the issue has been fixed in the latest release build 5.20213.834. You can verify the behavior from the sample link given below:

    [https://stackblitz.com/edit/angular-p1xidt?file=src%2Fapp%2Fapp.component.html

    Thank you for your patience.

    Regards

    Sonu Kumar Pandey

  • Posted 8 February 2022, 6:14 am EST

    Hello,

    Thanks for the reply. However, it seems that the demo link which has been provided doesn’t exist. Can you please try to look into it and provide the updated demo link? It will help us to validate it before we proceed to consume the latest build. Thanks.

    Best,

    Dipanshu

  • Posted 9 February 2022, 1:58 am EST

    Hello,

    Sorry for the mistake, here is the correct sample link: https://stackblitz.com/edit/angular-p1xidt?file=src%2Fapp%2Fapp.component.html

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels