Problems with horizontal scrolling and frozen columns

[Peter]

I have also posted to this thread which contained descriptions of similar problems:

   http://www.telerik.com/community/forums/aspnet-ajax/grid/align-gridlines.aspx

I am trying to get horizontal scrolling to work with frozen columns.  I am not using the GridLines property.  The problem I am having is that when the grid scrolls to the right, things go haywire:

   Some columns that are not frozen do NOT always scroll - I have column 1 frozen, the rest not frozen.  When I scroll right, columns 2 and 3 do NOT scroll when the rest do, so the grid changes from displaying columns 1,2,3,4, and 5, to 1,2,3, 5, and 6.   Column 5 also ends up with a grid line in the middle of the column where it should not be.  If I continue to scroll to the right, columns 2 and 3 finally move but an extra blank column appears after column 3.  These errors do not correct themselves until I scroll all the way back to the left.

Any help would be appreciated.

Thanks,
Peter

[Princy]

Hello Peter,

I tried the same scenario at my end and its working fine. You can try downloading the latest Trial Version where you will find the live demo on frozen columns. Give a try with the demo and see if the functionality works.  Below given is the path to the live demo which you can find once you download the trial version.
RadControls_for_ASP.NET_AJAX_2008_3_1125_trial\Live Demos\Grid\Examples\GeneralFeatures\FrozenColumns

Thanks
Princy.

[Peter]

I have a related problem - I cannot figure out how to enable horizontal scrolling without also enabling vertical scrolling.  I want to allow the grid to contain more columns than can be readably displayed, but still keep the paging mechanism and not have the grid scroll vertically.

Peter

[Princy]

Hello Peter,

To render merely the horizontal scroll and avoid the appearance of the vertical scroll, make sure that the height of the records in the grid does not exceed the ClientSettings -> Scrolling -> ScrollHeight scroll setting.

You can go through the following online demo link to learn more about scrolling.
Basic scrolling

Thanks
Princy.

[Peter]

Thanks, that tip helps, but I still am a long way from having a complete solution - I have also posted to this thread:
 
http://www.telerik.com/community/forums/aspnet-ajax/grid/align-gridlines.aspx

Basically, we need to have a grid that scrolls horizontally to show additional columns, but operates vertically without scrolling the grid, and also allows the page size to vary.  I can play with the grid height, scroll height, and page size to get the vertical scroll bar to disappear, but as soon as I change one of those numbers, the scroll bar can appear again.  It is also difficult to control the height of the grid, as the possibility of varying heights for the header or grid lines (if data wraps to multiple lines) and changing page size all change the rendered size and threaten to bring back the vertical scroll.

 

In addition to keeping the vertical scroll bars out of the picture, I cannot get the horizontal scrolling to work correctly, as I described in the other thread.  I have double-checked to make sure I am following all the rules for border, margin, and padding size matching, but the headings still do not display correctly.  The problem is clearly not a simple misalignment, but appears to be "buggy" behavior, as I am getting extra grid lines in the middle of columns, extra blank columns, columns not scrolling even though they are not frozen, etc., etc.

I will take a look at the sample project, but if you can point me to something that shows how to accomplish all of the above, that would be greatly appreciated.

Thanks,
Peter

 

 

[Peter]

I noticed something else that I am hoping will be a clue to the problem.  With the demo, the horizontal scrolling of the grid is very smooth, with hidden columns scrolling into or out of view the way you would expect.  With our software, the scrolling is very jumpy, with columns or parts of columns popping into or out of view suddenly, after the scroll bar has been dragged to a certain point.  That is also the point (when the "jumping" happens) that the errors with extraneous grid lines, blank columns, etc. appear.

Peter

[Dimo]

Hello Peter,

Can you please send us an example, which demonstrates the "jumpy" scrolling in your application, so that we can have a look at it? You should be aware that the more columns you have, the slower frozen scrolling works, because of the great amount of Javascript operations that are executed during horizontal scrolling.

Also, I would ask you not to discuss the same problem in two forum threads at the same time, as it may cause overhead for Telerik support officers or anyone else who wishes to reply. We will address your other forum thread related to cell paddings and borders shortly.

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter]

