args.set_cancel(true) Object doesn't support this property or method

[bad nick]

Hi. I am using IE8 and I get the above JavaScript error in a couple of Telerik Client Side Event handlers. I don't understand why?!

First example, in RadTreeView control:

<telerik:RadTreeView ID="treeView" runat="server" Skin="Vista" OnClientContextMenuItemClicked="onClientContextMenuItemClicking">
    <ContextMenus>
        <telerik:RadTreeViewContextMenu ID="FolderContextMenu" runat="server" Skin="Vista">
            <Items>
                <telerik:RadMenuItem Value="FolderDelete" Text="Delete Folder" PostBack="true"></telerik:RadMenuItem>
            </Items>
        </telerik:RadTreeViewContextMenu>
    </ContextMenus>
</telerik:RadTreeView>

Event handler

        function onClientContextMenuItemClicking(sender, args) {
            var menuItem = args.get_menuItem();
            var treeNode = args.get_node();
            menuItem.get_menu().hide();

            switch (menuItem.get_value()) {
                case "FolderDelete":
                    args.set_cancel(true);
                    break;
            }
        }

...would throw and error in the line where it says: "args.set_cancel(true);"


Same I get in your example of function ShowPopupAbove(sender, eventArgs) - eventArgs.set_cancel(true); just don't work for me!!!




Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.30618; .NET CLR 3.5.21022; .NET CLR 3.5.30729; InfoPath.2)
Timestamp: Tue, 18 Aug 2009 16:00:09 UTC

Message: Object doesn't support this property or method
Line: 183
Char: 21
Code: 0

[Genady Sergeev]

Hi bad nick,

You have hooked on the ItemClicked event,not on the ItemClicking and hence the error. Snippet of your code:

OnClientContextMenuItemClicked="onClientContextMenuItemClicking"

OnClientContextMenuItemClicked should be changed to OnClientContextMenuItemClicking

Greetings,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[bad nick]

Gena, thanks for your reply.
Well spotted, it is indeed my bad and it's now fixed.

However, here's the second example where I get the same javascript error:
I know, you've finally implemented the PopupDirection property for DatePickers, however, we're not updating telerik dll because of some breaking changes this would result in. Hence, I am trying to use a custom ShowPopupAbove event to display the calendar above my DatePicker:

JavaScript:

    function ShowPopupAbove(sender, eventArgs) {
        var picker = $find("<%= RangeEndDate.ClientID %>");
        var textBox = picker.get_textBox();
        var popupElement = picker.get_popupContainer();
        var dimensions = picker.getElementDimensions(popupElement);
        var position = picker.getElementPosition(textBox);
        picker.showPopup(position.x, position.y - dimensions.height - 20);
        eventArgs.set_cancel(true);
    }

aspx:

<telerik:RadDatePicker runat="server" ID="RangeEndDate" CssClass="rsAdvDatePicker" Width="83px">
    <DateInput runat="server" ClientEvents-OnFocus="ShowPopupAbove">
    </DateInput>
    <DatePopupButton Visible="False" />
</telerik:RadDatePicker>

As you can see, I don't use a button to call the calendar and I want to display it above the DatePicker's textbox when the cursor's in it (i.e. on focus). This works for me, however, I get the "method not supported JavaScript error" because, I guess, the ClientEvents-OnFocus arguments don't have the .set_cancel method.

Is there a workaround? I can't leave it with JavaScript error in even tho this works.

