setting colspan="2" corrupts grid columns when HScrolling

[Julian]

I have a dynamically generated grid where the first 4 rows are basically headers. "Project Name", "Customer Name", "division Name", "Sector Name"

For each project we have 2 columns. "Plan" and "Assign".

The 4 headers I listed should span the plan and assign columns. See the attached screen shot "Report Before Scrolling (everything looks good).png" to see what the desired output should be.

 I used this thread as a starting point on how to make text in one row span 2 columns for a dynamically generated grid:

http://www.telerik.com/support/code-library/span-cells-in-grid-over-multiple-positions

My guess is that the part where you try to track the previousIndex compared to the current index is where I have issues.

When the report is first rendered to the screen it looks correct. Once you use the horizontal scroll the colspan values for the columns start to change. To see the HTML example of this I've included 2 screen shots. One called "HTML Before Scrolling - Colspan values look correct.png" and one called "HTML after scrolling -Colspan values have changed.png". 

Here is the OnPreRender code where I set the colspan and very feebly attempt to manage the indeces of the items (read help!):

 

protected void radGrid1_OnPreRender(object sender, EventArgs e)
       {
           var headerRows = HeaderRows;

           if (headerRows == null) return;

           foreach (var row in headerRows)
           {

               var currentProjectID = row["projectID"].ToString();

               var currentPlanColumnName = "Plan" + "_" + currentProjectID;
               var currentAssignColumnName = "Assign" + "_" + currentProjectID;

               foreach (GridDataItem dataItem in radGrid1.MasterTableView.Items)
               {
                   dataItem[currentPlanColumnName].ColumnSpan = 2;
                   dataItem[currentAssignColumnName].Visible = false;

                   int previousItemIndex = dataItem.ItemIndex - 1;
                   if (previousItemIndex >= 0)
                   {
                       if (dataItem["Employees"].Text == dataItem.OwnerTableView.Items[previousItemIndex]["Employees"].Text)
                       {
                           dataItem.OwnerTableView.Items[previousItemIndex]["Employees"].RowSpan = 2;
                           dataItem["Employees"].Visible = false;
                       }
                   }
               }
           }
       }

 As I stated above the code in the OnPreRender where it compares the dataItem text to the previousItemIndex's text is where I'm probably causing the issue??

 Any help is greatly appreciated. 

Thank you :)​

 

                                   

[Konstantin Dikov]

Hello Julian,

I have tried different scenario with merged cells, but only problem that I have encountered (which was not the same as the one you are describing) was with frozen columns. If you have enabled frozen column in your RadGrid, please note that this is not supported scenario and the merged cells will break the internal functionality of the frozen columns.

Nevertheless, if you do not have frozen column, please provide the markup of your grid, so we can test with your exact settings locally.


Best Regards,
Konstantin Dikov
Telerik

[Julian]

Here is the full .aspx page:

<%@ Page Title="" Language="C#" MasterPageFile="~/JabilProjectWithMenu.Master"
    AutoEventWireup="True" CodeBehind="MonthlyEmployeeResourceCapacityPlan.aspx.cs"
    Inherits="JabilProject.Reports.SiteReports.MonthlyEmployeeResourceCapacityPlan" %>


<%@ Register Src="../../Security/SecurityControl.ascx" TagName="SecurityControl"
TagPrefix="uc1" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>


