Фон шаблона не покрыт кендо для угловой сетки - PullRequest
Новая
       11

Фон шаблона не покрыт кендо для угловой сетки

0 голосов
/ 02 декабря 2018

В этом StackBlitz У меня есть Кендо для угловой сетки с шаблонами ячеек.Цвет фона не покрывает всю ячейку, как сделать так, чтобы он покрывал?Обратите внимание, что если я увеличу размер шрифта span с 9 до 12 пикселей, фон будет расширен, но мне нужно, чтобы он работал даже с небольшими шрифтами. 

@Component({
   selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styles: [`
      .k-grid .no-padding {
        padding: 0;
      }
       .whole-cell {
         display: block;
         width: 100%;
         height: 100%;
         padding: 8px 12px; /* depends on theme */
       }
   `],
   template: `
       <kendo-grid [data]="gridData">
         <kendo-grid-column field="ProductName" title="Product Name">
         </kendo-grid-column>
         <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
         </kendo-grid-column>
         <kendo-grid-column field="code" title="Code" width="230" class="no-padding">
            <ng-template kendoGridCellTemplate let-dataItem>
              <span class="whole-cell" 
              style="font-size: 9px;"
              [style.backgroundColor]="colorCode(dataItem.code)">
                {{ dataItem.code }}
              </span>
            </ng-template>
         </kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
   public gridData: any[] = products;

   constructor(private sanitizer: DomSanitizer) {}

   public colorCode(code: string): SafeStyle {
     let result;

     switch (code) {
      case 'C1' :
        result = '#FFBA80';
        break;
      case 'C2' :
        result = '#B2F699';
        break;
      default:
        result = 'transparent';
        break;
     }

     return this.sanitizer.bypassSecurityTrustStyle(result);
   }
}

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете просто вызвать цвет фона на самой ячейке: 

@Component({
   selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styles: [`
      .k-grid .no-padding {
        padding: 0;
      }
      .whole-cell {
        display: block;
        width: 100%;
        height: 100%;
        padding: 8px 12px; /* depends on theme */
      }
  `],
   template: `
       <kendo-grid [data]="gridData">
         <kendo-grid-column field="ProductName" title="Product Name">
         </kendo-grid-column>
         <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
         </kendo-grid-column>
         <kendo-grid-column  let-dataItem field="code" title="Code" width="230" class="no-padding" [style.backgroundColor]="colorCode(dataItem.code)">
             <ng-template kendoGridCellTemplate>
              <span class="whole-cell" 
              style="font-size: 9px;">
                {{ dataItem.code }}
              </span>
            </ng-template>
         </kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
   ...
}
...