Angular 6 - шаблон ячейки Kendo UI Grid - PullRequest
Новая
       11

Angular 6 - шаблон ячейки Kendo UI Grid

0 голосов
/ 27 сентября 2018

Я пытаюсь поместить элемент <canvas> в kendoGridCellTemplate в Angular 6. Однако я получаю сообщение об ошибке: "Cannot read property 'nativeElement' of undefined".

Если я проверю его, поместив <canvas> над сеткой, я вижу, что он работает.Однако внутри <ng-template> это не так.

Наверное, главный вопрос: это можно сделать?Если так, что я делаю не так. 

export class CustomerListComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit{

  ...
	@ViewChild("customerInitials") customerInitials;
   ...

   constructor() {  }
   
   ...
   
   drawInitials () {
	let colours = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];

	let name = "Bob Mazzo";
    let nameSplit = name.split(" ");
    let initials = nameSplit[0].charAt(0).toUpperCase() + nameSplit[1].charAt(0).toUpperCase(); 

    let charIndex = initials.charCodeAt(0) - 65;
    let colourIndex = charIndex % 19;

    // GET CANVAS HERE !
  	this.canvas = this.customerInitials.nativeElement;
	  this.context = this.canvas.getContext("2d");

        
    let canvasWidth = this.canvas.width;
    let canvasHeight = this.canvas.height;
    let canvasCssWidth = canvasWidth;
    let canvasCssHeight = canvasHeight;

    if (window.devicePixelRatio) {    
    this.canvas.width = canvasWidth * window.devicePixelRatio;
    this.canvas.height = canvasHeight * window.devicePixelRatio;
    this.canvas.style.width =  canvasCssWidth;
    this.canvas.style.height = canvasCssHeight;
    this.context.scale(window.devicePixelRatio, window.devicePixelRatio);
    }

    this.context.fillStyle = colours[colourIndex];
    this.context.fillRect (0, 0, this.canvas.width, this.canvas.height);
    this.context.font = "16px Arial";
    this.context.textAlign = "center";
    this.context.fillStyle = "#FFF";
    this.context.fillText(initials, canvasCssWidth / 2, canvasCssHeight / 1.5);
  }

}
<kendo-grid-column>
	<ng-template kendoHeaderTemplate let-column></ng-template>
	<ng-template kendoGridCellTemplate let-dataItem>		
		{{ drawInitials() }}
		<canvas #customerInitials id="user-icon" width="35" height="35" ></canvas>
	</ng-template>				
</kendo-grid-column>

1 Ответ

0 голосов
/ 27 сентября 2018

Мое решение отказывается от элемента canvas и использует вместо него класс circle и span: 

getCustomerInitials(dataItem) {
	let first = dataItem.FirstName !== undefined ? dataItem.FirstName[0].toUpperCase() : '';
	let last = dataItem.LastName !== undefined ? dataItem.LastName[0].toUpperCase() : '';
	return first + last;
    
  }
<kendo-grid-column>
	<ng-template kendoHeaderTemplate let-column></ng-template>
	
	<ng-template kendoGridCellTemplate let-dataItem>
		<a>
			<i class="circle" style="background: antiquewhite; display: inline-flex; height: 30px; width: 30px;
									 border-radius: 50%; border: white; border-style: solid; border-width: 1px;">						
				<span style="margin: 6px 0 0 5px; color: #000;font: 14px Arial;">
					{{ getCustomerInitials(dataItem) }}
				</span>
			</i>						
		</a>
	</ng-template>
</kendo-grid-column>
...