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

height problem

1 Answer 77 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Webster Velasco
Top achievements
Rank 2
Webster Velasco asked on 16 Jun 2010, 08:34 AM
hi

could you help me to set the height w/ % size of the screen?

what i want is to set the height of my data grid for the remaining spaceof my page.. im going to attach an image so u can understand what iwant..

here is the code too
<%@ Page Language="vb" MasterPageFile="~/Main.Master" AutoEventWireup="false" CodeBehind="SpecieVegetaliRicerca.aspx.vb" Inherits="WICEA.SpecieVegetaliRicerca" %> 
 
 
<asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server">  
  <div style="height:100%"
    <telerik:RadCodeBlock runat="server" ID="rcbSchemi"
        <script type="text/javascript"
          var myWidth = 0myHeight = 0
           
          function setWH(){ 
              if( typeof( window.innerWidth ) == 'number' ) { 
                //Non-IE 
                myWidth = window.innerWidth; 
                myHeight = window.innerHeight; 
              } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 
                //IE 6+ in 'standards compliant mode' 
                myWidth = document.documentElement.clientWidth; 
                myHeight = document.documentElement.clientHeight; 
              } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 
                //IE 4 compatible 
                myWidth = document.body.clientWidth; 
                myHeight = document.body.clientHeight; 
              }  
               
              myWidthmyWidth = myWidth * (90 / 100); 
              myHeightmyHeight = myHeight * (90 / 100);  
               
              return [myWidth, myHeight];   
          }   
                   
            function ShowTraduzioneForm(id) 
            {                         
                var v = setWH(); 
 
                var oWindow = radopen("TraduttoreAnagrafica.aspx?S=SV&Id=" + id, "rwdSchemi"); 
                oWindow.setSize (v[0], v[1]);   
                oWindow.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Close); 
                oWindow.set_modal(true); 
                oWindow.center();  
                oWindow.set_status("");           
                return false;     
            }          
 
            function refreshGrid() 
            { 
             $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");             
            }                      
        </script> 
    </telerik:RadCodeBlock> 
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Behavior="Close,Move" InitialBehaviors="None" ReloadOnShow="true" VisibleStatusbar="false" OnClientClose="refreshGrid"
        <Windows>                                                                                             
        </Windows> 
    </telerik:RadWindowManager> 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="grdAnagraf" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager>   
        <table width="80%" align="center" class="tbContorno"
            <tr> 
                <th colspan="6" align="center" class="tbContenuto"><asp:Label ID="lblTitolo" runat="server" Text="Filtri di Ricerca" /></th
            </tr> 
            <tr><td colspan="6">&nbsp;</td></tr
            <tr>                                 
            <td align="center"
                <asp:Label runat="server" ID="lblCODICE" Text="Codice: " /> 
                <asp:TextBox runat="server" ID="txtCODICE" ToolTip="Codice Certificazione" /> 
            </td>                                 
            <td align="center"
                <asp:Label runat="server" ID="lblDESCRIZIONE" Text="Descrizione: " /> 
                <asp:TextBox runat="server" ID="txtDESCRIZIONE" ToolTip="Nome" /> 
            </td>                                 
            <td align="center"
                <asp:Label runat="server" ID="lblLINGUA" Text="Lingua: " /> 
                <telerik:RadComboBox runat="server" ID="lstLingua" EnableLoadOnDemand="true" LoadingMessage=" please wait... " MarkFirstMatch="true"></telerik:RadComboBox> 
            </td>                                 
             
        </tr> 
        <tr><td colspan="4">&nbsp;</td></tr
        <tr><td><div id="divWait" runat="server"
        <asp:Label runat="server" ID="lblWAIT" Text=""  /></div></td> 
        </tr> 
         
        <tr> 
        <td><asp:Label runat="server" ID="lblRisultato"  /></td
        </tr> 
        <tr> 
            <td style="text-align:center" colspan="2"
                <asp:Button runat="server" id="cmdRicerca" Text="Cerca" OnClick="cmdRicerca_Click" Width="80px"/> 
            </td> 
            <td style="text-align:center" colspan="2"
            <asp:Button runat="server" id="cmdNuovo" Text="Inserisci" onclick="cmdNuovo_Click" Width="80px"/> 
            </td> 
         
        </tr> 
        <tr> 
            <td><asp:Label runat="server" ID="lblErrorMsg" Text="" CssClass="ErrMsg"></asp:Label></td
        </tr> 
        </table>     
        <hr /> 
        <div style="height:75%"
            <telerik:RadGrid                        
                ID="grdAnagraf" 
                runat="server" 
                OnDeleteCommand="objAnagra_deleteItem" 
                AllowPaging="false" 
                AutoGenerateColumns="False"  
                AllowSorting="true" 
                AllowCustomPaging="True" 
                AllowFilteringByColumn="false"  
                BorderWidth="0" 
                GridLines="Both"                 
                Width="100%" 
                ShowStatusBar="true" 
                Height="100%"
                <ClientSettings EnableRowHoverStyle="true"
                    <Selecting AllowRowSelect="true" /> 
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" /> 
                </ClientSettings>                         
                <MasterTableView 
                    DataKeyNames="CODICE,LINGUA" 
                    ClientDataKeyNames="CODICE,LINGUA" 
                    Width="100%" 
                    CommandItemDisplay="None"
                    <Columns> 
                     
                            <telerik:GridTemplateColumn UniqueName="EditRecord" AllowFiltering="False" Resizable="False">                            
                                <ItemTemplate> 
                                    <asp:HyperLink ID="EditLink" runat="server" Text="Edit"
                                        <img src="_img/Edit.gif" alt="modifica" style="border:none" /> 
                                    </asp:HyperLink> 
                                </ItemTemplate> 
                                <HeaderStyle Width="24px" /> 
                            </telerik:GridTemplateColumn> 
                             
                        <telerik:GridTemplateColumn UniqueName="colTranslate" AllowFiltering="False" Resizable="False">                          
                            <ItemTemplate> 
                                <asp:HyperLink ID="Translate" runat="server" Text="Traduci"
                                    <img src="_img/Editor.gif" alt="modifica" style="border:none" /> 
                                </asp:HyperLink> 
                            </ItemTemplate> 
                            <HeaderStyle Width="24px" /> 
                        </telerik:GridTemplateColumn>                                    
                     
                           <telerik:GridBoundColumn DataField="CODICE" HeaderText="Codice" SortExpression="CODICE"  
                                UniqueName="colCODICE" FilterImageToolTip="Filtro per Codice" Resizable="true">                                 
                            </telerik:GridBoundColumn> 
                             
                           <telerik:GridBoundColumn DataField="LINGUA" HeaderText="Lingua" SortExpression="LINGUA"  
                                UniqueName="colLINGUA" FilterImageToolTip="Filtro per Codice" Resizable="true">                                 
                            </telerik:GridBoundColumn>                                     
                             
                            <telerik:GridBoundColumn DataField="DESCRIZIONE" HeaderText="Descrizione" SortExpression="DESCRIZIONE"  
                                UniqueName="colDESCRIZIONE" FilterImageToolTip="Filtro per Descrizione" Resizable="true">  
                            </telerik:GridBoundColumn> 
                             
                            <telerik:GridBoundColumn DataField="NOMEBOTANICO" HeaderText="Nome Botanico" SortExpression="NOMEBOTANICO"  
                                UniqueName="colNOMEBOTANICO" FilterImageToolTip="Filtro per Nome Botanico" Resizable="true">  
                            </telerik:GridBoundColumn>                                                                                      
                                      
                            <telerik:GridBoundColumn DataField="ANNOTAZIONI" HeaderText="Note" SortExpression="ANNOTAZIONI"  
                                UniqueName="colANNOTAZIONI" FilterImageToolTip="Filtro per Note" Resizable="true"
                                <HeaderStyle Width="220px" /> 
                            </telerik:GridBoundColumn> 
                             
                            <telerik:GridButtonColumn ConfirmText="Eliminare la Specie Vegetale?" ButtonType="ImageButton" ImageUrl="_img/Delete.gif" CommandName="Delete" Text="Elimina" UniqueName="colDelete"
                                <HeaderStyle Width="30px" /> 
                            </telerik:GridButtonColumn>     
                    </Columns> 
                </MasterTableView> 
            </telerik:RadGrid> 
        </div> 
    <asp:ObjectDataSource   
        ID="objAnagra"   
        runat="server"   
        SelectMethod="selectAnagrafica" 
        SortParameterName="orderBy"  
        TypeName="GestioneAnagrafiche" >  
        <SelectParameters>  
            <asp:ControlParameter ControlID="grdAnagraf" Name="filterBy" PropertyName="MasterTableView.FilterExpression" Type="String" />  
            <asp:QueryStringParameter Name="NomeSP" DefaultValue="SpecieVegetali_Ricerca" Direction="Input" Type="String" /> 
            <asp:Parameter Name="Chiamante" DefaultValue="STNDL" Type="String" Direction="Input" /> 
        </SelectParameters>  
    </asp:ObjectDataSource>    
                 
    <input type="hidden" id="lblHelpPagina" runat="server"/> 
         
    </div> 
  </asp:Content> 
 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Jun 2010, 09:22 AM
Hello Webster,

You need to ensure that

1) The html, body and form tags have a 100% height style applied, otherwise the topmost <div> in the content page will not expand vertically.

2) The update panel generated for RadGrid has a 100% height style applied, otherwise the RadGrid will not expand vertically.

Here is a relevant demo, which shows how to proceed:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Webster Velasco
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Share this question
or