Grid: PopUpShowing produces "sys.InvalidOperationException: handler must be a function"

[Keith]

I am using RADcontrols for ASP.NET version 2008.2.804.20

The documentation at http://www.telerik.com/help/aspnet-ajax/onpopupshowing.html has the following example:

ascx/aspx

<ClientEvents OnPopUpShowing ="PopUpShowing" />

JavaScript

   <script type="text/javascript">
        function PopUpShowing(sender, eventArgs)
        {
                var  popUp = eventArgs.get_popUp();
        }

        or

        function PopUpShowing(sender, eventArgs)
        {
               eventArgs.set_cancel(true);
        }

  </script>

Which by the way does not work for my version of the controls.

I figured out I need to change

 <ClientEvents OnPopUpShowing ="PopUpShowing" />
  to
<ClientSettings  ClientEvents-OnPopUpShowing="PopUpShowing()" >

My javascript function that is called when the popup shows is

     function PopUpShowing(sender, eventArgs) {
         $('.GridEditForm_Custom').height($('#AnswerOptionsGrid').height() + 230);
     }

which uses jQuery to change the height of the grid edit form based on the height of a sub grid on the form.

The height does get adjusted, however a "sys.InvalidOperationException: handler must be a function" error is also thrown.

If I replace the $('.GridEditForm_Custom').height($('#AnswerOptionsGrid').height() + 230);
with a simple alert('test'); the same error is produced.

Any help will be appreciated,

Keith E.

[Keith]

Is there anyone from Telerik that can resolve this? It is becoming a show stopper for a huge project with a very tight time-line. None of the examples throughout the Telerik site for this feature work as illustrated and the implementation I stumbled upon by trial and error throws a JS error. I need a solution and fast.

Keith E.

[Nikolay Rusev]

Hello Keith,

Unfortunately I was unable to reproduce this issue. 
Attached to this post you can find application which use RadGrid and listen for client OnPopUpShowing  event.

Greetings,
Nikolay
the Telerik team

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

[Keith]

Nikolay,

I apppreciate your quick response, however, your solution did not solve the problem and it not reassuring to hear what seems to be a pat answer from Telerik: " Unfortunately I was unable to reproduce this issue." Just because you can't reproduce the issue does not mean it doesn't exist

As I stated in my first post

            <ClientSettings>
                <ClientEvents OnPopUpShowing="PopUpShowing" />
            </ClientSettings>

does not work with the version 2008.2.804.20 of the controls that I have. The only setting that even comes close to producing a "OnPopUpShowing" is ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing()" used in the "telerik:RadGrid" tag

        <telerik:RadGrid ID="AnswerGrid1"  AllowFilteringByColumn="false"
            Skin="Custom" EnableEmbeddedSkins="false" AllowSorting="false"
            AutoGenerateColumns="false" AllowPaging="false" GridLines="None" runat="server"
            ShowFooter="false" ShowHeader="false" AllowMultiRowSelection="false" HorizontalAlign="NotSet"
               OnDeleteCommand="AnswerGrid1_DeleteCommand"
               OnInsertCommand="AnswerGrid1_InsertCommand"
                OnUpdateCommand="AnswerGrid1_UpdateCommand"
                OnRowDrop="AnswerGrid1_RowDrop"
                OnItemDataBound="AnswerGrid1_ItemDataBound"  ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing()">
                


ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing" does not call the JS function defined as

     function PopUpShowing(sender, eventArgs) {
         $('.GridEditForm_Custom').height($('#AnswerOptionsGrid').height() + 230);
     }

Although the ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing()" with the parenthesis does call the JS function, it throws an error stating "sys.InvalidOperationException: handler must be a function"

A real solution would be nice.

Keith E.

[Vlad]

Hello Keith,

You should not assign function calls instead function names for client events! Please use function names instead.

Best wishes,
Vlad
the Telerik team

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

[Keith]

Vlad,

This dialogue is completely exasperating. I know that I should us function names for client events. In fact other uses of them like "<ClientEvents OnRowSelected="RowSelected1" />" work.

Repeating that I should use this format will not get to this issue resolved. If you would read my previous posts, I stated that using that format isn't working for this event!  When the function name is set as the value for ClientSettings-ClientEvents-OnPopUpShowing or ClientEvents OnPopUpShowing

as in

ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing" or <ClientEvents OnPopUpShowing ="PopUpShowing" />

