Display FlexGrid cell contents on select

Posted by: mark.david on 2 November 2022, 8:38 am EST

  • Posted 2 November 2022, 8:38 am EST

    Hi, currently I have a goal to display 2 kendo buttons and some text if and only if the current Wijmo FlexGrid cell is selected.

    There must be a way to directly use the doNotShowCellContent() function with the *ngIf directive to programmatically detect when the Wijmo grid cell is selected, then display the kendoButton and the inlineSVG span embedded in it. However I’m not finding any documentation on how to do this.


    <wj-flex-grid-column [isReadOnly]="true" [width]="'*'" [visible]="true" name="summary" [cssClass]="'customClass'">
        <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
            <button kendoButton *ngIf="showCellContent(currentGrid)" look="flat" class="d-inline-block">
                <span [inlineSVG]="'assets/icons/my_icon'" class="menu_icon trace-arrow-adjust"></span>
           <span class="m-1" *ngIf="showCellContent(currentGrid)" style="white-space: nowrap;">
               Some Text Here


    Here, I try to use the Angular grid selector service that partially achieves what I want. The problem is that the cell contents show for all Wijmo cells of the current grid rather than just the currently selected cell.

     public showCellContent(currentGrid): boolean {
        if (currentGrid.selectionMode != 0 && currentGrid.isInitialized === true) {
          const cell = currentGrid.selectedItems[0];
          return cell != null;

    Another approach I thought of is using SCSS visibility property to hide and show the contents. I’m already able to set the background color of an individual Wijmo cell in the SASS code:


    .wj-cells .wj-cell.wj-state-selected,
    .wj-cells .wj-cell.wj-state-multi-selected {
      background-color: $custom-row-background;
      color: $custom-row-color;

    But when applying the same logic to display the Kendo button, I’m getting the same problem of the contents showing for all cells.

    For reference, here’s a snippet of my SCSS attempt:

    //Hide cell contents by default
    wj-cells .wj-cell .k-button-icon .k-image,
    .wj-cells .wj-cell .k-button-icon .k-image {
      visibility: hidden;
    //Show cell contents on select
    .wj-cells .wj-cell.wj-state-selected .k-button-icon .k-image,
    .wj-cells .wj-cell.wj-state-multi-selected .k-button-icon .k-image {
      visibility: visible;

    Is there a more straightforward way to use SCSS or the *ngIf directive to achieve this?

  • Posted 2 November 2022, 11:14 pm EST


    We have responded on the support portal. Please refer to the link for the same: https://www.grapecity.com/my-account/my-support/case/CAS-35519-X9J0M8

    Here is a copy of the response:

    You can achieve the desired behavior by using *ngIf, please refer to the sample link below demonstrating how to show custom templates on currently selected rows:



Need extra support?

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

Learn More

Forum Channels