Buttons Hidden Behind Listbox

5 posts, 0 answers
  1. Robert
    Robert avatar
    3 posts
    Member since:
    Dec 2011

    Posted 30 Jul 2012 Link to this post

    I have buttons set up to display to the right of the listbox, however when it dipslays, the buttons are hidden behind the listbox.  The listbox is on a webcontrol that is being used as an edit form for a grid.
  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 01 Aug 2012 Link to this post

    Hello Robert,

    Could you provide a snippet of the code you are using and a screenshot of the observed behavior?

    Kind regards,
    Nencho
    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
  4. Robert
    Robert avatar
    3 posts
    Member since:
    Dec 2011

    Posted 01 Aug 2012 Link to this post

    Page with Grid:
    <
    telerik:RadMultiPage ID="rmpPPPRouteAdmin" runat="server" SelectedIndex="0" Width="100%">    
       <telerik:RadPageView ID="pvSubscriptions" runat="server" Width="100%">
               <telerik:RadGrid id="rgSubscribers"  runat="server"  allowsorting="True" Width="100%" 
                         gridlines="Horizontal" OnNeedDataSource="rgSubscribers_NeedDataSource"  
                         OnDetailTableDataBind="rgSubscribers_DetailTableDataBind"  OnInsertCommand="rgSubscribers_InsertCommand"
                         Skin="Windows7"   GroupingEnabled="false" EnableLinqExpressions="false"
                         AutoGenerateColumns="False" AllowFilteringByColumn="True" ShowStatusBar="True" >
                     <MasterTableView Width="100%"   DataKeyNames="subscriber_media_id" CommandItemDisplay="Top" NoMasterRecordsText="No Subscribers" AllowFilteringByColumn="true"
                         AllowMultiColumnSorting="True" EnableHeaderContextMenu="true"   ShowFooter="true" EditMode="PopUp"  >
                         <RowIndicatorColumn Visible="False">
                             <HeaderStyle Width="20px"></HeaderStyle>
                         </RowIndicatorColumn>
                         <CommandItemSettings AddNewRecordText="New Subscriber" />
                         <ExpandCollapseColumn Visible="True"></ExpandCollapseColumn>
                         <Columns>
                             <telerik:GridBoundColumn DataField="last_name" HeaderText="Last Name" 
                                 ReadOnly="True" UniqueName="lastname">
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="first_name" HeaderText="First Name" ReadOnly="True" 
                                 UniqueName="firstname">
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="address" HeaderText="Email" ReadOnly="True" 
                                 UniqueName="address">
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="sub_type" HeaderText="Subscriber Type" ReadOnly="True" 
                                 UniqueName="sub_type">
                             </telerik:GridBoundColumn>                              
                     
                         </Columns>
                         <EditFormSettings   InsertCaption="Add Subscriber"  EditFormType="WebUserControl"   UserControlName="PPPRouteClosureAlertSubscriber.ascx">
                            <PopUpSettings  Modal="false" Height="400" Width="700" ScrollBars="Auto" />
                         </EditFormSettings>
                         <DetailTables>
                             <telerik:GridTableView DataKeyNames="subscriber_media_id" Name="Alert Subscribers" Width="100%" 
                                  AllowFilteringByColumn="false" CommandItemDisplay="Top" NoDetailRecordsText="No Alert Subscriptions"  EditMode="PopUp">
                                  <ParentTableRelation>
                                     <telerik:GridRelationFields DetailKeyField="subscriber_media_id" MasterKeyField="subscriber_media_id" />
                                 </ParentTableRelation>
                                 <CommandItemSettings AddNewRecordText="Add Subscription"></CommandItemSettings>
                                 <EditFormSettings InsertCaption="Add Subscriber"  EditFormType="WebUserControl"   UserControlName="PPPRouteClosureAlertSubscriber.ascx">
                                     <PopUpSettings  Modal="false" />
                                 </EditFormSettings>
                                 <Columns>
                                     <telerik:GridBoundColumn DataField="PPPROUTE" HeaderText="PPPROUTE" UniqueName="ppproute" />
                                     <telerik:GridBoundColumn DataField="duration" HeaderText="Minimum Closure Duration (hours)" UniqueName="duration" />
                                 </Columns>
                             </telerik:GridTableView>
                         </DetailTables>
                               
              </telerik:RadGrid>

    User Control:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PPPRouteClosureAlertSubscriber.ascx.cs" Inherits="IRRIS.Client.SDDC.PPPRouteClosureAlertSubscriber" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <head id="Head1" >
    <title></title>
       
        <style type="text/css">
    .col1, .col2, .col3
    {
        float: left;
        width: 110px;
        margin: 0;
        padding: 0 5px 0 0;
        line-height: 14px;
    }
      
      
        #rlbRoutes .rlbGroup
        {
            margin-right: 54px !important;
        }
        .validationsummary {
            border: 1px solid #dfe9f5;
            padding: 0px 0px 13px 0px;
            font-size:12px;
            width:99%;
        }
        .validationheader {
           left: 0px;
           position: relative;
           font-size: 11px;
           background-color: #dfe9f5;
           color: #56300a;
           height: 14px;
           font-weight: bold;
           border-bottom: 1px solid #dfe9f5;
           padding-top: 3px;
       }
       .validationsummary ul {
           padding-top: 5px;
           padding-left: 45px;
           list-style:none;
           font-size: 11px;
           color:#982b12;
           font-style:italic;
       }
       .validationsummary ul li {
           padding: 2px 0px 0px 15px;
           background-position:0px 3px;
           background-repeat:no-repeat;
       }
      
    </style>
    </head>
    <telerik:RadAjaxManagerProxy ID="radProxy" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rlbRoutes">
                <UpdatedControls >
                    <telerik:AjaxUpdatedControl ControlID="rlbSelectedRoutes" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rlbSelectedRoutes">
                <UpdatedControls >
                    <telerik:AjaxUpdatedControl ControlID="rlbSelectedRoutes" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
      
    </telerik:RadAjaxManagerProxy>
      
    <table id="Table1"   cellspacing="2" cellpadding="2" border="0" width="100%">
        <tr>
            <td colspan="4">
                 
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label id="Label1" runat="server" Text="Subscriber Type:" AssociatedControlID="rcbSubType"></asp:Label>
            </td>
            <td colspan="3">
                <telerik:RadComboBox ID="rcbSubType" Runat="server" CausesValidation="false" AutoPostBack="true" OnSelectedIndexChanged="rcbSubType_SelectedIndexChanged">
                    <Items>
                        <telerik:RadComboBoxItem Text="IRRIS" Value="IRRIS" Selected="true" />
                        <telerik:RadComboBoxItem Text="Non-IRRIS" Value="NONIRRIS" />
                    </Items>
                </telerik:RadComboBox>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                   
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label id="lblIRRISUsers" runat="server" Text="IRRIS Users:" AssociatedControlID="rcbIRRISUsers"></asp:Label>
                <asp:Label id="lblFirstName" runat="server" Text="First Name:" AssociatedControlID="rtbFirstName" Visible="false"></asp:Label>
            </td>
            <td >
                <telerik:RadComboBox ID="rcbIRRISUsers" Runat="server" EmptyMessage="Please select an IRRIS User" MarkFirstMatch="False" Width="360px" />
                <telerik:RadTextBox ID="rtbFirstName" runat="server"
                    TextMode="SingleLine" Visible="false" Enabled="false" Width="225px" ></telerik:RadTextBox>
                                <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" Display="None"
                    ControlToValidate="rtbFirstName"   ErrorMessage="Please enter a first name" Enabled="false" />
           </td>
            <td>
                <asp:Label id="lblLastName" runat="server" Text="Last Name:" AssociatedControlID="rtbLastName" Visible="false"></asp:Label>
            </td>
            <td >
                <telerik:RadTextBox ID="rtbLastName" runat="server" 
                    TextMode="SingleLine" Visible="false" Enabled="false" Skin="Windows7" Width="223px"></telerik:RadTextBox>
                <asp:RequiredFieldValidator ID="rfvLastName" runat="server" Display="None"
                    ControlToValidate="rtbLastName"   ErrorMessage="Please enter a last name" Enabled="false" />
      
            </td>
      
        </tr>
        <tr>
            <td>
                <asp:Label id="lblEmail" runat="server" Text="Email:" AssociatedControlID="rtbEmail" Visible="false"></asp:Label>
      
            </td>
            <td colspan="3">
                <telerik:RadTextBox ID="rtbEmail" runat="server"
                    TextMode="SingleLine" Visible="false" Enabled="false" Width="219px" CausesValidation="false" ></telerik:RadTextBox>
                <asp:RegularExpressionValidator ID="revEmail" runat="server" Display="None"
                    ErrorMessage="Please enter a valid e-mail address." ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"
                    ControlToValidate="rtbEmail" Enabled="false">
                </asp:RegularExpressionValidator>
                <asp:RequiredFieldValidator ID="rfvEmail" runat="server" Display="None"
                    ControlToValidate="rtbEmail"   ErrorMessage="Please enter an e-mail address" Enabled="false" />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                 </td>
        </tr>
        <tr>
        <td colspan="4">
        <table width="100%">
        <tr>
        <td>
        <asp:Label runat="server" Text="Available PPP Routes:"></asp:Label>
        </td>
        <td></td>
        <td> <asp:Label ID="Label2" runat="server" Text="Selected PPP Routes:"></asp:Label></td>
        </tr>
        <tr>
        <td width="40%" valign="top">
         <telerik:RadListBox ID="rlbRoutes" runat="server" AllowTransfer="true" TransferToID="rlbSelectedRoutes"  CausesValidation="false"
        TransferMode="Move" AutoPostBackOnTransfer="true" SelectionMode="Multiple" Height="200px" Width="200px" visible="true" Enabled="true" OnTransferred="rlbRoutes_Transferred">
        <ButtonSettings Position="Right"   VerticalAlign="Middle"  ShowDelete="false" ShowTransferAll="true" ShowReorder="false"   />
      
    </telerik:RadListBox>
        </td>
        <td width="5%">
        </td>
        <td width="30%" valign="top">
        <telerik:RadListBox ID="rlbSelectedRoutes"  runat="server" Height="200px" Width="200px">
                <ItemTemplate>
                      
                    <ul class="details">
                                <li>
                                <label>Route: </label>
                                    <%# DataBinder.Eval(Container, "Text")%></label>    
                                </li>
                                <li>
                                    <label>
                                        Duration: </label>
                                    <telerik:RadNumericTextBox ID="rntbDuration" Runat="server"         Culture="en-US" DataType="System.Int32" Value="6" Width="125px" MaxValue="48" MinValue="1" 
                                                NumberFormat-DecimalDigits="0" ShowSpinButtons="True" >
        <NumberFormat DecimalDigits="0"  />
        </telerik:RadNumericTextBox>
                                </li>
                            </ul>        
             
      
            </ItemTemplate>
    </telerik:RadListBox
            <asp:CustomValidator ID="cvSelectedRoutes" runat="server" Display="None"  Enabled="true"    
      
                 ErrorMessage="Please select at least one PPP Route"    ClientValidationFunction="clientValidate"      ></asp:CustomValidator>
      
        </td>
        <td>
        </td>
        <td style="text-align:right;" width="100%"  valign="bottom"
         
        </td>
        </tr>
        <tr>
        <td colspan="4">
             <asp:ValidationSummary ID="vsSubscriber" runat="server" 
                     DisplayMode="BulletList"  CssClass="validationsummary" HeaderText="<div class='validationheader'> Please correct the following:</div>"   />
        </td>
        <td>
         <asp:Button ID="btnSave" Text="Save" runat="server" CommandName="PerformInsert"
    Visible='<%# DataItem is Telerik.Web.UI.GridInsertionObject %>' 
            ></asp:Button>
                   
    <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
    CommandName="Cancel"></asp:Button>
        </td>
        </tr>
        </table>
       </td>
       </tr>    
         
      
      
      
    </table>
      <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
      
            function clientValidate(source, args) {
                args.IsValid = true;
                var listbox = $find("<%= rlbSelectedRoutes.ClientID %>");
                if (listbox.get_items().get_count() < 1) {
                    args.IsValid = false;
                }
      
            }
      
                    }
              
      
        </script>
    </telerik:RadScriptBlock>

  5. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 06 Aug 2012 Link to this post

    Hello Robert,

    I've tried to reproduce the issue you experience, with the provided resources, but to no avail. Could you provide us a runnable sample, so we could examine the problem locally?


    Kind regards,
    Nencho
    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.
  6. Robert
    Robert avatar
    3 posts
    Member since:
    Dec 2011

    Posted 10 Aug 2012 Link to this post

    I will try to get a sample uploaded.  Until then, here is a link to a solution for this issue when the listbox is on a tab:  http://www.telerik.com/community/forums/aspnet-ajax/listbox/listbox-buttons-hides-behind-the-listbox.aspx

    In my case there is a tab however since the listbox isn't displayed until editing the grid row the solution doesn't work for me.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017