我想在选择时选择/突出显示剑道网格的单元格。当我右键单击单元格时，会显示每个单元格单独的上下文菜单。请在此处查找我的工作进度 https://stackblitz.com/edit/angular-uwuhzs?file=app%2Fapp.component.ts
另外，找到我从剑道中启发并以我的方式尝试的组件代码。我只设法获得了特定列的预期输出，这里它适用于基于ProductID的ID列(检查 app.component.ts 中的第 80 行(。我希望它适用于所有单元格，无论列/行如何.
请帮助我获得理想的结果，并提前表示感谢。
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 { }
可以使用类绑定将类设置为仅单击的列： https://stackblitz.com/edit/angular-uwuhzs-vq4az9?file=app/app.component.ts