nothing happens.

It was just by chance that I tried <ClientEvents OnPopUpShowing ="PopUpShowing()" /> and ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing()" ; which does call the JS function but throws the error.

So, I am at a loss as to what the solution is. However, this is a huge USG project with a tight timeline and the OnPopUpShowing functionality is a key need for a section of the application. I need a fix not repetition of the same response.

One thing I did notice the example in the telerik docs and the one attached to Nikolay's response is pretty basic. The pop up form is remedial. I have a more involved form. Perhaps it is something in it that in interacting with the ability for the JS call to occur when the setting OnPopUpShowing ="PopUpShowing" is used. Just a wild guess at this point.

Unfortunately, I can't provide a copy of the project, It's huge and relies on interaction to a secure database that I can't give outside access to. However, I need a fix.

Keith

[Vlad]

Hello Keith,

I have attached small example to illustrate you how to define OnPopUpShowing client-side event. Let me know if you have any questions.

Kind regards,
Vlad
the Telerik team

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

[Keith]

Vlad,

The only difference between the project you sent and the the solution offerings thus far is the setting <ClientSettings ClientEvents-OnPopUpShowing="RadGrid1_PopUpShowing" /> was used instead of  <ClientEvents OnPopUpShowing ="PopUpShowing" />; which I have already tried. It does not work either, unless you use  <ClientEvents OnPopUpShowing ="PopUpShowing()" />; which does call the JS function, but throws the same error.

Still looking for a real solution.

Keith

[Vlad]

Hi Keith,

<ClientSettings ClientEvents-OnPopUpShowing="RadGrid1_PopUpShowing" /> works as expected in posted example.

Greetings,
Vlad
the Telerik team

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

[Keith]

Vlad,

Stating that <ClientSettings ClientEvents-OnPopUpShowing="RadGrid1_PopUpShowing" /> works as expected in posted example is not a solution. We need to move beyond the mindset that if it works in a sample that the problem does not exist. Who on the Telerik technical team can provide support to resolve the issue? To me it is obvious that we are dealing with an unusual annominally and have to move beyond suggestions to try the sample code.

Keith

[Vlad]

Hello Keith,

As I said in one of my previous replies you cannot assign function call to a client-side event in the grid. You need to assign function name.

I'm still not sure why you are trying to assign function call instead function name? As you can see in my example the handler is executed as expected.

Please clarify.

Kind regards,
Vlad
the Telerik team

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

[Keith]

Vlad,

I have stated over and over again the every example of using a function name DOES NOT WORK  in our implementation.. The only reason I tried using a function call was a long shot try, since the function name DID NOT WORK.

<ClientSettings ClientEvents-OnPopUpShowing="PopUpShowing" /> DOES NOT WORK in our implementation.

 <ClientEvents OnPopUpShowing ="PopUpShowing" /> DOES NOT WORK in our implementation.

<telerik:RadGrid ID="AnswerGrid1"  AllowFilteringByColumn="false"
            Skin="Custom" EnableEmbeddedSkins="false" AllowSorting="false"
            AutoGenerateColumns="false" AllowPaging="false" GridLines="None" runat="server"
            ShowFooter="false" ShowHeader="false" AllowMultiRowSelection="false" HorizontalAlign="NotSet"
               OnDeleteCommand="AnswerGrid1_DeleteCommand"
               OnInsertCommand="AnswerGrid1_InsertCommand"
                OnUpdateCommand="AnswerGrid1_UpdateCommand"
                OnRowDrop="AnswerGrid1_RowDrop"
                OnItemDataBound="AnswerGrid1_ItemDataBound"  ClientSettings-ClientEvents-OnPopUpShowing="PopUpShowing"> DOES NOT WORK in our implementation.

I know it doesn't make any sense, but the code samples provided DO NOT WORK in our implementation.

Keith

[Vlad]

Hello Keith,

Please send us small project via support ticket where we can reproduce this wrong behavior.

Best wishes,
Vlad
the Telerik team

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

[cory]

Was this thread ever resolved? We are unfortunately experiencing the exact issue, but with the OnDataBound event of the RadGrid.

If we use the function call itself - ex. OnDataBound="applyTips()" - it works great.  It runs the function OnDataBound; however, it generates the same script error referenced above and BREAKS other random things, like Column Resizing.

