Hello;
I need to transfer items from one RadListBox to another RadListBox using client-side programming and both list boxes has item templates. I’ve noticed that the item is not moved correctly in that case unlike the case when the list box items do not have template.
Any help?
Here is the code snippet:
<table border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="50%" align="center">
<telerik:RadListBox runat="server" ID="rlb1" TransferMode="Move" SelectionMode="Single" AutoPostBack="true"
OnClientSelectedIndexChanged="selectedIndexChanged" Width="200px" Height="150px" DataTextField="Header" DataValueField="Header">
<ItemTemplate>
<asp:Image runat="server" ImageUrl="~/images/plus_009.gif" /> <asp:Label runat="server" Text='<%# Eval("Header") %>' />
</ItemTemplate>
</telerik:RadListBox>
</td>
<td align="center">
<telerik:RadListBox runat="server" ID="rlb2" TransferMode="Move" SelectionMode="Single" Width="200px" Height="150px"
DataTextField="Header" DataValueField="Header">
<ItemTemplate>
<asp:Image runat="server" ImageUrl="~/images/plus_009.gif" /> <asp:Label runat="server" Text='<%# Eval("Header") %>' />
<asp:Label runat="server" Text='<%# Eval("Desc") %>' />
</ItemTemplate>
</telerik:RadListBox>
</td>
</tr>
</table>
<telerik:RadScriptBlock runat="server">
<script language="javascript" type="text/javascript">
function selectedIndexChanged(sender, args) {
var listSource = $find("<%= rlb1.ClientID %>");
var selectedItem = listSource.get_selectedItem();
listSource.trackChanges();
var listDest = $find("<%= rlb2.ClientID %>");
//var item = new Telerik.Web.UI.RadListBoxItem();
//item.set_text(selectedItem.get_text());
//item.set_value(selectedItem.get_value());
//var item = selectedItem.clone();
listDest.trackChanges();
listDest.get_items().add(selectedItem);
//item.scrollIntoView();
listDest.commitChanges();
//listSource.get_items().remove(selectedItem);
listSource.commitChanges();
}
</script>
</telerik:RadScriptBlock>
Code behind (to fill the list box woth some data):
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
rlb1.DataSource = getTable();
rlb1.DataTextField = "Header";
rlb1.DataValueField = "Header";
rlb1.DataBind();
}
}
private DataTable getTable()
{
DataTable table = new DataTable();
table.Columns.Add("Header", typeof(string));
table.Columns.Add("Desc", typeof(string));
DataRow row;
#region Insert Data to Row
row = table.NewRow();
row["Header"] = "Head1";
row["Desc"] = "Desc1";
table.Rows.Add(row);
#endregion
#region Insert Data to Row
row = table.NewRow();
row["Header"] = "Head2";
row["Desc"] = "Desc2";
table.Rows.Add(row);
#endregion
#region Insert Data to Row
row = table.NewRow();
row["Header"] = "Head3";
row["Desc"] = "Desc3";
table.Rows.Add(row);
#endregion
#region Insert Data to Row
row = table.NewRow();
row["Header"] = "Head4";
row["Desc"] = "Desc4";
table.Rows.Add(row);
#endregion
return table;
}