[CLOSED] MultiSelect "select all" from client side

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] MultiSelect "select all" from client side

    Is there a good way to select everything in a MultiSelect from the client side?
    Last edited by Daniil; Oct 04, 2010 at 5:15 AM. Reason: [CLOSED]
  2. #2
    Hello!

    It seems there is no way better than this one.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void SelectAll(object sender, DirectEventArgs e)
        {
            for (int i = 0; i < MultiSelect1.Items.Count; i++) {
                MultiSelect1.SelectedItems.Add(new SelectedListItem(MultiSelect1.Items[i].Value));    
            }
            MultiSelect1.UpdateSelection();
        }
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:MultiSelect ID="MultiSelect1" runat="server">
            <Items>
                <ext:ListItem Text="Item 1" Value="Value1" />
                <ext:ListItem Text="Item 2" Value="Value2" />
                <ext:ListItem Text="Item 3" Value="Value3" />
            </Items>
        </ext:MultiSelect>
        <ext:Button runat="server" Text="Select all">
            <DirectEvents>
                <Click OnEvent="SelectAll" />
            </DirectEvents>
        </ext:Button>
        </form>
    </body>
    </html>
  3. #3
    Quote Originally Posted by Daniil View Post
    Hello!

    It seems there is no way better than this one.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void SelectAll(object sender, DirectEventArgs e)
        {
            for (int i = 0; i < MultiSelect1.Items.Count; i++) {
                MultiSelect1.SelectedItems.Add(new SelectedListItem(MultiSelect1.Items[i].Value));    
            }
            MultiSelect1.UpdateSelection();
        }
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:MultiSelect ID="MultiSelect1" runat="server">
            <Items>
                <ext:ListItem Text="Item 1" Value="Value1" />
                <ext:ListItem Text="Item 2" Value="Value2" />
                <ext:ListItem Text="Item 3" Value="Value3" />
            </Items>
        </ext:MultiSelect>
        <ext:Button runat="server" Text="Select all">
            <DirectEvents>
                <Click OnEvent="SelectAll" />
            </DirectEvents>
        </ext:Button>
        </form>
    </body>
    </html>
    Strange. This does not work for me.

    EDIT: More specifically, the Items collection of the MultiSelect is empty during the DirectEvent. The only difference is that my MultiSelect is using a Store to populate the Items collection.
  4. #4
    Please clarify do you mean this example doesn't work or the code from there that applied in your application?

    If the second please provide us with a sample code.
  5. #5
    EDIT: More specifically, the Items collection of the MultiSelect is empty during the DirectEvent. The only difference is that my MultiSelect is using a Store to populate the Items collection.
    Then it should be repopulated during each request such as DirectEvent.

    Are there conditions like isAjaxRequest or isPostBack where Items collection is populated?
  6. #6
    This should illustrate the problem...

    <script runat="server">
        
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack And Not Ext.Net.X.IsAjaxRequest Then
                Dim data As New List(Of Object)
                For i = 1 To 10
                    data.Add(New With {.text = "Test " & i, .value = i})
                Next
                TheStore.DataSource = data
                TheStore.DataBind()
            End If
        End Sub
        
        Protected Sub SelectAll(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)
            For Each item In TheList.Items
                TheList.SelectedItems.Add(New Ext.Net.SelectedListItem(item.Value))
            Next
            TheList.UpdateSelection()
        End Sub
        
    </script>
    
    <ext:Button runat="server" Text="Select All">
        <DirectEvents>
            <Click OnEvent="SelectAll" />
        </DirectEvents>
    </ext:Button>
    
    <ext:MultiSelect ID="TheList" runat="server" Width="300" Height="250">
        <Store>
            <ext:Store ID="TheStore" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="value">
                        <Fields>
                            <ext:RecordField Name="text" />
                            <ext:RecordField Name="value" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
    </ext:MultiSelect>
  7. #7
    I think the best way to select all items in this case (with Store) would be using .AddScript method.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.MultiSelect1.Store.Primary;
                store.DataSource = new object[] { 
                                             new object[] {"Text1", "Value1" },
                                             new object[] {"Text2", "Value2" },
                                             new object[] {"Text3", "Value3" }
                                    };
                store.DataBind();
            }
        }
    
        protected void SelectAll(object sender, DirectEventArgs e)
        {
            string script = "var values = MultiSelect1.getValues()," +
                            "             s = [];" +
                            "for (var i=0; i < values.length; i++) {" +
                            "   s.push(values[i].value)" +
                            "}" +
                            "MultiSelect1.setValue(s);";
            MultiSelect1.AddScript(script);
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:MultiSelect ID="MultiSelect1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="text" />
                                <ext:RecordField Name="value" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
        </ext:MultiSelect>
        <ext:Button runat="server" Text="Select all">
            <DirectEvents>
                <Click OnEvent="SelectAll" />
            </DirectEvents>
        </ext:Button>
        </form>
    </body>
    </html>
  8. #8
    Hi,

    The MultiSelect Component is missing a few key api members, .selectAll() and deselectAll() being obvious ones.

    We're going to have to add these and maybe a few others.

    If you think of any others, please let us know.
    Geoffrey McGill
    Founder & CEO
  9. #9
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi,

    The MultiSelect Component is missing a few key api members, .selectAll() and deselectAll() being obvious ones.

    We're going to have to add these and maybe a few others.

    If you think of any others, please let us know.
    Well, the big one that comes to mind is just selecting a few specific values. Or, is there a way to do this already?

    Also, should I wait for those to be implemented or just work around for now?

    EDIT: Oops. I just remembered that we are talking about the client side. I need to be able to set a selection from the server side. :-/
  10. #10
    Hi,

    I think it would come together - client side selectAll and server side SelectAll methods.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] How does "MaskCls" work for "AutoLoad" mask in panel control
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 19, 2012, 12:09 PM
  2. Replies: 1
    Last Post: Jun 26, 2012, 11:29 AM
  3. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  4. [CLOSED] How to "commit" changes to Grid on the client side?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 02, 2012, 3:15 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Posting Permissions