If we use the function name - ex. OnDataBound="applyTips" - it never fires the javascript, but doesn't generate the JS error and Column Resizing works as expected.

I'm completely perplexed by this.  

[Mira]

Hello Cory,

As my colleague Vlad stated, you should assign function name to a client-side event in the grid.
Please examine the ClientEvents class members help topic for additional information.

I hope this helps.

Best wishes,
Mira
the Telerik team

[cory]

Hi Mira - 

I understand the documentation - have read it numerous times on this topic.  In practice, however, using the function name does NOT work. It will work if you use the function itself with trailing parens, but then it generates javascript errors and makes other features degrade.

I downloaded one of Telerik's own samples (106164_RadGrid), and added in OnDataBound and OnRowDataBound clientevents.  Each is done differently so you can see the WRONG way works partially (with JS errors and degradation) and the RIGHT way does not work at all (never fires the javascript event). Hopefully this will illustrate what we're saying and you can see the issue for yourself.  We only modified the Default2.aspx page, everything else stays the same.  

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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 runat="server" ID="ScriptManager1">
        </asp:ScriptManager>
    <div>
        <telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="false"
            OnNeedDataSource="NeedSource">
            <MasterTableView EditMode="PopUp">
                <Columns>
                    <telerik:GridBoundColumn DataField="ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Text">
                    </telerik:GridBoundColumn>
                    <telerik:GridEditCommandColumn>
                    </telerik:GridEditCommandColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnPopUpShowing="PopUpShowing" OnDataBound="TestIt" OnRowDataBound="TestItBadWay()" />
            </ClientSettings>
        </telerik:RadGrid>

        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                function PopUpShowing(sender, args)
                {
                    var popUp = args.get_popUp();
                    alert("Popup showing");
                }

                function TestIt(sender, args) {
                    alert("data bound the RIGHT way");
                }

                function TestItBadWay(sender, args) {
                    alert("works the WRONG way - with many JS Errors");
                }

            </script>
        </telerik:RadCodeBlock>
    </div>
    </form>
</body>
</html>

Hopefully I'm doing something wrong and it's an easy fix.  

Thanks in advance for your assistance.
Cory

[Mira]

Hello Cory,

The OnDataBound event is raised right after the grid is bound to data client-side and is meaningful with client-side data-binding only.

Here is the correct way for attaching the OnRowDataBound event:

<ClientEvents OnPopUpShowing="PopUpShowing" OnRowDataBound="TestItBadWay" />

I hope this helps.

Kind regards,
Mira
the Telerik team

[cory]

Hi Mira - 

That definitely helps, but the javascript event still does not fire in this manner.  The only way to get the alert to show up is to do the following:

<ClientEvents OnPopUpShowing="PopUpShowing" OnRowDataBound="TestItBadWay()" />

This obviously isn't a solution since it creates the JS Errors and degradation.  Am I missing something?

Thank you.
Cory

[Mira]

Hello Cory,

The OnRowDataBound event as well as the OnDataBound is meaningful with client-side data-binding only.
The correct way for attaching the handler is demonstrated in my previous message.

I hope this helps.

Kind regards,
Mira
the Telerik team

[cory]

Hi Mira - 

I think I'm following, but not certain.  Let me state the goal and see what our options are:

We have a RadGrid.  It is bound with mySQL data.  We'd like to fire a javascript event each time the data is bound, mostly to handle paging events.  Paging is all done via the built-in Ajax handler.  

Is this possible?  As we've discussed & demonstrated, using the function name on the OnDataBound clientevent does not work (the javascript never fires).

Thanks!
Cory

[Mira]

Hello Cory,

In order to implement the desired functionality with a RadGrid bound server-side, I recommend that you use the ItemDataBound and DataBound server-side events of the control.

I hope this helps.

All the best,
Mira
the Telerik team

[cory]

Hi Mira - 

Is there a way to fire a client-side javascript event when the paging is done via AJAX?

Thanks.
Cory

[Mira]

Hello Cory,

You can use the OnCommand client-side event. When paging, the command name is 'Page'.

I hope this helps.

All the best,
Mira
the Telerik team

[cory]

Hi Mira - 

OnCommand seems to work only if I want to run the javascript BEFORE the grid is re-bound.  Unfortunately that's not what I needed; however, I did find that OnRowCreated works in my case.  This does fire the javascript more often than I'd like, but it seems to work ok as a patch.

Cory