How to set focus in a control inside Collapsible Panel Control

I am using Collapsible panel Control and inside Contentpanel I have a textbox into which I want to set the focus.

 ScriptManager.SetFocus(Textbox1) does not work

 

Could someone help please?

 

Thanks,

Rupen

0
Rupen
9/14/2007 7:20:16 PM
asp.net.ajax_control_toolkit 17816 articles. 1 followers. Follow

8 Replies
1775 Views

Similar Articles

[PageSpeed] 52
Get it on Google Play
Get it on Apple App Store

I found that there is some patch available to fix this issue. http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=6986

 But I do not know how to apply this. Could someone tell me?

 

 

0
Rupen
9/14/2007 7:55:35 PM

Hi Rupen,

From the url provided above, I have found a sample with the name "FocusCollapsibelPanelExtender.zip " under "File Attachments".  You can download it.

        ScriptManager s = (ScriptManager)this.Page.FindControl("ScriptManager1");
        s.SetFocus(this.TextBox1);

Here is my solution which implements on the clientside. 

<%@ Page Language="C#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<script runat="server">
  
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>ClickEvent</title>
    <style type="text/css">
        .collapsePanel {
	        background-color:white;
	        overflow:hidden;
        }

        .collapsePanelHeader{
	        width:100%;
	        height:30px;
	        background-image: url(../pic/bg-menu-main.png);
	        background-repeat:repeat-x;
	        color:#FFF;
	        font-weight:bold;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:TextBox ID="TextBox1" runat="server" Width="300"></asp:TextBox>
        <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px">
            <div style="padding: 5px; cursor: pointer; vertical-align: middle;" onclick="getCollapsibleState()">
                <div style="float: left;">
                    What is ASP.NET AJAX?</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
                </div>
                <div style="float: right; vertical-align: middle;">
                    <asp:ImageButton ID="Image1" runat="server" ImageUrl="../pic/expand_blue.jpg" AlternateText="(Show Details...)" />
                </div>
            </div>
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
             <%=DateTime.Now.ToString() %>
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </asp:Panel>
        <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1"
            ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="False" TextLabelID="Label1"
            ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
            ExpandedImage="../pic/collapse_blue.jpg" CollapsedImage="../pic/expand_blue.jpg"
            SuppressPostBack="true" />

        <script type="text/javascript" language="javascript">
       
        var objExtender;

        // this will run automatically when the page has finished loading
        function pageLoad(sender, args)
        {
            objExtender = $find("<%=cpeDemo.ClientID%>");
            objExtender.add_expandComplete(getCollapsibleState);
            objExtender.add_collapseComplete(getCollapsibleState);
            $get("<%=TextBox2.ClientID%>").focus();
        }

        function getCollapsibleState()
        {
            if(objExtender.get_Collapsed())
            {   
                 $get("<%=TextBox1.ClientID%>").value="Now it is getting collapsed!";
            }
            else
            {   
               $get("<%=TextBox1.ClientID%>").value="Now it is getting expanded!";
               $get("<%=TextBox2.ClientID%>").focus();
            }
        }  
        </script>
    </form>
</body>
</html>

I hope this help.

Best regards,

Jonathan 

 


Jonathan Shen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
0
Jonathan
9/17/2007 10:53:33 AM

Thanks Jonathan

Your solution does work. But at that url, I downloaded FocusCollapsibelPanelExtender.zip and tried the test solution but it does not seem to work. Have you tried that? I will mark your solution as the answer.

 

Rupen

0
Rupen
9/17/2007 2:32:39 PM

Jonathan,

This is not working when we have modal dialog. Could you please provide solution for that?

 Rupen

0
Rupen
9/17/2007 6:41:22 PM

I found the solution. We have to use pageLoaded instead of pageLoad for modal dialog.

0
Rupen
9/17/2007 8:57:29 PM

this also does not work all the time. Some time it works and sometimes it does not. It is not reliable. There seems to be some event happening even after this.

0
Rupen
9/28/2007 8:13:12 PM

Hi Rupen,

Where's your ModalPopupExtender?Would you please open another post will more information?   A simple repro is preferred, if it is necessary.Thanks

Best regards,

Jonathan


Jonathan Shen
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
0
Jonathan
9/30/2007 10:25:44 AM

putting sample code here. Sometimes, it puts the focus but it does not work all the time. 

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
 <form id="form1" runat="server">
                <asp:ScriptManager ID="ScriptManager1" runat="server" />
               <ajaxToolkit:CollapsiblePanelExtender ID="cpeDesc" runat="Server" TargetControlID="description_ContentPanel"
            ExpandControlID="description_HeaderPanel" CollapseControlID="description_HeaderPanel"
            Collapsed="False" ExpandDirection="Vertical" ImageControlID="description_ToggleImage"
            ExpandedImage="~/images/collapse.jpg" ExpandedText="Collapse" CollapsedImage="~/images/expand.jpg"
            CollapsedText="Expand" SuppressPostBack="true" />
        <asp:Panel ID="description_HeaderPanel" runat="server" Style="cursor: pointer;">
            <div class="heading">
                <asp:Image ID="description_ToggleImage" runat="server" ImageUrl="~/images/collapse.jpg" />
                CollapsiblePanel Description
            </div>
        </asp:Panel>
        <asp:Panel ID="description_ContentPanel" runat="server" Style="overflow: hidden;">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        </asp:Panel> 
     <asp:Button ID="Button1" runat="server" Text="Button" />
         
    </form>
      <div id="div_script" runat="server"></div>
      <script type="text/javascript">
      Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

      function pageLoaded(sender, args)
     {
        try
        {
            //alert('pageloaded called');
            document.getElementById('TextBox1').focus();
        }
        catch(oException) 
        {}
      }
      </script>
</body>
</html>
 
0
Rupen
10/1/2007 3:54:02 PM
Reply: