Kendo Grid within the goldenlayout container

Question

I'm trying to implement KendoGrid to appear within the Goldenlayout container but haven't been able to do so successfully. The Grid appears outside of the container and on the top of the page, while the Goldenlayout containers initialize and appear below the grid. This means that both the grid and GolderLayout init successfully but can't register grid within the container.

<div id="example">
<div id="grid"></div>
<script>
    $(document).ready(function () {

        var config = {
            content: [{
                type: 'row',
                content: [{
                    type: 'component',
                    componentName: 'grid',
                    componentState: {  }
                }, {
                    type: 'column',
                    content: [{
                        type: 'component',
                        componentName: 'testComponent',
                        componentState: { label: 'B' }
                    }, {
                        type: 'component',
                        componentName: 'testComponent',
                        componentState: { label: 'C' }
                    }]
                }]
            }]
        };

        var myLayout = new GoldenLayout(config);

        myLayout.registerComponent('testComponent', function (container, componentState) {
            container.getElement().html('<h2>' + componentState.label + '</h2>');
        });

        myLayout.registerComponent('grid', function (container, componentState) {
             $("#grid").kendoGrid({
                container: container,
                state: componentState,
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 550,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                    field: "OrderID",
                    filterable: false
                },
                    "Freight",
                {
                    field: "OrderDate",
                    title: "Order Date",
                    format: "{0:MM/dd/yyyy}"
                }, {
                    field: "ShipName",
                    title: "Ship Name"
                }, {
                    field: "ShipCity",
                    title: "Ship City"
                }
                ]
            });
        });

        myLayout.init();

    });
</script>