[CLOSED] Howto fire OnSelectionChanged event on Multiselect

  1. #1

    [CLOSED] Howto fire OnSelectionChanged event on Multiselect

    In the sample below, I would like to have a notification displayed when the user selects one or more items in the multiselect box. I figured that the OnSelectionChanged method would fire when I selected an item or changed to selecting a different item. However, the method "showTypeInfo" never fires. What am I missing.

    Thanks.
    -Steve

    <%@ Page Language="C#" %>
    <%@ Import Namespace="Coolite.Utilities" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsCallback)
            {
                storeTypes.DataSource = new List<object> { new { ExpenseType_ID = "1", ExpenseType_title = "New item1" }, new { ExpenseType_ID = "2", ExpenseType_title = "New item2" } };
                storeTypes.DataBind();
            }
        }
        protected void showTypeInfo(object sender, EventArgs e)
        {
            string responseText = "";
            this.ScriptManager1.AddScript("Ext.example.msg('Selected Value', '" + responseText + "',15);");
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        
    <ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" IDMode="Static" /> 
    <ext:Store ID="storeTypes" runat="server" AutoLoad="true">
         <Reader>
         <ext:JsonReader ReaderID="ExpenseType_ID">
                <Fields>
                    <ext:RecordField Name="ExpenseType_ID" Type="String" />
                    <ext:RecordField Name="ExpenseType_title" Type="String" />
                </Fields>
         </ext:JsonReader>
         </Reader>
        <Listeners>
            <DataChanged Handler="var record = this.getAt(0)||{};#{editPanel}.getForm().loadRecord(record);" />
        </Listeners>
    </ext:Store> <!--Data store for Group dropdown-->
    <ext:FormPanel ID="editPanel" Icon="Page" Title="Expense Item Detail" Collapsible="false" runat="server" Border="false" AutoHeight="true" BodyStyle="padding:6px;" Cls="grayPanel">
        <Body>
            <ext:FormLayout ID="formLayout" LabelWidth="85" LabelStyle="text-align: right; font-weight: bold;" runat="server" >
                <ext:Anchor>
                    <ext:Panel ID="panelSelects" runat="server" Height="200" >
                    <Body>
                        <ext:MultiSelect ID="msAvailableTypes" Legend="Available Expense Types" runat="server"
                            DragGroup="grp2" DropGroup="grp2,grp1"
                            Width="300" Height="160"
                            StoreID="storeTypes"
                            DisplayField="ExpenseType_title"
                            ValueField="ExpenseType_ID"
                            KeepSelection&#111;nclick="WithCtrlKey"
                            OnSelectionChanged="showTypeInfo" />
                    </Body>                     
                    </ext:Panel>
                </ext:Anchor>
            </ext:FormLayout>
        </Body>
    </ext:FormPanel>
        
    
        </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] Howto fire OnSelectionChanged event on Multiselect

    Hi,

    You need use Change listener for calling client-side code or Change ajax event for calling server-side code
  3. #3

    RE: [CLOSED] Howto fire OnSelectionChanged event on Multiselect

    OK, I can try that. Will that fire when I select a new item in the MultiSelect or just if I actually drag an item to or from the object? Also, is there a good example you could point me to?

    Thanks.
  4. #4

    RE: [CLOSED] Howto fire OnSelectionChanged event on Multiselect

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    <%@ Import Namespace="Coolite.Utilities" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                storeTypes.DataSource = new List<object> { new { ExpenseType_ID = "1", ExpenseType_title = "New item1" }, new { ExpenseType_ID = "2", ExpenseType_title = "New item2" } };
                storeTypes.DataBind();
            }
        }
        protected void showTypeInfo(object sender, AjaxEventArgs e)
        {
            StringBuilder sb = new StringBuilder();
            foreach (SelectedListItem item in msAvailableTypes.SelectedItems)
            {
                sb.Append(item.Value).Append(", ");
            }
            Ext.Msg.Alert("Values", sb.ToString()).Show();
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        
    <ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" IDMode="Static" />  
    <ext:Store ID="storeTypes" runat="server" AutoLoad="true">
         <Reader>
         <ext:JsonReader ReaderID="ExpenseType_ID">
                <Fields>
                    <ext:RecordField Name="ExpenseType_ID" Type="String" />
                    <ext:RecordField Name="ExpenseType_title" Type="String" />
                </Fields>
         </ext:JsonReader>
         </Reader>
        <Listeners>
            <DataChanged Handler="var record = this.getAt(0)||{};#{editPanel}.getForm().loadRecord(record);" />
        </Listeners>
    </ext:Store> <!--Data store for Group dropdown-->
    <ext:FormPanel ID="editPanel" Icon="Page" Title="Expense Item Detail" Collapsible="false" runat="server" Border="false" AutoHeight="true" BodyStyle="padding:6px;" Cls="grayPanel">
        <Body>
            <ext:FormLayout ID="formLayout" LabelWidth="85" LabelStyle="text-align: right; font-weight: bold;" runat="server" >
                <ext:Anchor>
                    <ext:Panel ID="panelSelects" runat="server" Height="200" >
                    <Body>
                        <ext:MultiSelect ID="msAvailableTypes" Legend="Available Expense Types" runat="server" 
                            DragGroup="grp2" DropGroup="grp2,grp1" 
                            Width="300" Height="160" 
                            StoreID="storeTypes"
                            DisplayField="ExpenseType_title"
                            ValueField="ExpenseType_ID"
                            KeepSelection&#111;nclick="WithCtrlKey"
                         >
                            <AjaxEvents>
                                <Change OnEvent="showTypeInfo"></Change>
                            </AjaxEvents>
                         </ext:MultiSelect>
                    </Body>                      
                    </ext:Panel>
                </ext:Anchor>
            </ext:FormLayout>
        </Body>
    </ext:FormPanel>
        
    
        </form>
    </body>
    </html>
  5. #5

    RE: [CLOSED] Howto fire OnSelectionChanged event on Multiselect

    Wow! That is <U>exactly</U> what I wanted to achieve that is just too cool!!! Thank you.

    -Steve

Similar Threads

  1. [CLOSED] DisplayField change event does not fire
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Feb 06, 2014, 3:16 AM
  2. [CLOSED] Fire an event when MultiSelect item is unselected
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 07, 2011, 6:03 PM
  3. How to fire event by row select?
    By mannyk in forum 1.x Help
    Replies: 0
    Last Post: Aug 05, 2010, 9:48 AM
  4. [CLOSED] DateField OnSelectionChanged Event is not firing?
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 09, 2009, 7:20 AM
  5. CheckColumn fire event
    By fabiomarcos in forum 1.x Help
    Replies: 0
    Last Post: Oct 06, 2009, 10:55 AM

Posting Permissions