Grid, wie mehrere Spalten in einem zu haben

Question

Ich versuche, zwei Spalten gebunden in eine Kendo-Rasterspalte anzuhängen. Unten scheint nicht zu funktionieren.

var grid = $("#grid").kendoGrid({ 
       dataSource: { data: SomeData }, 
       columns: [{ 
        field: "Column1" + "Column2" 
       }] 

      }).data("kendoGrid"); 

Answer 1

Wenn Sie nicht die Zelle bearbeiten müssen, können Sie das tun, was als zusammengesetzte Zellen oder Zusammensetzung bekannt ist und es wird implementiert KendoUI template. (Versuchen Sie, nach "kendoui grid mit zusammengesetzten Zellen" zu suchen).

Beispiel

var leitmotifs = [ 
    { 
     company: "OnaBai", 
     leitmotif: "Working on a cloud of documents!" 
    }, 
    { 
     company: "Nike", 
     leitmotif: "Just do it!" 
    } 
]; 

var grid = $("#table").kendoGrid({ 
    dataSource: { 
     data: leitmotifs 
    }, 
    columns : [ 
     { 
      title: "Company", 
      template: "#= company + ' : ' + leitmotif #" 
     } 
    ] 
}); 

Answer 2

Haben Sie einen Blick auf die schema.parse Methode auf der Datasource? Sie können Spalten dort als neue Felder ohne Probleme hinzufügen. Dann wäre das Feld verfügbar, wenn Sie am Gitter sind. Hier

dataSource: { 
    transport: { 
    read: "things" 
    }, 
    schema: { 
    parse: function (data) { 
     // return a new collection which has a new field 
     // that adds fields 2 and 3 together 
     return $.map(data, function(item) { 
     item.field4 = item.field2 + item.field3; 
      return item; 
     }); 
    } 
    } 
} 

ist ein Beispiel ...

http://jsbin.com/azizaz/1/edit

Answer 3

Hier ist eine andere Lösung, die die Fähigkeit, auf jedes Feld unabhängig zu sortieren stellt auch während immer noch eine einzelne Spalte von Daten zu erhalten.

columns: [ 
    { // cell data 
     headerAttributes: { style: "display:none;" }, 
     attributes: { colspan: 2 }, 
     template: "#= field1 # #= field2 #" 
    }, 
    { // field 1 data 
     field: "field1", 
     title: "Field 1", 
     attributes: { style: "display: none;" }, 
     template: "" 
    }, 
    { // field 2 data 
     field: "field2", 
     title: "Field 2", 
     attributes: { style: "display: none;" }, 
     template: "" 
    } 
]