title: How to remove Group Column Prefix from dx-data-grid grouping?
body: <p>I'm using <a href="https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecordGrouping/jQuery/Light/" rel="nofollow noreferrer">dx-data-grid</a> with Jquery and i'm trying to remove the grouping prefix from the grouping panel but it seems like it's not possible.
  As you can see in the picture - the prefix is the column name, now, i can remove it by setting the caption to empty string, but then i'm still remaining with the colon sign, obviously i just want to display the state name.</p>
  
  <p>Here is what i want to remove :</p>
  
  <p><a href="https://i.stack.imgur.com/RJdJf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RJdJf.png" alt="Here is what i want to remove : "></a></p>
  
  <p>Here is with caption set to empty string :
  <a href="https://i.stack.imgur.com/66L5K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/66L5K.png" alt="Here is with caption set to empty string :"></a></p>
  
  <p>Here is a piece of the code that creates the  grid:</p>
  
  <pre><code>$(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);
      }
  });
  });
  </code></pre>
  
  <p><a href="https://codepen.io/roy_barak/pen/eYNRexe" rel="nofollow noreferrer">Codepen</a></p>