RadListBox Heigth Full Page

2 posts, 1 answers
  1. July
    July avatar
    205 posts
    Member since:
    Jul 2011

    Posted 14 May 2012 Link to this post

    I need show RadListBox with heigth = 100%
    I try some css but does not work.
    I have the same problem with Radgrid.

    I see like this:


    I need like this:


    this is my code:

    .css
    div#container  { height:100%; width:100%; position: absolute;  display: block;}
    div#leftContainer  { height:100%; width:25%; float:left;  }
    div#middleContainer  { height:100%; width:25%;   float:left;}
    div#rightContainer  { height:100%; width:40%;  float:left;  }

    .aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DocumentTypeForm.aspx.cs"
        Inherits="WebSearch.UI.Admin.DocumentTypeForm" %>

    <!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">
       
        <link href="../Style/Admin/DocumentType.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .listBoxHeaders
            {
                color: Green;
                font-weight: bold;
            }
            
            
            
            
            .RadListBox span.rlbText em
            {
                background-color: #E5E5E5;
                font-weight: bold;
                font-style: normal;
            }
            
            .rbClear
            {
                background-image: url(/UI/Images/cross.png);
                background-position: center;
                background-repeat: no-repeat;
            }
        </style>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">

                function confirmCallBackFn(arg) {

                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    if (arg == true)
                    { ajaxManager.ajaxRequest("Remove"); }

                }

                function CloseAndRebind(args) {

                    GetRadWindow().BrowserWindow.refreshGrid(args);
                    GetRadWindow().close();
                }

                function GetRadWindow() {
                    var oWindow = null;
                    if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
                    else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

                    return oWindow;
                }

                function CancelEdit() {
                    GetRadWindow().close();
                }



                       
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager2" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
            <script type="text/javascript">

                function filterList() {
                    var listbox = $find("<%= rlbAvailable.ClientID %>");
                    var textbox = $find('<%= tbAvailableFilter.ClientID %>');

                    clearListEmphasis(listbox);
                    createMatchingList(listbox, textbox.get_textBoxValue());
                }

                // Remove emphasis from matching text in ListBox
                function clearListEmphasis(listbox) {
                    var re = new RegExp("</{0,1}em>", "gi");
                    var items = listbox.get_items();
                    var itemText;

                    items.forEach
                    (
                        function (item) {
                            itemText = item.get_text();
                            item.set_text(itemText.replace(re, ""));
                        }
                    )
                }

                // Emphasize matching text in ListBox and hide non-matching items
                function createMatchingList(listbox, filterText) {
                    if (filterText != "") {
                        filterText = escapeRegExCharacters(filterText);

                        var items = listbox.get_items();
                        var re = new RegExp(filterText, "i");

                        items.forEach
                        (
                            function (item) {
                                var itemText = item.get_text();

                                if (itemText.match(re)) {
                                    item.set_text(itemText.replace(re, "<em>" + itemText.match(re) + "</em>"));
                                    item.set_visible(true);
                                }
                                else {
                                    item.set_visible(false);
                                }
                            }
                        )
                    }
                    else {
                        var items = listbox.get_items();

                        items.forEach
                        (
                            function (item) {
                                item.set_visible(true);
                            }
                        )
                    }
                }

                function rlbAvailable_OnClientTransferring(sender, eventArgs) {
                    // Transferred items retain the emphasized text, so it needs to be cleared.
                    clearListEmphasis(sender);
                    // Clear the list. Optional, but prevents follow up situation.
                    clearFilterText();
                    createMatchingList(sender, "");
                }

                function rbtnClear_OnClientClicking(sender, eventArgs) {
                    clearFilterText();

                    var listbox = $find("<%= rlbAvailable.ClientID %>");

                    clearListEmphasis(listbox);
                    createMatchingList(listbox, "");
                }

                // Clears the text from the filter.
                function clearFilterText() {
                    var textbox = $find('<%= tbAvailableFilter.ClientID %>');
                    textbox.clear();
                }

                // Escapes RegEx character classes and shorthand characters
                function escapeRegExCharacters(text) {
                    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
                }

            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxLoadingPanel runat="server" Skin="Vista" ID="LoadCombo" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rlbChosen">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="litnow" LoadingPanelID="LoadginPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div class="TabContainer">
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Vista" MultiPageID="RadMultiPage1"
                SelectedIndex="0" CssClass="tabStrip" Width="698px">
                <Tabs>
                    <telerik:RadTab Value="Information">
                    </telerik:RadTab>
                    <telerik:RadTab Value="Fields">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="multiPage">
                <telerik:RadPageView ID="RadPageViewInformation" runat="server" Width="100%">
                    <div class="TabTitle">
                        <asp:Label ID="lblTitleTab1" runat="server"></asp:Label>
                    </div>
                    <asp:Table ID="Table3" CssClass="EditFormTable" runat="server">
                        <asp:TableRow>
                            <asp:TableCell CssClass="CellLabelLTW">
                                <asp:Label runat="server" ID="lblName" CssClass="fontLabel" /></asp:TableCell><asp:TableCell
                                    CssClass="CellTextBoxL">
                                    <asp:TextBox ID="txtName" MaxLength="250" CssClass="TextBoxPopUp" Text='<%# Bind("Name") %>'
                                        runat="server">
                                    </asp:TextBox><asp:RequiredFieldValidator ID="rfFirstName" runat="server" ErrorMessage="*"
                                        ControlToValidate="txtName" CssClass="validator" ValidationGroup="Information" />
                                    <asp:CustomValidator ID="cvName" runat="server" ValidationGroup="Information" CssClass="validator"
                                        ControlToValidate="txtName" OnServerValidate="cvName_OnServerValidate" />
                                </asp:TableCell>
                            <asp:TableCell CssClass="CellLabelRTW" />
                            <asp:TableCell CssClass="CellTextBoxR" />
                        </asp:TableRow>
                        <asp:TableRow>
                            <asp:TableCell CssClass="CellLabelLTW">
                                <asp:Label runat="server" ID="lblDescription" CssClass="fontLabel" /></asp:TableCell><asp:TableCell
                                    CssClass="CellTextBoxL">
                                    <asp:TextBox ID="txtDescription" MaxLength="250" CssClass="TextBoxPopUp" Text='<%# Bind("Description") %>'
                                        runat="server">
                                    </asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
                                        ErrorMessage="*" ControlToValidate="txtName" CssClass="validator" ValidationGroup="Information" />
                                </asp:TableCell>
                            <asp:TableCell CssClass="CellLabelRTW" />
                            <asp:TableCell CssClass="CellTextBoxR" />
                        </asp:TableRow>
                    </asp:Table>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageViewField" runat="server" Width="100%" >
                    <div class="TabTitle">
                        <asp:Label ID="lblFields" runat="server"></asp:Label>
                    </div>
                    <div class="listBoxHeaders">
                        <span style="margin-left: 50px;">
                            <asp:Literal runat="server" ID="litAvailable" />
                        </span><span style="margin-left: 136px;">
                            <asp:Literal runat="server" ID="litOnDcumentType" /></span> <span style="margin-left: 200px">
                                Properties </span>
                    </div>
                    <div>
                        <table style="position: relative; left: -3px; margin-bottom: 2px;">
                            <tr>
                                <td>
                                    <telerik:RadTextBox ID="tbAvailableFilter" runat="server" Width="187px" autocomplete="on"
                                        onkeyup="filterList();" />
                                </td>
                                <td>
                                    <telerik:RadButton ID="rbtnClear" runat="server" Width="22px" AutoPostBack="false"
                                        OnClientClicking="rbtnClear_OnClientClicking">
                                        <Icon PrimaryIconCssClass="rbClear" />
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="container">
                        <div id="leftContainer">
                            <telerik:RadListBox ID="rlbAvailable" runat="server" Width="100%" AllowTransfer="true"
                                AllowTransferOnDoubleClick="true" TransferToID="rlbChosen" SelectionMode="Multiple"
                                EnableDragAndDrop="true" AllowReorder="true" DataTextField="Header" DataValueField="Id"
                                Sort="Ascending" OnClientTransferring="rlbAvailable_OnClientTransferring" ButtonSettings-ShowTransferAll="true">
                            </telerik:RadListBox>
                        </div>
                        <div id="middleContainer">
                            <telerik:RadListBox ID="rlbChosen" runat="server" Sort="Ascending" Width="100%" AutoPostBack="true"
                                OnSelectedIndexChanged="rlbChosen_SelectedIndexChange" SelectionMode="Multiple"
                                EnableDragAndDrop="true" AllowReorder="true" DataTextField="Header" DataValueField="Id">
                            </telerik:RadListBox>
                        </div>
                    <div id="rightContainer">
                             <div> <asp:Label ID="lblDataTypeLabel" runat="server"></asp:Label>
                              <asp:Label ID="lblDataType" runat="server"></asp:Label>
                              </div>
                           
                        
                         <%-- <telerik:RadTabStrip ID="RadTabStrip2" runat="server" Skin="Vista" MultiPageID="RadMultiPage2"
                                    SelectedIndex="0" CssClass="tabSubStrip" Width="698px">
                                    <Tabs>
                                        <telerik:RadTab Value="Mask">
                                        </telerik:RadTab>
                                        <telerik:RadTab Value="Rules" Enabled="false">
                                        </telerik:RadTab>
                                    </Tabs>
                                </telerik:RadTabStrip>--%>
                    </div>
                    <div class="clear">
                    </div>
                    </div>
                    <div class="clear">
                    </div>
                    
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
        <div class="Clear">
        </div>
        <div class="footerSave" runat="server">
            <asp:Table ID="Table2" runat="server" Width="100%" HorizontalAlign="Right">
                <asp:TableRow>
                    <asp:TableCell HorizontalAlign="center">
                        <telerik:RadButton ID="btnSave" runat="server" Skin="Vista" Width="100px" OnClick="btnSave_OnClick" />
                        <telerik:RadButton ID="btnCancel" runat="server" Skin="Vista" Width="100px" CausesValidation="False"
                            ToolTip="Cancel" OnClientClicked="CancelEdit" />
                        <telerik:RadButton ID="btnDelete" runat="server" Skin="Vista" Width="100px" CausesValidation="False"
                            ToolTip="Remove current User" OnClick="btnDelete_OnClick" />
                    </asp:TableCell></asp:TableRow>
            </asp:Table>
        </div>
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
            <Windows>
                <telerik:RadWindow ID="FieldFormDialog" runat="server" Height="600px" Width="900px"
                    Skin="Vista" Left="15%" ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true"
                    VisibleStatusbar="false" Behaviors="Close" />
            </Windows>
        </telerik:RadWindowManager>
        </form>
    </body>
    </html>



    regards
  2. Answer
    Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 17 May 2012 Link to this post

    Hello,

    I've noticed that the Height property of the RadListBox hasn't been set. Would please set to it 100% and check whether it's expanded to the height of its container.

    Kind regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top