Grid Header doesn't resize correctly

1 Answer 131 Views
Grid
Oudom Munint
Top achievements
Rank 1
Oudom Munint asked on 18 May 2023, 05:17 AM | edited on 19 May 2023, 01:59 AM

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

1 Answer, 1 is accepted

Sort by
0
Nina
Telerik team
answered on 22 May 2023, 03:15 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Oudom Munint
Top achievements
Rank 1
commented on 25 May 2023, 11:38 PM

Haven't received any emails yet unfortunately :(
Anton Mironov
Telerik team
commented on 30 May 2023, 08:54 AM

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:

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

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
Top achievements
Rank 1
commented on 31 May 2023, 01:59 AM

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
Telerik team
commented on 02 Jun 2023, 08:47 AM

Hi Oudom Munint,

Thank you for sharing the resolution approach with the community.

Best Regards,
Anton Mironov

Tags
Grid
Asked by
Oudom Munint
Top achievements
Rank 1
Answers by
Nina
Telerik team
Share this question
or