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

IE7 vs IE8 anomaly

1 Answer 12 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Johnathan
Top achievements
Rank 1
Johnathan asked on 09 Dec 2013, 09:03 PM
Is there anything in the RadGrid that would cause the GroupBy rendering to behave differently on IE7 vs IE8?

I have this grid defined:
<telerik:RadGrid ID="grdWorkflow" Skin="Outlook" AutoGenerateColumns="False" GridLines="None"
    Width="900px" OnNeedDataSource="grdWorkflow_NeedDataSource" OnItemDataBound="grdWorkflow_ItemDataBound"
    OnItemCreated="grdWorkflow_ItemCreated" OnColumnCreated="grdWorkflow_ColumnCreated"
    runat="server">
    <ClientSettings AllowColumnsReorder="false">
        <Resizing AllowColumnResize="true" />
    </ClientSettings>
    <MasterTableView Caption="List of workflows" DataKeyNames="GroupID" ClientDataKeyNames="GroupID,StepID"
        GroupsDefaultExpanded="true" TableLayout="Fixed" Style="float: left;" Summary="View Workflow">
        <NoRecordsTemplate>
            <div class="bold">
                There are no approvers set up to approve this ITPR. You must either select a manager
                to approve or contact your Customer Service Representative (CSR) for further assistance.
            </div>
        </NoRecordsTemplate>
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField HeaderValueSeparator=" " FieldName="StepName" />
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="ArtificialSortingField" />
                </GroupByFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
        <Columns>
            <telerik:GridBoundColumn UniqueName="StepID" DataField="StepID" Display="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="StepName" HeaderText="Step Name" DataField="StepName"
                Display="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="GroupID" HeaderText="GroupID" DataField="GroupID"
                Display="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="GroupName" HeaderText="Approval Group Name"
                DataField="GroupName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="RoleID" HeaderText="Role ID" DataField="RoleID"
                Display="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="RoleName" HeaderText="Role" DataField="RoleName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="SectionName" HeaderText="Section" DataField="SectionName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Approvers" HeaderText="Potential Approvers"
                DataField="Approvers">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

The output rendering on IE7 looks like:

<tr class="rgGroupHeader">
    <td class="rgGroupCol">
        <td colSpan="1">
            <p>
                ...

On IE8 & IE9 it renders to:

<tr class="rgGroupHeader">
     <td class="rgGroupCol">
         <td colSpan="4">
             <p>
                 ...

I could understand if different versions of IE do things differently, or if we had some rogue CSS changing things, but why is the RadGrid rendering differently by browser? This causes the grouping to look not look correct on the IE7.



1 Answer, 1 is accepted

Sort by
0
Accepted
Venelin
Telerik team
answered on 12 Dec 2013, 11:50 AM
Hello Johnathan,

You are correct. This is an issue that we are aware of. It will be fixed as soon as possible. In the meantime you can use the following workaround:

JavaScript:

window.$ = $telerik.$;
function onGridCreated(sender, args) {
    var cols = sender.get_masterTableView().get_dataItems()[0].get_element().cells,
        colsNumber = sender.get_masterTableView().get_columns().length,
        visibleColsCount = 0;
    //Count visible columns. rgGroupCol should not be count
    for(var i = 0; i < colsNumber; i++){
        if (cols[i].style.display != 'none' && !$(cols[i]).hasClass('rgGroupCol')) {
            visibleColsCount++;
        }
    }
    //Set the colspan attribute to a value equal to number of visible columns
    $('.RadGrid .rgGroupHeader td + td').attr('colspan', visibleColsCount);
}

ASPX:

<ClientSettings>
    <ClientEvents OnGridCreated="onGridCreated" />
</ClientSettings>

I have also attached a sample project that uses your code in order to better illustrate the approach.


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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Johnathan
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Share this question
or