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

2 posts, 0 answers
  1. Ajay
    Ajay avatar
    66 posts
    Member since:
    May 2009

    Posted 29 Jun 2009 Link to this post

    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 !



  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Jul 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top