CODEWITHSUNDEEP
kendo-ui
desiguy
desiguy

Reputation: 651

Grid how to have multiple columns in one

I am trying to append two columns bound into one kendo grid column. Below doesn't seem to work.

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

            }).data("kendoGrid");

Upvotes: 7

Views: 26858

Answers (3)

danatcofo
danatcofo

Reputation: 733

Here is a different solution that also provides the ability to sort independently on either field while still preserving a single column of data.

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: ""
   }
]

Upvotes: 5

OnaBai
OnaBai

Reputation: 40917

If you do not need to edit the cell you can do what is known as composed cells or composition and it is implemented using KendoUI template. (Try googling for "kendoui grid with composed cells").

Example

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 #"
        }
    ]
});

Upvotes: 21

Burke Holland
Burke Holland

Reputation: 2337

Did you have a look at the schema.parse method on the DataSource? You can add up columns there as new fields with no issues. Then the field would be available when you get to the grid.

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;
      });
    }
  }
}

Here is an example...

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

Upvotes: 6

Related Questions