IE7 vs IE8 anomaly

2 posts, 1 answers
  1. Johnathan
    Johnathan avatar
    23 posts
    Member since:
    Jul 2010

    Posted 09 Dec 2013 Link to this post

    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"
        <ClientSettings AllowColumnsReorder="false">
            <Resizing AllowColumnResize="true" />
        <MasterTableView Caption="List of workflows" DataKeyNames="GroupID" ClientDataKeyNames="GroupID,StepID"
            GroupsDefaultExpanded="true" TableLayout="Fixed" Style="float: left;" Summary="View Workflow">
                <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.
                        <telerik:GridGroupByField HeaderValueSeparator=" " FieldName="StepName" />
                        <telerik:GridGroupByField FieldName="ArtificialSortingField" />
                <telerik:GridBoundColumn UniqueName="StepID" DataField="StepID" Display="false">
                <telerik:GridBoundColumn UniqueName="StepName" HeaderText="Step Name" DataField="StepName"
                <telerik:GridBoundColumn UniqueName="GroupID" HeaderText="GroupID" DataField="GroupID"
                <telerik:GridBoundColumn UniqueName="GroupName" HeaderText="Approval Group Name"
                <telerik:GridBoundColumn UniqueName="RoleID" HeaderText="Role ID" DataField="RoleID"
                <telerik:GridBoundColumn UniqueName="RoleName" HeaderText="Role" DataField="RoleName">
                <telerik:GridBoundColumn UniqueName="SectionName" HeaderText="Section" DataField="SectionName">
                <telerik:GridBoundColumn UniqueName="Approvers" HeaderText="Potential Approvers"

    The output rendering on IE7 looks like:

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

    On IE8 & IE9 it renders to:

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

    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.

  2. Answer
    Venelin avatar
    352 posts

    Posted 12 Dec 2013 Link to this post

    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:


    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')) {
        //Set the colspan attribute to a value equal to number of visible columns
        $('.RadGrid .rgGroupHeader td + td').attr('colspan', visibleColsCount);


        <ClientEvents OnGridCreated="onGridCreated" />

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

    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.
Back to Top