Cannot $find() CalendarExtenders if not already enabled

Feldupo
Feldupo used Ask the Experts™
on
I have a page that potentially has a large number of dynamically generated date ranges (2 sets of TextBox + ImageButton + CalendarExtender fields for each range item.)  I realize that the design of the page is not optimal, but it is what was asked for and what I am attempting to provide.  

In the process of creating this, I started having very noticeable slowdowns. By the time you have 100 or so, the browsers start timing out on the script (you get the prompt asking you if you want to kill the script because it is taking too long.)  After much trial and error and experimentation, I discovered that the problem was, specifically, the many CalendarExtenders.  If you built the same exact page and just started the CalendarExtenders with .Enabled=false, the slowdowns went away.  It doesn't matter what state (enabled, visible, not created at all, etc) the TextBox or ImageButton are in, if the CalendarExtenders were enabled, the slowdowns would occur.

So, I decided to add a CheckBox to each range field so that I could start them off disabled and then if the user checks the CheckBox, I would client-side enable all of the fields, including the extenders for the selected range item.

I created the CheckBox's with a client-side click event that invoked a function that had each of the fields passed in, but neither the ImageButtons nor the CalendarExtenders would pass as objects  (the CheckBox and TextBox pass as objects fine.)  The controls were being passed at run-time by their .ClientID values and reviewing the source showed that the controls were named correctly, but the browsers would insist that those objects did not exist.  So, I switched it to pass the ImageButtons and CalendarExtenders by .ClientID value as strings so I could look them up inside the javascript function.

For the ImageButtons, this worked fine.  I was able to document.getElementById() those fields and enable or disable them.

Using $find() to locate the CalendarExtenders was failing, though.  Eventually I discovered that if the CalendarExtenders were enabled when the routine was called, $find() would work, and I could call the .set_enabled() function to disable them.  But, if the CalendarExtenders are disabled before calling the routine, $find() fails to find them.

I also verified that it happens with CalendarExtender's defined in the page's .aspx.  I created a statically defined TextBox + ImageButton + CalendarExtender combo and from javascript was only able to $find() the extender if it was .Enabled prior to attempting to $find() it.

