This is a migrated thread and some comments may be shown as answers.

Problems with RadAjaxManager and jquery mobile

5 Answers 67 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Luka
Top achievements
Rank 1
Luka asked on 14 Nov 2013, 06:59 AM
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


5 Answers, 1 is accepted

Sort by
0
Luka
Top achievements
Rank 1
answered on 14 Nov 2013, 11:08 AM
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(...
0
Luka
Top achievements
Rank 1
answered on 15 Nov 2013, 02:04 PM
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.
0
Vasil
Telerik team
answered on 18 Nov 2013, 11:07 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Luka
Top achievements
Rank 1
answered on 22 Nov 2013, 09:41 AM
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?
0
Luka
Top achievements
Rank 1
answered on 22 Nov 2013, 10:59 AM
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!
Tags
Ajax
Asked by
Luka
Top achievements
Rank 1
Answers by
Luka
Top achievements
Rank 1
Vasil
Telerik team
Share this question
or