Here is the RadGrid declaration:

        <telerik:RadGrid
            ID="grdTest"
            runat="server"
            AllowPaging="true"
            AllowSorting="true"
            AllowAutomaticDeletes="False"
            AutoGenerateColumns="false"
            AllowFilteringByColumn="true"
            onneeddatasource="grdTest_NeedDataSource"
            Skin=""
            BorderStyle="Solid"
            BorderWidth="1px"
            BorderColor="Black"
            CssClass="RadGrid"
            Width="600px"
            Height="370px"
            onitemdatabound="grdTest_ItemDataBound">

            <ClientSettings>
               <Scrolling
                  SaveScrollPosition="true"
                  EnableVirtualScrollPaging="false"
                  AllowScroll="true"
                  ScrollHeight="2000"
                  FrozenColumnsCount="1"
                  UseStaticHeaders="true" />
               <Resizing
                  AllowColumnResize="true"
                  AllowRowResize="false"
                  EnableRealTimeResize="true" />
            </ClientSettings>

            <HeaderContextMenu EnableTheming="True">
               <CollapseAnimation Type="OutQuint" Duration="200">
               </CollapseAnimation>
            </HeaderContextMenu>

            <MasterTableView
               CellPadding="3"
               TableLayout="Auto"
               AllowMultiColumnSorting="true" >

               <PagerTemplate>
               <table border="0" cellpadding="3" width="100%" class="RadGridPager">
                <tr>

                 <td>Page&nbsp;size:</td>
                 <td>
                    <asp:DropDownList ID="cboPageSize"
                       runat="server"
                       AutoPostBack="true"
                       OnSelectedIndexChanged="cboPageSize_SelectedIndexChanged">

                    <asp:ListItem Text="1" Value="1" />
                    <asp:ListItem Text="2" Value="2" />
                    <asp:ListItem Text="3" Value="3" />
                    <asp:ListItem Text="4" Value="4" />
                    <asp:ListItem Text="5" Value="5" />
                    <asp:ListItem Text="6" Value="6" />
                    <asp:ListItem Text="7" Value="7" />
                    <asp:ListItem Text="8" Value="8" />
                    <asp:ListItem Text="9" Value="9" />
                    <asp:ListItem Text="10" Value="10" />
                    <asp:ListItem Text="11" Value="11" />
                    <asp:ListItem Text="12" Value="12" />
                    <asp:ListItem Text="13" Value="13" />
                    <asp:ListItem Text="14" Value="14" />
                    <asp:ListItem Text="15" Value="15" />
                    <asp:ListItem Text="16" Value="16" />
                    <asp:ListItem Text="17" Value="17" />
                    <asp:ListItem Text="18" Value="18" />
                    <asp:ListItem Text="19" Value="19" />
                    <asp:ListItem Text="20" Value="20" />
                    <asp:ListItem Text="21" Value="21" />
                    <asp:ListItem Text="22" Value="22" />
                    <asp:ListItem Text="23" Value="23" />
                    <asp:ListItem Text="24" Value="24" />
                    <asp:ListItem Text="25" Value="25" />
                    </asp:DropDownList>
                 </td>

                 <td>
                    <img src="images/PagerSeparator.jpg" />
                 </td>

                 <td style="border-style:none;">

                   <asp:Button
                      ID="Button1"
                      runat="server"
                      CssClass="clsPagerButton"
                      BorderStyle="Ridge"
                      Text="|<"
                      Value="First"
                      CommandName="Page"
                      CausesValidation="false"
                      CommandArgument="First" />
                 </td>
                 <td style="border-style:none;">

                   <asp:Button
                      ID="Button5"
                      runat="server"
                      CssClass="clsPagerButton"
                      BorderStyle="Ridge"
                      Text="<"
                      Value="Prev"
                      CommandName="Page"
                      CausesValidation="false"
                      CommandArgument="Prev" />
                 </td>

                 <td>&nbsp;</td>

                 <td style="border-style:none;">

                   <asp:TextBox
                      ID="tbPageNumber"
                      runat="server"
                      Columns="3"
                      Text='<%# (int)DataBinder.Eval(Container, "OwnerTableView.CurrentPageIndex") + 1 %>' />
                   <asp:RangeValidator
                      runat="Server"
                      ID="RangeValidator1"
                      ControlToValidate="tbPageNumber"
                      EnableClientScript="true"
                      MinimumValue="1"
                      Type="Integer"
                      MaximumValue='<%# DataBinder.Eval(Container, "Paging.PageCount") %>'
                      ErrorMessage='<%# "Value must be in the range of 1 - " + DataBinder.Eval(Container, "Paging.PageCount") %>'
                      Display="Dynamic">
                   </asp:RangeValidator>

                 </td>
                 <td style="border-style:none;">

                   <asp:Button
                       ID="Button4"
                       runat="server"
                       CssClass="clsPagerButton"
                       BorderStyle="Ridge"
                       Text="Go"
                       Value="Go"
                       CommandName="CustomChangePage" />
                 </td>

                 <td>&nbsp;</td>

                 <td style="border-style:none;">
                   <asp:Button
                       ID="Button6"
                       runat="server"
                       CssClass="clsPagerButton"
                       BorderStyle="Ridge"
                       Text=">"
                       Value="Next"
                       CommandName="Page"
                       CausesValidation="false"
                       CommandArgument="Next" />

                 <td style="border-style:none;">

                   <asp:Button
                      ID="Button7"
                      runat="server"
                      CssClass="clsPagerButton"
                      BorderStyle="Ridge"
                      Text=">|"
                      Value="Last"
                      CommandName="Page"
                      CausesValidation="false"
                      CommandArgument="Last" />
                 </td>

                 <td>
                    <img src="images/PagerSeparator.jpg" />
                 </td>

                 <td style="border-style:none;width:100%" align="right">
                   <asp:LinkButton
                      ID="LinkButton6"
                      runat="server"
                      CssClass="RadGridPager"
                      CommandName="RebindGrid"
                      CausesValidation="false">
                     Refresh data
                   </asp:LinkButton>
                 </td>
                </tr>
               </table>
               </PagerTemplate>

               <Columns>

                  <telerik:GridBoundColumn
                        DataField="FULL_NAME"
                        DataType="System.String"
                        HeaderText="1: Employee name"
                        Resizable="true"
                        AllowFiltering="true"
                        HeaderStyle-Width="200px"
                        ItemStyle-BackColor="#aaaaaa"
                        UniqueName="FullName" >
                     <HeaderStyle Width="200px"></HeaderStyle>
                     <ItemStyle BackColor="#AAAAAA"></ItemStyle>
                  </telerik:GridBoundColumn>

                   <telerik:GridBoundColumn
                        DataField="EMP_ID"
                        DataType="System.Int32"
                        HeaderText="2: Employee ID"
                        Resizable="true"
                        AllowFiltering="false"
                        HeaderStyle-Width="150px"
                        UniqueName="EmpID" >
                     <HeaderStyle Width="150px"></HeaderStyle>
                  </telerik:GridBoundColumn>

                   <telerik:GridBoundColumn
                        DataField="SSN"
                        DataType="System.String"
                        HeaderText="3: SSN"
                        Resizable="true"
                        AllowFiltering="false"
                        HeaderStyle-Width="125px"
                        UniqueName="SSN" >
                     <HeaderStyle Width="125px"></HeaderStyle>
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn
                        DataField="STATUS"
                        DataType="System.String"
                        HeaderText="4: Status"
                        Resizable="true"
                        AllowFiltering="false"
                        HeaderStyle-Width="70px"
                        UniqueName="STATUS" >
                     <HeaderStyle Width="70px"></HeaderStyle>
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn
                        DataField="RUN_DTTM"
                        DataType="System.String"
                        HeaderText="5: Run date/time"
                        Resizable="true"
                        AllowFiltering="false"
                        HeaderStyle-Width="150px"
                        UniqueName="RUN_DTTM" >
                     <HeaderStyle Width="150px"></HeaderStyle>
                  </telerik:GridBoundColumn>

                  <telerik:GridBoundColumn
                        DataField="PE_DATE"
                        DataType="System.String"
                        HeaderText="6: Period End"
                        Resizable="true"
                        AllowFiltering="false"
                        HeaderStyle-Width="150px"
                        UniqueName="PE_DATE" >
                     <HeaderStyle Width="150px"></HeaderStyle>
                  </telerik:GridBoundColumn>

               </Columns>

               <RowIndicatorColumn>
                  <HeaderStyle CssClass="ReportsCaption">
                  </HeaderStyle>
               </RowIndicatorColumn>

               <ExpandCollapseColumn>
                  <HeaderStyle CssClass="ReportsCaption">
                  </HeaderStyle>
               </ExpandCollapseColumn>

               <ItemStyle CssClass="Reports" HorizontalAlign="Left" Wrap="false"></ItemStyle>
               <AlternatingItemStyle CssClass="Reports" HorizontalAlign="Left" Wrap="false"></AlternatingItemStyle>
               <HeaderStyle CssClass="ReportsCaption" HorizontalAlign="Left" Wrap="false"></HeaderStyle>

            </MasterTableView>

            <AlternatingItemStyle  Wrap="false" CssClass="Reports" />
            <ItemStyle CssClass="Reports" Wrap="false"  />
            <HeaderStyle Wrap="false" CssClass="ReportsCaption"/>
            <PagerStyle
               CssClass="Pager"
               Mode="NextPrevNumericAndAdvanced"
               Position="TopAndBottom"
               ShowPagerText="false" />
            <ActiveItemStyle CssClass="RadGridSelection" />

            <FilterMenu>

               <CollapseAnimation Type="OutQuint" Duration="200">
               </CollapseAnimation>
            </FilterMenu>

         </telerik:RadGrid>

