[Solved] height problem

[Webster Velasco]

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 = 0, myHeight = 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>

[Dimo]

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