Problems with RadAjaxManager and jquery mobile

[Luka]

Hi! I'm working on a project using radgrid, radajaxmanager, radcontextmenu and I've encountered a problem which i cant seem to figure out. The app is ment for tablets so I'm using jquery mobile's taphold event. On taphold i'm showing a radcontextmenu. On taphold I simulate a click on the row (i have a mouse tracking event that sends coordinates of the row I want clicked) so i can take the index number of the row and write it to a hidden field which I use in codebehind to open a radwindow with html query data(based on the data in the row). 

The problem is that if I have radajaxmanager enabled that functionality works only the first time. On the second time I get a javascript error that the object is null. I tried alot of things, so in the end I disabled radajaxmanager and found out that everything works out if it's disabled. But ofcourse I like your ajaxmanager so I'd like to use it. So i'm coming to you, the guys that know radajaxmanager best.

And now lets look at the code:

This is my hidden field and my radgrid markup.

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />
            <telerik:RadGrid ID="RadGrid_PregledPovprasevanj" runat="server" AllowSorting="True"
                AllowPaging="True" PageSize="16" ShowStatusBar="True" AllowFilteringByColumn='<%# If(IsNothing(Session("filterGumb")), "false", Session("filterGumb"))%>'
                GridLines="None" Height="100%" OnPreRender="RadGrid_PregledPovprasevanj_PreRender" GroupingEnabled="false">
                <ExportSettings FileName="Izvoz_Povprasevanja">
                    <Pdf PageTitle="Povprasevanja" PageWidth="" />
                </ExportSettings>
                <MasterTableView DataKeyNames="IDPovprasevanja"
                    AllowMultiColumnSorting="true" HierarchyLoadMode="Client" ExpandCollapseColumn-Visible="false">

This is my radajaxmanager

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" OnAjaxRequest="RadAjaxManager1_AjaxRequest" EnableAJAX="false">

<telerik:AjaxSetting AjaxControlID="RadGrid_PregledPovprasevanj">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid_PregledPovprasevanj" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadMenu1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid_PregledPovprasevanj"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadWindowManager_DataBrowsers"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="rw_kontakti"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>

These are the client settings for radgrid

<ClientSettings AllowDragToGroup="true" AllowColumnsReorder="True" ReorderColumnsOnClient="True"
                    ColumnsReorderMethod="Reorder">
                    <Scrolling />
                    <ClientEvents OnRowClick="RowContextMenu" />
                    <Selecting AllowRowSelect="true" />
                    <Resizing />
                </ClientSettings>

This is the javascript line that becomes null after only one use if radajaxmanager is on

var index = eventArgs.get_itemIndexHierarchical();

This is the javascript code that handles the taphold and ajaxstart-end

$(document).mousemove(function (e) {
                window.x = e.pageX;
                window.y = e.pageY;
                //console.log(window.x);
            });

            $(window).load(function () {

            });
            $(document).ready(function () {
                var menu = $find("<%=RadMenu1.ClientID %>")
                $(function () {
                    $("tr.rgRow").bind("taphold", tapholdHandler);
                    $("tr.rgAltRow").bind("taphold", tapholdHandler);

                    function tapholdHandler(e) {
                        $(document.elementFromPoint(x, y)).click();
                        menu.showAt(x, y)
                    }
                });
            });
            $(window).resize(function () {
            });

            function RowContextMenu(sender, eventArgs) {
                var evt = eventArgs.get_domEvent();

                if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                    return;
                }

                var index = eventArgs.get_itemIndexHierarchical(); // THIS IS WHAT IS NULL AFTER THE FIRST TIME
                document.getElementById("radGridClickedRowIndex").value = index;
            }

            var AjaxIsActive = false;
            function RequestStart(sender, args) {
                if (!AjaxIsActive) {
                    AjaxIsActive = true;
                }
                else {
                    alert((typeof ActiveAJAXMessage === 'undefined') ? 'Wait for ajax to finish' : ActiveAJAXMessage); return false;
                }
                document.body.style.cursor = "wait";
                //*************************************************************************
                if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToPdfButton") >= 0 ||
                    args.get_eventTarget().indexOf("ExportToCsvButton") >= 0) {
                    args.set_enableAjax(false);
                    ResponseEnd();
                }
                if (args.get_eventTarget().indexOf("btn_Dok_PrikaziDok") >= 0) {
                    args.set_enableAjax(false);
                    ResponseEnd();
                }
            }
            function ResponseEnd(sender, args) {
                AjaxIsActive = false;
                document.body.style.cursor = "default";
            }

