This is a migrated thread and some comments may be shown as answers.

Grid dynamic column width issue

4 Answers 1193 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mark asked on 23 Jul 2015, 10:45 AM

grid_issue.png

Hi there,

I'm having trouble with a Kendo grid resizing. Basically, the content is extending beyond the width of my table, when the content should be wrapping instead. I've added a screenshot to try and display the issue - the 'Description' column should be wrapping but instead isn't and the table content therefore is going beyond the width of the div the table sits in. Furthermore, using the debug tools in Chrome shows that the table itself is positioned correctly, but it's the th and td cells which are displaying outside of the table area (hopefully the screenshot demonstrates that too). The code I am using in my view is fairly basic :-

Html.Kendo().Grid((IEnumerable<TEAMSPortalV2.Models.SampleComputedDataViewModel>)ViewData["samples"]) // Bind the grid to the Model property of the view
.Name("ItemsByRiskSamples")
.Sortable()
.Columns(columns =>
{
columns.Bound(s => s.BuildingDesignation).Title("Building");
columns.Bound(s => s.FloorNoConverted).Title("Floor");
columns.Bound(s => s.RoomDescription).Title("Room");
columns.Bound(s => s.RegisterItemNo).Title("Item No.");
columns.Bound(s => s.SampleRef).Title("Sample Ref.").Width(40);
columns.Bound(s => s.SourceDescription).Title("Description");
columns.Bound(s => s.AsbestosType);
columns.Bound(s => s.MaterialAssessmentScoreString).Title("MA Score").Width(40);
columns.Bound(s => s.PriorityAssessmentScore).Title("PA Score").Width(40);
columns.Bound(s => s.RiskScore).ClientTemplate("<span bgcol='#= RiskScoreGroupColour#'>#= RiskScoreString#</span>").Width(40);
columns.Bound(s => s.RecommendedAction).Title("Rec. Action").ClientTemplate("<span bgcol='#= RecommendedActionColour#'>#= RecommendedAction#</span>");
})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
.Events(e => e.DataBound("itemBackColours"))

I've played around with it and by adding a width property to other columns sometimes rectifies the problem (but not always at smaller resolutions) seemingly randomly. That said, I don't want to specify column widths - I'd rather let the browser display the content as efficiently as possible as per normal HTML table behaviour. I also noticed that at wider resolutions it often seems to snap into the correct widths - which seems to suggest thast Bootstrap is involved somehow (my site has got Bootstrap installed).

Please could you assist and give me some suggestions of what I can try to rectify this issue.

Thanks, Mark

4 Answers, 1 is accepted

Accepted