This is a migrated thread and some comments may be shown as answers.

RadListBox Button Issue

6 Answers 177 Views

ListBox

This is a migrated thread and some comments may be shown as answers.

Melanie asked on 17 Jan 2013, 04:53 PM

rlb.gif

Hello,

I am having an issue with the RadListBox transfer buttons. It is happening in IE and in quirks mode only, yes I know about quirks mode and yes I have to use it for client compatibility issues. The buttons are rendering partially behind the listbox. Please see the screenshot for an example. The settings for the listbox are below though I don't think it is going to matter because what I need is a way to deal with IE5 compliant styling I think.

<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" HorizontalAlign="Right" />

</telerik:RadListBox>

The one really weird thing is that if I change the AreaWidth to 20, the buttons scoot to the right just a bit but they never fully come out from behind the box. Another weird thing about this is that I took all of the code for the listbox and put it in to a new project and it renders fine, even in quirks mode. I am truly at a loss on this. I am wondering if it has anything to do with the fact that I am using this as a custom control instead of putting it directly in the .aspx page. This is the only difference between the original project and the new test project I made.

6 Answers, 1 is accepted

answered on 22 Jan 2013, 02:19 PM

Hi, Robert.

I tested with your snippet and I couldn't produce the depicted behvaiour. The only issue i have found that in IE 6 the buttons are slightly wider than in the rest of the skins.

Which leads me to believe that there might be something specific to your project. Do you happen to have additional styles on the page, that i am not aware of?

Also ,what is your exact working environment? I would like to test against the same environment as you.

Regards,
Ivan Zhekov
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.

answered on 23 Jan 2013, 02:14 PM

I f you mean which version of the dll I am using it is 2012.2.912.40. I am going to attach the code for the control where this issue is happening. There are some styles in the aspx page but I took them all out just to safe and the same thing occurs which leads me to believe it is somewhere in the control code. I did not write this control so I am not sure what the thought process was behind doing it this way. It was created like 7 years ago. Note that it is the listbox with ID="rlbRoutes" that is the issue

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ClosureAlertSubscriber.ascx.cs" Inherits="Site.Client.Test.ClosureAlertSubscriber" %>

<%@ 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%;

color: red;

}

.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="Site" Value="Site" Selected="true" />

<telerik:RadComboBoxItem Text="Non-Site" Value="NONSite" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td colspan="4">

</td>

</tr>

<tr>

<td>

<asp:Label id="lblSiteUsers" runat="server" Text="Site Users:" AssociatedControlID="rcbSiteUsers"></asp:Label>

<asp:Label id="lblFirstName" runat="server" Text="First Name:" AssociatedControlID="rtbFirstName" Visible="false"></asp:Label>

</td>

<td >

<telerik:RadComboBox ID="rcbSiteUsers" Runat="server" EmptyMessage="Please select an Site User" MarkFirstMatch="False" Width="360px" />

<asp:CustomValidator ID="rfvSiteUsers" ErrorMessage="Please select an Site User" Enabled="True" runat="server" Display="None" ClientValidationFunction="userValidate"></asp:CustomValidator>

<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="400px" 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="400px">

<ItemTemplate>

<ul class="details">

<li>

<label>Route: </label>

<%# DataBinder.Eval(Container, "Text")%></label>

</li>

<li>

<label>

Duration (Hours): </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="5">

<asp:ValidationSummary ID="vsSubscriber" runat="server"

DisplayMode="BulletList" CssClass="validationsummary" HeaderText="<div class='validationheader'> Please correct the following:</div>" />

</td>

</tr>

<tr>

<td colspan="5">

<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) {

//alert('im here! 1111');

args.IsValid = true;

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

if (listbox.get_items().get_count() < 1) {

args.IsValid = false;

}

function userValidate(source, arguments)

{

arguments.IsValid = true;

var Cbox = $find("<%= rcbSiteUsers.ClientID %>");

if (Cbox) {

if (Cbox.get_selectedIndex() == null || Cbox.get_selectedIndex() == "") {

arguments.IsValid = false;

}

</script>

</telerik:RadScriptBlock>

answered on 28 Jan 2013, 11:40 AM

649837----RadListBox-Button-Issue.zip

Hello, Robert.

I checked the code and I couldn't produce the wrong behaviour.

True, in quirks mode there was displacement in regards to standard modes, but still nothing out of the ordinary.

Few things puzzle me in your page -- there is no script manager. The controls require a script manager to function properly. By any chance did you forgot to include it in this snippet, or is there a master page that includes the script manager?

I am attaching a slightly modified version of your page (so I could run it locally).

Can you confirm that you still have the issues described? If not, remove the doctype and try again. Then write back with your findings.

Regards,
Ivan Zhekov
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadListBox Button Issue

6 Answers, 1 is accepted