height problem

2 posts, 0 answers
  1. Webster Velasco
    Webster Velasco avatar
    115 posts
    Member since:
    Nov 2009

    Posted 16 Jun 2010 Link to this post

    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> 
     
  2. Dimo
    Admin
    Dimo avatar
    8391 posts

    Posted 21 Jun 2010 Link to this post

    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
Back to Top