This is a migrated thread and some comments may be shown as answers.
ListBox with templates
2 Answers 178 Views
This is a migrated thread and some comments may be shown as answers.
Hazem
Top achievements
Rank 2
Hazem asked on 06 Sep 2009, 02:26 PM

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" />&nbsp;<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" />&nbsp;<asp:Label runat="server" Text='<%# Eval("Header") %>' />

                        &nbsp;<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;

    }

 

2 Answers, 1 is accepted

Sort by
0
adel
Top achievements
Rank 1
answered on 06 Sep 2009, 06:40 PM
I've the same exact issue.
Any help would be appreciated.
0
Genady Sergeev
Telerik team
answered on 10 Sep 2009, 08:42 AM
Hello guys,

Templates cannot be auto preserved over the transfer process. Auto preserving works only for the reorder. In order to have your templates preserved when items are transferred there is some manual work that should be done. I suggest you that you take this demo as a starting point. It describes a case that is close to yours.

I hope it will help you to get started.

Regards
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Asked by
Hazem
Top achievements
Rank 2
Answers by
adel
Top achievements
Rank 1
Genady Sergeev
Telerik team
Share this question
or