If I remove this line "eventArgs.set_cancel(true);" - pop-up would be shown below, not above how I want it to. =((

I would apreciate if you helped. Or maybe you have a working example of DatePicker without a button showing pop-up above using Q1 2009 release?

Cheers

[Genady Sergeev]

Hello bad nick,

We have similar functionality shown in one of our online demos (without using the PopupDirection property). You can check it up here. Also this forum thread can serve as a reference.

Kind regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[bad nick]

Genady, none of those examples work for me.
The one on demo site uses the popup position property introduced in Q2 (and we're using Q1), the others - use the pop-up button to call a calendar, while I don't.

In fact, I am using a Scheduler Advanced Insert/Edit form based on Scheduler Demo where in Q1 version, the "End by" datePicker had its calendar pop out below - I need to make it pop-Up above.

Basically, what I want is - a datepicker without a button with a pop-Up above the textbox on focus client event
Is this possible using Telerik Q1 or not?

Edit: I was looking into Q2 demo of Scheduler's Advanced Edit Form and noticed the pop-up for "End by" date pickers pops up above automatically if there's not enough space for it below - that is awesome, however, the Q1 version won't do that and we're not upgrading because of the breaking changes you've introduced.

Please suggest a workaround.

[Simon]

Hello bad nick,

Yes, this is possible with Q1 in the way you have already tried. Still I am not sure why at your side, the popup opens below the textbox even when the ShowPopupAbove function executes.

I prepared a sample project, where the approach works with Q1, and attached it to this message - please download it and test it at your side. What could be different in your implementation?

Greetings,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[bad nick]

Hi Simon.
Thanks for your reply.

I think I know what the problem is. There must be some javascript functions behind the scenes in AdvancedForm.ascx user controls for Advanced Edit Template in Scheduler, which brings the Calendar up and checks the radio button when you click in rsTimePick listiem:

<li class="rsTimePick">
    <asp:RadioButton runat="server" ID="RepeatUntilGivenDate" GroupName="RecurrenceRangeRadioGroup"
        CssClass="rsAdvRadio" />
    <telerik:RadDatePicker runat="server" ID="RangeEndDate" Width="83px"  Culture='<%# Owner.Culture %>'>
        <DateInput ID="DateInput3" runat="server" DateFormat='<%# Owner.EditFormDateFormat %>' ClientEvents-OnFocus="ShowPopupAbove">
        </DateInput>
        <DatePopupButton Visible="false" />
    </telerik:RadDatePicker>
</li>

This is the code from AdvancedForm.ascx and the ShowPopupAbove javascript function would only work if I change the RadPicker's ID. However, this will cause the radio button not getting checked when clicked in DatePicker's input box.

Any suggestions on how this could be solved? I still want this to work as originally, i.e. when radio button clicked, the calendar is shown, and I want it shown above the DatePicker.

Cheers

[Simon]

Hi bad nick,

Yes, there is some script which controls this behavior in AdvancedForm.js. Additionally, an event handler for the focus event of Pickers is attached, which shows their respective popups.

However, these handlers are executed after the one I suggested to you previously. So, in the case of RadScheduler's Advanced Form Template you could modify the custom scripts to show the RangeEndDate's  popup always above.

I attached the modified AdvancedForm.js to this post. Please download it and examine it. Basically, I have defined the _showPopupAbove function SchedulerAdvancedTemplate's prototype and modified the initializePicker function as shown below:

_initializePickers: function()
{
    // Show picker pop-ups when the inputs are focused
    var showPopupDelegate = Function.createDelegate(this, this._showPopup);
    var showPopupAboveDelegate = Function.createDelegate(this, this._showPopupAbove);

    ...

    $.each(
        this._pickers,
        function()
        {
            if (this && this.get_dateInput) {
                if (this.get_dateInput().get_id().indexOf("RangeEndDate") > -1)
                this.get_dateInput().add_focus(showPopupAboveDelegate);
                else
                    this.get_dateInput().add_focus(showPopupDelegate);
            }
        });

    ...
}

I hope this solution is acceptable for you.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[bad nick]

Simon,

thank you very much for your help, this solution worked like charmed! =) Perhaps, I should have figured this up - simply make an "exception" for this date picker and call a different showPopup method, like you did, however, I am not yet up to speed with jQuery, although I'm willing to learn it.

One thing I have to point out tho - I had to change the Y offset from 36 to 18 as the popup was displaying too high up from the picker's textbox. Is this an IE8 thing? Will it look ok in other browsers?

Cheers

[Simon]

Hi bad nick,

You can avoid the usage of such hard-coded values by modifying the script as shown below:

_showPopupAbove: function(sender) {
    var picker = sender.Owner;
    var textBox = picker.get_textBox();
    var popupElement = picker.get_popupContainer();

    picker.showPopup();

    var dimensions = picker.getElementDimensions(popupElement);
    var position = picker.getElementPosition(textBox);

    var top = position.y - dimensions.height;
    top -= $telerik.isFirefox ? 1 : 0;

    popupElement.parentNode.style.top = top + "px";
}

 

This is required because the Popup resizes itself shortly after it is shown and the previous version of the script did not take this into account. Please excuse me for not providing this version in the first place.

Best wishes,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[bad nick]

Simon , this solution is excellent!
Thanks for your good work!
Спасибо! =)

Cheers,
Ruslan

[bad nick]

Simon,

I wonder if you're aware of this animation bug in scheduler's advanced edit template: when "Recurring task" checkbox is unchecked, the animation makes the labels from the bottom panel overlap with the one on top like this: screenshot
I think the problem occurs in this javascript function:

recurrentAppointment
    .click(function() {
        recurrencePanel.stop(false, true).animate({ height: "toggle" }, "slow");
    });
},

..but i can't fix it myself. I'd like to keep the animation in but if removing animation is my only option here, than I'd do that.

EDIT: I understand that the issue above is caused by the jQuery function "animate" and the solution is to set a Height value to the RecurrentAppointment panel control in AdvancedEditForm.ascx



hope this helps anyone

[Simon]

Hello bad nick,

I was unable to reproduce this issue in the online demo.

Perhaps you have a different Advanced Template, which exhibits this behavior. If this is the case, you may want to open a formal support ticket and send us your Template there (preferably in a working page/project). We will examine it and will do our best provide a fix without removing the animation.

Kind regards,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ramanathan]

Thank you very much telerik team. this link was useful for me
i was struggling with this issue for a day