What's New?

MultiSelect Sort AfterDrop

  1. #1
    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...

    <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" KeepSelection&#111;nclick="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" KeepSelection&#111;nclick="Always"  >
                 	<Items>
                                                                                                       
                     	</Items>
               		<Listeners>
                      		<AfterDrop Handler="sortMultiSelectBox(getMultiSelect2ClientID());" />
                    	</Listeners>
            	</ext:MultiSelect>
     	</Body>
</ext:Panel>
    And the sort function:
    function sortMultiSelectBox(which)
        {
        
            var kids = &#100;ocument.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++)  
            {
              &#100;ocument.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,

  2. #2
    Apr 09, 2010, 7:50 PM

    RE: MultiSelect Sort AfterDrop

    I found the solution! Upon searching the generated code I found that the list items are added to a store and the Text is added as the field 'text' rather than 'Text' When i found that I simply added SortField="text" Direction="ASC" and it worked as it should. Sweet!!!!!!!!!!!



  3. #3
    Apr 09, 2010, 10:04 PM

    RE: MultiSelect Sort AfterDrop

    Hi,

    Glad to see you have it working. If you configure the .Fn property, an instance of the Component will be passed automatically to the function.


    I think this should work.


    Example


    <AfterDrop Fn="sortMultiSelectBox" />

    An actual instance of the MultiSort will be passed as the first argument to the sortMultiSelectBox function. The getElementById is not required as you already have an instance of the MultiSort Component.


    Hope this helps.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Apr 09, 2010, 10:29 PM

    RE: MultiSelect Sort AfterDrop

    Hi BillyZ,

    I took another look at your code and I think you might be over complicating the process. You should be able to replace both <AfterDrop> Listeners with the following.


    Example


    <AfterDrop Handler="el.store.sort('text', 'asc');" />

    Hope this helps.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Apr 09, 2010, 10:31 PM

    RE: MultiSelect Sort AfterDrop

    Or you could replace your "sortMultiSelectBox" function with the following.

    Example


    var sortMultiSelectBox = function (el) { el.store.sort("text", "asc") };

    Then replace the <AfterDrop> Listener with the following.


    Example


    <AfterDrop Fn="sortMultiSelectBox" />

    Hope this helps.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  6. #6
    Apr 10, 2010, 2:51 PM

    RE: MultiSelect Sort AfterDrop

    Thanx Geoffrey, but the solution was actually much easier than that. I just needed to change the sort field attribute in the tag and it automatically sorts AfterDrop so i didn't even need the listener... I just changed 

    <ext:MultiSelect ID="MultiSelect1" runat="server" AppendOnly="true" DragGroup="grp1" Width="200" Height="250" KeepSelection&#111;nclick="Always" DropGroup="grp2" SortField="name" Direction="ASC" >



    to: 


    <ext:MultiSelect ID="MultiSelect1" runat="server" AppendOnly="true" DragGroup="grp1" Width="200" Height="250" KeepSelection&#111;nclick="Always" DropGroup="grp2" SortField="text" Direction="ASC" >

    and it worked.
  7. #7
    Apr 10, 2010, 3:03 PM

    RE: MultiSelect Sort AfterDrop

    BillyZ313 (4/10/2010) Thanx Geoffrey, but the solution was actually much easier than that. I just needed to change the sort field attribute in the tag and it automatically sorts AfterDrop so i didn't even need the listener... I just changed
    Perfect. That is much simpler. I learn something new everyday.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  8. #8
    Apr 15, 2010, 2:00 PM

    RE: MultiSelect Sort AfterDrop

    Hey Geoffrey,

    One more question in conjunction with the above that was solved.... I need to be able to dynamically add Items to the MultiSelect with javascript. I believe these items that I add will just need to be added to the store then the MultiSelect refreshed but I'm not sure how to do those steps with coolite. If it were just a typical listbox I would just have to do the following :


    var opt = &#100;ocument.createElement("option");
opt.text = description;
opt.value= name;
&#100;ocument.getElementById(getListBox1ClientID()).options.add(opt);

    Can you show me how to do this (in javascript as above) with the coolite MultiSelect control please?


    Thanx,
    ~~~BillyZ
  9. #9
    Apr 15, 2010, 3:14 PM

    RE: MultiSelect Sort AfterDrop

    Hi BillyZ313,

    I hate to ask, but could you create a new topic with this new question. Feel free to cross link posts if they are related.


    Keeping one topic per thread really helps us keep things organized.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  10. #10
    Apr 15, 2010, 6:45 PM

    RE: MultiSelect Sort AfterDrop

    done, posted here http://forums.ext.net/showthread.php...31258-4-1.aspx

    thanx


Similar Threads

  1. [CLOSED] Getting drag source MultiSelect when dragging item from MultiSelect to MultiSelect
    By jwaite in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 09, 2012, 9:24 PM
  2. How to search in a MULTISELECT ? (similar effect in MultiSelect ASPX)
    By cmujica in forum 1.x Help
    Replies: 4
    Last Post: Feb 20, 2012, 11:14 AM
  3. [CLOSED] how to change the sort name when you are doing the sort by clicking the column header of gridpanel
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 25, 2011, 4:57 PM
  4. Sort MultiSelect on page Init
    By ddolan in forum 1.x Help
    Replies: 4
    Last Post: Aug 02, 2010, 8:48 PM
  5. Sort with Conditional sort direction in JS- help!
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: May 05, 2009, 12:11 PM

Posting Permissions