how to make li elements in ContentTemplate/UpdatePanel multi - selectable
<p>I want to use jQuery to allow not only drag and drop of one element - it should also be able to select all and deselect all via a &lt;&lt; and >> button.</p>

<p>Currently you can create lists via drag and drop of one element and move it in the other contenttemplate panel. But I want to add the select all and deselect all method. How can I do that?</p>

<p>Thanks!</p>

<pre><code>&lt;asp:UpdatePanel runat="server" ID="CustomTrainingListUpdatePanel" UpdateMode="Conditional"&gt;
        &lt;ContentTemplate&gt;
            &lt;asp:Repeater ID="CustomTrainingRepeater" runat="server" DataSourceID="SqlDataSource_editTrainingList"&gt;
                &lt;HeaderTemplate&gt;
                    &lt;ul id="CustomTrainingList" class='droptrue' style="width: 350px; height: 350px;
                        overflow: auto"&gt;
                &lt;/HeaderTemplate&gt;
                &lt;ItemTemplate&gt;
                    &lt;li id="CustomListItem" class="ui-state-default" style="font-size: smaller; width: 320px;"
                        inserted="false" trainingdataid="&lt;%# Eval("ID") %&gt;" title="&lt;%# Eval("content") %&gt;"&gt;
                        &lt;%# Eval("title") %&gt;&lt;/li&gt;
                &lt;/ItemTemplate&gt;
                &lt;FooterTemplate&gt;
                    &lt;/ul&gt;&lt;/FooterTemplate&gt;
            &lt;/asp:Repeater&gt;
        &lt;/ContentTemplate&gt;
        &lt;Triggers&gt;
            &lt;asp:AsyncPostBackTrigger ControlID="TrainingsList_DropDown" EventName="SelectedIndexChanged" /&gt;
        &lt;/Triggers&gt;
    &lt;/asp:UpdatePanel&gt;
&lt;/td&gt;
&lt;td&gt;
    &lt;asp:Button ID="ButtonSelectAll" runat="server" OnClick="ButtonSelectAll_Click" Text="&lt;&lt;" /&gt;
    &lt;asp:Button ID="ButtonClearAll" runat="server" Text="&gt;&gt;" OnClick="ButtonClearAll_Click" /&gt;
&lt;/td&gt;
&lt;td&gt;
    &lt;asp:UpdatePanel runat="server" ID="TrainingFromDB_UpdatePanel" UpdateMode="Conditional"&gt;
        &lt;ContentTemplate&gt;
            &lt;div&gt;
                &lt;asp:Repeater ID="TrainingRepeater" runat="server" DataSourceID="SqlDataSource_traininglistbox"&gt;
                    &lt;HeaderTemplate&gt;
                        &lt;ul id="TrainingList" style="width: 350px; height: 350px; overflow: auto"&gt;
                    &lt;/HeaderTemplate&gt;
                    &lt;ItemTemplate&gt;
                        &lt;li id="TrainingListItem" class="draggable ui-state-default" style="font-size: smaller;
                            width: 320px;" trainingdataid="&lt;%# Eval("ID") %&gt;" title="&lt;%# Eval("content") %&gt;"&gt;
                            &lt;%# Eval("title") %&gt;&lt;/li&gt;
                    &lt;/ItemTemplate&gt;
                    &lt;FooterTemplate&gt;
                        &lt;/ul&gt;&lt;/FooterTemplate&gt;
                &lt;/asp:Repeater&gt;
            &lt;/div&gt;
        &lt;/ContentTemplate&gt;
        &lt;Triggers&gt;
            &lt;asp:AsyncPostBackTrigger ControlID="TrainingsList_DropDown" EventName="SelectedIndexChanged" /&gt;
        &lt;/Triggers&gt;
    &lt;/asp:UpdatePanel&gt;
</code></pre>
