Apr 09, 2010, 6:47 PM
MultiSelect Sort AfterDrop
Hi,
I am using 2 multiselect controls which i allow dragging and dropping between. I need it to sort after each drop, I wrote the js function to do this and attached the listener to the run the function. The sort appears to work at first glance, however if i drag the sorted control back to the original it's text and value changes (i assume back to what the original index of it had). Looking for suggestions and help please. I also tried adding the SortField="name" Direction="ASC" but that seemed to do nothing at all... Here is the code sample that I'm working with...
Thanx,
I am using 2 multiselect controls which i allow dragging and dropping between. I need it to sort after each drop, I wrote the js function to do this and attached the listener to the run the function. The sort appears to work at first glance, however if i drag the sorted control back to the original it's text and value changes (i assume back to what the original index of it had). Looking for suggestions and help please. I also tried adding the SortField="name" Direction="ASC" but that seemed to do nothing at all... Here is the code sample that I'm working with...
<ext:Panel ID="Panel4" runat="server" Border="false" BodyStyle="height: 260px;">
<Body>
<ext:MultiSelect ID="MultiSelect1" runat="server" AppendOnly="true" DragGroup="grp1"
Width="200" Height="250" KeepSelectiononclick="Always" DropGroup="grp2" SortField="name" Direction="ASC" >
<Items>
<ext:ListItem Text="01/14/2010 12:00:00 AM" Value="4" />
<ext:ListItem Text="04/10/2010 12:00:00 AM" Value="2" />
<ext:ListItem Text="04/22/2010 01:00:00 AM" Value="1" />
<ext:ListItem Text="06/24/2010 12:00:00 AM" Value="5" />
<ext:ListItem Text="12/04/2010 02:00:00 AM" Value="3" />
</Items>
<Listeners>
<AfterDrop Handler="sortMultiSelectBox(getMultiSelect1ClientID());" />
</Listeners>
</ext:MultiSelect>
</Body>
</ext:Panel>
<ext:Panel ID="Panel5" runat="server" Border="false" BodyStyle="height: 260px;">
<Body>
<ext:MultiSelect ID="MultiSelect2" runat="server" AppendOnly="true" DropGroup="grp1" DragGroup="grp2"
Width="200" Height="250" KeepSelectiononclick="Always" >
<Items>
</Items>
<Listeners>
<AfterDrop Handler="sortMultiSelectBox(getMultiSelect2ClientID());" />
</Listeners>
</ext:MultiSelect>
</Body>
</ext:Panel>
And the sort function:function sortMultiSelectBox(which)
{
var kids = document.getElementById(which).children[0].children[0].children[0].children
var kidarray = new Array();
for(i=0; i<kids.length; i++)
{
kidarray[i] = kids[i].innerHTML;
}
kidarray.sort();
for(j=0; j<kidarray.length; j++)
{
document.getElementById(which).children[0].children[0].children[0].children[j].innerHTML = kidarray[j];
}
}
suggestions Any help or suggestions for a better way to sort AfterDrop would be greatly appreciated.Thanx,