Here is the relevant code-behind:

      private DataTable table = null;


      protected void cmdBind_Click(object sender, EventArgs e)
      {
         table = null;
         getData();
         grdTest.DataSource = table;
         grdTest.DataBind();

      }


      protected void grdTest_NeedDataSource
         (object source, GridNeedDataSourceEventArgs e)
      {
         getData();
         grdTest.DataSource = table;
      }


      private void getData()
      {
         if (table == null)
         {
            int pClient = 0;
            int year = 0;
            if ((int.TryParse(txtPClientID.Text, out pClient)) &&
                (int.TryParse(txtTaxYear.Text, out year)))
            {
               table =
                  myReportManager.GetReportListDataTableByPClientID
                     (sessionID, pClient, year);
            }
         }
      }

      protected void grdTest_ItemDataBound(object sender, GridItemEventArgs e)
      {
         if (e.Item is GridDataItem)
         {
            GridDataItem dataItem = e.Item as GridDataItem;
            try
            {
               string s = dataItem["SSN"].Text;
               if (s.Length == 9)
               {
                  dataItem["SSN"].Text =
                     s.Substring(0, 3) + "-" +
                     s.Substring(3, 2) + "-" +
                     s.Substring(5, 4);
               }
            }
            catch { }
            return;
         }

         if (e.Item is GridPagerItem)
         {
            GridPagerItem pagerItem = e.Item as GridPagerItem;
            DropDownList ps = pagerItem.FindControl("cboPageSize") as DropDownList;
            ps.SelectedValue = grdTest.MasterTableView.PageSize.ToString();
         }

      }

      protected void cboPageSize_SelectedIndexChanged(object sender, EventArgs e)
      {
         int pageSize =
            int.Parse(((System.Web.UI.WebControls.DropDownList)(sender)).Text);
         grdTest.MasterTableView.PageSize = pageSize;
         grdTest.Rebind();
      }

