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

[Solved] IE 9 column widths incorrect

6 Answers 127 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.

Carmine asked on 14 Aug 2011, 05:33 PM

IE9-Misaligned.jpg

Hello. My grid renders perfectly in Chrome and Firefox, but in IE 9 the widths of the column headers differ from those in the data columns, so everything is misaligned. From reading other threads, I've tried putting my column.hidden(true) at the end of the list, as well as leaving one column with no .width so it will fill all remaining space. Still doesn't work. Here's my code and I've attached a screenshot. We're evaluating Telerik for use commercially. I like the product, but these rendering issues are awfully frustrating.

Html.Telerik().Grid<CustomerSearch.PolicyTransactionList>()

.Name("Grid")

.ClientEvents(events => events.OnDataBound("Grid_onDataBound"))

.Columns(columns =>

{

columns.Bound(o => o.PolicyNumber).Width(75);

columns.Bound(o => o.CompanyCode).Width(75);

columns.Bound(o => o.UnderwritingClassification).Width(75);

columns.Bound(o => o.FormalTransactionAddressRecipient).Width(75);

columns.Bound(o => o.AgencysBrokeragesIDforInsured).Width(75);

columns.Bound(o => o.InsuredsNameIndividual);

columns.Bound(o => o.InsuredsTelephoneNumber).Width(100);

columns.Bound(o => o.PolicyExpirationDate).Format("{0:MM/dd/yyyy}").Width(150);

columns.Bound(o => o.InsuredsAge).Width(50);

columns.Bound(o => o.TransactionDate).Format("{0:MM/dd/yyyy}").Width(150);

columns.Bound(o => o.LineofBusinessCode).Width(50);

columns.Bound(o => o.FullTermPremium).Width(75);

columns.Bound(o => o.LossCount).Width(75);

columns.Bound(o => o.ProducerName).Width(125);

columns.Bound(o => o.UnderwriterId).Width(75);

columns.Bound(o => o.Id).Hidden(true);

})

.Scrollable(c => c.Height("550px"))

.DataBinding(dataBinding => dataBinding

.Ajax()

.Select("_CustomerSearch", "Prospects")

)

// .Groupable()

.Scrollable()

.Pageable(paging =>

paging.PageSize(20)

.Style(GridPagerStyles.NextPreviousAndNumeric)

.Position(GridPagerPosition.Bottom)

)

.Filterable()

.Sortable()

.Footer(true)

.Render();

6 Answers, 1 is accepted

answered on 20 Sep 2011, 08:46 PM

Did you find a solution for this issue? I am banging my head over it also. Chrome and Firefox work fine I just need the fix for ie9.

I added the following to my site.master and no change:

<%= Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group =>
        {
            // Manual JavaScript registration is required only when the UI components are used in partial views loaded via Ajax
            group.Add("telerik.common.js");         // That file is always required
            group.Add("telerik.calendar.min.js");
            group.Add("telerik.datepicker.min.js");
        })
    %>

I also tried

<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group =>
        {
            // Manual JavaScript registration is required only when the UI components are used in partial views loaded via Ajax
            group.Add("telerik.common.js");         // That file is always required
            group.Add("telerik.calendar.min.js");
            group.Add("telerik.datepicker.min.js");
        })
    %>

This did not help either

answered on 27 Sep 2011, 08:31 PM

This is my grid.

Thanks for looking!

<% Html.Telerik().Grid(Model)
        .Name("Grid")
        .ClientEvents(events => events
                .OnEdit("onEdit")
                .OnError("RedirectOnError")
            )
        .DataKeys(keys => { keys.Add(c => c.Id); })
        .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image).ImageHtmlAttributes(new
            {style="margin-left:0"}))
        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                commands.Delete().ButtonType(GridButtonType.Image).HtmlAttributes(new { style = "width: 15px; min-width: 15px;" });
                commands.Edit().ButtonType(GridButtonType.Image).HtmlAttributes(new { style = "width: 15px; min-width: 15px;" });
            })
                .Width(100);
            columns.Bound(c => c.Id);
            columns.Bound(c => c.Name).Width(120);
            columns.Bound(c => c.Title).Width(120);
            columns.Bound(c => c.Address1).Width(120);
            columns.Bound(c => c.Address2).Width(120);
            columns.Bound(c => c.City).Width(120);
            columns.Bound(c => c.State).Width(120);
            columns.Bound(c => c.Zip).Width(120);
            columns.Bound(c => c.PhoneOffice).Width(120);
            columns.Bound(c => c.PhoneCell).Width(120);
            columns.Bound(c => c.Fax).Width(120);
            columns.Bound(c => c.Email).Width(120);
            columns.Bound(c => c.ContactType).Width(140).ReadOnly(true).Title("Contact Type");
        })
        .DataBinding(dataBinding => dataBinding
            .Ajax()
            .Select("BindGrid", "Contacts")
            .Update("Update", "Contacts")
            .Delete("DoDelete", "Contacts")
            .Insert("Insert", "Contacts")
         )
        .Editable(editing => editing.Mode(GridEditMode.PopUp))
        .Scrollable(scrolling => scrolling.Height(300))
        .Resizable(resizing => resizing.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .Sortable()
        .Filterable()
        .Pageable(paging =>
            paging.PageSize(50))
        .Selectable()
        .Render();
    %>

answered on 28 Sep 2011, 03:26 AM

What operating system is the IE on? If it's MS Server, I had the same bug you saw...couldn't reproduce it in Vista or Windows 7, so I ignored it, as none of the clients is going to be running that OS.

I'm pretty sure you've already tried this, but can you let me know how it renders in IE when the grid code is just bare bones like this:

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

.Name("GridSomethingUniqueThatCannotBeInMyExistingCssFiles")

.Columns(columns =>

{

columns.Bound(c => c.Id);

columns.Bound(c => c.Name).Width(120);

columns.Bound(c => c.Title).Width(120);

columns.Bound(c => c.Address1).Width(120);

columns.Bound(c => c.Address2).Width(120);

columns.Bound(c => c.City).Width(120);

columns.Bound(c => c.State).Width(120);

columns.Bound(c => c.Zip).Width(120);

columns.Bound(c => c.PhoneOffice).Width(120);

columns.Bound(c => c.PhoneCell).Width(120);

columns.Bound(c => c.Fax).Width(120);

columns.Bound(c => c.Email).Width(120);

columns.Bound(c => c.ContactType).Width(140).ReadOnly(true).Title("Contact Type");

})

.DataBinding(dataBinding => dataBinding

.Ajax()

.Select("BindGrid", "Contacts")

)

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

.Sortable()

.Filterable()

.Pageable(paging =>

paging.PageSize(50))

.Render();

%>

Keep deleting stuff to see if there is any one method call that is causing the bug. My grid is read only, and therefore much simpler than yours. Also, are you using the latest telerik grid version?

I know this is pretty basic troubleshooting info, but with any luck it's something simple you've missed.