[Solved] Drag Drop inside a UserControl

[Ben]

I've got a RadGrid which uses a User Control to edit its records. Inside the User Control are two other RadGrids and the user drags items from one to the other and then hits the Update button. This is working fine, and I'm really pleased with it, but there is one problem. I want to implement a Javascript onRowDropping handler as in your DragDrop demo so as to cancel the event if necessary. Putting the handler script on the Web page itself is no good because the page cannot resolve expressions like:

if (sender.get_id() == '<%=TitleAvailable.ClientID %>')

because the ClientID of the TitleAvailable RadGrid is only known by the UserControl and only after the user has clicked the Edit button to Load the UserControl. Also putting the handler script on the User Control page with the rest of the html markup doesn't work: I get a JScript error saying "'[onRowDropping function name]' is undefined". So I tried emitting the Javascript dynamically from within the Page Load event of the User Control, like so:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim scriptKey As String = "DragDropScript"
        If Not Page.ClientScript.IsClientScriptBlockRegistered(scriptKey) Then
            Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), scriptKey, GetDragDropScripts(), True)
        End If
        TitleAvailable.ClientSettings.ClientEvents.OnRowDropping = "onListTitleRowDropping"
    End Sub

    Private Function GetDragDropScripts() As String
        Dim sb As New StringBuilder()
        sb.AppendLine("function onListTitleRowDropping(sender, args) {")
        sb.AppendLine("}")
        Return sb.ToString()
    End Function

But if I do that, then right after the UserControl Page_Load event has completed, I again get a JScript error message " 'onListTitleRowDropping' is undefined" from this function of yours:

    function Sys$_Application$add_init(handler) {
        /// <summary locid="E:J#Sys._Application.init" />
        var e = Function._validateParams(arguments, [{name: "handler", type: Function}]);
        if (e) throw e;
        if (this._initialized) {
            handler(this, Sys.EventArgs.Empty);
        }
        else {
            this.get_events().addHandler("init", handler);
        }
    }

Any ideas how to solve this?

[Veli]

Hi Ben,

Could you please try registering for the client-side script of the inner RadGrid when the edit/insert item is created. You would do this in the ItemDataBound event handler of the parent RadGrid in the followig way:

void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditFormItem)
        {
            GridEditFormItem item = (GridEditFormItem)e.Item;
            (item.FindControl("RadGridChild1") as RadGrid).ClientSettings.ClientEvents.OnRowDropping = "onListTitleRowDropping";
        }
    }

The above example assigns the client-side onListTitleRowDropping event handler to the child RadGrid's event exactly when the latter is initialized, i.e when the GridEditFormItem containing the custom user control has been created.

Sincerely yours,
Veli
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Ben]

Hi Veli,

Thanks for this idea. When I tried it, the FindControl in the code you suggested returned Nothing, i.e the GridEditFormItem couldn't find the child RadGrid inside the user control when the ItemDataBound event fired on the parent.

But I've decided to go for a simple workaround which is sufficient in my case which is to hard-code the onRowDropping handler on the webpage itself but replace code like

if

(sender.get_id() == '<%=ListAvailable.ClientID %>')

by

if

(sender.get_id().indexOf('ListAvailable') > -1)

Provided you're careful about how you name your child grids, this works fine.