And here is the CSS:

a:link
{
    text-decoration: underline;
    font-weight: bold;
    color: #0000ff;
}
a:visited
{
    text-decoration: underline;
   font-weight: bold;
    color: #9900ff;
}
a:hover
{
    text-decoration: none;
    color: #ffffff;
    background-color: #0000ff;
}
a:active
{
    text-decoration: underline;
    color: #66CC99;
}

.RadGrid a:link
{
    text-decoration: underline;
    color: #ffcc00;
}
.RadGrid a:visited
{
    text-decoration: underline;
    color: #ffcc00;
}
.RadGrid a:hover
{
    text-decoration: none;
    color: #333333;
    background-color: #FFFFFF;
}

.RadGridPager a:active
{
    text-decoration: underline;
    color: #66CC99;
}

.RadGridPager a:link
{
    text-decoration: underline;
    color: #ffffff;
}
.RadGridPager a:visited
{
    text-decoration: underline;
    color: #ffffff;
}
.RadGridPager a:hover
{
    text-decoration: none;
    color: #333333;
    background-color: #FFFFFF;
}
.RadGridPager a:active
{
    text-decoration: underline;
    color: #66CC99;
}
.RadGridSelection
{
   background-color: Blue;
   color: White;
}
.RadGridFilterMenu
{
   background-color: Blue;
   color: White;
}

.rmRootGroup
{
   background-color: Gray !important;
   color: White !important;
   border-right: 1px !important;
   padding-right: 3px !important;
   border-left: 1px !important;
   padding-left: 3px !important;
   border-top: 1px !important;
   padding-bottom: 0px !important;
   margin: 0px !important;
   padding-top: 0px !important;
   border-bottom: 1px !important;
}
.rmItem
{
   background-color: Gray !important;
   color: White !important;
   border-right: 1px !important;
   padding-right: 3px !important;
   border-left: 1px !important;
   padding-left: 3px !important;
   border-top: 1px !important;
   padding-top: 0px !important;
   padding-bottom: 0px !important;
   margin: 0px !important;

   border-bottom: 1px !important;
}
.rmItem:hover
{
   background-color: Black !important;
   color: Yellow !important;
}
.rmLink:hover
{
   background-color: Black !important;
   color: Yellow !important;
}
.rmLink
{
   background-color: Gray !important;
   color: White !important;
   text-decoration: underline !important;
}
.rmFocused
{
   background-color: Black !important;
   color: Yellow !important;
}
.rmText
{
   background-color: Gray !important;
   color: White !important;
}
.rmText:hover
{
   background-color: Black !important;
   color: Yellow !important;
}


