[Solved] Horizontal scrollbar for RadGrid

[Jitendra Pati]

HI,

Am not getting the Horizontal scrollbar for Radgrid .
Width of the all columns is greater than the width of the grid.
in UI only few columns are coming in the grid & Horizontal scroll bar is not coming .

below is my Code in UI:

 

<P><FONT color=#008000 size=2><FONT color=#008000 size=2><asp:Panel
ID="Panel1" ScrollBars="None" runat="server" Width="100%" Height="100%" ></P>
<P></P>
<P><telerik:RadGrid ID="RadGrid1" AllowSorting="true"
EnableEmbeddedSkins="False" ShowStatusBar="true"</P>
<P>ShowFooter="false" AllowPaging="true" EnableViewState="true"
AutoGenerateColumns="False"</P>
<P>OnNeedDataSource="RadGrid1_NeedDataSource" ShowHeader="true"
CellSpacing="1"</P>
<P>runat="server" OnDataBound="RadGrid1_DataBound"></P>
<P><PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true"
/></P>
<P><MasterTableView AllowPaging="true" AllowSorting="true"
AutoGenerateColumns="false"</P>
<P>EditMode="InPlace" TableLayout="Auto" ></P>
<P><Columns> </P>
<P><telerik:GridTemplateColumn HeaderText="Action" </P>
<P>ItemStyle-CssClass="centerAlign" HeaderStyle-Width="10%"
ItemStyle-Width="10%" ></P>
<P><ItemTemplate></P>
<P><asp:LinkButton ID="btnEdit" runat="server" </P>
<P>Text="Edit" CssClass="buttonLink" /></P>
<P></ItemTemplate></P>
<P><HeaderTemplate></P>
<P><asp:Button ID="btnDeleteAll" runat="server" Text="Delete All"
OnClick="btnDeleteAll_Click" Visible="false" /></P>
<P><asp:Label ID="lblAction" runat="server" Text="Action"
Visible="true"/></P>
<P></HeaderTemplate></P>
<P></telerik:GridTemplateColumn></P>
<P><telerik:GridTemplateColumn HeaderText="Change" HeaderStyle-Width="10%"
ItemStyle-Width="10%" </P>
<P>ItemStyle-CssClass="centerAlign"></P>
<P><ItemTemplate></P>
<P><%# Eval("EVAL1")%></P>
<P></ItemTemplate></P>
<P></telerik:GridTemplateColumn></P>
<P><telerik:GridBoundColumn DataField="DataField1" HeaderText="HeaderText1"
HeaderStyle-Width="12%" ItemStyle-Width="12%" ItemStyle-CssClass="centerAlign"
/></P>
<P><telerik:GridBoundColumn DataField="DataField2" HeaderText="HeaderText2"
ItemStyle-Width="12%" HeaderStyle-Width="12%" ItemStyle-CssClass="leftAlign"
/></P>
<P><telerik:GridBoundColumn DataField="DataField3" HeaderText="HeaderText3"
ItemStyle-Width="16%" HeaderStyle-Width="16%" ItemStyle-CssClass="leftAlign"
/></P>
<P><telerik:GridBoundColumn DataField="DataField4" HeaderText="HeaderText4"
ItemStyle-Width="20%" HeaderStyle-Width="20%" ItemStyle-CssClass="leftAlign"
/></P>
<P><telerik:GridBoundColumn DataField="DataField5" HeaderText="HeaderText5"
ItemStyle-Width="15%" HeaderStyle-Width="15%" ItemStyle-CssClass="leftAlign"
/></P>
<P><telerik:GridBoundColumn DataField="DataField6" HeaderText="HeaderText6"
ItemStyle-Width="15%" HeaderStyle-Width="15%" ItemStyle-CssClass="leftAlign"
/></P>
<P><telerik:GridBoundColumn DataField="DataField7" HeaderText="HeaderText7"
ItemStyle-Width="15%" HeaderStyle-Width="15%" ItemStyle-CssClass="leftAlign"
/></P>
<P><telerik:GridBoundColumn DataField="DataField8"
DataFormatString="{0:0,0.0000}" HeaderText="HeaderText8" HeaderStyle-Width="15%"
ItemStyle-Width="15%" ItemStyle-CssClass="rightAlign" /></P>
<P><telerik:GridBoundColumn DataField="DataField9"
DataFormatString="{0:0,0.00}" ItemStyle-Width="15%" HeaderStyle-Width="15%"
HeaderText="HeaderText9" ItemStyle-CssClass="rightAlign" /></P>
<P><telerik:GridTemplateColumn HeaderText="HeaderText10"
ItemStyle-Width="15%" HeaderStyle-Width="15%" </P>
<P>ItemStyle-CssClass="centerAlign"></P>
<P><ItemTemplate></P>
<P><asp:ImageButton ID="imgComments"</P>
<P>ImageAlign="AbsMiddle" CssClass="handCursor"</P>
<P>runat="server" Visible="false" /></P>
<P><span ID="span1" class="popupExtender" runat="server"></P>
<P><%# Eval("Eval2") %></P>
<P></span></P>
<P></ItemTemplate></P>
<P></telerik:GridTemplateColumn></P>
<P></Columns></P>
<P><NoRecordsTemplate></P>
<P>No Data Found</P>
<P></NoRecordsTemplate></P>
<P></MasterTableView></P>
<P><ClientSettings></P>
<P><Scrolling AllowScroll="true" SaveScrollPosition="false"
ScrollHeight="163px" UseStaticHeaders="true" /></P>
<P><Selecting AllowRowSelect="true" /></P>
<P></ClientSettings></P>
<P></telerik:RadGrid></P>
<P></P>
<P></asp:Panel></P></FONT></FONT>

 

 

 

please help me ASAP.

[Pavlina]

Hello Jitendra,

Please find attached a simple working project that is working as expected. Give it a try and let me know what is the difference in your scenario.

All the best,
Pavlina
the Telerik team

[Pavel Brokhman]

It is working perfectly, when RadGrid is not within table. However, when it is within table it doesn't wotk (see below):

<table>
    <tr>
        <td>
            <telerik:RadGrid ID="RadGrid1" Skin="Vista" AllowPaging="true" OnNeedDataSource="RadGrid1_NeedDataSource"
                runat="server">
                <MasterTableView HeaderStyle-Width="150px" TableLayout="Fixed">
                </MasterTableView>
                <ClientSettings>
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
            </telerik:RadGrid>
        </td>
    </tr>
</table>

Why???

[Pavlina]

Hi Pavel,

When grid with scrolling enabled is wrapped inside a table cell (under IE only) you may need to set the layout of the corresponding table to fixed to avoid unwanted stretching of the scrolling area:

<table style="table-layout:fixed;">
  grid definition
</table>

This is due to the specific IE box model.

Kind regards,
Pavlina
the Telerik team

[Kim]

[Margret]

Hi all,
I have added the scroll bar to my rad grid.The horizontal scroll bar is working fine if the width of the  total columns  is greater than width of the grid.But in the  last page, it is not showing the horizontal scroll bar correctly even though the columns width is greater than grid's width.Any answer for this?

[Pavlina]

Hello Margret,

The described behaviour is really strange and we have not encounter it before. Therefore, to be able to help you in resolving this problem we should replicate it first. You can provide a live url where the problem can be observed or isolate the issue in a sample project and send it via support ticket.

Kind regards,
Pavlina
the Telerik team