Как удалить префикс столбца группы из группировки dx-data-grid?

Question

Я использую dx-data-grid с Jquery и пытаюсь удалить префикс группировки с панели группировки, но кажется, что это невозможно. Как вы можете видеть на картинке - префикс - это имя столбца, теперь я могу удалить его, установив в заголовке пустую строку, но затем я все еще остаюсь со знаком двоеточия, очевидно, я просто хочу отобразить имя состояния .

Вот что я хочу удалить:

Здесь с заголовком установлена ​​пустая строка:

Вот фрагмент кода, который создает сетку:

$(function(){
var dataGrid = $("#gridContainer").dxDataGrid({
    dataSource: customers,
    allowColumnReordering: true,
    showBorders: true,
    grouping: {
        autoExpandAll: true,
    },
    searchPanel: {
        visible: true
    },
    paging: {
        pageSize: 10
    },  
    groupPanel: {
        visible: true
    },
    columns: [
        "CompanyName",
        "Phone",
        "Fax",
        "City",
        {
            dataField: "State",
            groupIndex: 0
        }
    ]
}).dxDataGrid("instance");

$("#autoExpand").dxCheckBox({
    value: true,
    text: "Expand All Groups",
    onValueChanged: function(data) {
        dataGrid.option("grouping.autoExpandAll", data.value);
    }
});
});

Codepen

Answer 1

Вам нужно использовать "groupCellTemplate".

Там мой код angular 8:

<dx-data-grid [dataSource]="Items">
  <!-- Before columns -->
  <dxi-column dataField="value" [groupIndex]="0"
              groupCellTemplate="groupCellTemplate">

    <div *dxTemplate="let data of 'groupCellTemplate'">
      <span>{{data.displayValue}}</span>
    </div>
  </dxi-column>
  <!-- After columns -->
</dx-data-grid>