This is a migrated thread and some comments may be shown as answers.
Static column makes grid shrink
1 Answer 14 Views
This is a migrated thread and some comments may be shown as answers.
Bulut
Top achievements
Rank 1
Bulut asked on 09 Sep 2018, 03:12 PM

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
                            }
                            ]
                        });
                    });

1 Answer, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 11 Sep 2018, 06:16 AM
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.
Tags
Grid
Asked by
Bulut
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or