Static column makes grid shrink

[Bulut]

when I lock columns to make them static this causes my grid to shrink. I don't think resize function is working. Funny part is when I inspect my page on browser and close the dev tools in chrome grid resizes it and it turns into normal.

 

here is my script;

$(document).ready(function() {
                        $("#berth-grid").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: "@Html.Raw(Url.Action("BerthList", "PortGuideAdmin"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: function() {
                                            var data = {
                                                PortId: '@(Model.Id)'
                                            };
                                            addAntiForgeryToken(data);
                                            return data;
                                        }
                                    },
                                    update: {
                                        url: "@Html.Raw(Url.Action("BerthUpdate", "PortGuideAdmin"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    },
                                    destroy: {
                                        url: "@Html.Raw(Url.Action("BerthDelete", "PortGuideAdmin"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: addAntiForgeryToken
                                    }
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors",
                                    model: {
                                        id: "Id",
                                        fields: {
                                            PortId: { editable: false, type: "number" },
                                            TerminalId: { editable: false, type: "number" },
                                            TerminalName: { editable: true, type: "string" },
                                            BerthName: { editable: true, type: "string" },
                                            BerthNo: { editable: true, type: "string" },
                                            BerthOperator: { editable: true, type: "string" },
                                            BerthType: { editable: true, type: "string" },
                                            TerminalType: { editable: true, type: "string" },
                                            Latitude: { editable: true, type: "number" },
                                            Longitude: { editable: true, type: "number" }
                                        }
                                    }
                                },
                                requestEnd: function(e) {
                                    if (e.type == "update") {
                                        this.read();
                                    }
                                },
                                error: function(e) {
                                    display_kendoui_grid_error(e);
                                    // Cancel the changes
                                    this.cancelChanges();
                                },
                                pageSize: @(Model.PortBerthSearchModel.PageSize),
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            pageable: {
                                refresh: true,
                                pageSizes: [@(Model.PortBerthSearchModel.AvailablePageSizes)],
                                @await Html.PartialAsync("_GridPagerMessages")
                            },
                            editable: {
                                confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                mode: "inline"
                            },
                            height: 400,
                            resizable: true,
                            columns: [
                                {
                                    field: "TerminalId",
                                    title: "Terminal Id",
                                    locked: true,
                                    width: 200
                                }, {
                                    field: "TerminalName",
                                    title: "Terminal Name",
                                    //locked: true,
                                    width: 200
                                },
                                {
                                    field: "BerthName",
                                    width: 200,
                                    title: "Berth Name",
                                    //locked: true
                                },
                                {
                                    field: "BerthNo",
                                    width: 200,
                                    title: "Berth No"
                                },
                                {
                                    field: "BerthOperator",
                                    width: 200,
                                    title: "Berth Operator"
                                },
                                {
                                    field: "BerthType",
                                    width: 200,
                                    title: "Berth Type"
                                },
                                {
                                    field: "TerminalType",
                                    width: 200,
                                    title: "Terminal Type"
                                },
                                {
                                    field: "Latitude",
                                    width: 200,
                                    title: "Latitude"
                                },
                                {
                                    field: "Longitude",
                                    width: 200,
                                    title: "Longitude"
                                },
                                {
                                command: [
                                {
                                    name: "edit",
                                    text: {
                                        edit: "@T("Admin.Common.Edit")",
                                        update: "@T("Admin.Common.Update")",
                                        cancel: "@T("Admin.Common.Cancel")"
                                    }
                                }, {
                                    name: "destroy",
                                    text: "@T("Admin.Common.Delete")"
                                }
                                ],
                                width: 200
                            }
                            ]
                        });
                    });

[Stefan]

Hello, Bulut,

Thank you for the code.

After inspecting it, it seems as the setup is as expected similar to the one in our demo.

When the locked columns are used, all column have fixed width and the Grid should appear the same and resizing column should only extend the scroll. The Grid will have width based on the visible space. Please check the video:

https://www.screencast.com/t/I1OsbbZATG

https://dojo.telerik.com/IxuHUjOQ

Please advise if this is the expected result, or not. Additionally, set a fixed width to the div from which the Grid is created and check if that archives the desired result.

Regards,
Stefan
Progress Telerik