gruppierte Tabelle

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="grid" style="width:550px;"></div>

<script type="text/javascript">
  clickTarif = function(e, vorschlagId) {};

</script>

<script id="customTemplate" type="text/x-kendo-template">
  #if(typ=="dropdown"){#
  <p align="right">
    <select name="combobox" style="width: 180px; text-align: right;">
      <option value="Item 1">Item 1</option>
      <option value="Item 2">Item 2</option>
      <option value="-">-----</option>
    </select>
  </p>
  #}else if (typ =="number") {#
  <p align="right">
    <input name="textfeld" type="text" size="20" value="#=value#" style="text-align: right;">
  </p>
  #}else{#
  <p align="right">
    kein Tarifangebot
  </p>
  #}#
</script>

CSS

.SelectedCB {
  min-width: 20px;
  text-align: center;
  margin: 0;
  padding: 0;
}

JavaScript

var items = [{
  select: true,
  leistung: "Ergänzung",
  typ: "",
  id: 1,
  tarif: "E01",
  value: "",
  beitrag: 100
}, {
  select: false,
  leistung: "Ambulant",
  typ: "dropdown",
  id: 2,
  tarif: "A01",
  value: "Item 1",
  beitrag: 200
}, {
  select: false,
  leistung: "Stationär",
  typ: "number",
  id: 3,
  tarif: "S01",
  value: "123",
  beitrag: 50
}, {
  select: true,
  leistung: "Pflegepflicht",
  typ: "",
  id: 4,
  tarif: "Z01",
  value: "",
  beitrag: 300
}, {
  select: false,
  leistung: "Stationär",
  typ: "",
  id: 5,
  tarif: "S02",
  value: "",
  beitrag: 50
}, {
  select: false,
  leistung: "Ergänzung",
  typ: "",
  id: 6,
  tarif: "Z02",
  value: "",
  beitrag: 300
}];

$("#grid").kendoGrid({
  dataSource: {
    data: items,
    schema: {
      fields: {
        select: {
          type: 'boolean'
        },
        leistung: {
          type: 'string'
        },
        value: {
          type: 'string'
        },
        beitrag: {
          type: 'number'
        }
      }
    },
    group: {
      field: "leistung"
    }
  },
  groupable: false,
  columns: [{
    field: "leistung",
    title: " ",
    editable: false,
    groupHeaderTemplate: "<label style='display: inline-block; width: 275px;'>#= value#</label> <button name='button'>XYZ Assistent</button>",
    width: 1,
    template: ''
  }, {
    field: "select",
    title: "Tarif",
    editable: false,
    width: 150,
    template: "<input type='checkbox' class='SelectedCB' onclick='clickTarif(this, #=id#)' #= select ? checked='checked' : '' # /> #=tarif#"
  }, {
    field: "value",
    title: "Vorgabe",
    template: kendo.template($("#customTemplate").html()),
    attributes: {
      align: "right"
    },
    editable: false
  }, {
    field: "beitrag",
    title: "Beitrag",
    format: "{0:n2}",
    width: 100,
    template: '<p align="right">#=beitrag# €</p>',
    editable: false
  }]
});