a Vertical line is displayed when grid is inside Div

[Nirav]

Hi,

I have a grid placed inside Div. I am displaying about 15 columns so when it goes long, Div displays Scrollbar to move right.
The problem is that somehow Grid displays a Vertical line exactly where Div's right border ends. I mean when we move scrollbar to right, it displays one Vertical line in between of column, as soon as we move scrollbar.

If I change my Div width to 1500 or more then grid fits inside Div so does not display this Vertical line but when div displays scrollbar and have to scroll to right, it displays a vertical line exactly from where scroll starts on right side.
But I cannot increase my Div width because of my screen size.
Please let me know what settings do I need to add for this?
Here is my code.

.Scrollgrid
{
        position: static;
        OVERFLOW: scroll; border:2px; border-style:solid;
}
.panelStyle
{
            width:100%;
}

                            <asp:Panel runat="server" ID="pnlOverview" CssClass="panelStyle">
                                <table width="100%">
                                    <tr align="center">
                                        <td>


                                            <div class="Scrollgrid" style="width: 1100px; height: 600px;">
                                                <telerik:RadGrid ID="RadGridAllRequests" runat="server" AllowPaging="true" AllowSorting="true"
                                                    AllowFilteringByColumn="true" AutoGenerateColumns="False" GridLines="Both" OnNeedDataSource="RadGridAllRequests_needdatasource"
                                                    OnItemDataBound="RadGridAllRequests_ItemDataBound"
                                                    OnItemCreated="RadGridAllRequests_ItemCreated"
                                                    OnItemCommand="RadGridAllRequests_ItemCommand"
                                                    AllowMultiRowSelection="true" SelectedItemStyle-CssClass="SelectedItem"

                                                    Width="100%"
                                                    Skin="WebBlue">
                                                    <PagerStyle Mode="NextPrevNumericAndAdvanced" Position="TopAndBottom" AlwaysVisible="true" />
                                                    <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                                                        <Selecting AllowRowSelect="true" />
                                                    </ClientSettings>

                                                    <MasterTableView ShowHeadersWhenNoRecords="true"
                                                    AllowFilteringByColumn="true" DataKeyNames="RequestInfoID">
                                                        <Columns>

<!-- I am displaying about 15 columns here -->

                                                        </Columns>
                                                        <EditFormSettings>
                                                            <PopUpSettings ScrollBars="None" />
                                                        </EditFormSettings>
                                                        <ExpandCollapseColumn Resizable="False" Visible="False">
                                                            <HeaderStyle />
                                                        </ExpandCollapseColumn>
                                                        <RowIndicatorColumn Visible="False">
                                                            <HeaderStyle />
                                                        </RowIndicatorColumn>
                                                    </MasterTableView>
                                                </telerik:RadGrid>
                                            </div>

                                        </td>
                                    </tr>
                                </table>
                            </asp:Panel>

Thanks in advance,

[Nirav]

After looking at HTML generated by grid and everything, I found solution to this.

We need to set Grid's BorderStyle to None, so it will not display that vertical line because when we place Grid inside Div, if you see in generated HTML, it generates a Div for grid itself where it needs to give border as none.
This is the sample HTML generated when we place grid inside Div.

                                       <div class="Scrollgrid" style="width: 1100px; height: 600px;">
                                            <div id="ctl00_ContentPlaceHolder1_RadGridAllRequests" class="RadGrid RadGrid_WebBlue"
                                            style="width:100%; ">
<table cellspacing="0" class="rgMasterTable" rules="all" border="1" id="ctl00_ContentPlaceHolder1_RadGridAllRequests_ctl00" style="width:100%;table-layout:auto;empty-cells:show;">

and we need to give border:0 at ctl00_ContentPlaceHolder1_RadGridAllRequests

So basically on our page, we just need to give BorderStyle=None to our RadGrid like this and that worked.

<telerik:RadGrid ID="RadGridAllRequests" runat="server" AllowPaging="true" AllowSorting="true"
    AllowFilteringByColumn="true" AutoGenerateColumns="False"
    BorderStyle="None"
    GridLines="Both" OnNeedDataSource="RadGridAllRequests_needdatasource"
    OnItemDataBound="RadGridAllRequests_ItemDataBound"
    OnItemCreated="RadGridAllRequests_ItemCreated"
    OnItemCommand="RadGridAllRequests_ItemCommand"
    AllowMultiRowSelection="true" SelectedItemStyle-CssClass="SelectedItem"


    Width="100%"
    Skin="WebBlue">

So



Thanks,
Nirav