[Solved] Cannot invoke RadSpell from RadToolbarbutton

[Stephan]

Hi, we have an application which is growing rapidly and we use a lot of the Rad-controls which are getting better and better. In this applicatoin we have a master-page which uses the RadSplitter to divide the page in sperate sections. In the header-section we use a UserControl containing the RadMenu and three RadToolbars.

On one of these RadToolbars I have added a button which should invoke the Radspell functionality. I came accross this thread, which is the functionality I try to accomplice, but I cannot get it to work. I tried the following code:

StringBuilder javaScript = new StringBuilder();
        javaScript.Append("<script language='javascript'>");
        javaScript.Append(rtbMain.ClientID + ".attachEvent('OnClientClick','click_handler');");
        javaScript.Append("function clientClick_eventHandler(sender, e)");
        javaScript.Append("{");
        javaScript.Append("if(sender.CommandName == 'spellCheck')");
        javaScript.Append("{");
        javaScript.Append("alert(e);");
        javaScript.Append("return false;");
        javaScript.Append("}");
        javaScript.Append("}");
        javaScript.Append("</script>");

        if (!Page.ClientScript.IsStartupScriptRegistered("clientSpellScript"))
            Page.ClientScript.RegisterStartupScript(Page.GetType(), "clientSpellScript", javaScript.ToString());

I use this code in the PreRender of the UserControl. When I use this I get a javascript error saying that the id of the toolbar I reference does not exists. I checked this in the HTML-output, but he Id of the RadToolbar is ok. It is on the page. Then I tried to attach the function clientClick_eventHandler directly in the Radtoolbar. Thus setting OnClientButtonClicked="clientClick_eventHandler" of the toolbar. This doesn't throw the javascript-exception. But when I click the toolbar-button, it cannot find the CommandName of the sender-object. However there is a senderobject. I modifed the javascript function not to check for sender.CommandName but alert(sender). It shows me an alert box with [object Object]. So there is an object present.

The concent of the usercontrol is:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WindowsMenu.ascx.cs" Inherits="UserControls_WindowsMenu" %>
<%@ Register Src="~/UserControls/Common/shiftPicker.ascx" TagName="ShiftPicker" TagPrefix="mextra" %>
<div style="width: 100%; z-index: 100;">
    <telerik:RadMenu ID="rdmCommonMenu" runat="server" DataFieldParentID="MenuParentId"
        Width="100%" CollapseDelay="0" Style="z-index: 100;" DataNavigateUrlField="NavigationUrl"
        ClickToOpen="True" DataTextField="MenuItem" DataValueField="MenuId" OnDataBound="rdmCommonMenu_DataBound"
        DefaultGroupSettings-ExpandDirection="Down" DataFieldID="MenuId" meta:resourcekey="Resource1"
        MaxDataBindDepth="-1" OnLoad="rdmCommonMenu_Load" OnDataBinding="rdmCommonMenu_DataBinding">
        <CollapseAnimation Type="None" Duration="200" />
        <ExpandAnimation Type="None" />
    </telerik:RadMenu>
