This is a migrated thread and some comments may be shown as answers.

Grid Resize problem

1 Answer 146 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Vimal Kumar asked on 21 Mar 2009, 10:50 AM

Hi There,

I am working on telerik grid. I am trying to resize my grid according to window size, And i am able to resize my grid according to window size but The problem i am facing is here, that in my grid i am using ten column, but in grid only three column is visible, and also i am unable to get horizontal scroll bar, so i can't scroll and can see the rest column. The coding which i am using for this is given below:

    
            Masterpage.master 
        
            ------------------------- 
        
            <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Masterpage.master.cs" Inherits="Masterpage" %> 
        
            <!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"> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css"> 
        
            html 
        
            { 
        
                overflow:auto; 
        
            } 
        
            html, 
        
            body, 
        
            form 
        
            { 
        
                margin:0; 
        
                height:100%; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <table style="height: 90%; width: 100%;" cellpadding="0" cellspacing="0"> 
        
                        <tr> 
        
                            <td style="height:90%;"> 
        
                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
        
                                    </asp:ContentPlaceHolder> 
        
                            </td> 
        
                        </tr> 
        
                    </table> 
        
                </form> 
        
            </body> 
        
            </html> 
        
            GridResize.aspx 
        
            ------------------- 
        
            <%@ Page Language="C#" MasterPageFile="~/Masterpage.master" AutoEventWireup="true" CodeFile="GridResize.aspx.cs" 
        
                Inherits="GridResize" Title="Untitled Page" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> 
        
                <table style="height: 90%; width: 90%;"> 
        
                    <tr> 
        
                        <td style="height: 90%; width: 90%;" valign="top"> 
        
                            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" AllowPaging="true" 
        
                                PageSize="40" Width="90%" Height="100%" Style="border: 0; outline: none"> 
        
                                <MasterTableView TableLayout="Auto" AutoGenerateColumns="false"> 
        
                                    <Columns> 
        
                                        <telerik:GridBoundColumn DataField="id" HeaderText="Issue" SortExpression="id" 
        
                                            UniqueName="id" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn> 
        
                                         <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>                              
        
                                         <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname1" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn> 
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname2" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn> 
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname3" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn> 
        
                                         <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname4" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>   
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname5" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>     
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname6" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>     
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname7" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>     
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname8" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>     
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname9" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>     
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname10" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>     
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname11" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>     
        
                                        <telerik:GridBoundColumn DataField="firstname" HeaderText="firstname12" SortExpression="firstname" 
        
                                            UniqueName="firstname" HeaderStyle-Width="40%" ItemStyle-Width="40%"> 
        
                                        </telerik:GridBoundColumn>                            
        
                                    </Columns> 
        
                                </MasterTableView> 
        
                                <ClientSettings EnableRowHoverStyle="true"> 
        
                                    <Selecting AllowRowSelect="true" /> 
        
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                                </ClientSettings> 
        
                                <PagerStyle Mode="NextPrevAndNumeric" /> 
        
                            </telerik:RadGrid> 
        
                            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/datasource.xml" /> 
        
                        </td> 
        
                    </tr> 
        
                </table> 
        
            </asp:Content>

Can any body help me to come out of this problem...

Regards:
Vimal Kumar Srivastava
Madhepura, Bihar
Email Id: vimaltech04@gmail.com

1 Answer, 1 is accepted

answered on 25 Mar 2009, 07:28 AM

Hello Vimal Kumar,

Do note that when a column's width is set to a given percent, e.g. 40%, it is supposed to take 40% of the inner table of the grid - the master table view in particular. Therefore, the total width of the columns should not exceed 100%. In order to get the scrolling displayed and the columns resized correctly, you need to remove the Width property of the grid and set it to the grid's MasterTableView. If you want to make the inner table wider than the grid's container table you have added, you can set the MasterTableView to a value greater than 100%. However, the width of the columns should add up to 100% - no more, so the second thing you need to change accordingly is the percentage width of the columns.

Hope this helps.

Best Regards,
Tsvetoslav
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.