EDIT: Forgot to add my RadAjaxManager onAjaxRequest:

Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
       If e.Argument = "Rebind" Then
           RadGrid_PregledPovprasevanj.MasterTableView.SortExpressions.Clear()
           RadGrid_PregledPovprasevanj.MasterTableView.GroupByExpressions.Clear()
           RadGrid_PregledPovprasevanj.Rebind()
       ElseIf e.Argument = "RebindAndNavigate" Then
           RadGrid_PregledPovprasevanj.MasterTableView.SortExpressions.Clear()
           RadGrid_PregledPovprasevanj.MasterTableView.GroupByExpressions.Clear()
           RadGrid_PregledPovprasevanj.MasterTableView.CurrentPageIndex = RadGrid_PregledPovprasevanj.MasterTableView.PageCount - 1
           RadGrid_PregledPovprasevanj.Rebind()
       End If
   End Sub

[Luka]

I just looked trough firebug again and the second time i'm trying to get the menu i get: "this._getContextMenuElement(...) is null" as the only error on the list. If I disable radajaxmanager it all works fine.

Full firebug report:

Empty string passed to getElementById().
_detach()Script...58b77c2 (line 199)
_showAt()Script...58b77c2 (line 314)
d = 492
f = 370
c = null
showAt()Script...58b77c2 (line 368)
c = 492
e = 370
(?)()povpra...je.aspx (line 510)
e = Object { type="taphold", target=td, timeStamp=1384433178833, more...}
hasData()Script...vp2R4U1 (line 16)
e = Object { type="taphold", target=td, timeStamp=1384433178833, more...}
setup()Script...vp2R4U1 (line 21)
t = tr#ctl00_mainContainer_RadGrid_PregledPovprasevanj_ctl00__3.rgAltRow
n = "taphold"
r = Object { type="taphold", target=td, timeStamp=1384433178833, more...}
setup()Script...vp2R4U1 (line 21)


...his._getContextMenuElement().parentNode.removeChild(this._getContextMenuElement(...

[Luka]

Any ideas guys? It's unfortunate I dont yet have access to the company telerik account so i could send a support ticket. My project is due monday and ofcourse i'm gonna be working the weekend, if any of you got an idea whats going on i'd appriciate the help.

[Vasil]

Hello Luka,

Seems that part of the scripts is not executed, but I could not say why exactly without runnable page that I could test.

Here are some general suggestions that could help:

• Place your code inside RadScriptBlock.
• Avoid using  "_" (underscore) in the ID-s of your controls, since client-side the ID is split by "_" or "__" when working with the controls.
• Use "<%=radGridClickedRowIndex.ClientID %>" when you get this label, don't hardcore the ID.

I hope this helps.

Regards,
Vasil
Telerik

[Luka]

Hi! Thank you for your time but the things you recommended didn't fix the problem. In my code i'm also using a dropdown menu that has autopostback turned on (it's in radajaxmanager so it's ajaxified). It sets a session variable that i use to filter what table data to show in radgrid  and then in NeedDataSource event I just check whats the value of the session variable.
When I use the menu once it works, then when i use it again ofcourse as i previously stated it doesnt work, but interestingly when i use the dropdown (even if I select the already selected option) the thing resets and it works again for one time. Do you have any idea how that could be related?

[Luka]

Nevermind guys it was a stupid javascript deal that I don't know how it happened. Instead of using 

$(document).ready(function () {
                var menu = $find("<%=RadMenu1.ClientID %>")
                $(function () {
                    $("tr.rgRow").bind("taphold", tapholdHandler);
                    $("tr.rgAltRow").bind("taphold", tapholdHandler);

                    function tapholdHandler(e) {
                        $(document.elementFromPoint(x, y)).click();
                        menu.showAt(x, y)
                    }
                });
            });

and making a new variable that has menu id every time i just had to do this

$(document).ready(function () {
                $(function () {
                    $("tr.rgRow").bind("taphold", tapholdHandler);
                    $("tr.rgAltRow").bind("taphold", tapholdHandler);

                    function tapholdHandler(e) {
                        $(document.elementFromPoint(x, y)).click();
                        $find("<%=RadMenu1.ClientID %>").showAt(x, y)
                    }
                });
            });

so i guess it wasn't a telerik problem, thanks again for the help!

if anyone knows what happened here i'd be glad to know!