[CLOSED] How to access a control which is in a user control from .aspx page?

  1. #1

    [CLOSED] How to access a control which is in a user control from .aspx page?

    Hi,

    How to access a control which is in a user control, from .aspx page?

    I am having a tree control in a user control(.ascx) and I placed this user control in a .aspx page now I want to access this tree control from the .aspx java script function

    How to access the control name

    I am trying this way

    I tried the following way too

    refreshTree("#{ucSearch.trTopTenSearch}")
    *ucSearch is the name of the user control

    refreshTree("#{trTopTenSearch}")

    function refreshTree(tree) 
    {
        Coolite.AjaxMethods.ucSearch.RefreshMenu(
        {                
        success: function(result) {
                var nodes = eval(result);
                tree.root.ui.remove();                    
                tree.initChildren(nodes);                    
                tree.root.render();                
                }            
        });
    }
    But the total object is treated as a string and I am getting java script error

  2. #2

    RE: [CLOSED] How to access a control which is in a user control from .aspx page?

    When I have been trying to access controls from the page that the user control is loaded onto the controls are usually named like this:

    Name of user control: 'ucTest'
    Name of control: 'dvData'

    Name of control when rendered: 'ucTest_dvData'

    refreshTree(#{ucSearch_trTopTenSearch});
    The above code may work for you.

    An awesome way to find out the name of your controls that are rendered to the page is to fire the page up in FF and use FireBug to see the DOM that is loaded. You will be able to see all the Javascript objects of your controls and thier names. Makes it very simple to debug issue like this :)

    Hope that helps

  3. #3

    RE: [CLOSED] How to access a control which is in a user control from .aspx page?

    Hi,

    There is a few variants how to get control from UserControl
    For example, you have user control with Button (it doesn't matter what Coolite control do you use)

    <ext:Button ID="ButtonFromUC" runat="server" Text="Button In UserControl"/>
    In main page you can get that button

    1. By ID
    <ext:Button runat="server" Text="Get Button by ID">
                <Listeners>
                    <Click Handler="alert(#{ButtonFromUC}.id);" />
                </Listeners>
            </ext:Button>
    2. Use TokenScript. If you have <script> block in page and have no ability to use #{} syntax then use TokenScript control
    <head runat="server">
        <title></title>
        
        <ext:TokenScript runat="server">
            <script type="text/javascript">
                function show() {
                    alert(#{ButtonFromUC}.id);
                }
            </script>
        </ext:TokenScript>
    </head>
    3. Use '<%= %>' syntax (please note that you CAN'T use that syntax in header because we modifiy header during runtime)

    Script block in body
    <body>
        <script type="text/javascript">
            function show() {
                alert(<%= UC1.FindControl("ButtonFromUC").ClientID %>.id);
            }
        </script>
    
            <ext:Button runat="server" Text="Get Button">
                <Listeners>
                    <Click Fn="show" />
                </Listeners>
            </ext:Button>
    4. Define property in user control to get button and use '<%= %>' syntax


    Property in user control
    <script runat="server">
        public Coolite.Ext.Web.Button GetButton
        {
            get
            {
                return ButtonFromUC;
            }
        }
    </script>

    Script block in body

    
    <body>
    
        <script type="text/javascript">
    
            function show() {
    
                alert(<%= UC1.GetButton.ClientID %>.id);
    
            }
    
        </script>


    
            <ext:Button runat="server" Text="Get Button">
    
                <Listeners>
    
                    <Click Fn="show" />
    
                </Listeners>
    
            </ext:Button>


    5. Use IDMode="Static" for button inside user control. In this case id of control on client side will equal server side ID

    Button in user control
    <ext:Button ID="StaticButton" runat="server" IDMode="Static" Text="Static Button In UserControl"/>
    Get button from page
    <h3>Get Static Button</h3>
            <ext:Button runat="server" Text="Static Button">
                <Listeners>
                    <Click Handler="alert(StaticButton.id);" />
                </Listeners>
            </ext:Button>

Similar Threads

  1. Replies: 7
    Last Post: Jan 29, 2013, 11:59 AM
  2. Replies: 2
    Last Post: Nov 15, 2012, 12:52 AM
  3. Replies: 0
    Last Post: Sep 21, 2011, 3:14 PM
  4. Replies: 7
    Last Post: Apr 14, 2011, 10:52 PM
  5. Replies: 1
    Last Post: Mar 09, 2010, 2:55 AM

Posting Permissions