RadListBox Transfer Items from Source to Destination is getting fired even when I click a button in the Page. How Do I stop That?
Steps to Reproduce the Issue – Load the Page. Click the button. See the Item counts for the List Boxes inside the AJAX Update Panel. It will show correctly – 7 (source) and 0 (target) respectively. Move one item from Source to Target RadListBox. Click the button again – it shows 6 (source) and 1 (target) for the first time. Then click the button again – it shows 5 (source) and 2 (target) ..then click button.. it shows 4 (source) and 3 (target). Nothing is changing in the User Interface.
I believe that Transfer event from source to target is getting fired even when I click the button. How do I stop the Transfer event when the button is clicked?
In my page, I have to refresh the AJAX Update panel but I do not want the items in the RadListBox to get changed at the same time.
ASPX Page -
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestRadListBox.WebForm1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div>
<table>
<tr>
<th colspan="2">Move 1 Item from Left to Right and then click the button below and see the Item Counts</th>
</tr>
<tr>
<td>
<telerik:RadListBox ID="SourceRadListBox" runat="server" Height="100px" Width="200px"
AllowTransfer="true" TransferToID="TargetRadListBox">
</telerik:RadListBox>
</td>
<td>
<telerik:RadListBox runat="server" ID="TargetRadListBox" Height="100px" Width="175px"
AllowReorder="true" />
</td>
</tr>
</table>
</div>
<br/>
<div>
Time OUTSIDE Update Panel : <asp:Label ID="timeOutsideLabel" runat="server"/>
</div>
<br/>
<div align="left">
<asp:Button ID="addRuleButton" runat="server" Text="Click To Refresh The Time Below Inside AJAX Update Panel"
onclick="addRuleButton_Click" />
</div>
<br/>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table border = "2">
<tr><th>AJAX Update Panel</th></tr>
<tr><td>Time INSIDE Update Panel : <asp:Label ID="timeInsideLabel" runat="server"/></td></tr>
<tr><td>Item Count in Source RadListBox : <asp:Label ID="srcCount" runat="server"/></td></tr>
<tr><td>Item Count in Target RadListBox : <asp:Label ID="tarCount" runat="server"/></td></tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addRuleButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
C# Code Behind -
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
namespace TestRadListBox
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<string> week = new List<string> { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };
SourceRadListBox.DataSource = week;
SourceRadListBox.DataBind();
string timenow = DateTime.Now.ToLongTimeString();
timeInsideLabel.Text = timenow;
timeOutsideLabel.Text = timenow;
}
}
protected void addRuleButton_Click(object sender, EventArgs e)
{
timeInsideLabel.Text = DateTime.Now.ToLongTimeString();
srcCount.Text = SourceRadListBox.Items.Count.ToString();
tarCount.Text = TargetRadListBox.Items.Count.ToString();
}
}
}
2 Answers, 1 is accepted
Please review the following forum topic, explaining why you cannot have a partial postback on the page with listboxes, if the listboxes aren't included in the postback:
http://www.telerik.com/community/forums/aspnet-ajax/listbox/index-was-out-of-range-must-be-non-negative-and-less-than-the-size-of-the-collection-parameter-name-index.aspx
All the best,
Bozhidar
the Telerik team
Rank 1