</div>
<asp:Panel ID="pnlToolbar" runat="server" Width="100%" Height="60px" CssClass="Toolbar"
    meta:resourcekey="pnlToolbarResource1" OnDataBinding="pnlToolbar_DataBinding">
    <telerik:RadToolBar ID="rtbMain" runat="server" Width="350px" Height="60px" OnButtonClick="rtbMain_OnClick"
        meta:resourcekey="rtbMainResource1" OnPreRender="rtbMain_PreRender" OnClientButtonClicked="clientClick_eventHandler">
        <Items>
            <telerik:RadToolBarButton ImagePosition="AboveText" ToolTip="New Document" CausesValidation="False"
                CommandName="new" ImageUrl="~/Images/Toolbar/new.gif" Text="new" runat="server"
                meta:resourcekey="RadToolBarButtonResource1" />
            <telerik:RadToolBarButton ImagePosition="AboveText" ToolTip="Save" CommandName="save"
                ImageUrl="~/Images/Toolbar/save.gif" Text="save" runat="server" meta:resourcekey="RadToolBarButtonResource2" />
            <telerik:RadToolBarButton ImagePosition="AboveText" ToolTip="Refresh" CausesValidation="False"
                CommandName="refresh" Text="Refresh" ImageUrl="~/Images/Toolbar/refresh.gif"
                meta:resourcekey="RadToolBarButtonResource3" runat="server" />
            <telerik:RadToolBarButton ToolTip="Back" ImagePosition="AboveText" CausesValidation="False"
                CommandName="back" Text="Backward" ImageUrl="~/Images/Toolbar/backGreen.gif"
                runat="server" />
            <telerik:RadToolBarButton ToolTip="Forward" ImagePosition="AboveText" CausesValidation="False"
                CommandName="forward" Text="Forward" ImageUrl="~/Images/Toolbar/forwardGreen.gif"
                runat="server" />
            <telerik:RadToolBarButton ToolTip="Spell Check" Value="spellCheck" CommandName="spellCheck"
                Text="Spell Check" ImageUrl="~/Images/Toolbar/spellCheck.gif" runat="server" ImagePosition="AboveText" Enabled="false">
            </telerik:RadToolBarButton>
        </Items>
        <CollapseAnimation Duration="200" Type="OutQuint" />
    </telerik:RadToolBar>
    <telerik:RadToolBar ID="rtbMisc" runat="server" Height="60px" Width="350px" OnButtonClick="rtbMisc_ButtonClick">
        <CollapseAnimation Duration="200" Type="OutQuint" />
        <Items>
            <telerik:RadToolBarButton runat="server" ImagePosition="AboveText" ImageUrl="~/Images/Toolbar/client_report.gif"
                Text="Alg. Rapportage" PostBack="true" CommandName="GeneralReport" CausesValidation="False">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton meta:resourcekey="RadToolBarButtonResource6" runat="server">
                <ItemTemplate>
                    <telerik:RadSpell ID="rscSpell" runat="server" ButtonType="None" ControlToCheck=""
                        meta:resourcekey="rscSpellResource1" SupportedLanguages="en-US,English" />
                </ItemTemplate>
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" ImagePosition="AboveText" ImageUrl="~/Images/Toolbar/voorblad.gif"
                PostBackUrl="~/ClientFront/ClientFront.aspx" Text="Voorblad" ToolTip="Voorblad"
                CommandName="ClientPage" />
            <telerik:RadToolBarButton runat="server" ImagePosition="AboveText" ImageUrl="~/Images/Toolbar/MextraToday.gif"
                meta:resourcekey="RadToolBarButtonResource8" PostBackUrl="~/MextraToday/Default.aspx"
                Text="MeXtra Today" ToolTip="MeXtra Today" />
            <telerik:RadToolBarButton ToolTip="Agenda" ImagePosition="AboveText" Text="Agenda"
                PostBackUrl="~/Appointment/Appointment.aspx" ImageUrl="~/Images/Toolbar/Calendar.gif"
                runat="server" />
            <telerik:RadToolBarButton runat="server" PostBack="False" ToolTip="Help" CausesValidation="False"
                Visible="False">
                <ItemTemplate>
                    <div style="margin-top: 5px; margin-left: 10px" onclick="displayHelp('Open');" onmouseover="style.cursor='hand'">
                        <asp:Image runat="server" ID="imgHelp" ImageUrl="~/Images/32X32/help2.gif" />
                    </div>
                </ItemTemplate>
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" PostBack="False" ToolTip="Filter" CausesValidation="False">
                <ItemTemplate>
                    <div style="margin-top: 5px; margin-left: 10px" onclick="displayFilter();" onmouseover="style.cursor='hand'">
                        <asp:Image runat="server" ID="imgHelp" ImageUrl="~/Images/32X32/funnel.gif" />
                    </div>
                </ItemTemplate>
            </telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>
    <telerik:RadToolBar ID="rtbHCP" runat="server" Height="60px" OnButtonClick="rtbHCP_ButtonClick"
        OnPreRender="rtbHCP_PreRender" Width="170px">
        <CollapseAnimation Duration="200" Type="OutQuint" />
        <Items>
            <telerik:RadToolBarButton runat="server" ImagePosition="AboveText" ImageUrl="~/Images/Toolbar/daily_report.gif"
                PostBackUrl="~/Reports/DailyReport.aspx" Text="Dagrapportage" CommandName="DailyReport">
            </telerik:RadToolBarButton>
            <telerik:RadToolBarButton runat="server" CausesValidation="False" ImagePosition="AboveText"
                ImageUrl="~/Images/Toolbar/listview.gif" Text="Overzicht">
            </telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>
