[CLOSED] Problem with remote actions in Ext.Net 4.3 if in the page there is a FileUploadField

  1. #1

    [CLOSED] Problem with remote actions in Ext.Net 4.3 if in the page there is a FileUploadField

    Hi,
    I added a FileUploadField in your example https://examples4.ext.net/#/TreePane...d/Remote_Mode/ and If I try to rename a node, the page becomes white. Because it seems to be a problem similar to what I have already told you, is there a way to set type='load' to remote actions?
    See my example.
    Thank you

    Jimmy

    <%@ Page Language="C#" ValidateRequest="false" %>
    
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BuildTree(TreePanel1.Root);
            }
        }
    
    
        private Ext.Net.NodeCollection BuildTree(Ext.Net.NodeCollection nodes)
        {
            if (nodes == null)
            {
                nodes = new Ext.Net.NodeCollection();
            }
    
    
            Ext.Net.Node root = new Ext.Net.Node();
            root.Text = "Root";
            nodes.Add(root);
    
    
            string prefix = DateTime.Now.Second + "_";
    
    
            for (int i = 0; i < 10; i++)
            {
                Ext.Net.Node node = new Ext.Net.Node();
                node.NodeID = i.ToString();
                node.Text = prefix + i;
                node.CustomAttributes.Add(new ConfigItem("number", i.ToString(), ParameterMode.Raw));
                node.CustomAttributes.Add(new ConfigItem("date", JSON.Serialize(DateTime.Today.AddDays(i), JSON.ScriptConverters), ParameterMode.Raw));
                node.Leaf = true;
                root.Children.Add(node);
            }
    
    
            return nodes;
        }
    
    
        protected void RemoteEdit(object sender, RemoteEditEventArgs e)
        {
            e.Accept = true;
    
    
            foreach (RowChanges change in e.Changes)
            {
                if (change.Field == "text" && change.IsDirty<string>())
                {
                    change.SetValue(change.Value<string>() + "_echo");
                }
                else if (change.Field == "number")
                {
                    change.SetValue(change.Value<int>() * 10);
                }
                else if (change.Field == "date")
                {
                    change.SetValue(change.Value<DateTime>().AddYears(10));
                }
            }
    
    
            //   You can refuse action
            //   e.Accept = false;
            //   e.RefusalMessage = "Error";
        }
    
    
        protected void RemoteRemove(object sender, RemoteRemoveEventArgs e)
        {
            e.Accept = true;
        }
    
    
        protected void RemoteAppend(object sender, RemoteAppendEventArgs e)
        {
            e.Accept = true;
            e.Attributes = new
            {
                text = e.Text + "_new"
            };
        }
    
    
        protected void RemoteMove(object sender, RemoteMoveEventArgs e)
        {
            e.Accept = true;
        }
    
    
        protected void FileUploadField_afterSelect(object sender, DirectEventArgs e)
        {
                
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Remote mode - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <style>
            .bold-text{
                font-weight:bold;
                padding-left: 32px;
                margin-bottom:2px;
                font-size:110%;
            }
        </style>
    
    
        <script>
            var showMenu = function (view, node, item, index, e) {
                var menu = App.TreeContextMenu;
    
    
                this.menuNode = node;
                menu.nodeName = node.get("text");
                view.getSelectionModel().select(node);
    
    
                menu.showAt([e.getXY()[0], e.getXY()[1]+10]);
                e.stopEvent();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <h1>Remote mode</h1>
    
    
            <p>This example demomstrates remote mode of the TreePanel : remote confirmation of basic operations (rename, remove, append/insert, drag/drop)</p>
    
    
            <p>The remote mode is activating if set Mode="Remote"</p>
    
    
            <p>You can define particular action as local even if Mode="Remote" (LocalActions property)</p>
    
    
            <p>List of available values for LocalActions: rename, remove, append, insert, move</p>
    
    
            <ext:Menu ID="TreeContextMenu" runat="server">
                <Items>
                    <ext:Label ID="NodeName" runat="server" Cls="bold-text" />
                    <ext:MenuSeparator />
                    <ext:MenuItem runat="server" Text="Edit" Icon="Pencil">
                        <Listeners>
                            <Click Handler="#{TreePanel1}.editingPlugin.startEdit(#{TreePanel1}.menuNode, 0);" />
                        </Listeners>
                    </ext:MenuItem>
    
    
                    <ext:MenuItem runat="server" Text="Rename to 'TEST'" Icon="Pencil">
                        <Listeners>
                            <Click Handler="#{TreePanel1}.editNode(#{TreePanel1}.menuNode, 'text', 'TEST');" />
                        </Listeners>
                    </ext:MenuItem>
    
    
                    <ext:MenuItem runat="server" Text="Remove" Icon="Delete">
                        <Listeners>
                            <Click Handler="#{TreePanel1}.removeNode(#{TreePanel1}.menuNode);" />
                        </Listeners>
                    </ext:MenuItem>
    
    
                    <ext:MenuItem runat="server" Text="Append child" Icon="Add">
                        <Listeners>
                            <Click Handler="#{TreePanel1}.appendChild(#{TreePanel1}.menuNode, 'New');" />
                        </Listeners>
                    </ext:MenuItem>
    
    
                    <ext:MenuItem runat="server" Text="Insert before this node" Icon="ArrowRight">
                        <Listeners>
                            <Click Handler="#{TreePanel1}.insertBefore(#{TreePanel1}.menuNode, 'New');" />
                        </Listeners>
                    </ext:MenuItem>
    
    
                    <ext:FileUploadField
                            ID="fuf" runat="server"
                            ButtonOnly="true"
                            ButtonText="File"
                            InputWidth="168"
                            >
                            <DirectEvents>
                                <Change OnEvent="FileUploadField_afterSelect" IsUpload="true">
                                    
                                </Change>
                            </DirectEvents>
                                        
                        </ext:FileUploadField>
    
    
                </Items>
                <Listeners>
                    <Show Handler="#{NodeName}.setText(this.nodeName);" />
                </Listeners>
            </ext:Menu>
    
    
            <ext:TreePanel
                ID="TreePanel1"
                runat="server"
                Height="300"
                Width="450"
                AutoScroll="true"
                Animate="true"
                Mode="Remote"
                RootVisible="false"
                ContainerScroll="true"
                OnRemoteEdit="RemoteEdit"
                OnRemoteRemove="RemoteRemove"
                OnRemoteAppend="RemoteAppend"
                OnRemoteMove="RemoteMove">
    
    
                <Fields>
                    <ext:ModelField Name="number" Type="Int" />
                    <ext:ModelField Name="date" Type="Date" />
                </Fields>
    
    
                <ColumnModel>
                    <Columns>
                        <ext:TreeColumn runat="server" DataIndex="text" Text="Text" Flex="1">
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:TreeColumn>
    
    
                        <ext:Column runat="server" DataIndex="number" Text="Number">
                            <Editor>
                                <ext:NumberField runat="server" />
                            </Editor>
                        </ext:Column>
    
    
                        <ext:DateColumn
                            runat="server"
                            DataIndex="date"
                            Text="Date"
                            Format="dd/MM/yyyy"
                            Width="125">
                            <Editor>
                                <ext:DateField runat="server" Format="dd/MM/yyyy" />
                            </Editor>
                        </ext:DateColumn>
                    </Columns>
                </ColumnModel>
    
    
                <SelectionSubmitConfig Encode="true" />
    
    
                <Listeners>
                    <ItemContextMenu Fn="showMenu" StopEvent="true" />
                    <RemoteActionRefusal Handler="Ext.Msg.alert('Action refusal', e.message);" />
                </Listeners>
    
    
                <View>
                    <ext:TreeView runat="server">
                        <Plugins>
                            <ext:TreeViewDragDrop runat="server" AllowLeafDrop="true" />
                        </Plugins>
                    </ext:TreeView>
                </View>
    
    
                <Plugins>
                    <ext:CellEditing runat="server" />
                    <%--<ext:RowEditing runat="server" />--%>
                </Plugins>
            </ext:TreePanel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Oct 20, 2017 at 6:06 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @xeo4.it!

    For this issue, please follow this thread:

    - FileUploadField breaking Html forms on 4.3.

    Visit it and subscribe to it, we already fixed the issue on github and it will be available on Ext.NET 4.4.0.

    I believe your other recent thread is pretty much the same as this. You can already test the fix if you try Ext.NET from github sources.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,
    I used your override and I will wait for 4.4, but I would like to know if there is a way to set type='load' for remote actions.
    Thank you.

    Jimmy
  4. #4
    Hello @xeo4.it!

    I might be missing something obvious here but, I don't see what you mean with setting type="load". Type of what, to do what, when? And set it where? Does it work if you don't use a file upload field... i.e. does the file upload field component relates to this issue? Maybe if there's no file upload field involved at all, a new thread could help clarify the matter.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,
    I just wanted to know if there is a way to not send all the items of the page when a remote action is called, a method similar to setting Type="load" for directevent.
    Thank you

    Jimmy
  6. #6
    Hello @xeo4.it!

    If you use remote mode I'm afraid it has to submit the default set of data for the remote interaction to happen at all. So, if you need custom-tailored submission you should not use remote but bind direct events (or listeners calling direct methods) to attain your needs.

    Well, maybe I'm still missing the point of your question, but it seems not a task for 'remote' loading.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hi Frabicio,
    thank you for your answer.

    Jimmy
  8. #8
    Hello @Jimmy!

    I hope the answer was helpful, but this you ask sounds like an interesting feature. If you're interested on this, would you help us understand better your needs by making a test case (a very simplistic one) showing both (or each test case in separate codes).

    What I'm imaging now would be something like this:

    - have a text field in the page
    - have the tree grid
    - bind remote actions to the tree grid
    - during the remote actions, have access to the tree grid data to update, but do not have the updated value in the text field from the page

    Is the idea right? Your test case seems fairly extensive and I'm a little confused on the actual needs, maybe simplifying it to a bare minimum would help.
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hello, Jimmy!

    Do you still need support with this issue? It's been a while since we posted the last follow-up here and no response for you so, maybe it was just not required, but we're making sure before we mark this thread as closed.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Sep 04, 2017, 12:53 PM
  2. Replies: 3
    Last Post: Sep 01, 2017, 10:08 PM
  3. FileUploadField and Remote validation
    By fisher in forum 1.x Help
    Replies: 0
    Last Post: Aug 16, 2011, 10:20 AM
  4. Replies: 2
    Last Post: Feb 16, 2011, 9:10 AM
  5. [CLOSED] [1.0] ColumnTree with FileUploadField on the same page
    By danielg in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 09, 2009, 12:14 PM

Posting Permissions