Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Toolbar > OnClientClick event not fired in a Toolbar Control after ajaxified
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

OnClientClick event not fired in a Toolbar Control after ajaxified

Feed from this thread
  • Chris avatar

    Posted on Apr 4, 2007 (permalink)

    I have a ToolBar and a radGrid controls on a page. On that page I am using a radManager to control that the ToolBar control will be ajaxified when a row in the grid is clicked. Now I got the problem that after the first time a row is clicked, the client event "OnClientClick" on the ToolBar control can not be cause anymore. Any someone can help? Thanks.



    Chris

  • Posted on Apr 4, 2007 (permalink)

    Yep, this seems to be a common problem and has been documented in the online docs with a workaround. The link is here:

    http://www.telerik.com/help/aspnet/toolbar/toolbar_ClientEventsUnattached.html

    r.a.d.toolbar v1.4
    Send feedbackClient events are unattached after ajax update

    A typical problem you might experience when integrating r.a.d.toolbar with an ajax control is that the client events of the r.a.d.toolbar will unattach after an ajax update.  For example, consider the following code:
    <radTlb:RadToolbar
        ID="toolbar1"
        runat="server"
        AutoPostBack="True"
        OnOnClick="toolbar1_OnClick">
        <Items>
            <radTlb:RadToolbarButton runat="server" ButtonImage="open.gif" ButtonText="open"
                CommandName="open" Hidden="False" />
            <radTlb:RadToolbarButton runat="server" ButtonImage="save.gif" ButtonText="save"
                CommandName="save" Hidden="False" />
        </Items>
    </radTlb:RadToolbar>
    <br />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>

    <script type="text/javascript">

    <%= toolbar1.ClientID %>.attachEvent("OnClientClick","click_handler");

    function click_handler(sender, e)
    {
       alert(sender.CommandName);
    }

    </script>

    <radA:RadAjaxManager
        ID="RadAjaxManager1"
        runat="server">
        <AjaxSettings>
            <radA:AjaxSetting AjaxControlID="toolbar1">
                <UpdatedControls>
                    <radA:AjaxUpdatedControl ControlID="toolbar1" />
                    <radA:AjaxUpdatedControl ControlID="Label1" />
                </UpdatedControls>
            </radA:AjaxSetting>
        </AjaxSettings>
    </radA:RadAjaxManager>

    Now, if you test this code you fill find out that the click_handler of the toolbar is called only the first time. Then, when the toolbar is updated through the r.a.d.ajax manager the OnClientClick event is unattached and the alert message no longer pops up.

    To fix this problem, use the OnResponseEnd client event of the r.a.d.ajax manager to attach the OnClientClick event of the r.a.d.toolbar again:
    <script type="text/javascript">

    function OnResponseEndHandler(sender, arguments)
    {
       <%= toolbar1.ClientID %>.attachEvent("OnClientClick","click_handler");
    }
    </script>

    <radA:RadAjaxManager
        ID="RadAjaxManager1"
        ClientEvents-OnResponseEnd="OnResponseEndHandler"
        runat="server">
        <AjaxSettings>
            <radA:AjaxSetting AjaxControlID="toolbar1">
                <UpdatedControls>
                    <radA:AjaxUpdatedControl ControlID="toolbar1" />
                    <radA:AjaxUpdatedControl ControlID="Label1" />
                </UpdatedControls>
            </radA:AjaxSetting>
        </AjaxSettings>
    </radA:RadAjaxManager>
     
        This problem and the technique that solves it are valid for any type of ajax control, including Microsoft Ajax. For more information, please see How to run javascript init code upon AJAX update blog post.

  • caglar_ozkul Intermediate avatar

    Posted on Jan 22, 2008 (permalink)


    Hi,

    If my toolbar located in a custom webcontrol, AttachEvent method doesn't work as expected. Still working just for first click.



    protected override void RenderContents(HtmlTextWriter writer)  
    {  
      RadToolbar1.RenderControl(writer);  
      RenderScript(writer);  
    }  
     
    private void RenderScript(HtmlTextWriter writer)  
    {  
       writer.WriteBeginTag("script");  
       writer.WriteAttribute("type""text/javascript");  
       writer.Write(HtmlTextWriter.TagRightChar);              
       writer.WriteLine("SetGlobalMasterToolbar(" + Instance.ClientID + ");");  
       writer.WriteLine(Instance.ClientID + ".attachEvent('OnClientClick', 'RadToolbar1_CL_Click');");  
       writer.WriteEndTag("script");  

    The MasterPage
    <radA:RadAjaxManager ID="AMSingelton" runat="server" EnableOutsideScripts="True">  
                <ClientEvents OnResponseEnd="AMResponseEndx" OnRequestStart="AMRequestStarted" /> 
                <AjaxSettings> 
                    <radA:AjaxSetting AjaxControlID="AMSingelton">  
                        <UpdatedControls> 
                            <radA:AjaxUpdatedControl ControlID="lblPageContentHeader" /> 
                        </UpdatedControls> 
                    </radA:AjaxSetting> 
                </AjaxSettings> 
            </radA:RadAjaxManager> 

    scripts.js
    var masterToolbarId  
    function MasterTLBAttachEvent()  
    {              
         // alert(masterToolbarId) is working but. it looks like attachevent couldn't achieved  
         if(masterToolbarId)  
             masterToolbarId.attachEvent('OnClientClick''RadToolbar1_CL_Click');              
    }  
    function AMResponseEndx(sender,arguments)  
    {  
         MasterTLBAttachEvent();  
         radsplash(false);          
         isReady = true;  
    }  
     
    function RadToolbar1_CL_Click(oSender, oE)   
    {  
       alert(oSender.CommandName); // Just for first time.   
       switch (oSender.CommandName)   
       {     
          case 'cmdDelete'return confirm(Sure...?'); break;  
          case 'cmdExcel'window["disableAjax"]=truebreak;  
          default:window["disableAjax"] = falsebreak;  
       }     
       return true;  

  • Mehdi Taouti avatar

    Posted on Sep 11, 2009 (permalink)

    Hello everyone,
    I seem to have a related problem so I took the liberty to post its description on this thread.
    Our solution requires that the markup of the toolbar control is returned to a get request from the client side.
    On the server side we answer the Javascript / Jquery get request by building the toolbar markup using the RenderControl function.
    the clientside (javascript/jquery) picks up the returned markup and insert/replace some parts of the page accordingly.
    I checked the markup of both toolbars, one created the regular way and the other using the senario I just described above.
    The two markups are identical but they present different  behaviours.
    In the solution we are building it seems that after the markup has been updated (using the get) it no longer works correctly. Events are no longer triggered and even the hover effect disapeared. When I mouse over a button within the tool bar there's no hover effect. I checked what's happening using firebug and it seems the 'rtbItemHover' class is no longer added to the node when I do hover over the button. So my guess is that some javascript is no longer working. 
    Note that we are not using anything special for the hover effect, just leaving the default telerik tool bar behaviour.
    Also our own javascript functions are no longer being fired (We use OnClientButtonClicking).
    I really hope you can help fix this because our whole strategy revolves around using RenderControl.
    Thank you much in advance. 

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Toolbar > OnClientClick event not fired in a Toolbar Control after ajaxified