BODY.Emp
{
    margin-top: 0px;
    margin-left: 0px;
    background-color: #efede7
}
TD.Emp
{
    font-weight: bold;
    font-size: 8pt;
    color: black;
    font-family: Verdana, Arial;
    background-color: silver
}
TD.EmpCaption
{
    font-weight: bold;
    font-size: 9pt;
    color: #ffcc00;
    font-family: Verdana, Arial;
    background-color: black
}
BODY.Client
{
    margin-top: 0px;
    margin-left: 0px;
    background-color: #efede7
}
TD.Client
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    background-color: silver
}
TD.ClientCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    background-color: black
}
BODY.Admin
{
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 0px;
    BACKGROUND-COLOR: #efede7
}
TD.Admin
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
TD.AdminCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
BODY.Payroll
{
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 0px;
    BACKGROUND-COLOR: #efede7
}
TD.Payroll
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver;
    padding-bottom:4px;
}
TD.PayrollCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
DIV.PayrollCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
INPUT.Submit
{
    BORDER-TOP-WIDTH: 5px;
    FONT-WEIGHT: bold;
    BORDER-LEFT-WIDTH: 5px;
    BORDER-BOTTOM-WIDTH: 5px;
    COLOR: white;
    HEIGHT: 50px;
    BACKGROUND-COLOR: #c20008;
    BORDER-RIGHT-WIDTH: 5px
}
TD.PayrollPageToolBar
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: white;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
BODY.Tutorial
{
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 0px;
    BACKGROUND-COLOR: #efede7
}
TD.Tutorial
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
TD.TutorialCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
BODY.PayCalc
{
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 0px;
    BACKGROUND-COLOR: #efede7
}
TD.PayCalc
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
TD.PayCalcCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
TD.CheckEmpInfo
{
    BACKGROUND-COLOR: #d9e3e6
}
TD.CheckCurrEarnings
{
    BACKGROUND-COLOR: #fff0f8
}
TD.CheckYTDEarnings
{
    BACKGROUND-COLOR: #d9e3e6
}
TD.CheckCompInfo
{
    BACKGROUND-COLOR: #ffffff
}
TD.CheckTaxDeductions
{
    BACKGROUND-COLOR: #fff0f8
}
TD.CheckAccruals
{
    BACKGROUND-COLOR: #fff0f8
}
TD.CheckDirDepNetPay
{
    BACKGROUND-COLOR: #d9e3e6
}
TD.CheckActualCheck
{
    BACKGROUND-COLOR: #fff0f8
}
BODY.Reports
{
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 0px;
    BACKGROUND-COLOR: #efede7
}
TD.Reports
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
TD.ReportsCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
TR.Reports
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
TR.ReportsCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
TH.ReportsCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}
TR.Pager
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffffff;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: #333333
}
A.HomeLink
{
    FONT: bold 14pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    COLOR: #c20008;
    TEXT-DECORATION: none
}
SPAN.HomeHelpText
{
    FONT: bold 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    COLOR: black
}
TABLE.Home
{
    BORDER-RIGHT: gray thin solid;
    BORDER-TOP: gray thin solid;
    BORDER-LEFT: gray thin solid;
    BORDER-BOTTOM: gray thin solid
}
BODY.Home
{
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 0px;
    BACKGROUND-COLOR: #efede7
}
A.UpdateLink
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: blue;
    FONT-FAMILY: Verdana, Arial;
    TEXT-DECORATION: none
}
BODY.Welcome
{
    BACKGROUND-COLOR: #990000
}
TD.LogoWelcome
{
    BACKGROUND-COLOR: #ffffff
}
TD.ImageWelcome
{
    BACKGROUND-COLOR: #ffffff
}
.DefaultLink
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: blue;
    FONT-FAMILY: Verdana, Arial;
    TEXT-DECORATION: none
}
INPUT.clsButton
{
    FONT-WEIGHT: bold;
    COLOR: white;
    BACKGROUND-COLOR: #c20008
}
INPUT.clsPagerButton
{
    FONT-WEIGHT: bold;
    COLOR: white;
    BACKGROUND-COLOR: black
}
INPUT.FormField
{
    FONT-SIZE: 10pt;
    FONT-FAMILY: Verdana, Arial
}
INPUT.ReadOnlyField
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    BORDER-TOP-STYLE: none;
    FONT-FAMILY: Verdana, Arial;
    BORDER-RIGHT-STYLE: none;
    BORDER-LEFT-STYLE: none;
    BACKGROUND-COLOR: transparent;
    BORDER-BOTTOM-STYLE: none
}
INPUT.SelectField
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial
}
INPUT.RadioField
{
}
INPUT.ChkBoxField
{
}
TD.CellDefault
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    FONT-FAMILY: Verdana, Arial
}
TD.Login
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: #efede7
}
.TopFrame
{
    BACKGROUND-COLOR: gray
}
A.Header, SPAN.Header
{
    FONT: bold 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    COLOR: #ffcc00;
    TEXT-DECORATION: none
}