Any ideas how to client-side enable these CalendarExtenders if I can't $find() them? I suppose that one option is to figure out why I can't pass the extenders as objects (so I don't have to try to look them up) but I'm stuck there, too.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
You can handle client side script manager Loaded event and in that event you can find the calendar extender.

Author

Commented:
I'm sorry, jinal, but I have studied the link you provided, and do not see how it is relevant to my problem.  Are you saying that in the pageLoad() I can look up the CalendarExtender's (using what, if $find() doesn't work) and preserve them for later reference?
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Author

Commented:
Maybe I'm missing what you meant, but in the very simple case indicated here, I have two TextBox's, each with a CalendarExtender. The first CalendarExtender is .Enabled=true, the second is .Enabled=false

In the pageLoad(), the extender that is .Enabled=true can be found, the one that is .Enabled=false cannot be found.  You can switch the enabled states between them, turn them all on, turn them all off.  Only the CalendarExtender's that are .Enabled=true can be found with $find().

That's my issue.
Given this pageLoad() :
 
        function pageLoad() {   
 
            var t_id = '<%= cextDate1.ClientID %>';
            var t_obj = $find(t_id);
            alert(t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
            
            t_id = '<%= cextDate2.ClientID %>';
            t_obj = $find(t_id);
            alert(t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
        }
 
And this in the .aspx :
 
        <asp:TextBox ID="txtDate1" runat="server" ></asp:TextBox>
        <cc1:CalendarExtender ID="cextDate1" runat="server" Enabled="True"
            TargetControlID="txtDate1">
        </cc1:CalendarExtender>
        
        <asp:TextBox ID="txtDate2" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="cextDate2" runat="server" Enabled="False"
            TargetControlID="txtDate2">
        </cc1:CalendarExtender>

Open in new window

Commented:

%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default15.aspx.cs" Inherits="Default15" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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></title>
    
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script language="javascript" type="text/javascript">
        
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
 
       
        function pageLoaded(sender, args) {
            var t_id = '<%= cextDate1.ClientID %>';
            var t_obj = $find(t_id);
            alert(t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
 
            t_id = '<%= cextDate2.ClientID %>';
            t_obj = $find(t_id);
            alert(t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
 
        }
    </script>
    <div>
        <asp:TextBox ID="txtDate1" runat="server" ></asp:TextBox>
        <cc1:CalendarExtender ID="cextDate1" runat="server" Enabled="True"
            TargetControlID="txtDate1">
        </cc1:CalendarExtender>
        
        <asp:TextBox ID="txtDate2" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="cextDate2" runat="server" Enabled="False"
            TargetControlID="txtDate2">
        </cc1:CalendarExtender>
    </div>
    </form>
</body>
</html>

Open in new window

Author

Commented:
Ok... I made the change you indicated and now both report as 'not found', even if both are .enabled=true in the .aspx.  I really don't understand what you are trying to indicate is the solution here.

Author

Commented:
Just to make sure there is no confusion, here is what I just ran.  Both CalendarExtenders are set to Enabled=true.

When run, the pageLoaded() executs first (to my surprise) and reports both not found.  Then pageLoad() runs and reports both found.  As before, if you change some to .Enabled=false, it can't find those.  The pageLoaded() never sees them.

Am I missing something?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script language="javascript" type="text/javascript">
        
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
 
        function pageLoad(sender, args) {
            var t_id = '<%= cextDate1.ClientID %>';
            var t_obj = $find(t_id);
            alert('pageLoad() : ' + t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
 
            t_id = '<%= cextDate2.ClientID %>';
            t_obj = $find(t_id);
            alert('pageLoad() : ' + t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
        }
       
        function pageLoaded(sender, args) {
            var t_id = '<%= cextDate1.ClientID %>';
            var t_obj = $find(t_id);
            alert('pageLoaded() : ' + t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
 
            t_id = '<%= cextDate2.ClientID %>';
            t_obj = $find(t_id);
            alert('pageLoaded() : ' + t_id + ' : ' + ((t_obj == null) ? 'ntf' : 'found'));
        }
        
    </script>
    <div>
        <asp:TextBox ID="txtDate1" runat="server" ></asp:TextBox>
        <cc1:CalendarExtender ID="cextDate1" runat="server" Enabled="True"
            TargetControlID="txtDate1">
        </cc1:CalendarExtender>
        
        <asp:TextBox ID="txtDate2" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="cextDate2" runat="server" Enabled="True"
            TargetControlID="txtDate2">
        </cc1:CalendarExtender>
    </div>
    </form>
    
</body>
</html>

Open in new window

Commented:
As you Enabled property of extender is a server side property. So if you make that property false then extender1 component no longer render to page. so there is a cause of problem.

Author

Commented:
Well, hell.  Yeah, that's the problem.  I guess there isn't any point in even creating the CalendarExtender's dynamically with the other components since they have to be disabled by default.  I'll just have to create them in the javascript routine that is enabling the range entry fields.  I already tested this in the example test case and it works great, I just have to get all of my CSS and other configuration stuff into the client-side code.  And, in the end, this is a great solution, since it means that the ONLY CalendarExtender's that get allocated are for lines that the user elects to edit.  Thanks for helping me past my blind spot!

Author

Commented:
So frustrating!

The solution works fine in the sample project we have posted here.  Dynamically creating the CalendarExtender from the javascript side works great.

When I get it into my real application which uses a master page, the $create() call fails with this error :

  'AjaxControlToolkit' is undefined

I've already spent a while researching it - there are apparently 10 billion reasons that you can get this error and I've worked through about 10 different 'solutions', none of which work for my case.  I'm not pursuing another here, just commenting on it out of frustration.  I'll keep researching.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial