Wijmo Cell with text and button in one column

Wijmo Cell with text and button in one column

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

• 

  it

  • Post Options:
  • Link
    Copy

  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.

  <wj-flex-grid-column
          [header]="'Name'"
          [binding]="'empName'"
          [isReadOnly]="true"
          [allowDragging]="false"
          [allowMerging]="true">
          <ng-template wjFlexGridCellTemplate [cellType]="'Cell' || 'CellEdit'" let-cell="cell" > 
              <button  class="gridcellbutton"  (click)="getanotherdialogue()" >...</button>
               {{cell.item.empName}} 
          </ng-template>
      </wj-flex-grid-column>
  

  Aim is to make these cell buttons non-transparent.

• 

  it

  • Post Options:
  • Link
    Copy

  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.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 15 August 2022, 9:35 pm EST

  Hi,
  
  We are sorry, we are unable to replicate the issue at our end. Please refer to the following demo sample for reference:
  
  https://jscodemine.grapecity.com/share/Uq3N3bDuPk6shrMALcjwPw/

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

  Regards,
  
  Manish Gupta

• 

  it

  • Post Options:
  • Link
    Copy

  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 ```
     
     wj-glyph-right

  2. Mark these all grid rows as Grid.selectedItems
  
  Thank you!

• 

  it

  • Post Options:
  • Link
    Copy

  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!

  

  820×137 5.2 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 24 August 2022, 9:52 pm EST

  Hi,

  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

  Regards