Auto generation of columns

[Andrew]

Hello,

I have a grid bound to a view model array property.

 I am adding new items asynchronously to the array and it works, they are getting displayed in the grid.

However, I see that the grid is adding columns for EVERY property of the item object, even if I specifically set the columns with the fields:

 $(document).ready(function () {
            $("#battleGrid").kendoGrid({
                columns: [
                                      {
                                          title: "Title",
                                          field: "Title"
                                      },
                                      {
                                          title: "Map",
                                          field: "Map"
                                      }]
            });


            $("#battleGrid").kendoGrid({
                selectable: "row"
            });
        });


$(function () {
            viewModel = kendo.observable({

                battles: [],


                addBattle: function (battle) {
                    this.get("battles").push(battle);
                },
            });

            // apply the bindings
            kendo.bind(document.body.children, viewModel);
        });

 <div id="battleGrid" data-role="grid" data-sortable="true" data-bind="source: battles"
                    style="height: 700px">
                </div>

The grid shows 5 columns instead of 2.

This looks very bad, I hope there's a solution.

How can I tell the grid to stop auto generating the columns and create only specific columns?


Thanks!