How to add OnKeyPress & OnClick to InputControl

Last post 05-23-2006 5:07 PM by Luis Abreu. 11 replies.

Sort Posts:

  • How to add OnKeyPress & OnClick to InputControl

    09-27-2005, 1:06 AM
    • Member
      70 point Member
    • workset
    • Member since 03-24-2005, 9:55 PM
    • Posts 14
    I need to "invoke" a JavaScript method which takes ("this" and "event") as input parameters, when a key is pressed in the InputControl (or Web.UI.TextBox).

    I tried to look through the example of the client-side Atlas controls (the button control) but was unable to see something that I could use w/o too much hit-n-trial.

    TIA.



    Cheers,

    Vivek Singh
  • Re: How to add OnKeyPress & OnClick to InputControl

    10-03-2005, 2:47 PM
    • Star
      14,015 point Star
    • bleroy
    • Member since 04-12-2003, 7:09 AM
    • Redmond
    • Posts 2,296
    For onClick, there is a clickBehavior that you can add to your textbox. For the keypress, you would need to develop your own behavior, which should be pretty easy by following the example of the click behavior code.
    Tell me if that works for you.
    Bertrand
    ----
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: How to add OnKeyPress & OnClick to InputControl

    02-23-2006, 8:58 AM
    • Member
      40 point Member
    • checkai
    • Member since 07-28-2004, 8:57 AM
    • Posts 8
    have you gotten the on key press to work at all? have you found the onclick "behavior"? I'm looking for the same type of code.
  • Re: How to add OnKeyPress & OnClick to InputControl

    02-24-2006, 8:52 AM
    • Contributor
      7,416 point Contributor
    • Garbin
    • Member since 09-17-2004, 12:35 PM
    • Sassari, Italy
    • Posts 1,506
    • TrustedFriends-MVPs
    Hi,

    behaviors are Atlas components that allows to dynamically add/remove client-side functionality from controls. For example, if I want to handle click and keypress events, I could attach the corresponding behaviors to an Atlas control. Then, if I don't want to handle the click event anymore for that control, all I have to do is detach the corresponding behavior from the control. In this way you obtain a control with a dynamic "behavior".

    Please check this article for some details about coding an Atlas behavior.

    Regarding your requirements, as bleroy suggested, Atlas has a builtin <clickBehavior /> that you can use to make a control handle the click event. For the keypress event, bleroy itself and Wilco Bauwer have already coded two specific behaviors; you can click here to get the bleroy's one and here to get the Wilco's one.

    Otherwise, if you need a very basic behavior, similar to the <clickBehavior />, here's my version:

    Type.registerNamespace('AtlasExamples.WebUI');

    AtlasExamples.WebUI.KeyPressBehavior = function() {
        AtlasExamples.WebUI.KeyPressBehavior.initializeBase(this);
       
        // Private members.
        var _keypressHandler;
       
        // Events.
        this.keypress = this.createEvent();
       
        // Initialize / Dispose.
        this.initialize = function() {
            AtlasExamples.WebUI.KeyPressBehavior.callBaseMethod(this, 'initialize');
           
            _keypressHandler = Function.createDelegate(this, keypressHandler);
            this.control.element.attachEvent('onkeypress', _keypressHandler);
           
        }
        this.dispose = function() {       
            this.control.element.detachEvent('onkeypress', _keypressHandler);
            _keypressHandler = null;
           
            AtlasExamples.WebUI.KeyPressBehavior.callBaseMethod(this, 'dispose');
        }
       
        // Descriptor.
        this.getDescriptor = function() {
            var td = AtlasExamples.WebUI.KeyPressBehavior.callBaseMethod(this, 'getDescriptor');
           
            td.addEvent('keypress', true);
           
            return td;
        }
       
        // Event Handler.
        function keypressHandler() {
            this.keypress.invoke(this, Web.EventArgs.Empty);
        }
    }
    Type.registerClass('AtlasExamples.WebUI.KeyPressBehavior', Web.UI.Behavior);
    Web.TypeDescriptor.addType('script', 'keyPressBehavior', AtlasExamples.WebUI.KeyPressBehavior);


    and finally, an example that use the <clickBehavior /> and the <keyPressBehavior /> to solve your problem (just change the script reference in the ScriptManager to the correct path to the behavior file):

    <%@ 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>Behaviors Example</title>
        <atlas:ScriptManager id="sm" runat="server">
            <Scripts>
                <atlas:ScriptReference Path="ScriptLibrary/KeyPressBehavior.js" />
            </Scripts>
        </atlas:ScriptManager>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="myTextBox" runat="server"></asp:TextBox>
        </div>
        </form>
        <script type="text/javascript">
            function onTextBoxClick() {
                alert('TextBox clicked!');
            }
            function onTextBoxKeyPress() {
                alert('Key pressed in TextBox! KeyCode is ' + window.event.keyCode);
            }
        </script>
        <script type="text/xml-script">
            <page>
                <components>
                    <textBox id="myTextBox">
                        <behaviors>
                            <clickBehavior click="onTextBoxClick" />
                            <keyPressBehavior keypress="onTextBoxKeyPress" />
                        </behaviors>
                    </textBox>
                </components>
            </page>
        </script>
    </body>
    </html>


    Alessandro Gallo | Blog | My book: ASP.NET AJAX In Action
  • Re: How to add OnKeyPress & OnClick to InputControl

    02-25-2006, 3:04 AM
    • Star
      14,015 point Star
    • bleroy
    • Member since 04-12-2003, 7:09 AM
    • Redmond
    • Posts 2,296
    Bertrand
    ----
    This posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: How to add OnKeyPress & OnClick to InputControl

    05-18-2006, 1:43 PM
    • Member
      258 point Member
    • edmicman
    • Member since 08-04-2005, 9:11 PM
    • Posts 110
    How does this work?  I want to capture if a user is holding donw the CTRL key when clicking a gridview header link (to eventually implement multi-column sorting) and have looked at both of those links, plus some more, and am totally lost.  Sorry, I'm pretty new to 2.0 and the Atlas stuff, I'm learning, but this is throwing me for a loop.  From what I gather you can create "behaviors" which are basically javascripts that are eventually tied to Atlas controls, right?  But how do you bind them to the controls?  How do you control the atlas scripts?  I've copied some of the .js files into my project, but I don't know what to do with them in the aspx file.  Any help would be awesome!  Thanks!
  • Sleep [|-)] Re: How to add OnKeyPress & OnClick to InputControl

    05-18-2006, 2:46 PM
    • Member
      5 point Member
    • Pinsk
    • Member since 05-18-2006, 6:41 PM
    • Posts 1

    Garbin,

    would you post corrected scrip for key press adapted to the latest Atlas release please. Looks like namespaces are changed.

     

    Thank you.

    Victor

  • Re: How to add OnKeyPress & OnClick to InputControl

    05-18-2006, 5:25 PM
    • Contributor
      7,416 point Contributor
    • Garbin
    • Member since 09-17-2004, 12:35 PM
    • Sassari, Italy
    • Posts 1,506
    • TrustedFriends-MVPs
    Hi,

    Pinsk:

    would you post corrected scrip for key press adapted to the latest Atlas release please


    Type.registerNamespace('AtlasExamples.WebUI');

    AtlasExamples.WebUI.KeyPressBehavior = function() {
        AtlasExamples.WebUI.KeyPressBehavior.initializeBase(this);
      
        // Private members.
        var _keypressHandler;
      
        // Events.
        this.keypress = this.createEvent();
      
        // Initialize / Dispose.
        this.initialize = function() {
            AtlasExamples.WebUI.KeyPressBehavior.callBaseMethod(this, 'initialize');
          
            _keypressHandler = Function.createDelegate(this, keypressHandler);
            this.control.element.attachEvent('onkeypress', _keypressHandler);
          
        }
        this.dispose = function() {      
            this.control.element.detachEvent('onkeypress', _keypressHandler);
            _keypressHandler = null;
          
            AtlasExamples.WebUI.KeyPressBehavior.callBaseMethod(this, 'dispose');
        }
      
        // Descriptor.
        this.getDescriptor = function() {
            var td = AtlasExamples.WebUI.KeyPressBehavior.callBaseMethod(this, 'getDescriptor');
          
            td.addEvent('keypress', true);
          
            return td;
        }
      
        // Event Handler.
        function keypressHandler() {
            this.keypress.invoke(this, Sys.EventArgs.Empty);
        }
    }
    AtlasExamples.WebUI.KeyPressBehavior.registerClass('AtlasExamples.WebUI.KeyPressBehavior', Sys.UI.Behavior);
    Sys.TypeDescriptor.addType('script', 'keyPressBehavior', AtlasExamples.WebUI.KeyPressBehavior);


    Alessandro Gallo | Blog | My book: ASP.NET AJAX In Action
  • Re: How to add OnKeyPress & OnClick to InputControl

    05-22-2006, 1:29 PM
    • Member
      258 point Member
    • edmicman
    • Member since 08-04-2005, 9:11 PM
    • Posts 110

    I get a javascript error when trying to do this:  " Assertion Failed: Could not find an HTML element with ID "tbSearch" for control of type "Sys.UI.TextBox" ".

    Here's my aspx page:

     

     
    "C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" 
        CodeFile="PatientChargeInquiry.aspx.cs" Inherits="_Default" Title="STAR Patient Charge Inquiry" %>
    "sk" Namespace="skcontrols" Assembly="skcontrols" %>    
    
    "Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    "true" ID="sm1" runat="server">
    
        "KeypressHandler.js" />    
    
     
        "up1" runat="server">
        
            
    "white-space:nowrap;"> "Label1" runat="server" Text="Account #:"> "tbSearch" runat="server" OnTextChanged="btnSearch_Click" AutoPostBack="true"> "btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /> "server" ID="prog1"> "Image1" runat="server" ImageUrl="~/Images/indicator.gif" />Waiting...
    "up2" runat="server">
    "lblPatInfo" runat="server" Text="">
    "cbRoomBedInd" runat="server" OnCheckedChanged="cbRoomBedInd_CheckedChanged" Text="Only Room and Bed Charges" AutoPostBack="true" /> "gvResults" AllowMultiColumnSorting="True" runat="server" AllowSorting="True" AutoGenerateColumns="False" SortDescImageUrl="~/Images/sortdescending.gif" SortAscImageUrl="~/Images/sortascending.gif" OnSorting="gvResults_Sorting" AllowPaging="true" PageSize="100" OnPageIndexChanging="gvResults_PageIndexChanging"> "ord_nbr" HeaderText="Chg #" SortExpression="ord_nbr" > "False" /> "serv_dt" HeaderText="Service Date" SortExpression="serv_dt" DataFormatString="{0:MM/dd/yyyy}" HtmlEncode="False" > "False" /> "chg_date" HeaderText="Post Date" SortExpression="chg_date" DataFormatString="{0:MM/dd/yyyy}" HtmlEncode="False" > "False" /> "chg_loc" HeaderText="Department" SortExpression="chg_loc" > "False" /> "sim_code" HeaderText="Item #" SortExpression="sim_code" > "False" /> "sim_desc" HeaderText="Description" SortExpression="sim_desc" > "False" /> "chg_qty" HeaderText="Qty" SortExpression="chg_qty" > "False" /> "chg_amt" HeaderText="Amount" SortExpression="chg_amt" DataFormatString="{0:c}" HtmlEncode="False"> "False" /> "ObjectDataSource1" runat="server" SelectMethod="GetCharges" TypeName="PatInfo"> "tbSearch" Name="patacctnbr" PropertyName="Text" />
    "text/javascript"> function onTextBoxKeyPress() { alert('Key pressed in TextBox! KeyCode is ' + window.event.keyCode); } "text/xml-script"> "tbSearch"> "onTextBoxKeyPress" />
     
  • Re: How to add OnKeyPress & OnClick to InputControl

    05-22-2006, 1:36 PM
    • Member
      258 point Member
    • edmicman
    • Member since 08-04-2005, 9:11 PM
    • Posts 110
    See if it works this time?

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" 
    CodeFile="PatientChargeInquiry.aspx.cs" Inherits="_Default" Title="STAR Patient Charge Inquiry" %>
    <%@ Register TagPrefix="sk" Namespace="skcontrols" Assembly="skcontrols" %>






    Waiting...

    function onTextBoxKeyPress() { alert('Key pressed in TextBox! KeyCode is ' + window.event.keyCode); }
  • Re: How to add OnKeyPress & OnClick to InputControl

    05-23-2006, 1:03 PM
    • Member
      258 point Member
    • edmicman
    • Member since 08-04-2005, 9:11 PM
    • Posts 110

    Hrm, I sort of got it working.  My TextBox ID was messed up because I'm using a master page....getting that set right made it work for the textbox.  So now, next question:

    How would I go about setting this up for a gridview?  I want to check if someone holds down the ctrl-key when clicking on a gridview header to sort....I tried

    <script type="text/xml-script">
    <page>
    <components>
    <table id=
    "ctl00$ContentPlaceHolder1$gvResults">
    <behaviors>
    <keyPressBehavior keypress=
    "onTextBoxKeyPress" />
    </behaviors>
    </table>
    </components>
    </page>
    </script>

    and also tried using <gridview for the component, but it doesn't like that.  How does this work?  Thanks!

  • Re: How to add OnKeyPress & OnClick to InputControl

    05-23-2006, 5:07 PM
    • All-Star
      25,662 point All-Star
    • Luis Abreu
    • Member since 02-12-2005, 1:22 AM
    • Madeira [Portugal]
    • Posts 5,368
    • TrustedFriends-MVPs

    hello.

    when there isn't an atlas client class to represent a control, you can use the <control> element to use it from xml-script.

    --
    Regards,
    Luis Abreu
    email: labreu_at_gmail.com
    EN blog:http://msmvps.com/blogs/luisabreu
Page 1 of 1 (12 items)