Grid Header doesn't resize correctly

[Oudom Munint]

Hi all, I'm having some trouble with grid resizing, see pics below:

Expected:

Results:
The only way around right now is to define .Width(xxx)

I've tried .Width("auto"), Custom css.

No error messages.

This project is an ASP.NET MVC project, and I'm using CDNs.

Grid's Code: 

@(Html.Kendo().Grid<PDS.Web.Areas.Assets.Models.EquipmentModel>()
    .Name("EquipmentDashboardGrid")
    .Columns(col =>
    {
        col.Bound(m => m.EquipmentTypeName).Title(AssetManagement.Equipment_Type).Width(150).ClientGroupHeaderTemplate("#=value#").Hidden();
        col.Bound(m => m.SortOrder).Title(AssetManagement.Equipment_SortOrder).Width(135).Filterable(false);
        col.Bound(m => m.IsInstalled).Title(AssetManagement.Equipment_Installed).Width(130).Filterable(false).HtmlAttributes(new { style = "text-align: center" });
        col.Bound(m => m.ExtendedDesc2).Title(AssetManagement.EquipmentDashboard_Equipment).Width(250).Filterable(false);
        col.Bound(m => m.ExtendedDesc3).Title(AssetManagement.Equipment_Details).Width(250).Filterable(false);
        col.Bound(m => m.OpenInspectionCount).Title("Open Faults").Width(140).HtmlAttributes(new { style = "text-align: center" }).Sortable(true);
        col.Bound(m => m.InstalledDate).Title(AssetManagement.Equipment_Installed).Width(130).Filterable(false);
        col.Bound(m => m.ScheduledRemoval).Title(AssetManagement.EquipmentDashboard_ScheduledRemoval).Width(130).Filterable(false);
        col.Bound(m => m.RemovalDate).Title(AssetManagement.Equipment_Removal).Width(130).Filterable(false);
        col.Bound(m => m.LastSavedDateTime).Title(AssetManagement.Equipment_LastSaved).Width(175).Filterable(false).Sortable(true);
        col.Bound(m => m.CreatedDateTime).Title(AssetManagement.Equipment_Created).Width(175).Filterable(false);
        col.Bound(columns => columns.EquipmentTypeNameSort).Width(175).ClientGroupHeaderTemplate("#=value.split('_@@')[1]#").Hidden(true);
        col.Bound(m => m.EquipmentID).Title(AssetManagement.Equipment_ID).Width(145).Hidden(false);
        col.Bound(m => m.EquipmentTypePrefix).Hidden();
    })
    .Sortable()
    .Scrollable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))

[Nina]

Hello,

 

Thank you for contacting us.

 

Please expect one of our Product Specialists to contact you and provide more details about the inquiry.

 

If you have any questions, feel free to let me know.

Regards, Nina Progress Telerik

[Oudom Munint]

Haven't received any emails yet unfortunately :(

[Anton Mironov]

Hi Oudom Munint,

Thank you for the details provided. My name is Anton Mironov and I am a member of the Telerik UI for MVC & Core Team.

From the images, I am not sure how the resizing functionality breaks the expected result. The following article provides further information about the resizing behavior and different scenarios when the scrolling of the Grid is enabled:

• https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/columns/resizing

The following demo represents the implementation and the result of the Resizable Grid:

• https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/columns/resizing

I hope this information helps. If further assistance is needed - send me a runnable sample or a dojo example back in this thread, along with details and reproducing steps.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov

[Oudom Munint]

Thanks for getting back, we managed to fix the problem by implementing a mutation observer, and applying the resetGrid function when the grid is added.

[Anton Mironov]

Hi Oudom Munint,

Thank you for sharing the resolution approach with the community.

Best Regards,
Anton Mironov