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

[Solved] I have the same issue...

4 Answers 183 Views

Grid

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

This question is locked. New answers and comments are not allowed.

EricB asked on 28 Jul 2010, 08:16 PM

For some reason I don't see a "Reply" button in the thread here: http://www.telerik.com/community/forums/aspnet-mvc/grid/how-do-you-line-up-columns-with-their-headings.aspx

But I wanted to say I have the EXACT same issue... The oddest part is a co-worker of mine saw it recently and the the grid has always rendered fine for me until today. All the sudden, today out of the blue, I am seeing the same issue with the data not aligning with the column headers...

One person who replied to the post stated that if he does not define a column size for ONE of the columns the issue went away... Same exact behaviour here... I removed a width setting and magically the columns now align correctly.

Is this a bug of some sort?

Thanks,
Eric

4 Answers, 1 is accepted

answered on 29 Jul 2010, 12:49 PM

Hello Eric,

It depends highly on your configuration. Basically, there are two main scenarios, depending on whether the grid has scrolling enabled. When it is enabled, the table gets the table-layout: fixed CSS property and it is usually required to set the width of all columns. When scrolling is disabled, though, the outer table has table-layout: auto and the inner table has table-layout: fixed, copying the outer cells widths manually (through JavaScript). This requires that one of the columns has no width, because if all of them have, the synchronization of widths will not happen.

Bottom line is, it is a very annoying problem that we are trying to fix. It would be great if you can share the column configuration that worked and the one that didn't work, so that we have them in mind.

Kind regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 29 Jul 2010, 01:51 PM

Good to hear you guys are addressing this issue... By all means, I have no issue with doing my part to help and as such here is the layout of the grid:


<% 

List<DomainModel.Entities.LoadSearchResultItem> loads = Model.Loads; %>


 
<% Html.Telerik().Grid(loads)

.Name("Loads")

.DataKeys(keys => keys.Add(model => model.LoadId).RouteKey("Id"))

.Columns(columns =>

{

columns.Template(model =>

{%>

<% if (model.IsLOI.HasValue && model.IsLOI.Value)

{ %>

<%= Html.ImageLink("../Content/Images/minus_16.png", "Click here to remove this load from the loads of interest.", "ToggleLOI", "Load", null, null, new { @class="noBorder" })%>

<%} %>

<% else %>

<%= Html.ImageLink("../Content/Images/plus_16.png", "Click here to add this load to the loads of interest.", "ToggleLOI", "Load", null, null, new { @class="noBorder" })%>

<%}).Title("Actions").Width(100);

columns.Bound(model => model.Agency).Width(100);

columns.Bound(model => model.AgencyContactPhoneNumber).Groupable(false).Sortable(false).Title("Contact #").Width(95);

columns.Template(model =>

{%>

<%= Html.Encode(model.LTL)%><br />

<%= Html.Encode(model.LoadCount)%>

<%}).Title("Type/Count").Width(90);

columns.Template(model =>

{%>

<%= Html.Encode(model.PickupFromDate) %> <%= Html.Encode(model.DeliveryFromDate) %>

<br />

<%= Html.Encode(model.PickupThruDate) %> <%= Html.Encode(model.DeliveryThruDate) %>

<%}).Title("Pickup / Delivery From / Thru").Width(290);

columns.Template(model => {%>

<%= Html.Encode(model.OriginCity)%> <%= Html.Encode(model.OriginState)%>

<br />

<%= Html.Encode(model.DestinationCity)%> <%= Html.Encode(model.DestinationState)%>

<%}).Title("Origin/Destination").Width(135);

columns.Bound(model => model.Miles).Sortable(true).Groupable(true).Filterable(true).Width(80);

}).HtmlAttributes(new { @class = "stripe" })

.DetailView(detailView => detailView.Template(model =>

{%>

<table class="headerNoBackgroundWithBorder">

<tr>

<th class="tableHeader">

<label class="label ">

Load Info</label>

</th>

<th class="tableHeader">

<label class="label">

Revenue</label>

</th>

<th class="tableHeader">

<label class="label">

Commodity</label>

</th>

</tr>

<tr>

<td>

<table class="stripe">

<tr>

<td>

<label class="label">

Company</label>

</td>

<td>

<%= model.Company %>

</td>

</tr>

<tr>

<td>

<label class="label">

Brokerable</label>

</td>

<td>

<%= model.Brokerable %>

</td>

</tr>

<tr>

<td>

<label class="label">

Preloaded</label>

</td>

<td>

<%= model.Preloaded%>

</td>

</tr>

<tr>

<td>

<label class="label">

Team</label>

</td>

<td>

<%= model.TeamLoads %>

</td>

</tr>

</table>

</td>

<td>

<table class="stripe">

<tr>

<td>

<label class="label">

Line Haul</label>

</td>

<td>

<%= model.TotalLineHaulRevenue %>

</td>

<td>

<label class="label">

Miles</label>

</td>

<td>

<%= model.Miles %>

</td>

</tr>

<tr>

<td>

<label class="label">

Accessorials</label>

</td>

<td>

$195.00

<%--<%= model.AccessorialsRevenue %>--%>

</td>

<td>

<label class="label">

Rate Per Mile

</label>

</td>

<td>

$<%= model.RatePerMile %>

</td>

</tr>

<tr>

<td>

<label class="label">

Revenue</label>

</td>

<td>

<%= model.TotalRevenue %>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</td>

<td>

</td>

</tr>

</table>

<%}))

.Sortable()

.Scrollable(scrolling => scrolling.Height(450))

.PrefixUrlParameters(false)

.Footer(false)

.Render();

%>

For it to align correctly you can remove any of the .Width settings on the grid column and the fields magically line up.

Wow the formatting of that is hard to read but I am sure you guys will be able to. :)

Thanks for working on this!

-Eric

answered on 30 Jul 2010, 12:34 PM

The Master/Detail column is REALLY easy to use. About the only feedback I have on it is that it would be cool to be able to control what column the + went into. I have an "Actions" column in my grid that will have a few controls in it for doing different things to the item in the grid... It would be neat to be able to control where the "expander" went.

Beyond that, the grid if fantastic, I've used many other grid controls and the Telerik MVC grid is by far the best. Thanks for the hard work on it!

-Eric