Grip handle/ drag-and-drop not functional after AjaxPanel request

5 posts, 0 answers
  1. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 02 Feb 2010 Link to this post

    Hi,

    I have a case where I dynamically create Docks in UserControl and then load the control into a page, which is a content page of a Master page. Attached is a screen-shot of the page (excluding the master parts). The selected RadPageView has a RadAjaxPanel that wraps all its content. After each + sign, I load a UserControl that contains one RadDockLayout,  one RadDockZone, and dynamic number of RadDocks. The docks are drag-and-drop enabled within their zone, using a grip as dock handle. The page works great when first loaded.

    The problem comes when I update the content using RadAjaxPanel.ajaxRequest. On server-side I call the same function that generates the UserControls. Everything looks fine and the content is updated, except that the grip and drag-and-drop do not function at all (mouse over the grip does not even change the cursor to dragging mode). I tried RaisePostBackEvent and radAjaxPanel_AjaxRequest (separetaly) methods on server-side and both produce the same issue. I guess a specific script and css is missing.

    Any help would be appreciated.

    thanks.
    eyal




    Note: The js methods ajaxRequest and ajaxRequestWithTarget are erroneously typed in the documentation for RadAjaxPanel with a capital A.


  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Feb 2010 Link to this post

    Hi Eyal,

    I tried to reproduce the problem by creating a sample project (attached) that implements a similar scenario, but with no success. The docks can be moved after performing ajax call with the axajPanel.ajaxRequest() client method.

    Could you please provide a fully working sample that demonstrates the issue? Once we have a closer look over the problem we can provide a working solution.


    PS: Please note that the docks must be recreated in the Page_Init event or it is possible that they might be placed in the wrong zone and index.


    Greetings,
    Pero
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 05 Feb 2010 Link to this post

    Thank you Pero for your answer.

    My situation is a bit more complicated.
    1. UserControls should be loaded only on specific tab click (PageViews are loaded on-demand when tab is clicked).
    2. UserControls are rendered on random places, based on a loaded template (with specific markup that define the UserControls location). The template also provides specific parameters for the UserControl.
    3. I use RenderControl to replace the specific template markup with the UserControl.

    As I wrote before, everything works fine when calling the UserControl generation procedure from Page_Load. When I call it through an Ajax PostBack / request, the grip and drag-and-drop do not function (docks and docks' content are loaded but without this functionality).

    Thanks for any help.
    br,
    eyal
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 Feb 2010 Link to this post

    Hi Eyal,


    Indeed I reproduced the problem and it's seems to be caused by the fact that on AJAX postback the client scripts rendered by the dock are not evaluated and practically you can't use RadDock's client-side functionality (i.e. the dock cannot be dragged, its commands will not execute). The main reason why the scripts are not evaluated is the fact that you are not adding the user control to the MultiPageView (i.e. radPageViewEdit.Controls.Add( LoadUserControl(path) )), but you are setting the HTML output from the UserControl to the Text property of a Label and adding the Label to the PageView control. This would not happen on a full postback, because the scripts will be evaluated. To demonstrate this I am appending a simple script to the end of the Label's Text property:
    Dim lbl As New Label
    lbl.Text = html + "<script type='text/javascript'>alert('On full postback the scripts are evaluated!');</script>"
    radPageViewEdit.Controls.Add(lbl)

    On AJAX calls the text would not be alerted and on full postbacks it will. Please replace the ShowEdit() subroutine with the following modified version to observe the behavior:
    Private Sub ShowEdit()
        Dim html As String = ""
        Dim sr As StreamReader
        Try
     
            sr = New StreamReader(HttpContext.Current.Server.MapPath("\") & Path.DirectorySeparatorChar & "test.htm")
            html = sr.ReadToEnd
     
            Dim strContent As String = ""
            Dim objControl As UserControl
            objControl = LoadControl("UserControl.ascx")
            objControl.PlaceNumber = 2
            objControl.Bind_Content()
     
            Dim sb As New StringBuilder
            Dim sw As New StringWriter(sb)
            Dim htw As New HtmlTextWriter(sw)
            objControl.RenderControl(htw)
            strContent = sb.ToString
     
            html = html.Replace("<!--##paikka1##-->", "<h3>Page title</h3>")
            html = html.Replace("<!--##paikka2##-->", strContent)
            html = html.Replace("<!--##paikka3##-->", "<a href=""#"">Test link</a>")
     
        Catch ex As Exception
            html = "error"
        Finally
            If Not sr Is Nothing Then sr.Close()
        End Try
     
        Dim lbl As New Label
        lbl.Text = html + "<script type='text/javascript'>alert('On full postback the scripts are evaluated!');</script>"
        radPageViewEdit.Controls.Add(lbl)
     
    End Sub


    Now, to avoid the problem you have two options:

    • Add the UserControl containing the docks in the standard way - radPageViewEdit.Controls.Add( LoadUserControl(path) )
    • Evaluate the client scripts manually with the $telerik.evalScripts(parentDomElement) client method, rendered within a given element. You can register this method from the server in the following way:
      'Register a client-scirpt to evaluate the scripts rendered within the radPageViewEdit
      ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "EvalScripts", String.Format("function _evalScripts() {{" & vbCr & vbLf & vbTab & vbTab & vbTab & "        " & vbTab & "Sys.Application.remove_load(_evalScripts);" & vbCr & vbLf & vbTab & vbTab & vbTab & vbTab & "        $telerik.evalScripts($get('{0}'));" & vbCr & vbLf & vbTab & vbTab & vbTab & "            }};" & vbCr & vbLf & vbTab & vbTab & vbTab & "Sys.Application.add_load(_evalScripts);", radPageViewEdit.ClientID), True)
      For your convenience I have attached the modified project.



    Regards,
    Pero
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  6. eyal
    eyal avatar
    54 posts
    Member since:
    Sep 2009

    Posted 10 Feb 2010 Link to this post

    Thanks a bunch, Pero!

    I suspected that the client scripts are missing, and indeed I have to choose the second option of manually evaluating the client scripts. The first option of loading the UserControl in a standard way is not viable in our specific case.

    Great! many thanks!

    eyal
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017