Kendo Grid popup editing column order

HTML

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

JavaScript

var items = [
    { id: "1", name: "apple", type: "fruit", quantity: 12, notes: "some sort of note"},
    { id: "2", name: "tomato", type: "vegetable", quantity: 5, notes: "and another note"},
    { id: "3", name: "banana", type: "fruit", quantity: 7, notes: "and another"},
    { id: "4", name: "potato", type: "vegetable", quantity: 16, notes: "and another"}
];

$('#grid').kendoGrid({
    dataSource: { data: items },
    editable: "popup",
    columns: [
        {
            command: ["edit"],
            title: "&nbsp",
            width: "95px"
        },
         {
            field: "name",
            title: "Name"
        },
        {
            field: "quantity",
            title: "Qty"
        },
        {
            field: "type",
            title: "Type"
        },
        {
            field: "id",
            title: "ID",
            hidden: true
        },
       
        {
            field: "notes",
            title: "Notes",
            hidden: true
        }
    ]
});