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

[eyal]

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.

[Pero]

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.

[eyal]

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

[Pero]

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.

[eyal]

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