Columns disappearing when setting locked to true

[Lee]

I have a Kendo UI Grid Dojo that I am working on. When I set locked on the columns to "true", some of the columns (country, city, name) disappear.

Update: If I add a width attribute to every column, the columns stop disappearing, however when I then add in reordable, I am able to move unlocked columns over to the locked columns side. Is there a way to prevent users from moving columns from locked to unlocked and vice verca?

Here is the example: 

https://dojo.telerik.com/tVXUmrjz

Javascript: 

$(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: "https://demos.telerik.com/service/v2/core/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                ShipCountry: { type: "string" },
                                ShipCity: { type: "string" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShippedDate: {type: "date" }
                            }
                        }
                    },
                    pageSize: 15
                },
                height: 550,
                pageable: true,
                reorderable: true,
                columns: [
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        width: 120,
                        format: "{0:MM/dd/yyyy}",
                        locked: true
                    },
                    {
                        field: "ShipCountry",
                        title: "Ship Country",
                        locked: true
                    },
                    {
                        field: "ShipCity",
                        title: "Ship City"
                    },
                    {
                        field: "ShipName",
                        title: "Ship Name"
                    },
                    {
                        field: "ShippedDate",
                        title: "Shipped Date",
                        format: "{0:MM/dd/yyyy}",
                        width: 200
                    },
                    {
                        field: "OrderID",
                        title: "ID",
                        width: 80
                    }
                ]
            });
        });
                

[Lee]

I solved the issues. It looks like the first issue with disappearing columns is because I didn't set a width. The second issue is solved by setting lockable to false, regardless of which side it starts on this prevents crossing over.