DIV.Errors
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    BORDER-LEFT: 1px solid;
    WIDTH: 95%;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    POSITION: relative;
    BACKGROUND-COLOR: #f0ba25
}
TD.NormalError
{
    FONT-SIZE: 11px;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
TD.TopError
{
    FONT-SIZE: 12px;
    COLOR: white;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: black
}
.topNavLink
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: white;
    FONT-FAMILY: Verdana, Arial;
    TEXT-DECORATION: none
}
TD.MainMenu
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: white;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: gray
}
A.EmpMenu
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #c20008;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none
}
A.SortMenu
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #c20008;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none
}
A.ClientMenu
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #c20008;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none
}
A.AdminMenu
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #c20008;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    TEXT-DECORATION: none
}
SELECT.MenuEmpDD
{
    COLOR: black;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #f0ecf8
}
SELECT.MenuClientDD
{
    COLOR: black;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #f0ecf8
}
SELECT.MenuAdminDD
{
    COLOR: black;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #f0ecf8
}
SELECT.MainMenuDD
{
    BORDER-TOP: black 1px solid;
    FONT-WEIGHT: bold;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    BACKGROUND-COLOR: #f0ecf8
}
.PageNames
{
    FONT-WEIGHT: bold;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial
}
.PrevNextLink
{
    FONT-WEIGHT: bold;
    COLOR: #e1e1e1;
    TEXT-DECORATION: none
}
TD.CalcMsg
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 18px;
    BORDER-TOP-STYLE: ridge;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BORDER-RIGHT-STYLE: ridge;
    BORDER-LEFT-STYLE: ridge;
    BACKGROUND-COLOR: #ffe4c4;
    BORDER-BOTTOM-STYLE: ridge
}
INPUT.CalcMsgSeconds
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 18pt;
    BORDER-TOP-STYLE: none;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BORDER-RIGHT-STYLE: none;
    BORDER-LEFT-STYLE: none;
    BACKGROUND-COLOR: transparent;
    BORDER-BOTTOM-STYLE: none
}
TD.MenuBuffer
{
    HEIGHT: 12px
}
TABLE.List
{
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    cell-spacing: 1px
}
TABLE.Data
{
    BORDER-RIGHT: black 1px outset;
    BORDER-TOP: black 1px outset;
    BORDER-LEFT: black 1px outset;
    BORDER-BOTTOM: black 1px outset
}
TABLE.SubMenu
{
    BACKGROUND-COLOR: gray;
    BORDER-BOTTOM-STYLE: ridge
}
TABLE.MainMenu
{
    BACKGROUND-COLOR: black
}
SPAN.ClientName
{
    COLOR: #e1e1e1
}
SPAN.EmpNameReadOnly
{
    COLOR: #e1e1e1
}
SELECT.EmpList
{
    COLOR: black;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #f0ecf8
}
DIV.ErrorPage
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    BORDER-LEFT: 1px solid;
    WIDTH: 95%;
    BORDER-BOTTOM: 1px solid;
    POSITION: relative;
    BACKGROUND-COLOR: #e1e1e1
}
TD.ErrorCell
{
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
TD.BottomCell
{
    COLOR: white;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
TABLE.Calendar
{
    BORDER-RIGHT: black 3px double;
    BORDER-TOP: black 3px double;
    BORDER-LEFT: black 3px double;
    BORDER-BOTTOM: black 3px double
}
TD.Calendar
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    BORDER-LEFT: 1px solid;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #e1e1e1
}
TD.CalHeader
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    FONT-WEIGHT: bold;
    FONT-SIZE: medium;
    BORDER-LEFT: 1px solid;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #e1e1e1
}
TD.CalWeekend
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    BORDER-LEFT: 1px solid;
    COLOR: white;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #a0a0a0
}
TD.CalHoliday
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    BORDER-LEFT: 1px solid;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: white
}
TD.CalWeekendHeader
{
    BORDER-RIGHT: 1px solid;
    BORDER-TOP: 1px solid;
    FONT-WEIGHT: bold;
    FONT-SIZE: medium;
    BORDER-LEFT: 1px solid;
    COLOR: white;
    BORDER-BOTTOM: 1px solid;
    FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
    BACKGROUND-COLOR: #a0a0a0
}
INPUT.Hyper
{
    border-right: medium none;
    border-top: medium none;
    font-weight: bold;
    font-size: 10pt;
    border-left: medium none;
    width: 130px;
    cursor: hand;
    color: blue;
    border-bottom: medium none;
    background-color: transparent;
    text-align: left;
    text-decoration: underline
}

