剑道角度UI：剑道网格单元选择/突出显示

Question

I want to select/highlight kendo grid's cell on selection.When I right click on cell a context menu gets display which is individual for each cell. Please find my work progress here https://stackblitz.com/edit/angular-uwuhzs?file=app%2Fapp.component.ts

Also, find component's code that I inspired from kendo and tried in my way. I only managed to get the expected output for particular column,here it is working for ID column based on ProductID (check line no. 80 in app.component.ts). I want it to work for all cells regardless of column/row .

Please help me in getting desired result and thanks in advance.

app.component.ts

import { Component, ViewEncapsulation, Renderer2 } from '@angular/core';
import { RowClassArgs } from '@progress/kendo-angular-grid';


const products = [{
    'ProductID': 1,
    'ProductName': 'Chai',
    'UnitPrice': 18.0000,
    'Discontinued': true,
    'code': 'C1'
  }, {
    'ProductID': 2,
    'ProductName': 'Chang',
    'UnitPrice': 19.0000,
    'Discontinued': false,
    'code': 'C2'
  }
];

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    template: `
        <kendo-grid [data]="gridData" [height]="410" #grid [rowClass]="rowCallback">
            <kendo-grid-column field="ProductID" title="ID" width="40" [class]="{'codeColumn': true}" (cellClick)="cellClickHandler($event)">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category" [class]="{'codeColumn': false}">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" width="80" [class]="{'codeColumn': false}">
            </kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80" [class]="{'codeColumn': false}">
            </kendo-grid-column>
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120" [class]="{'codeColumn': false}">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
        <grid-context-menu [for]="grid" [menuItems]="['Move Up', 'Move Down']" (select)="onSelect($event)" (sendDataitem)=getItemVal($event)>
        </grid-context-menu>
    `,
    styles: [`
       .gold .codeColumn { background-color: #FFBA80; }
       .green .codeColumn { background-color: #B2F699; }
   `]
})
export class AppComponent {

    public gridData: any[] = products;
   public selActiveCell: any;
    public onSelect({ dataItem, item }): void {
      const index = this.gridData.indexOf(dataItem);
      if (item === 'Move Up') {
        if (index > 0) {
            this.swap(index - 1, index);
        }
      } else if (index < this.gridData.length - 1) {
        this.swap(index, index + 1);
      }
    }

public getItemVal(e)
{

this.selActiveCell = e.ProductID;
console.log(e);
}


    private swap(index1, index2): void {
        const temp = this.gridData[index1];
        this.gridData[index1] = this.gridData[index2];
        this.gridData[index2] = temp;
    }

    public rowCallback = (context: RowClassArgs) => {
     console.log(context);
    switch (context.dataItem.ProductID) {
      case this.selActiveCell:
        return {gold : true};
      default:
        return {};
     }
   }

     public cellClickHandler({ sender, rowIndex, columnIndex, dataItem }) {

        console.log("columnIndex" + columnIndex);

    }
}

grid-context-menu.component.ts

import { Component, ContentChild, EventEmitter, Input, Output, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { GridComponent } from '@progress/kendo-angular-grid';

@Component({
    selector: 'grid-context-menu',
    template: `
        <kendo-popup *ngIf="show" [offset]="offset">
            <ul class="menu">
              <li *ngFor="let item of menuItems" (click)="menuItemSelected(item)">
                <ng-template *ngIf="menuItemTemplate" [ngTemplateOutlet]="menuItemTemplate"
                    [ngTemplateOutletContext]="{ item: item, dataItem: dataItem }">
                </ng-template>
                <ng-container *ngIf="!menuItemTemplate">
                    {{ item }}
                </ng-container>
              </li>
            </ul>
        </kendo-popup>
    `,
    styles: [`
     .menu {
        list-style:none;
        margin: 0;
        padding: 0;
        cursor: pointer;
      }

      .menu li {
        border-bottom: 1px solid rgba(0,0,0,.08);
        padding: 8px 12px;
        transition: background .2s, color .2s;
      }

      .menu li:last-child {
        border-bottom: 0;
      }

      .menu li:hover {
        background: #e8e8e8;
      }

      .menu li:active {
        background: #ff6358;
        color: #fff;
      }

       .gold .codeColumn { background-color: #FFBA80; }
       .green .codeColumn { background-color: #B2F699; }

    `]
})
export class GridContextMenuComponent implements OnDestroy {

    @ContentChild(TemplateRef)
    public menuItemTemplate: TemplateRef<any>;

    @Input()
    public menuItems: any[] = [];

    @Output()
    public select: EventEmitter<any> = new EventEmitter<any>();

    @Input() public set for(grid: GridComponent) {
        this.unsubscribe();
        this.cellClickSubscription = grid.cellClick.subscribe(this.onCellClick);
    }

    @Output() public sendDataitem:EventEmitter<any> = new EventEmitter<any>();

    public show: boolean;
    public dataItem: any;
    public offset: any;

    private cellClickSubscription: Subscription;
    private documentClickSubscription: any;

    constructor(private renderer: Renderer2) {
        this.onCellClick = this.onCellClick.bind(this);
        this.documentClickSubscription = this.renderer.listen('document', 'click', (e) => {
            this.show = false;
            console.log( e);
        });
    }

    public ngOnDestroy(): void {
        this.unsubscribe();
        this.documentClickSubscription();
    }

    public menuItemSelected(item: any): void {
        this.select.emit({ item: item, dataItem: this.dataItem });
    }

    private onCellClick({ dataItem, type, originalEvent }): void {
      if (type === 'contextmenu') {
        originalEvent.preventDefault();
        this.dataItem = dataItem;
        this.show = true;
        this.offset = { left: originalEvent.pageX, top: originalEvent.pageY };
        console.log(originalEvent);
        this.sendDataitem.emit(this.dataItem);
      }
    }

    private unsubscribe(): void {
        if (this.cellClickSubscription) {
            this.cellClickSubscription.unsubscribe();
            this.cellClickSubscription = null;
        }
    }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { PopupModule } from '@progress/kendo-angular-popup';
import { GridContextMenuComponent } from './grid-context-menu.component';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, GridModule, PopupModule ],
  declarations: [ AppComponent, GridContextMenuComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

Answer 1

您可以使用类绑定将类仅设置为单击的列： https : //stackblitz.com/edit/angular-uwuhzs-vq4az9?file= app/ app.component.ts