Angular 5中Kendo Grid分组如何移除字段名称仅显示值？

Hey there! I’ve run into this exact scenario before with Kendo’s Angular Grid, so let me walk you through how to tweak the group header to only display the numeric value instead of the full "Unit Price: 10" label.

Step 1: Use a Custom Group Header Template #

The default group header automatically shows the field name plus the value, but we can override this behavior using the kendoGridGroupHeaderTemplate directive. This gives you full control over what gets rendered in the grouping header.

Step 2: Implement the Template in Your Grid #

Here’s a concrete example you can drop right into your component template:

<kendo-grid
  [data]="gridData"
  [group]="[{ field: 'unitPrice' }]"
>
  <!-- Your existing column definitions -->
  <kendo-grid-column field="unitPrice" title="Unit Price"></kendo-grid-column>
  <!-- Add other columns as needed -->

  <!-- Custom group header template -->
  <ng-template kendoGridGroupHeaderTemplate let-group>
    {{ group.value }}
  </ng-template>
</kendo-grid>

How It Works #

• The let-group context variable gives you access to the grouped data’s metadata. The group.value property specifically holds the numeric value you want to display (like 10 in your case).
• By only rendering group.value instead of the default combined label, you’ll get the clean numeric-only header you’re aiming for.

Quick Angular 5 Compatibility Note #

Double-check that your version of @progress/kendo-angular-grid is compatible with Angular 5 (verify this in your package.json). The template syntax above works perfectly with Angular 5’s template variable scoping.

内容的提问来源于stack exchange，提问作者rani boyini