IE7 vs IE8 anomaly

[Johnathan]

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.

[Venelin]

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