</asp:Panel>

Can anyone point me in the right direction?


P.S.: Using the above result in :
Error: ctl00_ctl10_rtbMain is not defined
Source File: http://localhost:64121/WebSite/MextraToday/default.aspx

where ctl00_ctl10_rtbMain is the clientId of the RadToolbar to which the onclientclick event should be wired.
Line: 3069

[Stephan]

Ok, after searching the Telerik forum, I saw that the attachEvent only works in IE and for Mozilla one has to use addEventListener. But I changed the code to use addEventHandler, but still the same error. when I use attachEvent and render in IE there is no error, but the script doesn't work.

an other important thing I noticed is that click_handler should be replaced with clientClick_eventHandler.

I tried all this with no avail.

So in FF i tried:

 StringBuilder javaScript = new StringBuilder();
        javaScript.Append("<script language='javascript' type='text/javascript'>");
        javaScript.Append((sender as RadToolBar).ClientID + ".addEventListener('OnClientClick','clientClick_eventHandler',false);");
        javaScript.Append("function clientClick_eventHandler(sender, e)");
        javaScript.Append("{alert(sender);");
        javaScript.Append("if(sender.CommandName == 'spellCheck')");
        javaScript.Append("{");
        javaScript.Append("alert(e);");
        javaScript.Append("return false;");
        javaScript.Append("}");
        javaScript.Append("}");
        javaScript.Append("</script>");

        if (!Page.ClientScript.IsStartupScriptRegistered("clientSpellScript"))
            Page.ClientScript.RegisterStartupScript(Page.GetType(), "clientSpellScript", javaScript.ToString());

It throw the same exception I mentioned in my previouse post: Error: [clientId-of-toolbar] is not defined

when I changed addEvenListener to attachEvent and run in IE it does not throw the above exception, but the alert box is never shown.

[Atanas Korchev]

Hello Stephan,

Which version of RadToolBar are you using? You have posted in the forum of RadToolBar for ASP.NET Ajax.
If this is the case you should use the ButtonClicked client-side event of RadToolBar to handle button clicks. However you cannot subscribe to this event using the addEventListener/attachEvent model as it is not a DOM event but ASP.NET Ajax event. The easiest way is to set the OnClientButtonClicked property to the name of your JavaScript method.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Stephan]

He Albert,

thx for your reply. i'm using 2008.03.1105.20 of the Ajax RadToolbar.

I also tried your solution. This worked partly. when I use a function like

function clientClick_eventHandler(sender, e)

and set the OnClientButtonClicked to this function. In this function I got the same got as posted in my previous post. the problem is the condition if(sender.CommandName == 'spellCheck') always evaluate to false.

When I just put an alertbox in the function containing the value for sender of e, I can get an alertbox with the message [object Object]. So how can I trigger the right function when the sender.CommandName == 'spellCheck' always evaluate false?

I'm I missing something?

[Stephan]

This post was my solution.

Thanks for the help.