Static column makes grid shrink

2 posts, 1 answers
  1. Bulut
    Bulut avatar
    7 posts
    Member since:
    Sep 2018

    Posted 09 Sep 2018 Link to this post

    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
                                }
                                ]
                            });
                        });
  2. Answer
    Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 11 Sep 2018 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top