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

RadGrid Header not showing in IE

7 Answers 136 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 28 Jan 2014, 08:26 AM
Hi,

    We have a issue after  Upgrading the Telerik dll Version(2012.2.724.40) (Web.UI,Web.Design,Web.UI.Skins) to Version(2013.3.1114.40)
in new version(2013.3.1114.40) Rad-grid header is not shown in IE.This working fine in FireFox and Chrome.

Sample html:



        <telerik:RadGrid    ID="radMailboxGrid" GridLines="Horizontal" OnItemDataBound="OnRadGridOnItemDataBound"
            runat="server" AutoGenerateColumns="false" Height="250px" Width="100%" EnableEmbeddedSkins="false"
            AllowSorting="True"  OnPreRender="OnRadGridOnPrerender" >
           
            <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="false">
                <Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="true" />
                <Selecting AllowRowSelect="true" />
                <ClientEvents OnRowSelected="RowDblClick" />
                
            </ClientSettings>
            <HeaderStyle BackColor="#CCCCCC" />
            <MasterTableView AllowSorting="true" DataKeyNames="EmailID" TableLayout="Fixed" Width="100%"
                ItemStyle-CssClass="Hand">
                    <NoRecordsTemplate>
      <div>
        "No emails to display."</div>
    </NoRecordsTemplate>
                <Columns>
            
                    <telerik:GridTemplateColumn HeaderStyle-Width="2%" ItemStyle-Width="2%">
                        <ItemTemplate>
                            
                                <img runat="server" id="imgmail" style='border: 0px;padding-left:2px; ' />
                           
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn ItemStyle-Width="2%" HeaderStyle-Width="2%" SortExpression="EmailPriorityID"
                        HeaderImageUrl="/Images/candidate/layout/emailPriority.gif">
                        <ItemTemplate>
                            <img runat="server" id="imgPriority" style='border: 0px;' />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn ItemStyle-Width="2%" HeaderStyle-Width="2%" SortExpression="HasAttachments"
                        HeaderImageUrl="/images/candidate/layout/Attachment.png">
                        <ItemTemplate>
                            <img runat="server" id="imgAttachment" style='border: 0px;' />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn ItemStyle-Width="40%" HeaderStyle-Width="40%" SortExpression="EmailSubject"
                        HeaderText="Subject" DataField="EmailSubject">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ItemStyle-Width="40%" HeaderStyle-Width="40%" SortExpression="EmailFrom"
                        HeaderText="From" DataField="EmailFrom">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn ItemStyle-Width="14%" HeaderStyle-Width="14%" SortExpression="ModifiedDisplayDate"
                        HeaderText="Received" DataField="ModifiedDisplayDate">
                    </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn Display="false" DataField="EmailID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Display="false" DataField="IsCoach">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

Please give me a solution..
Thanks

7 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 30 Jan 2014, 09:45 AM
Hello Matthew,

We are aware of such an issue but it happens only in Quirks mode. This mode is not supported by RadControls since it is based on IE5.5. Please check if this is not the case. Verify if the doctype is the firs directive in the rendered html and it is a valid one. Note that IE does not allow even comments before doctype. Also, you can download the latest internal build where this issue is fixed.

Regards,
Venelin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Matthew
Top achievements
Rank 1
answered on 30 Jan 2014, 11:54 AM
Hi,
     We are using IE8,and the issue does not exist in the version -2012.2.724.40.
After upgrading to new version we are facing this issue.

Please give me a solution..

Thanks

0
Venelin
Telerik team
answered on 31 Jan 2014, 09:47 AM
Hi Matthew,

The solution is to:

1. Download the latest internal-built where the issue is fixed

OR

2. Resolve the Quirks mode, i.e. set a valid doctype at the top of the page.

OR

3. Overwrite the _setupHeaderRotation method by adding this function at the bottom of the page:

JavaScript:

Telerik.Web.UI.GridTableView.prototype._setupHeaderRotations = function ()
{
    var that = this,
        columns = that.get_columns(),
        maxWidth = 0,
        cell;
    for (var i = 0; i < columns.length; i++)
    {
        cell = columns[i].get_element();
             
        if (Sys.UI.DomElement.containsCssClass(cell, "rgRotateHeader") && cell.children[0].offsetWidth > maxWidth)
        {
            maxWidth = cell.children[0].offsetWidth;
        }
    }
 
    if (parseInt($telerik.getComputedStyle(cell, "height", 0), 10) > maxWidth)
    {
        return;
    }
 
    if ($telerik.isOpera)
    {
        maxWidth += ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"]
            .reduce(function (memo, cssPropertyName)
            {
                var value = parseInt($telerik.getCurrentStyle(cell, cssPropertyName), 10);
                return memo + (isNaN(value) ? 0 : value);
            }, 0);
    }
 
    if (maxWidth != 0)
    {
        for (var i = 0; i < columns.length; i++)
        {
            if (columns[i].get_element().style.height == "")
            {
                columns[i].get_element().style.height = maxWidth + "px";
            }
        }
    }
}

These are all the possible solution, please choose the most suitable to your case, but note that if the browser is forced in Quirks mode it is developer's responsibility to maintain the quirks.

Regards,
Venelin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Matthew
Top achievements
Rank 1
answered on 05 Feb 2014, 11:15 AM
Thanks Venelin,

                            We are not able to download the internal build from the link you have mentioned .can you please help
0
Pavlina
Telerik team
answered on 07 Feb 2014, 06:16 PM
Hello Matthew,

The latest internal build that is available in your account can be downloaded from here.

Regards,
Pavlina
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Charles
Top achievements
Rank 1
answered on 31 Oct 2014, 08:57 PM
This is not a 'quirks' mode thing. It's a compatibility view issue.

If I may, I would like to suggest that your developers pay more attention to compatibility view issues before your product leaves the gate, since Microsoft pretty much forces all intranet sites to use compatibility view. Although you can turn this off, most companies in the US (not sure what other countries do) leave it on for intranet sites to keep the apps they've developed in-house looking the same.
0
Venelin
Telerik team
answered on 04 Nov 2014, 08:41 AM
Hi Charles,

As I've mentioned the issue (at least the one that Matthew described) is not related to Compatibility View mode of IE, since it cannot be replicated in any other scenario than Quirks Mode. If you are sure that your browser doesn't fall in Quirks mode and the issue is exactly the same like Matthew's issue I would suggest you to open support ticket and provide the following information at least:

1. The code relevant to the problem (even though it might not be runnable). In the best case I could provide a runnable sample project (it's always the best option).

2. Steps to reproduce (if any). E.g. "open the page --> you have to click this button --> a window will open --> the problem is observed

3. Screenshot if you believe it would be helpful (but in most cases it is).

Regards,
Venelin
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Matthew
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Matthew
Top achievements
Rank 1
Pavlina
Telerik team
Charles
Top achievements
Rank 1
Share this question
or