Wijmo 5 FlexGrid "wj-state-selected" ommited when "showMarque: true"

Posted by: jon.reeves on 5 February 2018, 9:58 pm EST

  • Posted 5 February 2018, 9:58 pm EST

    I’m currently using

    selectionMode: CellRange
    and I noticed that when you turn on ```

    showMarquee: true

    
    All the other cells in a selection receive the "wj-state-multi-selected" class, apart from the [b]active[/b] one too.
    
    Even on single click or keyboard navigation, the active cell never gets given the "wj-state-selected" class. I presume this is a bug because, if you use ```
    showMarquee: false
    ``` the class is added.
    
    Right now I can work around this with the following handler, but wanted to know if its indeed a bug or if there is some other setting I'm overlooking:
    
    

    grid.updatedView.addHandler(function(grid, args){

    // Get Positions

    var source = { row: grid.selection.row2, column: grid.selection.col2 }

    var destination = { row: grid.selection.row, column: grid.selection.col }

    // Get First & Last Cell Element

    var first = grid.cells.getCellElement(source.row || 0, source.column || 0);

    var last = grid.cells.getCellElement(destination.row || 0, destination.column || 0);

    // Attach Classes

    if (last !== null) last.classList.add(“wj-state-selected”, “wj-state-multi-selected”);

    })

  • Posted 6 February 2018, 12:22 am EST

    Interestingly the class appears to get removed again when you hit the esc key while editing a cell. Again only when ```

    showMarquee: true

    
    I've added the same handler to the cellEditEnded event too to workaround the problem:
    

    var fixActiveCell = function(grid, args){

    // Get Positions

    var source = { row: grid.selection.row2, column: grid.selection.col2 }

    var destination = { row: grid.selection.row, column: grid.selection.col }

    // Get First & Last Cell Element

    var first = grid.cells.getCellElement(source.row || 0, source.column || 0);

    var last = grid.cells.getCellElement(destination.row || 0, destination.column || 0);

    // Attach Classes

    if (last !== null) last.classList.add(“wj-state-selected”, “wj-state-multi-selected”);

    }

    grid.updatedView.addHandler(fixActiveCell);

    grid.cellEditEnded.addHandler(fixActiveCell);

  • Posted 6 February 2018, 2:30 pm EST

    Hi Jon,

    The behavior you are observing is by design. On setting showMarquee to true, FlexGrid shows selection same as Excel and active selected cell do not have any selected class.

    If you would like to apply wj-state-selected class to the active cell, you need to set showMarquee to false.

    ~Manish

  • Posted 11 February 2018, 11:21 pm EST

    Hi Manish,

    thanks for the clarification. It seems like an odd behavior, because at least for Theme/Styling purposes, knowing the Active Cell is very useful. Especially because toggling Marquee On and Off would result and styling of the Active Cell to change which is unexpected.

    I understand that you want to revert that cell’s background style back to White, but removing a class doesn’t seem the best way to do it. For example… if you choose to set the background-color of the cells in a particular column to say yellow, The Active Cell takes on the yellow background (like Excel does), but now allows no way to control the styling beyond that.

    I guess I will continue to work around using the route I described earlier.

    Thanks

  • Posted 20 February 2018, 4:15 pm EST

    Hi Jon,

    Yes, you have a point. Hence, we have forwarded this to the concerned team for further investigation with tracking id 310078.

    We will let you know as we get any update on this.

    Also, for Inormation, the showMarquee used to make background visible not white. If any cell has any styled background, the background color will be visible to for active cell.

    ~Manish

  • Posted 23 February 2018, 12:16 am EST

    I like the idea of adding a wj-state-active class to the cursor cell. Will try to get this into the next build.

    In the meantime, perhaps using the :focus pseudo-attribute would suffice:

        http://jsfiddle.net/Wijmo5/zph4o0od/
    

    This will get the effect you want as long as the grid contains the focus.

Need extra support?

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

Learn More

Forum Channels