A.Hyper
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: left;
}
TD.hyper
{
    BACKGROUND-COLOR: #e8e6dd
}
TD.hyper2
{
    BACKGROUND-COLOR: #e8e6dd
}
INPUT.Tree
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    BORDER-LEFT: medium none;
    WIDTH: 270px;
    cursor: hand;
    COLOR: black;
    BORDER-BOTTOM: medium none;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: left
}
TABLE.Tree
{
    BORDER-RIGHT: 0px;
    PADDING-RIGHT: 0px;
    BORDER-TOP: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    BORDER-LEFT: 0px;
    PADDING-TOP: 0px;
    BORDER-BOTTOM: 0px;
    BACKGROUND-COLOR: silver
}
TD.TreeTotal
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
TD.Tree
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 8pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
A.Tree
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    WIDTH: 270pt;
    COLOR: blue;
    TEXT-DECORATION: underline
}
INPUT.Tree_Link
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    BORDER-LEFT: medium none;
    WIDTH: 270px;
    cursor: hand;
    COLOR: blue;
    BORDER-BOTTOM: medium none;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: left;
    TEXT-DECORATION: underline
}
INPUT.Tree_RateLink
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    PADDING-LEFT: 15px;
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    BORDER-LEFT: medium none;
    WIDTH: 270px;
    COLOR: blue;
    BORDER-BOTTOM: medium none;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: left;
    TEXT-DECORATION: underline
}
TD.AdminPlain
{
    FONT-WEIGHT: 500;
    FONT-SIZE: 9pt;
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: silver
}
INPUT.FileLoad
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    BORDER-LEFT: medium none;
    WIDTH: 75px;
    cursor: hand;
    COLOR: blue;
    BORDER-BOTTOM: medium none;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center;
    TEXT-DECORATION: underline
}
DIV.rpt_page
{
    BORDER-RIGHT: maroon 3px double;
    BORDER-TOP: maroon 3px double;
    BORDER-LEFT: maroon 3px double;
    WIDTH: 750px;
    BORDER-BOTTOM: maroon 3px double
}
DIV.rpt_page2
{
    BORDER-RIGHT: maroon 3px double;
    BORDER-TOP: maroon 3px double;
    BORDER-LEFT: maroon 3px double;
    WIDTH: 100%;
    BORDER-BOTTOM: maroon 3px double
}
TD.HomeLink
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 14pt;
    COLOR: #c20008;
    LINE-HEIGHT: normal;
    FONT-STYLE: normal;
    FONT-VARIANT: normal
}
TABLE.SelfServe_Double
{
    BORDER-RIGHT: maroon 3px double;
    BORDER-TOP: maroon 3px double;
    BORDER-LEFT: maroon 3px double;
    BORDER-BOTTOM: maroon 3px double
}
TABLE.SelfServe
{
    BORDER-RIGHT: lightgrey 1px solid;
    BORDER-TOP: lightgrey 1px solid;
    BORDER-LEFT: lightgrey 1px solid
}
TD.SelfServe10
{
    FONT-SIZE: 10pt;
    BORDER-BOTTOM: lightgrey 1pt solid
}
TD.SelfServe8
{
    FONT-SIZE: 8pt;
    BORDER-BOTTOM: lightgrey 1pt solid
}
TD.SelfServe9
{
    FONT-SIZE: 9pt;
    BORDER-BOTTOM: lightgrey 1pt solid
}
DIV.PageSplit
{
    PAGE-BREAK-BEFORE: always
}
TABLE.TaxForm
{
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    BORDER-LEFT: black 1px solid;
    BORDER-BOTTOM: black 1px solid;
    cell-spacing: 1px
}
TD.TaxCaption
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #ffcc00;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: black
}

