Display FlexGrid cell contents on select

Display FlexGrid cell contents on select

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

• 

  mark.david

  • Post Options:
  • Link
    Copy

  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.

  sidebar-component.html

  <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>
          </button>
  
         <span class="m-1" *ngIf="showCellContent(currentGrid)" style="white-space: nowrap;">
             Some Text Here
         </span>       
  
      </ng-template>
  </wj-flex-grid-column>

  sidebar-component.ts

  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:

  sidebar-component.scss

  .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?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 2 November 2022, 11:14 pm EST

  Hello,

  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:

  https://stackblitz.com/edit/angular-sbpzhs?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  Regards