[CLOSED] TextArea, Past from Excel

  1. #1

    [CLOSED] TextArea, Past from Excel

    Hello, I have a serious problem.

    If I paste some cells (eg, 5 rows and 5 columns) from Excel in the textArea of my example
    in DATA_CLIPBOARD I lose characters \r at the end of each line and leaves only \n

    With window.clipboardData.getData('Text') you can see that each line ends with \r\n

    How can I preserve \r\n copying the clipboard in a ext.net control.
    It is not important that it is a textarea.




    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    
        <script runat="server">
        
            protected void Page_Load(object sender, EventArgs e)
            {
                List<object> data = new List<object>();
    
    
                if (!X.IsAjaxRequest)
                {
    
                }
            }
    
            public void cmdWindowAlternativeCopyMethodContinue_DirectClick(object sender, DirectEventArgs e)
            {
                string CLIPBOARDDATA = txtAlternativeAreaCLIPBOARDDATA.Text;
            }
    
            public void cmdWindowAlternativeCopyMethodContinue2_DirectClick(object sender, DirectEventArgs e)
            {
                string DATA_CLIPBOARD = e.ExtraParams["DATA_CLIPBOARD"];
            }
            
        </script>
    </head>
    
    <body>
    <form id="Form1" runat="server">
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Default" />
    
        <ext:Window ID="Window1" runat="server" Width="1200" Height="700" Layout="FitLayout">
            <Items>
               <ext:FormPanel ID="FormPanel1" runat="server" Layout="FitLayout">
                 <Items>
                   <ext:TextArea ID="txtAlternativeAreaCLIPBOARDDATA" runat="server" EmptyText="Paste here data from clipboard..." Region="Center" Height="110"  MarginSpec="0 0 0 0">
                    </ext:TextArea>
                </Items>
              </ext:FormPanel> 
            </Items>
    
             <Buttons>
                <ext:Button ID="Button6" runat="server" Text="Continue" Icon="ForwardBlue" Margins="0 25 0 0">
                    <DirectEvents>
                        <Click  OnEvent="cmdWindowAlternativeCopyMethodContinue_DirectClick" >
                        </Click>
                    </DirectEvents>
                </ext:Button>
    
                 <ext:Button ID="Button2" runat="server" Text="Past from clipboard" Icon="ForwardBlue" Margins="0 25 0 0">
                    <DirectEvents>
                        <Click  OnEvent="cmdWindowAlternativeCopyMethodContinue2_DirectClick" >
                            <ExtraParams>
                                <ext:Parameter Name="DATA_CLIPBOARD" Value="window.clipboardData.getData('Text')" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
    </ext:Window>
    
    </form>
    </body>
    </html>


    Tks
    Last edited by fabricio.murta; Sep 17, 2016 at 12:38 AM.
  2. #2
    Can you step us through in detail how to reproduce the problem?

    When I click the Past from clipboard Button, a Javascript error is thrown:

    Uncaught TypeError: Cannot read property 'getData' of undefined
    We're also not entirely sure if the Continue Button is relevant to the problem. Can you clarify?

    As well, is the Page_Load event important here. I don't see a reference to the data object in the markup anywhere.

    Are you saying the trailing \r character is stripped during the DirectEvent process? It's there before the event is called, but not after?

    More information is required, but mostly just step by step instructions on how to reproduce.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hi,

    Rereading I agree, this message was not clear. :)



    The steps to reproduce the problem are:

    1- Write a range (5 cells and 3 columns) with numbers and letters.
    2- Copy this range from Excell
    3- Paste copied data in 'txtAlternativeAreaCLIPBOARDDATA'
    4- Put a breakpoint into 'cmdWindowAlternativeCopyMethodContinue_DirectClic k'
    5- Click on 'Continue'

    Copying data from Excel the line terminators is \r\n but in 'CLIPBOARDDATA' you'll find as line terminators \n, without \r.
    Given that '\n' could also be present i the text of a cell, I can not traced back to original data formatting.



    "Past from clipboard" button need ONLY to see that in 'CLIPBOARDDATA' you get effectivelly \r\n as line terminator.
    It has no relevance to my problem

    I don't know why you get an error.
    I found the code "window.clipboardData.getData('Text')" in the site below

    http://stackoverflow.com/questions/6...pboard-content

    and in my browser (I.E. 11) it works perfectly.
  4. #4
    Hello @ADV!

    Geoffrey gets the problem because window.clipboardData.getData('text') is not portable across browsers. At least Google Chrome does not support it at all.

    As for why the CR character (\r) is stripped away from the string, that's something inherent from the browsers and JavaScript. When Ext.NET is preparing a form to be submitted, it traverses the form elements to get their values and encode as URI string for submission. The returned value for each field though, has just LF as line breaks. The "cleanup" happens either during paste or when fetching the values with JavaScript.

    An ordinary ASPNET form submit surprisingly seems to convert the line breaks to CRLF -- or keep them with CRLF.

    If you really want code behind to see the CRLF line endings you will have to replace the \n occurrences to Environment.NewLine (or \r\n) in code behind or by overriding Ext.Ajax.serializeForm().

    Here's your example reviewed to explore those features. Notice I used the URI format in messages to display the CRLF (\r\n) as %0d%0a.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
        <head id="Head1" runat="server">
            <title>Ext.NET Examples</title>
    
            <script runat="server">
                protected void Page_Load(object sender, EventArgs e)
                {
                    List<object> data = new List<object>();
    
                    if (!X.IsAjaxRequest && !String.IsNullOrWhiteSpace(extnetTextArea.Text))
                    {
                        showCodeBehindValues();
                    }
                }
    
                private void showCodeBehindValues()
                {
                    var encExtNetTextArea = HttpUtility.UrlEncode(extnetTextArea.Text);
                    var encReqTextArea = HttpUtility.UrlEncode(Request.Params["html5TextArea"]);
                    var encAspNetTextArea = HttpUtility.UrlEncode(html5TextArea.Value);
    
                    X.Msg.Show(new MessageBoxConfig()
                    {
                        Title = "URI encoded input data",
                        Buttons = MessageBox.Button.OK,
                        Icon = MessageBox.Icon.WARNING,
                        Message = "CRLF == \\r\\n == &#37;0d&#37;0a<br />LF == \\n == &#37;0a only<br />" +
                                  "Ext.NET textarea: " + encExtNetTextArea + "<br />" +
                                  "ASPNET text area (form request): " + encReqTextArea + "<br />" +
                                  "ASPNET text area (direct): " + encAspNetTextArea,
                        MinWidth = 600
                    });
                }
                
                public void Continue_DirectClick(object sender, DirectEventArgs e)
                {
                    showCodeBehindValues();
                }
    
                public void CustomPar_DirectClick(object sender, DirectEventArgs e)
                {
                    var form_field_js = HttpUtility.UrlEncode(e.ExtraParams["form_field_js"]);
                    var textArea_js = HttpUtility.UrlEncode(e.ExtraParams["textArea_js"]);
                    var extnetGetValue = HttpUtility.UrlEncode(e.ExtraParams["extnetGetValue"]);
                    var clipboard = HttpUtility.UrlEncode(e.ExtraParams["clipboard"]);
    
                    X.Msg.Show(new MessageBoxConfig()
                    {
                        Title = "Raw input data",
                        Buttons = MessageBox.Button.OK,
                        Icon = MessageBox.Icon.WARNING,
                        Message = "CRLF == \\r\\n == &#37;0d&#37;0a<br />LF == \\n == &#37;0a only<br />" +
                                  "As Ext.NET encodes form: " + form_field_js + "<br />" +
                                  "Querying the ASPNET textarea from JavaScript: " + textArea_js + "<br />" +
                                  "Querying the Ext.NET textarea: " + extnetGetValue + "<br />" +
                                  "Querying the Clipboard data (IE only): " + clipboard + "<br />",
                        MinWidth = 600
                    });
                }
            </script>
    
            <script type="text/javascript">
                var getFormFields = function () {
                    var form = document.getElementById('Form1');
    
                    // Here the values are already provided without the CR (\r) characters
                    var aspnet_field = form.elements[1].value;
                    var extnet_field = form.elements[3].value;
    
                    var enc_aspnet_field = window.encodeURIComponent(aspnet_field);
                    var enc_extnet_field = window.encodeURIComponent(extnet_field);
                    var enc_clipboard = window.encodeURIComponent(window.clipboardData.getData('text'));
    
                    Ext.Msg.show({
                        title: 'from JavaScript',
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.WARNING,
                        message: 'CRLF == \\r\\n == &#37;0d&#37;0a<br />LF == \\n == &#37;0a only<br />' +
                            'Querying the HTML5 textarea: ' + enc_aspnet_field + '<br />' +
                            'Querying the Ext.NET textarea: ' + enc_extnet_field + '<br />' +
                            'Querying the Clipboard data (IE Only): ' + enc_clipboard
                    });
                };
            </script>
        </head>
    
        <body>
            <form id="Form1" runat="server" method="post">
                Paste the cells in both TextAreas and check the results by clicking on each button.
                
                <br /><br />
                
                ASP.NET TextArea (paste here too!):
                <textarea runat="server" id="html5TextArea"></textarea>
                
                <asp:button runat="server" type="submit" text="submit aspnet" />
                <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
                <ext:Window ID="Window1" runat="server" Width="600" Height="300" Layout="FitLayout">
                    <Items>
                        <ext:FormPanel ID="FormPanel1" runat="server" Layout="FitLayout">
                            <Items>
                                <ext:TextArea 
                                    ID="extnetTextArea"
                                    runat="server"
                                    EmptyText="Paste here data from clipboard..."
                                    Height="110" />
                            </Items>
                        </ext:FormPanel> 
                    </Items>
    
                    <Buttons>
                        <ext:Button ID="Button6" runat="server" Text="Check DirectEvent">
                            <DirectEvents>
                                <Click  OnEvent="Continue_DirectClick" >
                                </Click>
                            </DirectEvents>
                        </ext:Button>
    
                        <ext:Button ID="Button2" runat="server" Text="DirectEvent/customValues">
                            <DirectEvents>
                                <Click  OnEvent="CustomPar_DirectClick" >
                                    <ExtraParams>
                                        <ext:Parameter
                                            Name="form_field_js"
                                            Value="document.getElementById('Form1').elements[3].value"
                                            Mode="Raw" />
                                        <ext:Parameter
                                            Name="textArea_js"
                                            Value="document.getElementById('html5TextArea').value"
                                            Mode="Raw" />
                                        <ext:Parameter
                                            Name="extnetGetValue"
                                            Value="App.extnetTextArea.getValue()"
                                            Mode="Raw" />
                                        <ext:Parameter
                                            Name="clipboard"
                                            Value="window.clipboardData.getData('text')"
                                            Mode="Raw" />
                                    </ExtraParams>
                                </Click>
                            </DirectEvents>
                        </ext:Button>
    
                        <ext:Button ID="Button3" runat="server" Text="Javascript queries">
                            <Listeners>
                                <Click Fn="getFormFields" />
                            </Listeners>
                        </ext:Button>
                    </Buttons>
                </ext:Window>
            </form>
        </body>
    </html>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Ok, I can see from your example that only

    <textarea runat="server" id="html5TextArea"></textarea>
                
    <asp:button runat="server" type="submit" text="submit aspnet" />
    with

    Request.Params["html5TextArea"]
    solve my problem.



    Trying, I found that even with (see #{txtAlternativeAreaCLIPBOARDDATA}.el.dom.innerTex t below)

    <ext:Window ID="WindowAlternativeCopyMethodByManualPaste" runat="server" Title="Alternative method" Icon="PastePlain" Width="700" Height="500" Resizable="true"
                BodyStyle="background-color:#fff;" BodyPaddingSummary="5 5 5 5" Layout="FitLayout" DefaultAnchor="100%" Hidden="true" Modal="true" Stateful="false" StateID="CIT_WindowAlternativeCopyMethodByManualPaste">
    
            <Items>
                <ext:TextArea ID="txtAlternativeAreaCLIPBOARDDATA" runat="server" EmptyText="Paste here data from clipboard..." Region="Center" Height="110"  MarginSpec="0 0 0 0">
                </ext:TextArea>
            </Items>
    
            <Buttons>
                <ext:Button ID="cmdMailCopiedData_1" runat="server" Text="Send data by mail" Icon="Mail" MarginSpec="0 0 0 35">
                    <DirectEvents>
                        <Click  OnEvent="cmdMailCopiedData_DirectClick">
                        </Click>
                    </DirectEvents>
                </ext:Button>
    
                <ext:Button ID="Button41" runat="server" Text="Cancel" Icon="BulletCross" MarginSpec="0 15 0 70" Handler="this.up('window').close();" />
    
                <ext:Button ID="Button61" runat="server" Text="Continue" Icon="ForwardBlue" MarginSpec="0 25 0 0" Handler="this.up('window').close();">
                    <DirectEvents>
                        <Click  OnEvent="cmdWindowAlternativeCopyMethodByManualPasteContinue_DirectClick" >
                            <ExtraParams>
                                <ext:Parameter Name="DATA_CLIPBOARD" Mode="Raw" Value="#{txtAlternativeAreaCLIPBOARDDATA}.el.dom.innerText" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
        </ext:Window>
    I can preserve \r\n olso.


    Thank you
  6. #6
    Hello @ADV! Glad you could sort out the issue! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 5
    Last Post: Mar 03, 2016, 2:13 PM
  2. Replies: 1
    Last Post: Aug 26, 2015, 6:30 AM
  3. Export to Excel
    By ChrisO in forum 2.x Help
    Replies: 1
    Last Post: Jun 21, 2012, 4:08 PM
  4. Excel Export
    By maephisto in forum 1.x Help
    Replies: 1
    Last Post: May 13, 2011, 11:47 AM
  5. vb example of export to Excel
    By grosenbrock in forum 1.x Help
    Replies: 2
    Last Post: Aug 27, 2010, 6:22 PM

Posting Permissions