Question

在这个StackBlitz中，我有一个带有单元格模板的Kendo for Angular网格。背景颜色不能覆盖整个单元格，如何使其覆盖？请注意，如果我将span字体大小从9px增加到12px，则背景会被扩展，但即使是小字体也需要使用它。

@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);
   }
}

Answer 1

您可以仅在单元格本身上调用背景色：

  var editor = CKEDITOR.instances['editor1'];
 if (editor) { editor.destroy(true); }
    CKEDITOR.replace( 'editor1', {
    extraPlugins: 'dialogadvtab,uploadimage,image2',
    resize_enabled: 'false',
    removePlugins: 'elementspath',
    forcePasteAsPlainText : true,
    enterMode : CKEDITOR.ENTER_BR,
    shiftEnterMode: CKEDITOR.ENTER_P,
    dialog_noConfirmCancel : true,
    linkShowAdvancedTab : false,
    linkShowTargetTab : false,
    allowedContent:true,  
 });

Kendo for Angular网格未涵盖的模板背景

1 个答案: