setting colspan="2" corrupts grid columns when HScrolling

4 posts, 1 answers
  1. Julian
    Julian avatar
    62 posts
    Member since:
    Apr 2015

    Posted 11 Jun 2015 Link to this post

    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 :)​

     

                                       

  2. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 16 Jun 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Julian
    Julian avatar
    62 posts
    Member since:
    Apr 2015

    Posted 16 Jun 2015 in reply to Konstantin Dikov Link to this post

    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!

     

  4. Julian
    Julian avatar
    62 posts
    Member since:
    Apr 2015

    Posted 16 Jun 2015 in reply to Julian Link to this post

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

    Thank you so much!

Back to Top