[CLOSED] Multi Select Click event added as Attribute in 0.8.3 not working in 1.0

  1. #1

    [CLOSED] Multi Select Click event added as Attribute in 0.8.3 not working in 1.0

    Hi Team,

    I have MultiSelect in my project. I have added Javascript event handler to "onclick" event from the code behind to MultiSelect Control in 0.8.3.
    Based on the selection of the items I am enabling and disabling button on the same page.
    My "View" button should be enabled only when a item is selected with some custom conditions enabled. If none of the items selected, the "view" button should be disabled.
    Reason why I used "onclick" attribute from code behind is, even when the user clicks on "Area" other than "Items Area" as show in picture,

    Click image for larger version. 

Name:	MultiSelect.JPG 
Views:	496 
Size:	16.2 KB 
ID:	2309
    should disable the "View" Button.

    After migrating to 1.0, click event handler added from code-behind is not fired.

    
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
    
            string script = string.Empty;
            script += "EnableButtons(" + lstFiles.ClientID + "," + btnRemove.ClientID + "," + btnViewDocument.ClientID + ");";
            lstFiles.AddScript(script);
            lstFiles.Attributes.Add("onclick", script);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Multi Select Click worked fine with 0.8.3</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="extScriptManager" runat="server">
        </ext:ScriptManager>
    
        <script type="text/javascript" language="javascript">
    function EnableButtons(lstFiles, btnRemove, btnViewDocument)
     {
        /*  As id sometimes getting dynamic ext id whcih returns component as null, 
            so name passed to Ext.getCmp */
            //debugger;
        var ellstFiles = Ext.getCmp(lstFiles.id) || Ext.getCmp(lstFiles.name);
        var elbtnRemove = Ext.getCmp(btnRemove.id);
        var elbtnViewDocument = Ext.getCmp(btnViewDocument.id);
        if (ellstFiles)
        {    
            var selectedValue = ellstFiles.getValue();                  
            if (selectedValue == '') elbtnRemove.disable(); else elbtnRemove.enable();
            elbtnViewDocument.disable();
            var enable = parseInt(ellstFiles.getValue()) % 2 == 0 ? true : false;
            if (enable)
            {
                elbtnViewDocument.enable();
            }
            else
            {
                elbtnViewDocument.disable();
            }
        }
     }
        </script>
    
        <ext:MultiSelect ID="lstFiles" runat="server" MultiSelect="false" Height="200">
            <Items>
                <ext:ListItem Text="One" Value="1" />
                <ext:ListItem Text="Two" Value="2" />
                <ext:ListItem Text="Three" Value="3" />
                <ext:ListItem Text="Four" Value="4" />
                <ext:ListItem Text="Five" Value="5" />
                <ext:ListItem Text="Six" Value="6" />
            </Items>
        </ext:MultiSelect>
        <ext:Button ID="btnViewDocument" Text="View" runat="server">
            <Listeners>
                <Click Handler="Ext.Msg.alert('Selected Value', #{lstFiles}.getValue());" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="btnRemove" Text="Remove" runat="server">
        </ext:Button>
        </form>
    </body>
    </html>
    Test this code both with 0.8.3 version and also 1.0.

    Could you please suggest me a work around?
    Last edited by Daniil; Feb 16, 2011 at 8:37 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I would suggest you the following way.

    Example
    <%@ Page Language="C#" %>
    
    <!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" />
    
        <script type="text/javascript">
            var enableButtons = function(event, el, ids) {
                var button1 = Ext.getCmp(ids[0]),
                    button2 = Ext.getCmp(ids[1]);
                button1.setDisabled(this.getValue() == '');
                button2.setDisabled(parseInt(this.getValue()) % 2 == 0);
            }
        </script>
    
        <ext:MultiSelect 
            ID="MultiSelect1" 
            runat="server" 
            MultiSelect="false" 
            Height="200">
            <Items>
                <ext:ListItem Text="One" Value="1" />
                <ext:ListItem Text="Two" Value="2" />
                <ext:ListItem Text="Three" Value="3" />
                <ext:ListItem Text="Four" Value="4" />
                <ext:ListItem Text="Five" Value="5" />
                <ext:ListItem Text="Six" Value="6" />
            </Items>
            <Listeners>
                <AfterRender Handler="this.el.on('click', enableButtons, this, ['Button1', 'Button2']);" />
            </Listeners>
        </ext:MultiSelect>
        <ext:Button ID="Button1" Text="View" runat="server">
            <Listeners>
                <Click Handler="Ext.Msg.alert('Selected Value', #{MultiSelect1}.getValue());" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="Button2" Text="Remove" runat="server" />
        </form>
    </body>
    </html>
    Please let me know if you will have any questions or troubles with transform it in code behind.
  3. #3
    Hi Daniil,

    I tried and implemented the idea in my application and it worked fine, with small change.

    Instead of adding the 'click' event handler in "AfterRender" event handler, I have added this in Ext.onReady, because in the after render event handler I could not able to find the instances of "btnView" and "btnRemove" in my original implementation.

    But, problem is solved. You can mark this thread as closed.

    Thank you.

Similar Threads

  1. Replies: 5
    Last Post: Sep 19, 2011, 8:20 PM
  2. MenuItem Click event is not working
    By krishna in forum 1.x Help
    Replies: 1
    Last Post: Mar 31, 2011, 5:36 AM
  3. [CLOSED] Is it possible to Select Items of a multi select during ajax event
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 29, 2010, 6:28 PM
  4. How to populate multi select on button click
    By ajaybabu.maddinani in forum 1.x Help
    Replies: 0
    Last Post: Dec 01, 2009, 9:38 AM
  5. [CLOSED] row select and cell click event
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 31, 2009, 9:16 AM

Tags for this Thread

Posting Permissions