Border is appearing in the middle of the grid

[James Faw]

    <asp:Panel ID="Panel1" runat="server" Width="800px" ScrollBars="Auto">
        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None"
            AutoGenerateColumns="False" Skin="Office2007"
            onneeddatasource="RadGrid1_NeedDataSource">
            <MasterTableView DataKeyNames="PaymentFrequencyID" EditMode="InPlace" Width="2000px">
                <Columns>
                    <telerik:GridTemplateColumn DataField="Disabled" DataType="System.Boolean"
                        HeaderText="Disabled"
                        UniqueName="Disabled">
                        <ItemTemplate>
                            <asp:CheckBox ID="chkDisabled" runat="server" Checked='<%# Bind( "Disabled" ) %>' />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <Resizing AllowColumnResize="True" />
            </ClientSettings>
        </telerik:RadGrid>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </asp:Panel>

Here is simple page
and below is the code

    class TestDIVBorder
    {
        public int PaymentFrequencyID { get; set; }
        public bool Disabled { get; set; }
    }

    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            var list = new List<TestDIVBorder>();
            list.Add(new TestDIVBorder() { PaymentFrequencyID = 1, Disabled = true });
            list.Add(new TestDIVBorder() { PaymentFrequencyID = 2, Disabled = true });
            list.Add(new TestDIVBorder() { PaymentFrequencyID = 3, Disabled = true });
            list.Add(new TestDIVBorder() { PaymentFrequencyID = 4, Disabled = true });
            list.Add(new TestDIVBorder() { PaymentFrequencyID = 5, Disabled = true });

            RadGrid1.DataSource = list;
        }
    }

Below you can see 2 images when scroll in different positions and you may see the line. How can I fix it?
I see it this way only in IE8.

[Dimo]

Hello James,

You are trying to place a 2000px-wide MasterTableView in a 800px-wide Panel, is that correct ? If so, then do one of the following:

1. Set the 2000px width to the RadGrid control, not the MasterTableView
or
2. Enable RadGrid scrolling (with our without static headers)


Kind regards,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[James Faw]

Hi Dimo

1. I am not trying to put 2000px. It is just demo (I was just going crazy and put 2000px). In real situation I have 6-15 columns depends on some conditions and I cannot fit all of them on the page.
2. Can you change my example to show me ho I can enable the scrolling?
3. And again it happens only in IE8.

Pavel Brokhman

[Dimo]

Hi Pavel,

RadGrid scrolling is enabled from the control's ClientSettings.

<ClientSettings>
       <Scrolling   ..........    />
</ClientSettings>


If you have not used this functionality before, I recommend the following help resources:

http://www.telerik.com/help/aspnet-ajax/grdbasicscrolling.html

http://www.telerik.com/help/aspnet-ajax/grdscrollwithstaticheaders.html

http://www.telerik.com/help/aspnet-ajax/height-vs-scrollheight.html


Let us know if you need more information.


Kind regards,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[James Faw]

Thank you - previous answer helped

Now I have another question. I want vertical scrolling and don't want horizontal. I mean grid will have dynamical height depends on amount of the records.

[James Faw]

Auuu... Any suggestions.

[Dimo]

Hi James,

"I want vertical scrolling and don't want horizontal. I mean grid will have dynamical height depends on amount of the records."

I suppose you wanted to say that you want horizontal scrolling and no vertical?


Set some custom CSS class to the RadGrid control and then use:

.GridCustomClass  .rgDataDiv
{
          height: auto !important ;
}


Regards,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[James Faw]

Thanks

It works.

P.S. And yes I meant what you said :).

[James Faw]

Apparently it doesn't work very well with IE7. I am speaking about the solution using width property. Everything is OK for IE8 or FF, but not for the IE7. What happens the grid itself is shown OK, but container get the width of the grig content.
For instant, I put width = "800px" in the grid property. Content is let's say "2000px". The grid itself the part of the table in <td>. So, grid itself is shown correctly, but td width = "2000px" now.

[Dimo]

Hello James,

This is an Internet Explorer bug, related to tables and scrollable containers. Set style="table-layout:fixed" to the <table> in which you have placed RadGrid. Alternatively, do not use tables for layout.

Greetings,
Dimo
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[James Faw]

I see what you mean and I tested it. Unfortunately it affect other part of the UI and when I have time I will fix it your way. By now, I just wrapped it with the <div> with width="....px">, overfloow="auto".