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

Issue with HeaderTemplate Style and Multiple Transfer Listboxes

3 Answers 170 Views

ListBox

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

Dean asked on 13 Jun 2012, 10:15 PM

Hello,

I have a page (code below) that has a tabstrip on it. Each tab loads a RadWindow. Each window has a RadListBox in it configured to AllowTransfer="true". Everything was working fine until I tried to style the header template. Once I added the style, the header on the second ListBox incorrectly.

Has anyone experienced any issues related to the styling of the header template?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListBoxText.aspx.cs" Inherits="IgniteDM.Admin.vPacks.ListBoxText" %>

<!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">

<title></title>

<style type="text/css">

.OnDemandListBoxHeader

{

padding: 5px;

font-family: Arial, Verdana;

font-size: 14px;

line-height: 18px

}

.PushListBoxHeader

{

padding: 5px;

font-family: Arial, Verdana;

font-size: 14px;

line-height: 18px

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" ShowBaseLine="true"

SelectedIndex="0" Align="Left" ReorderTabsOnSelect="true" Width="530px">

<Tabs>

<telerik:RadTab Text="OnDemand" Font-Bold="true">

</telerik:RadTab>

<telerik:RadTab Text="Push" Font-Bold="true">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"

Width="530px" Height="550px">

<telerik:RadPageView ID="RadPageView1" runat="server">

<table border="0" cellpadding="0" cellspacing="0">

<tr><td> </td></tr>

<tr>

<td>

<div style="padding-left: 20px;">

<telerik:RadListBox runat="server" ID="RadListBoxOnDemandSource" Height="200px" Width="230px"

AllowTransfer="true" TransferToID="RadListBoxOnDemandDestination">

<HeaderTemplate>

<div class="OnDemandListBoxHeader">Available Groups</div>

</HeaderTemplate>

<Items>

<telerik:RadListBoxItem Text="Engineering" />

<telerik:RadListBoxItem Text="Operations" />

<telerik:RadListBoxItem Text="Sales" />

</Items>

</telerik:RadListBox>

<telerik:RadListBox runat="server" ID="RadListBoxOnDemandDestination" Height="200px" Width="200px">

<HeaderTemplate>

<div class="OnDemandListBoxHeader">Selected Groups</div>

</HeaderTemplate>

</telerik:RadListBox>

</div>

</td>

</tr>

</table>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

<table border="0" cellpadding="0" cellspacing="0">

<tr><td> </td></tr>

<tr>

<td>

<div style="padding-left: 20px;">

<telerik:RadListBox runat="server" ID="RadListBoxPushSource" Height="200px" Width="230px"

AllowTransfer="true" TransferToID="RadListBoxPushDestination">

<HeaderTemplate>

<div class="OnDemandListBoxHeader">Available Groups</div>

</HeaderTemplate>

<Items>

<telerik:RadListBoxItem Text="Engineering" />

<telerik:RadListBoxItem Text="Operations" />

<telerik:RadListBoxItem Text="Sales" />

</Items>

</telerik:RadListBox>

<telerik:RadListBox runat="server" ID="RadListBoxPushDestination" Height="200px" Width="200px">

<HeaderTemplate>

<div class="OnDemandListBoxHeader">Selected Groups</div>

</HeaderTemplate>

</telerik:RadListBox>

</div>

</td>

</tr>

</table>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</form>

</body>

</html>

3 Answers, 1 is accepted

answered on 18 Jun 2012, 12:27 PM

Hi Dean,

I will paste the answer of the ticket that you open in case someone else encounter the same issue:
It seems to be a bug of the RadListBox when you place it in a second PageView and when using HeaderTemplate (occurs in IE9 only). I already logged it in our internal system so that our developers can take a look at it and fix it.

Regards,
Kate
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.