Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Missing columns when horizontal scrolling

5 Answers 95 Views
Grid
This is a migrated thread and some comments may be shown as answers.
StephenWRogers
Top achievements
Rank 1
StephenWRogers asked on 31 Jul 2008, 02:38 PM
When the grid contains a large number of columns such that there is horizontal scrolling, and there are no records present, the scrolling does not scroll all the way to the right of the header.

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    <div> 
        <telerik:RadGrid runat="server" ID="grid"  > 
                    <MasterTableView  AutoGenerateColumns="false" >  
                <Columns>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col1" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col2" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col3" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col4" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col5" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col6" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col7" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col8" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col9" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col10" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col11" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col12" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col13" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col14" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col15" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col16" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col1" HeaderText="Col17" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                    <telerik:GridBoundColumn DataField="col2" HeaderText="Col18" HeaderStyle-Width="100px"></telerik:GridBoundColumn>  
                </Columns>  
                 
            </MasterTableView>  
             
        <ClientSettings> 
            <Resizing AllowColumnResize="true" /> 
            <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        </ClientSettings> 
        </telerik:RadGrid> 
         
    </div> 
 
</form> 
</body> 
</html> 
 

C#

using System; 
using System.Data; 
using System.Configuration; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using System.Net; 
using System.Collections.Generic; 
using Telerik.Web.UI; 
 
public partial class _Default : System.Web.UI.Page  
{ 
    protected override void OnLoad(EventArgs e) 
    { 
        base.OnLoad(e); 
        BindData(); 
    } 
 
    private void BindData() 
    { 
        DataTable table = new DataTable(); 
        table.Columns.Add("col1"); 
        table.Columns.Add("col2"); 
         
        grid.DataSource = table; 
        grid.DataBind(); 
    } 
 
} 

When you first load the page, you cannot scroll all the way to the right to see the end of column 18.  On my resolution I get to the middle of Col16.

Note that as soon as you resize a column the header is resized so that the scrolling works perfectly. 

I also tried a couple of different skins but the all show the same behaviour.

Is there a size not being set properly on the initial load?

Thanks,

Stephen


5 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 04 Aug 2008, 05:17 PM
Hi,

I suspect that this misalignment is caused by the browser's box model. There are padding and margin that are set to the <th> elements. This, with combination of the large column number, generates incorrect calculation of the header width. Therefore you can try to clear the <th> elements' paddings and margins with a custom CSS rule, for example:

<style>  
        .RadGrid th  
        {  
            padding:0px !important;   
            margin:0px !important;  
        }  
    </style> 


Kind regards,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
StephenWRogers
Top achievements
Rank 1
answered on 05 Aug 2008, 09:05 AM
The problem with that is that you'd also have to take the padding off the main grid rows or the columns don't line up.

And then the grid looks terrible without padding on the headers and rows - look at your skins, they all have padding in the headers and rows, and none manage to make the no records template line up with the header fully.

The browser must be capable of rendering it properly with padding, for as soon as you resize a column, even slightly, everything snaps into place perfectly.

Thanks,

Stephen

0
Rosen
Telerik team
answered on 07 Aug 2008, 05:32 AM
Hello,

Another possible workaround would be to manually set the "NoRecord" item's width to match the header's one.
This can be accomplished by a few lines of javascript inside RadGrid's GridCreated event. Here is a possible implementation:

<script type="text/javascript">  
                function onGridCreated(sender,args)  
                {                      
                    var grid = sender;  
                    if(grid.get_masterTableView().get_dataItems().length == 0 && $telerik.isIE)  
                    {  
                        var headerRow = Telerik.Web.UI.Grid.getTableHeaderRow(grid.get_masterTableView().get_element());  
                        if (!headerRow)  
                        {  
                            var headerTbl = $get(grid.get_masterTableView().get_element().id + "_Header");  
                            if (headerTbl)  
                            {  
                                grid.get_masterTableView().get_element().style.width = $telerik.getSize(headerTbl).width;                                 
                             }  
                              
                        }  
                    }  
                }  
            </script> 

Please give it a try and see if this helps. 

Regards,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Antony
Top achievements
Rank 1
answered on 20 Feb 2009, 10:32 AM
HI,

I am having the same problem and there has been several releases since the initial post, when can we expect this BUG to be fixed?

Thanks
Antony
0
Rosen
Telerik team
answered on 23 Feb 2009, 05:27 PM
Hi Antony,

We will do our best to address this issue for future versions of RadGrid control. Meanwhile please use the provided workaround.

Please excuse us for the inconvenience.

Greetings,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
Grid
Asked by
StephenWRogers
Top achievements
Rank 1
Answers by
Rosen
Telerik team
StephenWRogers
Top achievements
Rank 1
Antony
Top achievements
Rank 1
Share this question
or