<asp:Content ID="Content1" ContentPlaceHolderID="cphMain" runat="server">

    <script type="text/javascript">
        function onRequestStart(sender, args) {
            if (args.get_eventTarget().indexOf("btnExport") >= 0 ||
                args.get_eventTarget().indexOf("excelExportButton") >= 0 ||
                args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
                args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
                args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {
                args.set_enableAjax(false);
            }
        }
    </script>
    <%# Server.ScriptTimeout = 240 %>
    <style type="text/css">
         .RadGrid1_Telerik .rgRow td
         {
             border: solid 1px #000000;
         }

        .UpdateLabel { white-space: nowrap; }
    </style>

    <uc1:SecurityControl ID="SecurityControl1" runat="server"/>
    <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" BackgroundPosition="Top"
                                 Skin="Default">
    </telerik:RadAjaxLoadingPanel>

        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" Width="100%" LoadingPanelID="AjaxLoadingPanel1" ClientEvents-OnRequestStart="onRequestStart">
        <br/>
        <div style="text-align: left; margin-left: 250px;">
            <asp:Label ID="Label1" runat="server" CssClass="pageLabel">Monthly Capacity Review Report</asp:Label>
        </div>
        <br/>
        <table class="jpTable" style="width: 800px;">
            <tr>
                <td>Division:</td>
                <td>
                    <telerik:RadComboBox ID="radComboBoxDivisions" runat="server"  AutoPostBack="true"   Width="300px"
                                        OnSelectedIndexChanged="radComboBoxDivisions_OnSelectedIndexChanged">
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    </telerik:RadComboBox>
                </td>
            </tr>
             <tr>
                <td>Sectors:</td>
                <td>
                    <telerik:RadComboBox ID="radComboBoxSectors" runat="server" Width="300" AutoPostBack="true"
                                         OnDataBound="radComboBoxSectors_OnDataBound">
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td>Site:</td>
                <td>
                    <telerik:RadComboBox ID="radComboBoxSite" runat="server" Width="300" AutoPostBack="true"
                                           OnSelectedIndexChanged="radComboBoxSite_OnSelectedIndexChanged">

                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td>
                    Cost Center:
                </td>
                <td>
                    <telerik:RadComboBox runat="server" ID="radComboBoxCostCenters" AutoPostBack="true" Width="300px">
                        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    </telerik:RadComboBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblStartMonthYear" runat="server" Text="Start Date:"></asp:Label>
                </td>
                <td>
                    <telerik:RadMonthYearPicker ID="startDateMonthYearPicker" runat="server" Culture="en-US" MinDate="03/2012"
                        AutoPostBack="true">
                    </telerik:RadMonthYearPicker>
                </td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnRunReport" OnClick="btnRunReport_OnClick" runat="server" Text="Run Report"/>
                    <asp:Label ID="lblError" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
                </td>
                <td><asp:Checkbox ID="checkBoxIncludeActualHours" runat="server"/>Include Actual Hours</td>
                <%--<td>
                    <div style="float: right">
                        <telerik:RadButton runat="server" ID="btnExport" Text="Export to Excel" Visible="true" OnClick="btnExport_OnClick">
                            <Icon PrimaryIconUrl="~/Images/Excel-icon.png"/>
                        </telerik:RadButton>
                    </div>
                </td>--%>
            </tr>

        </table>
        <br/>
        <br/>

        <telerik:RadGrid ID="radGrid1" runat="server"
                GridLines="Vertical" Skin="Telerik"  Width="1200" Height="650"
                OnItemDataBound="radGrid1_OnItemDataBound"
                OnColumnCreated="radGrid1_OnColumnCreated"
                OnDataBound="radGrid1_OnDataBound"
                OnExportCellFormatting="radGrid1_OnExportCellFormatting"
                OnNeedDataSource="radGrid1_OnNeedDataSource"
                OnPreRender="radGrid1_OnPreRender"
                AllowSorting="false" ShowGroupPanel="true" ShowFooter="true" >
                <ClientSettings AllowDragToGroup="false" Resizing-AllowColumnResize="true">
                <Scrolling AllowScroll="true" FrozenColumnsCount="1" SaveScrollPosition="true" UseStaticHeaders="true" />
                </ClientSettings>
                <ExportSettings Excel-Format="Html" ExportOnlyData="true" Excel-FileExtension="xls" ></ExportSettings>
               <MasterTableView CommandItemDisplay="Top" ShowGroupFooter="false">
                <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="False"/>
                <HeaderStyle Font-Bold="true" Width="100" />
                                <Columns/>
            </MasterTableView>
            <ClientSettings AllowDragToGroup="false" AllowColumnsReorder="true" />
            <GroupingSettings />
            </telerik:RadGrid>


        <br/>
        <br/>
    </telerik:RadAjaxPanel>
</asp:Content>

 

also here is the second section of that code example from the forum thread i linked in my original post. This is where I thought the problem was. Could you shed some light on exactly how that previousItemIndex'ing logic works?

 

int previousItemIndex = dataItem.ItemIndex - 1;
                if (previousItemIndex >= 0)
                {
                    if (dataItem["Column1"].Text == dataItem.OwnerTableView.Items[previousItemIndex]["Column1"].Text)
                    {
                        dataItem.OwnerTableView.Items[previousItemIndex]["Column1"].RowSpan = 2;
                        dataItem["Column1"].Visible = false;
                    }
                }

 

 Thank  you!

 

[Julian]

Forget all of that!! I posted before checking your suggestion. FrozenColumnCount was indeed the problem!

Thank you so much!