Wijmo Cell with text and button in one column

Posted by: it on 11 August 2022, 6:53 pm EST

  • Posted 11 August 2022, 6:53 pm EST

    Hi there,

    we have A requirement in flex grid where we display data (text left aligned) and button in the same cell (right aligned) . Managed to do it easy but text is overlapping on the button element. How do I change this behaviour? Even making the button non-transparent works. But unsure how as the opacity property on class does not seem to work.

    Its worth noting that this cell can be merged (multiple rows) at timed and so we have custom height etc. set for this button and all too.

            <ng-template wjFlexGridCellTemplate [cellType]="'Cell' || 'CellEdit'" let-cell="cell" > 
                <button  class="gridcellbutton"  (click)="getanotherdialogue()" >...</button>

    Aim is to make these cell buttons non-transparent.

  • Posted 11 August 2022, 7:11 pm EST

    Sorry , a correction! Making transparent wont work , I understand as the rendering for text is after button so this is obvious.

    So want to know how to change behaviour of this cell text - not to overlap on button.

    Thank you in advance.

  • Posted 15 August 2022, 9:35 pm EST


    We are sorry, we are unable to replicate the issue at our end. Please refer to the following demo sample for reference:


    The issue seems with the class used for button. Please modify the sample depicting your issue for further investigation.


    Manish Gupta

  • Posted 16 August 2022, 6:51 pm EST

    Thank you Manish. Yes there was an issue with button class which is now sorted with me using z-index property.

    Have another query though.

    We are mimicking behaviour from a windows app where a user clicks on merged cell then all relevant rows are selected. Two outcomes we are after:

    1. Preferred visual is, show an icon on each of those row headers to indicate they are selected. Meaning when clicking on any cell, row header should show ```

    2. Mark these all grid rows as Grid.selectedItems
    Thank you!
  • Posted 22 August 2022, 10:46 am EST - Updated 3 October 2022, 10:40 pm EST

    Hi Manish,

    Any update on this?

    Want to achieve to highlight/select all associated rows when merged cell (across rows) is selected or focused)

    Column check on focus/selection is done. But where I am stuck is to add all rows that are associated with the merged cell when merged cell clicked. It currently only selects and adds row to grid.selectedItems thats on a position where on merged cell user clicks. Only if user clicks ctrl + click manually then all these gets added to grid.SelectedItems… We want all associated rows with merged cell to be grid.selectedItems when merged cell is focused/clicked/selected not having to manually select them all.

    Thank you!

  • Posted 24 August 2022, 9:52 pm EST


    To achieve the desired behavior you can do this by handling the ‘selectionChanged’ event of FlexGrid. You’ll need to check if any mergedCell is selected or not and based on that you can use the ‘getMergedRange’ method to get the range of merged rows, then select all the corresponding rows.

    For full implementation, you can refer to this sample: https://stackblitz.com/edit/angular-ybdsgs?file=src%2Fapp%2Fapp.component.ts


Need extra support?

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

Learn More

Forum Channels