[CLOSED] Calling DirectMethod from drag drop

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Calling DirectMethod from drag drop

    I'm having trouble calling a DirectMethod from a javascript function which is the handler for a "drop" in DragNDrop scenario between two grids. If I simply put an alert() in the javascript function notifyDrop (in place of the ext.net.directMethods code) everything works and the alert can show me what is being dropped where. With the DirectMethod call the drag and drop ceases to work and my directmethod is not executed.

    JavaScript:
    
           var notifyDrop1 = function (ddSource, e, data) {
                Ext.each(ddSource.dragData.selections, function (record) {
                    var mapto = data.selections[0].data.Description;
                    var rownum= <%= grdCurrentMap.ClientID %>.getView().findRowIndex(e.getTarget());
                    var mapfrom = <%= grdCurrentMap.ClientID %>.store.data.items[rownum].data.Description;
    
                    \\alert('test'); this works
    
                    Ext.net.DirectMethods.MapIt(mapfrom, mapto, {
                        success: function (result) { 
                            Ext.Msg.alert('Message', result); 
                        },
                        eventMask: {
                            showMask: true,
                            minDelay: 500
                        }
                    });
                });
                return true;
            };
    MarkUp:
            <ext:DropTarget ID="DropTarget1" runat="server" Target="={#{grdCurrentMap}.view.scroller.dom}" Group="GlobalAssetDD">
                <NotifyDrop Fn="notifyDrop1" />
            </ext:DropTarget>
    Code Behind:
        <DirectMethod>
        Public Sub MapIt(ByVal MapFrom As String, ByVal MapTo As String)
            ' do something here in code behind
        End Sub
    Last edited by Daniil; Mar 25, 2013 at 3:31 PM. Reason: [CLOSED]
  2. #2
    Hello!

    Couldn't reproduce your problem. Can you provide more details or simplified example of this problem. I've tried the following:

    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
     <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<object> data = new List<object>();
    
                for (int i = 0; i < 10; i++)
                {
                    data.Add(new
                    {
                        Name = "Rec " + i,
                        Column1 = i.ToString(),
                        Column2 = i.ToString()
                    });
                }
    
                this.Store1.DataSource = data;
                this.Store1.DataBind();
            }
        }
        
        [DirectMethod]
        public void MapIt(string mapFrom, string mapTo)
        {
            Console.Write("Asdf");
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Examples</title>
        
        <script type="text/javascript">
            // Generic function to add records.
    		var addRow = function (store, record, ddSource) {
    			// Search for duplicates
    			var foundItem = store.findExact('Name', record.data.Name);
    			
    			// if not found
    			if (foundItem  == -1) {
    				//Remove Record from the source
    				ddSource.grid.store.remove(record);
    				
    				store.add(record);
    
    				// Call a sort dynamically
    				store.sort('Name', 'ASC');				
    			}
    		};
    		
    		var notifyDrop2 = function (ddSource, e, data) {
    			// Loop through the selections
    			Ext.each(ddSource.dragData.selections, function (record) {
    			    addRow(Store2, record, ddSource);
    			    
                    var mapto = "mapTo",
    			        mapfrom = "mapFrom";
    			    
                    Ext.net.DirectMethods.MapIt(mapfrom, mapto, {
                        success: function (result) {
                            Ext.Msg.alert('Message', result);
                        },
                        eventMask: {
                            showMask: true,
                            minDelay: 500
                        }
                    });
    			});
    			
    			return true;
    		};
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Column1" />
                            <ext:RecordField Name="Column2" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Store ID="Store2" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Column1" />
                            <ext:RecordField Name="Column2" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:Panel runat="server" Width="650" Height="300">
                <Items>
                    <ext:BorderLayout runat="server">
                        <West MarginsSummary="5 5 5 5">
                            <ext:GridPanel 
                                ID="GridPanel1" 
                                runat="server" 
                                DDGroup="secondGridDDGroup"
                                StoreID="Store1"
                                EnableDragDrop="true"
                                StripeRows="true"
                                AutoExpandColumn="Name"
                                Width="325"
                                Title="Left">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ColumnID="Name" Header="Record Name" Width="160" DataIndex="Name" />
                                        <ext:Column Header="Column 1" Width="60" DataIndex="Column1" />
                                        <ext:Column Header="Column 2" Width="60" DataIndex="Column2" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel runat="server" />
                                </SelectionModel>
                            </ext:GridPanel>
                        </West>
                        
                        <Center MarginsSummary="5 5 5 0">
                            <ext:GridPanel 
                                ID="GridPanel2" 
                                runat="server" 
                                DDGroup="firstGridDDGroup"
                                StoreID="Store2"
                                EnableDragDrop="true"
                                StripeRows="true"
                                AutoExpandColumn="Name"
                                Width="325"
                                Title="Right">
                                <ColumnModel>
                                    <Columns>
                                        <ext:Column ColumnID="Name" Header="Record Name" Width="160" DataIndex="Name" />
                                        <ext:Column Header="Column 1" Width="60" DataIndex="Column1" />
                                        <ext:Column Header="Column 2" Width="60" DataIndex="Column2" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel runat="server" />
                                </SelectionModel>
                            </ext:GridPanel>
                        </Center>
                    </ext:BorderLayout>
                </Items>
                
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />
                            <ext:Button runat="server" Text="Reset">
                                <Listeners>
                                    <Click Handler="Store1.loadData(Store1.proxy.data); Store2.removeAll();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Panel> 
    
            <ext:DropTarget runat="server" Target="={GridPanel2.view.scroller.dom}" Group="secondGridDDGroup">
                <NotifyDrop Fn="notifyDrop2" />
            </ext:DropTarget> 
        </form>    
    </body>
    </html>
  3. #3

    New full sample

    Sorry it took so long to create an example, there was a lot to strip out of the production system. Best I can tell the DirectMethod is still not getting called.

    Container aspx page:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm2.aspx.vb" Inherits="Adhesion.Web.WebForm2" %>
    <%@ Register TagPrefix="uc" TagName="ucGlobalAssetMapping" Src="~/GlobalAssetMappingControl.ascx" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form id="form1" runat="server">
        <div>
            <uc:ucGlobalAssetMapping ID="objGlobalAssetMapping" runat="server" />
        
        </div>
        </form>
    </body>
    </html>
    Public Class WebForm2
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
        End Sub
    
    End Class
    Control ascx file:

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="GlobalAssetMappingControl.ascx.vb" Inherits="Adhesion.Web.GlobalAssetMappingControl" %>
        <script type="text/javascript">
    
            var notifyDrop = function (ddSource, e, data) {
                Ext.each(ddSource.dragData.selections, function (record) {
                    var mapto = data.selections[0].data.Description;
                    var rownum= <%= grdCurrentMap.ClientID %>.getView().findRowIndex(e.getTarget());
                    var mapfrom = <%= grdCurrentMap.ClientID %>.store.data.items[rownum].data.Description;
                    alert('notify1');
    
                    Ext.net.DirectMethods.MapIt(mapfrom, mapto, {
                        success: function (result) { 
                            Ext.Msg.alert('Message', result); 
                        },
                        eventMask: {
                            showMask: true,
                            minDelay: 500
                        }
                    });
                });
                return true;
            };
    
           var getDragDropText = function () {
                var buf = [];
                
                buf.push("<ul>");
                
                Ext.each(this.getSelectionModel().getSelections(), function (record) {
                    buf.push("<li>"+record.data.Description+"</li>");
                });
                
                buf.push("</ul>");
                
                return buf.join("");
            };
    
       </script>
    
            <ext:Panel ID="pnlMain" runat="server" Title="Main" Closable="false" Padding="20" >
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:SelectBox ID="FirmSelect" runat="server" ValueField="value" DisplayField="text" FieldLabel="Firm" Width="640" EmptyText="Filter by firm">
                                <Store>
                                    <ext:Store ID="FirmStore" runat="server">
                                        <Reader>
                                            <ext:JsonReader IDProperty="value">
                                                <Fields>
                                                    <ext:RecordField Name="value" Type="Int" />
                                                    <ext:RecordField Name="text" />
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
                                    </ext:Store>
                                </Store>
                            </ext:SelectBox>
                            <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                            <ext:ToolbarSpacer ID="ToolbarSpacer4" runat="server" Width="10" />
                            <ext:ToolbarFill />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
    
                <Items>
                    <ext:GridPanel ID="grdCurrentMap" runat="server" Height="500" Split="true" AutoExpandColumn="SourceDatasetName" EnableDragDrop="true" DDGroup="CurrentMapDD">
                        <Store>
                            <ext:Store ID="StoreCurrentMap" runat="server">
                                <Reader>
                                    <ext:JsonReader>
                                        <Fields>
                                            <ext:RecordField Name="SourceDatasetName" Type="String" />
                                            <ext:RecordField Name="AssetID" type="Int"/>
                                            <ext:RecordField Name="AssetType" Type="String" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel6" runat="server" DefaultSortable="true" >                                        
                            <Columns>
                                <ext:Column Header="Firm" Width="20" DataIndex="SourceDatasetName" Hidden="false" />
                                <ext:Column Header="AssetType" DataIndex="AssetType"></ext:Column>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="ResultPagerClient" PageSize="20" runat="server" HideRefresh="true" />
                        </BottomBar>
                    </ext:GridPanel>
    
                    <ext:Panel ID="panelSelectAsset" runat="server" Height="100" Layout="FitLayout">
                        <Items>
                            <ext:GridPanel ID="grdGlobalAssets" runat="server" Split="true" height="100" enabledragdrop="true" DDGroup="GlobalAssetDD">
                                <Store>
                                    <ext:Store ID="StoreGlobalAssets" runat="server">
                                        <Reader>
                                            <ext:JsonReader>
                                                <Fields>
                                                    <ext:RecordField Name="ID" Type="Int" />
                                                    <ext:RecordField Name="ClassName" type="String"/>
                                                    <ext:RecordField Name="Symbol" type="String" />
                                                    <ext:RecordField Name="Description" Type="String" />
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModel1" runat="server" DefaultSortable="false" >                                        
                                    <Columns>
                                        <ext:Column Header="ID" Width="60" DataIndex="ID" Hidden="true" />
                                        <ext:Column Header="Class" Width="150" DataIndex="ClassName" Hidden="false" />
                                        <ext:Column Header="Symbol" DataIndex="Symbol" Hidden="false" />
                                        <ext:Column Header="Description" DataIndex="Description" Hidden="false" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                </SelectionModel>
                                <GetDragDropText Fn="getDragDropText" />
                            </ext:GridPanel>
                        </Items>
                    </ext:Panel>
                </Items>
    
            </ext:Panel>
    
            <ext:DropTarget ID="DropTarget1" runat="server" Target="={#{grdCurrentMap}.view.scroller.dom}" Group="GlobalAssetDD">
                <NotifyDrop Fn="notifyDrop" />
            </ext:DropTarget>
    code behind
    Public Class GlobalAssetMappingControl
        Inherits System.Web.UI.UserControl
        <DirectMethod>
        Public Sub MapIt(ByVal MapFrom As String, ByVal MapTo As String)
            ' do something here in code behind
            Console.Write("askdlkjslkj")
            Ext.Net.X.Js.AddScript("javascript:var PopUpWin = alert('yo');")
    
            'Ext.Net.X.Js.AddScript(ResultDetails.GetPopupScript(e.SelectedResult.Result))
        End Sub
    
        Private Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            If Not Ext.Net.X.IsAjaxRequest Then
                ' Ext.Net.X.Js.AddScript("javascript:var PopUpWin = alert('loading');")
    
                Dim data As New List(Of Object)()
    
                For i As Integer = 0 To 9
                    data.Add(New With { _
                         .SourceDatasetName = "AEP " & i, _
                         .AssetID = i, _
                         .AssetType = "Equity" _
                    })
                Next
    
                StoreCurrentMap.DataSource = data
                StoreCurrentMap.DataBind()
    
                data = New List(Of Object)()
                data.Add(New With { _
                         .ID = 111, _
                         .ClassName = "LargeCap", _
                         .Symbol = "AAPL", _
                         .Description = "Apple Computer"
                    })
                data.Add(New With { _
                         .ID = 222, _
                         .ClassName = "LargeCap", _
                         .Symbol = "IBM", _
                         .Description = "International Business Machines"
                    })
                data.Add(New With { _
                         .ID = 333, _
                         .ClassName = "LargeCap", _
                         .Symbol = "MSFT", _
                         .Description = "Microsoft"
                    })
    
                StoreGlobalAssets.DataSource = data
                StoreGlobalAssets.DataBind()
    
    
            End If
    
        End Sub
    End Class
  4. #4
    I'm assuming posting reopens the Case?

    Also the alert in the main javascript gets called but not the direct method. Drag item from bottom list to top list.
    Last edited by rmelancon; Mar 22, 2013 at 3:17 PM.
  5. #5
    Hi @rmelancon,

    Yes, it is OK to post in the closed threads if you have something relevant to the topic to add.

    Regarding the problem.

    I guess a JavaScript undefined error occurs here.
    Ext.net.DirectMethods.MapIt(...)
    If you would have two user controls, what MapIt would you need to call - from one or another?:)

    By default, a user control's DirectMethods are rendered with its ids.

    Please try:
    Ext.net.DirectMethods.objGlobalAssetMapping.MapIt(...)
    See also this example.
    https://examples1.ext.net/#/Events/D.../UserControls/
    https://examples1.ext.net/#/Events/D...thods/ID_Mode/
  6. #6
    made the following change:
    Ext.net.DirectMethods.objGlobalAssetMapping.MapIt( mapfrom, mapto, {

    now I get error:

    System.ArgumentException: DirectMethod: 'MapIt', The parameter 'mapfrom' is undefined at Ext.Net.DirectMethod.Invoke(Object target, HttpContext context, ParameterCollection args) at Ext.Net.ResourceManager.RaisePostBackEvent(String eventArgument)
  7. #7
    I think the parameters' names on server and client must coincide including case.
  8. #8
    made the following changes, still no luck. The alerts from the notify showing from and to are correct but then nothing else is getting called

    javascript error:
    Line: 94
    Error: Unable to get value of the property 'MapIt': object is null or undefined

        <DirectMethod>
        Public Sub MapIt(ByVal mapfrom As String, ByVal mapto As String)
            ' do something here in code behind
            Console.Write("askdlkjslkj")
            Ext.Net.X.Js.AddScript("javascript:var PopUpWin = alert('yo');")
    
        End Sub
            var notifyDrop = function (ddSource, e, data) {
                Ext.each(ddSource.dragData.selections, function (record) {
                    var mapto = data.selections[0].data.Description;
                    var rownum= <%= grdCurrentMap.ClientID %>.getView().findRowIndex(e.getTarget());
                    var mapfrom = <%= grdCurrentMap.ClientID %>.store.data.items[rownum].data.SourceDatasetName;
    
                    alert(mapfrom);
                    alert(mapto);
                    Ext.net.DirectMethods.objGlobalAssetMapping.MapIt(mapfrom, mapto, {
                        success: function (result) { 
                            Ext.Msg.alert('Message', result); 
                        },
                        eventMask: {
                            showMask: true,
                            minDelay: 500
                        }
                    });
                });
                return true;
            };
    Last edited by rmelancon; Mar 22, 2013 at 7:13 PM.
  9. #9
    I noticed this in your c# example
    [DirectMethodProxyID(IDMode = DirectMethodProxyIDMode.Alias, Alias = "UC")]
    in the ascx file. Do I need a vb equivalent in my control?
  10. #10
    Hello!

    Please make the following changes:

    Public Sub MapIt(ByVal MapFrom As String, ByVal MapTo As String)
    	' you can directly write JavaScript code without wrapping in tags
    	Ext.Net.X.Js.AddScript("alert('yo');")
    End Sub
    Try to call it using following JavaScript:

    Ext.net.DirectMethods.objGlobalAssetMapping.MapIt('test', 'test')
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 7
    Last Post: Oct 21, 2014, 6:22 AM
  2. function is not calling Directmethod
    By Vaishali in forum 2.x Help
    Replies: 3
    Last Post: Jan 07, 2013, 5:57 AM
  3. [CLOSED] calling directmethod syncronously
    By kemalyigit in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 24, 2012, 12:49 PM
  4. [CLOSED] Calling Static DirectMethod defined in an UserControl
    By ISI in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 05, 2011, 9:16 AM
  5. [CLOSED] MultiSelect with drag and drop, Drop listener
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 30, 2009, 8:25 AM

Posting Permissions