height problem

2 posts, 0 answers
  1. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

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