Damian Mehers' Blog Android, VR and Wearables from Geneva, Switzerland.

28Feb/0710

Calling AJAX Control Extenders from JavaScript code

I am a big fan of declarative programming.  It reduces the risk of errors, saves on mundane coding and lets me say what I want to do and someone else can figure out the how (although I like to understand the how too :-).

That said, when you find yourself doing strange and unnatural things simply to be able to use declarative programming then you know you've gone too far.

I found myself in this kind of situation recently.  I have a very large GridView and for one of the columns I wanted to display a ModalPopup whenever the user clicked on the corresponding item in each row, where they could select information related to that item.

What I could have done is to hook up an instance of the ModalPopup in the template, so that for each row a new ModalPopup would be created.

Instead what I did was to define a single ModalPopup outside of the GridView, targeted at a dummy hidden LinkButton (with no label):

<asp:LinkButton ID="DummyHiddenLinkButton" runat="server"></asp:LinkButton>

<cc1:ModalPopupExtender ID="SelectYxzModalPopupExtender"
                                                         
runat="server" 
                                                         
TargetControlID="DummyHiddenLinkButton"
                                                         
PopupControlID="SelectYxzPanel" 
                                                         
OkControlID="SelectYxzOKButton" >
</cc1:ModalPopupExtender>

Then in the template I hooked up the onclick method of the item to invoke a JavaScript function  passing as a parameter key information related to the item.

Inside my JavaScript function I first initialize the Panel with information related to the item (in my case by invoking a page method), and then I programatically cause the ModalPopup to show:

function OnItemLinkClicked(someId) {
    PageMethods.SomePageMethod(someId,
                               OnSomePageMethodSucceded,
                               OnSomePageMethodFailed);
}

function OnSomePageMethodSucceded(result) {
    var extender = $find('SelectYxzModalPopupExtender');
    var someList = $get('SomeListInTheModalPanel');
    if(!extender || !someList) { ...
    }
    someList.options.length = 0;
    for(var i = 0; i < result.length; i++) {
        var option = document.createElement('OPTION');
        option.text = result[i].Text;
        option.value = result[i].Value;
        someList.options.add(option);
    }
    extender.show();
}

I've shown my call to a backend page method for completeness. I'm invoking a page method to get an array of structs related to the item that the user clicked, and then using the resulting array to populate a SELECT that I display within the modal popup.

But the interesting stuff is in bold. Here I am programatically finding my ModalPopup extender (using the $find shortcut to the Sys.Application.findComponent method), and then invoking its show method to cause it to display. The hidden LinkButton that is its "official" target never actually gets used.

I discovered what methods were available on the ModalPopup extender by looking at its source, which is available for all the control extenders when you download the AJAX Control Toolkit. Methods that are prefixed with an underscore are internal methods and I'd never call those, but I'm pretty comfortable calling the other methods, such as the handy show method above.

Filed under: AJAX Leave a comment
Comments (10) Trackbacks (0)
  1. Thanks, this was helpful. I appreciate you posting this!

  2. I read this with attention but I fail !

    I can’t “Then in the template I hooked up the onclick method of the item to invoke a JavaScript function passing as a parameter key information related to the item.”

    How to do this ?
    Visual studio 2005 is telling me that ther is an error when II try to put my function in the onclick event …

    PS : I’m using a gridview and just want to load a simple text in a popup to complete the overview in my gridview.

  3. Franck:

    If it is an ASP.NET button then you can use the OnClientClick attribute:
    http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.button.onclientclick.aspx

    Damian

  4. not to sound like an idiot but can you post a aspx page and a code behind example i am not sure i quite have how to wire this solution up
    TIA (or email it to me please)

  5. I Would appreciate if you could satisfy dylan’s request …

    Now I’m blocked on the event function :p

    function OnItemLinkClicked(someId) {
    PageMethods.SomePageMethod(someId,
    OnSomePageMethodSucceded,
    OnSomePageMethodFailed);
    }

  6. gfjgfj

  7. I have read and tried but It didn’t want to work!

    I am agree with Franck and dylan. Would you mind to write an example in aspx to know how this works. We really will appreciate it!!
    Thanks.

  8. i TRIED THIS BUT DOESNT WORK WELL.CAN U TELL ME SOME BRIEF

  9. Check this out. I got this from another website, cause the author of this article never bothered to reply to the coments I thought of mosting the answer here.

    You add a “BehaviorID” to the ModalPopupExtender…

    BehaviorID: In cases where you would like to access the client-side behavior for your extender from script code in the client, you can set this BehaviorID to simplify the process. See example below:

    function changeValue() {

    var myBehavior = $find(“myBehavior1”);

    myBehavior.show();

    }

    http://ajax.asp.net/ajaxtoolkit/Walkthrough/ExtenderClasses.aspx

  10. Thanks John — over the year or so since I wrote the original post I’ve been doing more work around Media Center, and its not always easy to make the context switch back to ASP.NET AJAX.

    Cheers,
    /Damian


Leave a comment

No trackbacks yet.