Kendo Grid в контейнере с золотыми вставками - PullRequest
Новая
       18

Kendo Grid в контейнере с золотыми вставками

1 голос
/ 13 марта 2019

Я пытаюсь реализовать KendoGrid для отображения в контейнере Goldenlayout, но не смог сделать это успешно. Сетка отображается вне контейнера и в верхней части страницы, а контейнеры Goldenlayout инициализируются и отображаются под сеткой. Это означает, что и grid, и GolderLayout инициализируются успешно, но не могут зарегистрировать grid в контейнере. 

<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>

...