Display button through ng-template only when grid cell is focused

Posted by: it on 22 August 2022, 3:19 pm EST

  • Posted 22 August 2022, 3:19 pm EST - Updated 3 October 2022, 10:40 pm EST

    Hi there,

    We use wijmo grid for our rostering functionality. Where employee column can be merged across multiple rows depending on number of rosters in the grid.In this column we have Employee name as well as button available next to it which has a different child component loading on its click event. But this button should only be available for current focused cell. Not for all cells in this column. Is there a cell focus event I can set ? I have tried through grid formatItem property but behaves commonly for all cells in this columns. Higher level code I have provided below.

    
    <wj-flex-grid
        #grid
        [itemsSource]="_gridData"
        [alternatingRowStep]="0"
        [selectionMode]="'ListBox'"
        [allowMerging]="'Cells'"
        [allowDragging]="'Columns'"
        (formatItem)="styleCell($event)"
        (selectionChanged)="onSelectionChanged($event)"
        (initialized)="initGrid(grid)">
    <wj-flex-grid-column
            *ngIf="userOptions.employeeName"
            [header]="'Name'"
            [binding]="'employeeName'"
            [isReadOnly]="true"
            [allowDragging]="false"
            [allowMerging]="true"
            [minWidth]=200
            width="*">
            <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" style="padding-right: 0px" [autoSizeRows]="false" > 
                <button *ngIf="showConvertButton" class="convert" (click)="commands.convertCommand.executeCommand()" >...</button>
                {{cell.item.employeeName}}
            </ng-template>
        </wj-flex-grid-column>
    </wj-flex-grid>
    

    on .ts file

    
    styleCell(event: wjcGrid.FormatItemEventArgs): void {
    if (panel.cellType === wjcGrid.CellType.Cell && colBinding == 'employeeName') {
        const cell = grid.cells.getCellElement(event.row, event.col);
        cell.addEventListener('focus', () => {
         //based on condition
    	 this.showConvertButton = true; 
        });
        cell.addEventListener('focusout', () => {
          this.showConvertButton = false; 
        });
      }
    }
    
    

    And the behaviour you can see in this image below.

    Also we are looking for a solution to be able to select all rows where merged cell is clicked/focused and have asked in a separate topic * “https://www.grapecity.com/forums/c1-studio/wijmo-cell-with-text-and-b#hi-manish-any-update-on-th

    but waiting on reply for that too.

    Thank you in advance.

    We need to select all rows when

  • Posted 24 August 2022, 9:55 pm EST

    Hi,

    You can implement this by displaying the button if the row is currently selected by checking the ‘isSelected’ property of the row.

    You can refer to this sample for full implementation: https://stackblitz.com/edit/angular-vhk4my?file=src%2Fapp%2Fapp.component.ts

    As for the selection of rows in mergedRange we have provided the response on a different forum thread. You can also refer to that from this forum thread link:https://www.grapecity.com/forums/c1-studio/wijmo-cell-with-text-and-b

    Regards

  • Posted 25 August 2022, 11:30 pm EST

    Thank you Sonu.

Need extra support?

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

Learn More

Forum Channels