title: customize group header for kendo grid
body: <p>There's two fields 'number' and 'name' in my datasource which are 1 to 1 related. </p>
  
  <p>Currently, I grouped the data using number field, and the group header display 'number: xxx'. Is there a way to append the name field behind the current text? As 'number: xxx, name: xxxx'? </p>
  
  <p>I have checked the kendo grid documentation and searched a long time, it seems kendo grid only support show the group header based on the grouped field's value or aggreagates, couldn't find a solution to group as these two fields. </p>
  
  <p>Then I have another solution to deal with it. Add a new field which combined the two fields, then group by this new field, but the new field will display in columns filter in the column header. Is there a way to solve this problem?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#grid").kendoGrid({
      columns: [{
          field: "number",
          hidden: true
      },{
          field: "name"
      }, {
          field: "order"
      }],
      dataSource: {
          data: [{
            number: 1,
              name: "Jane Doe",
              order: "order1"            
          },
          {
            number: 1,
              name: "Jane Doe",
              order: "order2"            
          },
          {
            number: 1,
              name: "Jane Doe",
              order: "order3"            
          },{
            number: 2,
              name: "Allen",
              order: "order1"
          },{
            number: 2,
              name: "Allen",
              order: "order2"
          }
          ],
          group: {
              field: "number"           
          }
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code below could display the combined field, but there're two problems:
  1. The header text always contains 'header:' prefix, such as "header:number:1,name:Jane Doe";
  2. In the column filter, there's a header column in it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#grid").kendoGrid({
      columns: [{
          field: "number",
          hidden: true
      },{
          field: "name",
          hidden: true
      }, {
          field: "order"
      },{
          field: "header",
          hidden: true
      }
      ],
      dataSource: {
          data: [{
            number: 1,
              name: "Jane Doe",
              order: "order1",
              header: "number: 1, name: Jane Doe"
          },
          {
            number: 1,
              name: "Jane Doe",
              order: "order2",
              header: "number: 1, name: Jane Doe"
          },
          {
            number: 1,
              name: "Jane Doe",
              order: "order3",
              header: "number: 1, name: Jane Doe"
          },{
            number: 2,
              name: "Allen",
              order: "order1",
              header: "number: 2, name: Allen"
          },{
            number: 2,
              name: "Allen",
              order: "order2",
              header: "number: 2, name: Allen"
          }
          ],
          group: {
              field: "header"           
          }
      },
      columnMenu: true
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>