Problems with RadAjaxManager and jquery mobile

6 posts, 0 answers
  1. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 14 Nov 2013 Link to this post

    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


  2. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 14 Nov 2013 Link to this post

    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(...
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 15 Nov 2013 Link to this post

    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.
  5. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 18 Nov 2013 Link to this post

    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.
  6. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 22 Nov 2013 Link to this post

    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?
  7. Luka
    Luka avatar
    13 posts
    Member since:
    Oct 2013

    Posted 22 Nov 2013 Link to this post

    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!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017