Ajax PopupControlExtender

Discussion in 'ASP .Net Web Controls' started by john, Dec 24, 2007.

  1. john

    john Guest

    Using Visual Studio 2008

    The use for this is in a Timesheet entry webpage where a 2 week period is in
    view, using the DataList ItemTemplate only.

    The popup's targetcontrol is the Hours textbox(16 total & 16 popupcontrol's;
    one for each of them), the popup is a text box to enter a memo about the
    time entry.

    This works really well for the user & each popup is properly bound to the
    correct row and target textbox without having to select the row first, but
    the popup control has to be located in the ItemTemplate and ajax does the
    rest.

    Here is the problem, Ajax does not hide the popup control until after the
    pageload. That means 16 popup's per row that are visble until the
    popupextendercontrol hides them one at a time; very slowly.

    If I set the popup's visible to false that works to hide them on pageload,
    but I will need to do an onclick javascript to make them visble again (if
    that is possible) on the Hours textbox, which I don't know how to do.

    Any thoughts as how to achive what I am doing with the popup within the
    Datalist ItemTemplate; I just want to have my Cake & eat it Too! Is that
    bad?
    Maybe the new ListView would work better?
    Thanks
    John
    john, Dec 24, 2007
    #1
    1. Advertising

  2. Hello John,

    From your post, my understanding on this issue is: you wonder how to make
    the popup controls invisible before the whole page load. If I'm off base,
    please feel free to let me know.

    As you see, the popup controls are visible before the whole page is loaded.
    It is because PopupControlBehavior.js registers the page load event and
    calls the hidePopup method in its event handler:

    // Called automatically when a page load/postback happens
    _close : function(result) {
    ¡­ ¡­ ¡­
    // Hide the popup
    this.hidePopup();
    }

    Therefore, the popup controls will be hidden only when the whole page is
    loaded.

    The method this.hidePopup calls "this._popupBehavior.hide();" in
    PopupBehavior.js, which internally calls $common.setVisible(element,
    false); The method setVisible is in Common.js. When the second parameter
    (value) is false, it calls element.style.display = 'none'; and
    element.style.visibility = 'hidden' to hide the control.

    To resolve your problem, we can add the style ""display:none;
    visibility:hidden" to the popup control so that the controls are invisible
    before page load.

    <asp:TextBox runat="server" ID="popupTextBox" style="display:none;
    visibility:hidden"></asp:TextBox>

    Please have a try and let me know the result. If you have any other
    concerns or need anything else, feel free to let me know.

    Sincerely,
    Jialiang Ge (, remove 'online.')
    Microsoft Online Community Support

    ==================================================
    For MSDN subscribers whose posts are left unanswered, please check this
    document: http://blogs.msdn.com/msdnts/pages/postingAlias.aspx

    Get notification to my posts through email? Please refer to
    http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    ications. If you are using Outlook Express/Windows Mail, please make sure
    you clear the check box "Tools/Options/Read: Get 300 headers at a time" to
    see your reply promptly.

    Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
    where an initial response from the community or a Microsoft Support
    Engineer within 1 business day is acceptable. Please note that each follow
    up response may take approximately 2 business days as the support
    professional working with you may need further investigation to reach the
    most efficient resolution. The offering is not appropriate for situations
    that require urgent, real-time or phone-based interactions or complex
    project analysis and dump analysis issues. Issues of this nature are best
    handled working with a dedicated Microsoft Support Engineer by contacting
    Microsoft Customer Support Services (CSS) at
    http://msdn.microsoft.com/subscriptions/support/default.aspx.
    ==================================================
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Jialiang Ge [MSFT], Dec 25, 2007
    #2
    1. Advertising

  3. john

    john Guest

    I gave it a try and from the visual point of view it works, but in the
    background it is still going thru the process of hiding them again & I
    suppose activating them too.

    I have it in an update panel with a progress bar, which stays active for
    quite some time & even though you can begin entering time, the popups only
    become available as it cycles thru each row to process them.

    Maybe the hiding is only part of the problem and each has to be made active
    regardless?

    If so is there a way to use just one popupcontrol inside or outside of the
    DataList & assign it to the Time Textbox thru an onclick JavaScript event? I
    would need to assign the Popups binding too.

    Thanks
    John


    "Jialiang Ge [MSFT]" <> wrote in message
    news:...
    > Hello John,
    >
    > From your post, my understanding on this issue is: you wonder how to make
    > the popup controls invisible before the whole page load. If I'm off base,
    > please feel free to let me know.
    >
    > As you see, the popup controls are visible before the whole page is
    > loaded.
    > It is because PopupControlBehavior.js registers the page load event and
    > calls the hidePopup method in its event handler:
    >
    > // Called automatically when a page load/postback happens
    > _close : function(result) {
    > ¡­ ¡­ ¡­
    > // Hide the popup
    > this.hidePopup();
    > }
    >
    > Therefore, the popup controls will be hidden only when the whole page is
    > loaded.
    >
    > The method this.hidePopup calls "this._popupBehavior.hide();" in
    > PopupBehavior.js, which internally calls $common.setVisible(element,
    > false); The method setVisible is in Common.js. When the second parameter
    > (value) is false, it calls element.style.display = 'none'; and
    > element.style.visibility = 'hidden' to hide the control.
    >
    > To resolve your problem, we can add the style ""display:none;
    > visibility:hidden" to the popup control so that the controls are invisible
    > before page load.
    >
    > <asp:TextBox runat="server" ID="popupTextBox" style="display:none;
    > visibility:hidden"></asp:TextBox>
    >
    > Please have a try and let me know the result. If you have any other
    > concerns or need anything else, feel free to let me know.
    >
    > Sincerely,
    > Jialiang Ge (, remove 'online.')
    > Microsoft Online Community Support
    >
    > ==================================================
    > For MSDN subscribers whose posts are left unanswered, please check this
    > document: http://blogs.msdn.com/msdnts/pages/postingAlias.aspx
    >
    > Get notification to my posts through email? Please refer to
    > http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    > ications. If you are using Outlook Express/Windows Mail, please make sure
    > you clear the check box "Tools/Options/Read: Get 300 headers at a time" to
    > see your reply promptly.
    >
    > Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
    > where an initial response from the community or a Microsoft Support
    > Engineer within 1 business day is acceptable. Please note that each follow
    > up response may take approximately 2 business days as the support
    > professional working with you may need further investigation to reach the
    > most efficient resolution. The offering is not appropriate for situations
    > that require urgent, real-time or phone-based interactions or complex
    > project analysis and dump analysis issues. Issues of this nature are best
    > handled working with a dedicated Microsoft Support Engineer by contacting
    > Microsoft Customer Support Services (CSS) at
    > http://msdn.microsoft.com/subscriptions/support/default.aspx.
    > ==================================================
    > This posting is provided "AS IS" with no warranties, and confers no
    > rights.
    >
    john, Dec 25, 2007
    #3
  4. Hello John,

    What do you mean by "in the background it is still going thru the process
    of hiding them again"? After the page is loaded, the method hidePopup will
    be called on each popup control. Because we have already set the visibility
    of the popup controls as false (style="display:none; visibility:hidden"),
    this operation (hidePopup) takes no effect.

    >If so is there a way to use just one popupcontrol inside or outside of
    >the DataList & assign it to the Time Textbox thru an onclick JavaScript
    >event? I would need to assign the Popups binding too.

    Would you let me know whether the term 'popupcontrol' refers to the
    popupcontrolid: the textbox or the popupcontrolextender?
    If you meant the popup control, the answer is yes based on my test.
    If you maant the popupcontrolextender, the answer is no. It will throw an
    exception that says "The TargetControlID of 'TextBox1_PopupControlExtender'
    is not valid", because the target control Id varies in different rows of
    the data list.

    Last but not least, I would suggest posting Ajax Control Toolkit issues in
    ASP.NET forum:
    http://forums.asp.net/1022.aspx
    The reason why we recommend posting appropriately is you will get the most
    qualified pool of respondents, and other partners who the newsgroups
    regularly can either share their knowledge or learn from your interaction
    with us. Thank you for your understanding.

    Have a nice day!

    Regards,
    Jialiang Ge (, remove 'online.')
    Microsoft Online Community Support

    =================================================
    When responding to posts, please "Reply to Group" via your newsreader
    so that others may learn and benefit from your issue.
    =================================================
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Jialiang Ge [MSFT], Dec 26, 2007
    #4
  5. john

    john Guest

    Hi, thanks for you reply,

    There must be more involved than just hiding each control on page
    load/postback, because even though all the rows display right with the
    popups hidden, the popup control does not work on all the rows until the
    ajax prorgress bar for the update panel goes away. For example: row 1 works
    1st & then works its way to that last row, which then will display the popup
    too when I click it, but not until the updatePanel acitity has ended, but it
    takes a little while. If I do anything that then requires a postback the
    same reprocessing occurs again.



    I was referring to the PopupControl as the Textbox that would popup when the
    Textbox in the DataList is clicked. If I could get that down to Just one
    Control per Row instead of the 16 I have now, it would be faster maybe, so
    long as I could onclick:



    Reset the PopupControlExtender's TargetControlID to the one I am clicking

    Rebind the Textbox that pop's up to the correct corresponding Binding, which
    is a memo field.



    Can that be done with JavaScript? Would I need just one PopupControlExtender
    too then if that is viable, I now have 16, one for each popup TextBox that
    is clicked as its TargetControlID?



    So if Below is the 1st Clicked Textbox , when clicking of the 2nd TextBox:
    <%# Eval("M1") %> would be reset to <%# Eval("M2") %>



    and TargetControlID="txtDay1" would be reset to TargetControlID="txtDay2"





    <asp:TextBox ID="MyPopupMemo" runat="server" Text='<%# Eval("M1") %>'

    TextMode="MultiLine" Width="220px"></asp:TextBox>



    <cc1:popupControlExtender ID="PopupControlExtender1" runat="server"

    PopupControlID="MyPopupMemo" Position="Bottom" TargetControlID="txtDay1">

    </cc1:popupControlExtender>







    I did notice that the asp.net forum has a lot more activity after I posted
    to this one.

    Thank,

    John





    "Jialiang Ge [MSFT]" <> wrote in message
    news:...
    > Hello John,
    >
    > What do you mean by "in the background it is still going thru the process
    > of hiding them again"? After the page is loaded, the method hidePopup will
    > be called on each popup control. Because we have already set the
    > visibility
    > of the popup controls as false (style="display:none; visibility:hidden"),
    > this operation (hidePopup) takes no effect.
    >
    >>If so is there a way to use just one popupcontrol inside or outside of
    >>the DataList & assign it to the Time Textbox thru an onclick JavaScript
    >>event? I would need to assign the Popups binding too.

    > Would you let me know whether the term 'popupcontrol' refers to the
    > popupcontrolid: the textbox or the popupcontrolextender?
    > If you meant the popup control, the answer is yes based on my test.
    > If you maant the popupcontrolextender, the answer is no. It will throw an
    > exception that says "The TargetControlID of
    > 'TextBox1_PopupControlExtender'
    > is not valid", because the target control Id varies in different rows of
    > the data list.
    >
    > Last but not least, I would suggest posting Ajax Control Toolkit issues in
    > ASP.NET forum:
    > http://forums.asp.net/1022.aspx
    > The reason why we recommend posting appropriately is you will get the most
    > qualified pool of respondents, and other partners who the newsgroups
    > regularly can either share their knowledge or learn from your interaction
    > with us. Thank you for your understanding.
    >
    > Have a nice day!
    >
    > Regards,
    > Jialiang Ge (, remove 'online.')
    > Microsoft Online Community Support
    >
    > =================================================
    > When responding to posts, please "Reply to Group" via your newsreader
    > so that others may learn and benefit from your issue.
    > =================================================
    > This posting is provided "AS IS" with no warranties, and confers no
    > rights.
    >
    john, Dec 26, 2007
    #5
  6. Hello,

    According to the description, you expect that a PopupControlExtender
    control can be dynamically bound to a target control which is click on. I
    don't think this is an expected behavior when the community
    design&developed the PopupControlExtender. Have you tried the ASP.NET forum
    (http://forums.asp.net/1022.aspx)? Because Ajax Control Toolkit is
    monitored by the community, I think you will get a better explanation and
    resolution there.

    Happy New Year!

    Thanks
    Jialiang Ge (, remove 'online.')
    Microsoft Online Community Support

    =================================================
    When responding to posts, please "Reply to Group" via your newsreader
    so that others may learn and benefit from your issue.
    =================================================
    This posting is provided "AS IS" with no warranties, and confers no rights.
    Jialiang Ge [MSFT], Dec 28, 2007
    #6
  7. john

    Guest

    On Dec 24 2007, 7:01 am, "john" <> wrote:
    > Using Visual Studio 2008
    >
    > The use for this is in a Timesheet entry webpage where a 2 week period is in
    > view, using the DataList ItemTemplate only.
    >
    > The popup's targetcontrol is the Hours textbox(16 total & 16 popupcontrol's;
    > one for each of them), the popup is a text box to enter a memo about the
    > time entry.
    >
    > This works really well for the user & each popup is properly bound to the
    > correct row and target textbox without having to select the row first, but
    > the popup control has to be located in the ItemTemplate and ajax does the
    > rest.
    >
    > Here is the problem, Ajax does not hide the popup control until after the
    > pageload. That means 16 popup's per row that are visble until the
    > popupextendercontrol hides them one at a time; very slowly.
    >
    > If I set the popup's visible to false that works to hide them on pageload,
    > but I will need to do an onclick javascript to make them visble again (if
    > that is possible) on the Hours textbox, which I don't know how to do.
    >
    > Any thoughts as how to achive what I am doing with the popup within the
    > Datalist ItemTemplate; I just want to have my Cake & eat it Too! Is that
    > bad?
    > Maybe the new ListView would work better?
    > Thanks
    > John


    Hi,

    If you put the html that you want to display in a panel and then
    assign the CssClass attribute according to below, then the panel will
    not initially be displayed
    <style>
    .cssInitalTag
    {
    visibility:hidden;
    position:absolute;
    }
    </style>

    <asp:panel ID="pnlPop" runat="server" CssClass="cssAvailMod">
    Here is the popup control HTML
    </asp:panel>

    /Steffan
    , Jan 7, 2008
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jobs
    Replies:
    1
    Views:
    4,630
  2. =?Utf-8?B?QVNQIERldmVsb3Blcg==?=

    Use Image instead of text box wih the PopupControlExtender

    =?Utf-8?B?QVNQIERldmVsb3Blcg==?=, Dec 4, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    2,363
    =?Utf-8?B?QVNQIERldmVsb3Blcg==?=
    Dec 6, 2006
  3. minnie
    Replies:
    1
    Views:
    666
    Andrew Thompson
    Dec 13, 2006
  4. Replies:
    1
    Views:
    1,431
    bruce barker
    Jun 6, 2008
  5. mazdotnet
    Replies:
    1
    Views:
    3,948
Loading...

Share This Page