RAD GRID RESIZING & VERTICAL GRID LINE ISSUE(DEFAULT SKIN Q2 2009)

[Ajay]

Hi Telerik Guys !

 I'm enclosing the SCREEN SHOTS of my DEMO project at the below mentioned location :-

http://www.picamatic.com/show/2009/06/29/06/52/4176817_1024x768.jpg

http://www.picamatic.com/show/2009/06/29/06/53/4176824_1024x768.jpg
Name of the file are :-
(a.) GRID-I.jpg
(b.) GRID-II.jpg



Please acknowledge the same & help me sort out my problem.

I have encircled the issues that are creating problems.
 
(i.e. 1.  HORIZONTAL SCROLL bars appear at the end of the page that allow the dislocation of the web page ).
       2.  VERTICAL GRID LINES DOES NOT APPEAR 
       
I'm also enclosing the detailed HTML code as below :-

 <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="Vertical"
           SkinID="DemoRadGrid" Skin="Default" Width="98%">
           <HeaderContextMenu EnableTheming="True" Skin="Default">
               <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
           </HeaderContextMenu>
           <MasterTableView Frame="Void" AutoGenerateColumns="False" DataKeyNames="city_id" DataSourceID="SqlDataSource1">
               <NoRecordsTemplate>
                   No records to display !
               </NoRecordsTemplate>
               <Columns>
                   <telerik:GridBoundColumn DataField="city_id" DataType="System.Int32" HeaderText="City ID"
                       ReadOnly="True" SortExpression="city_id" UniqueName="city_id">
                       <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="20%" />
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="country_id" DataType="System.Int32" HeaderText="Country ID"
                       SortExpression="country_id" UniqueName="country_id">
                       <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="20%" />
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="city_name" HeaderText="City Name" SortExpression="city_name"
                       UniqueName="city_name">
                       <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="30%" />
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn DataField="city_description" HeaderText="City Description"
                       SortExpression="city_description" UniqueName="city_description">
                       <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="30%" />
                   </telerik:GridBoundColumn>
               </Columns>
           </MasterTableView>
       </telerik:RadGrid>
       <asp:SqlDataSource ID="SqlDataSource1" runat="server"
           ConnectionString="<%$ ConnectionStrings:ajay_practiceConnectionString %>"
           SelectCommand="SELECT [city_id], [country_id], [city_name], [city_description] FROM [city]">
       </asp:SqlDataSource>

I have used the following code with in the SKIN FILE :-

<telerik:RadGrid runat="server" Skinid="DemoRadGrid">
    <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true"  AllowColumnsReorder="true" ReorderColumnsOnClient="true">
     <Resizing AllowRowResize="True" EnableRealTimeResize="True" ClipCellContentOnResize="true" ResizeGridOnColumnResize="True" AllowColumnResize="True"></Resizing>
        <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="100px" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid><telerik:RadGrid runat="server" Skinid="DemoRadGrid">


Please help !

[Dimo]

Hi Ajay,

I kindly ask you not to post numerous forum threads with the same question, as this makes tracking your support history difficult and may cause confusion among our support officers. Please use one forum thread per issue and describe it as clearly as possible.

Now to your questions:

1) Horizontal scrollbars

This may or may not be a browser rendering bug, depending on the RadGrid configuration, HTML code around the RadGrid and browser version. Generally, a problem is observed in IE when a scrollable container is placed inside a <table> element. The resolution is to set overflow:hidden style to RadGrid or table-layout:fixed style for its parent table.

2) Vertical GridLines

Vertical GridLines cannot be shown if RadGrid uses a skin with no vertical borders - the GridLines property and the CSS border styles are inter-related. I recommend using CSS styles to show vertical borders.

Here is a sample web page for you to review:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int rowsNum = 100;
        string[][] colsInfo = {
            new string[] { "city_id", "number" },
            new string[] { "country_id", "number" },
            new string[] { "city_name", "string" },
            new string[] { "city_description", "string" }
        };

        for (int i = 0; i < colsInfo.Length; i++)
        {
            switch (colsInfo[i][1])
            {
                case "string":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(String)));
                    break;
                case "number":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Int32)));
                    break;
                case "date":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(DateTime)));
                    break;
                case "bool":
                    dt.Columns.Add(new DataColumn(colsInfo[i][0], typeof(Boolean)));
                    break;
                default:
                    break;
            }
        }

        for (int j = 1; j <= rowsNum; j++)
        {
            dr = dt.NewRow();

            for (int k = 0; k < colsInfo.Length; k++)
            {
                switch (colsInfo[k][1])
                {
                    case "string":
                        dr[colsInfo[k][0]] = String.Format("{0} Row{1}", colsInfo[k][0], j);
                        break;
                    case "number":
                        dr[colsInfo[k][0]] = j;
                        break;
                    case "date":
                        dr[colsInfo[k][0]] = DateTime.Now;
                        break;
                    case "bool":
                        dr[colsInfo[k][0]] = j % 2 == 1 ? true : false;
                        break;
                    default:
                        break;
                }
            }
            dt.Rows.Add(dr);
        }

        (sender as RadGrid).DataSource = dt;
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
<style type="text/css">

div.RadGrid_Default .rgHeader,
div.RadGrid_Default th.rgResizeCol,
div.RadGrid_Default .rgRow td,
div.RadGrid_Default .rgAltRow td
{
    border-left:1px solid #666;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<table><tr><td>

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" GridLines="Vertical" Skin="Default" Width="800px"
    style="overflow:hidden">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="city_id" Width="2000px">
        <Columns>
            <telerik:GridBoundColumn DataField="city_id" DataType="System.Int32" HeaderText="City ID"
                ReadOnly="True" SortExpression="city_id" UniqueName="city_id">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="20%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="country_id" DataType="System.Int32" HeaderText="Country ID"
                SortExpression="country_id" UniqueName="country_id">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="20%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="city_name" HeaderText="City Name" SortExpression="city_name"
                UniqueName="city_name">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="30%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="city_description" HeaderText="City Description"
                SortExpression="city_description" UniqueName="city_description">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="30%" />
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true" AllowColumnsReorder="true"
        ReorderColumnsOnClient="true">
        <Resizing AllowRowResize="True" EnableRealTimeResize="True" ClipCellContentOnResize="true"
            ResizeGridOnColumnResize="True" AllowColumnResize="True"></Resizing>
        <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="100px" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

</td></tr></table>

<table style="table-layout:fixed"><tr><td>

<telerik:RadGrid ID="RadGrid2" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" GridLines="Vertical" Skin="Default">
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="city_id" Width="2000px">
        <Columns>
            <telerik:GridBoundColumn DataField="city_id" DataType="System.Int32" HeaderText="City ID"
                ReadOnly="True" SortExpression="city_id" UniqueName="city_id">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="20%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="country_id" DataType="System.Int32" HeaderText="Country ID"
                SortExpression="country_id" UniqueName="country_id">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="20%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="city_name" HeaderText="City Name" SortExpression="city_name"
                UniqueName="city_name">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="30%" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="city_description" HeaderText="City Description"
                SortExpression="city_description" UniqueName="city_description">
                <HeaderStyle Font-Names="Trebuchet MS" Font-Size="14px" ForeColor="#3496B4" Width="30%" />
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true" AllowColumnsReorder="true"
        ReorderColumnsOnClient="true">
        <Resizing AllowRowResize="True" EnableRealTimeResize="True" ClipCellContentOnResize="true"
            ResizeGridOnColumnResize="True" AllowColumnResize="True"></Resizing>
        <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" ScrollHeight="100px" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>

</td></tr></table>


</form>
</body>
</html>

Greetings,
Dimo
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.