Note that myReportManager.GetReportListDataTableByPClientID returns a DataTable object.  I cannot post all of the code due to privacy and security rules (we are a payroll company.)  I am assuming that any DataTable object can be used to see the behavior of the grid.

Peter

[Dimo]

Hello Peter,

I created a sample web page based on the provided snippets and the RadGrid scrolling seems to be working OK. I have attached the page.

Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter]

Well, it would seem that my code is correct if the page you posted works correctly on your end, but when I take your page and open on my side, I see the same errant behavior (non-frozen columns not scrolling, extraneous grid lines appearing in the middle of columns, etc.)  Do you have any suggestions as to what could be wrong on my system (ASP.NET install, versions, etc.) that could be the culprit?

 

Thanks,

Peter

 

[Dimo]

Hello Peter,

Have you tried my sample page in a new empty web project?

There may be some ASP.NET themes' styles or settings which cause the problem. Please double check.

If the issue persists, please open a formal support ticket and attach a simple, but complete runnable project, which reproduces the problem on your side.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter]

OK, I have a test project which I created as follows:

1. Created a new empty web project.

2. Copied and added your test page into the project.

3. Added a link in the default.aspx page to link to your page.

4. Added the telerik dll reference.

5. Built the project.

6. Selected default.aspx and "view in browser"

7. Clicked the link to load your page.

The grid scrolling misbehaves the same as in our application.  I have the project bundled up into a zip file, but I do not know how to attach it to this reply.  Please let me know how to get the file to you.

Thanks,
Peter

[Dimo]

Hi Peter,

Attaching files to forum posts is allowed for admin users only. Please open a new formal support ticket. There you can attach the project.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter]

Dimo,

Ticket created with zip file attachment.

Thanks

[Peter]

Dimo,

Thanks for the CSS fix, but strangely, it solved the problem of the extraneous grid lines in our application but not in the test project I sent you.  Am I missing something?

Hopefully you can also help me with the other problems I am having.  The biggest problem is the fact that the columns do not scroll as expected - there are six columns in the grid, with frozen columns set to 1.  However, when the grid scrolls, it changes the displayed columns as follows:

1 - 2 - 3 - 4 - 5 - 6
1 - 2 - 3 - 5
1 - 2 - 4 - 5 - 6
1 - 3 - 4 - 5 - 6
1 - 3 - 5 - 6

As you can see, columns 2 and 3 do not scroll initially, and columns 3 and 4 disappear and reappear depending upon how far over the grid is scrolled.  The fact that some columns are "skipped" depending upon the horizontal position is especially confusing.

The other problem we have is trying to keep the vertical scroll bar from appearing.  Is there any way to prevent the vertical scroll from appearing other than by trying to change the grid height on the fly?  We need the grid height to be variable depending upon the page size, rather than fixed and the scroll bar appearing when the page size is increased.  I was thinking about doing some calculation to determine the grid height based on page size, but I don't know if that will work, as I'm not sure how I would determine if any row heights have changed due to data wrapping, etc.

Thanks,
Peter

[Peter]

Some follow-up: I used DataFormatString="<nobr>{0}</nobr>" as shown in the help, to stop the data in the columns from wrapping, but it does not seem to apply to the headers, and HeaderStyle-Wrap="false" seems to have no effect (headers still wrap to extra lines if necessary.)  If I cannot prevent wrapping (and thus the row height change that follows), even trying to calculate the grid height to prevent the vertical scroll bar from appearing does not seem possible.  Ideas?

Thanks

[Dimo]

Hello Peter,

We will need some more time to investigate the frozen columns issue.

As for the header wrapping - generallly, this is a little hard to achieve due to browser limitations and lack of full support for the white-space:nowrap CSS style.

Please try adding the following CSS rule to your web page:

.RadGrid th,
.RadGrid th *
{
     white-space: nowrap;
}


RadGrid sorting has to be enabled in order to make the above CSS code work.


In order to prevent the vertical scrollbar from appearing, you can count the number of items, which will be displayed at runtime (check RadGridInstance.MasterTableView.Items.Count in the control's DataBound event) and adjust the scrollheight accordingly ( RadGridInstance.ClientSettings.Scrolling.ScrollHeight ). ScrollHeight is the height of the control's data area.

In this case, you should not use Height at all. Note the difference between ItemDataBound and DataBound.


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.