[CLOSED] Copy text from pages

[Zdenek]

Hello
Is it possible to copy text from labels (for example here https://examples4.ext.net/#/Buttons/...efault_Button/)
using a mouse cursor?

Thanks
Zdenek

[fabricio.murta]

Hello @Zdenek!

Very interesting question. Now that Ext.NET has the Clipboard functionality, that's a question that would rise sooner or later!

Well, but as far as it is documented by the underlying framework (ExtJS), unfortunately the builtin clipboard support is imbued only to Grid Panels, and specifically to grids using the Spreadsheet selection model.

According to a discussion about the Clipboard Plugin on Sencha forums, even to use it on grid with other selection models (not spreadsheet), some modification on JavaScript-side code might be necessary, unfortunately.

That said, I can think on two solutions for the specific clipboard needs you have:
1) study and expand the existing clipboard plug in and use it for your specific clipboard needs
2) apply one of the solutions discussed on Ext.NET forums about using clipboard-handling tools. If you search the forums for "clipboard" you will find a number of discussions about this. To name a good one: Contextmenu Cut/Copy/Paste (Without Clipboard), which is a guide on how to implement a cross-browser clipboard without actually using the clipboard (but that might not be enough for your usage).

Please notice the builtin Spreadsheet Grid Clipboard Plugin does not actually integrate to the OS's clipboard, but is an implementation similar to the guide linked above.

Here's our example in Examples Explorer using the clipboard plugin on such a grid panel: Grid Panel > Spreadsheet Selection Model > Clipboard.

In order to integrate clipboard with the OS, you'd have to use something similar to this forums (when you see a 'code' block) that copies select text/data to clipboard. Usually that's achieved using a Adobe Flash component integrated to the page. Example:

You can copy this text to clipboard by
clicking the icon in top-right corner
of this code block.

Well, I hope this helps!

[Zdenek]

Hello
I will narrow down my requirement a little, adding a sample

I have following control

  public class CompanyPickerControl : FieldContainer, INamingContainer
    {
      
        public string CopyFromButtonText
        {
            get { return _btnCopyFrom.Text; }
            set { _btnCopyFrom.Text = value; }
        }

        public bool CopyFromButtonHidden
        {
            get { return _btnCopyFrom.Hidden; }
            set { _btnCopyFrom.Hidden = value; }
        }

        public string OpeningHoursText
        {
            get { return _btnOpeningHours.Text; }
            set { _btnOpeningHours.Text = value; }
        }

        public bool DispatchVisible
        {
            get { return _ddlDispatch.Visible; }
            set
            {
                _addDispatch.Visible = value;
                _ddlDispatch.Visible = value;
            }
        }


        public string CopyFromInstance { get; set; }

        private Button _btnOpeningHours = new Button
        {
            Text = "Opening Hours",
            Icon = Icon.Time,
            ItemID = "btnOpeningHours",
            Cls = "greyButton"
        };

        private ComboBox _ddlCompany = new ComboBox
        {
            //Width = 320,
            Cls = "companyPickerCompanyDropdown",
            EmptyText = "-- Select Company --",
            ValueField = "Id",
            DisplayField = "DisplayString",
            ItemID = "ddlCompany",
            TypeAhead = false,
            TriggerAction = TriggerAction.Query,
            MinChars = 0,
            ForceSelection = true,
            BlankText = "Company is required",
            Store =
			{
			    new Store
			        {
						WarningOnDirty = false,
			           	AutoLoad = false,
						
			           	Proxy =
			           		{
			           			new PageProxy ()
			           				{
										DirectFn ="Ext.net.DirectMethods.FindCompanyAccordingPrefix"
			           				//	Json = true,
			           				//	Url = URLResolver.RootDirectory.GetAbsoluteUrl("~/ExtDataService.asmx/FindCompanyAccordingPrefix"),
										//Reader =
										//{
										//    new JsonReader
										//        {
										//            Root = "d",
			           								
			           					
										//        }
										//},
			           				}
			           		},
			          
						Model =
							{
								new Model
									{
										IDProperty = "Id",
										Fields =
			           						{
			           							new ModelField("Id",ModelFieldType.Int),
												new ModelField("CityId",ModelFieldType.Int)
												{
													AllowNull = true
												},
												new ModelField("CityName"),
			           							new ModelField("DisplayString"),
												new ModelField("LoadingDock",ModelFieldType.Boolean)
												{
													AllowNull = true
												},
												new ModelField("IsPort",ModelFieldType.Boolean)
												{
													AllowNull = true
												},
			           							new ModelField("Name"),
												new ModelField("CountryId",ModelFieldType.Int)
												{
													AllowNull = true
												},
												new ModelField("StateId",ModelFieldType.Int),
			           							new ModelField("AddressDetails"),
												new ModelField("ZipCode"),
												new ModelField("IconCls")
			           						}
									}
							}
			        }
			}
        };

        private Button _btnCopyFrom = new Button
        {
            Text = "Copy",
            Icon = Icon.PageCopy,
            ItemID = "btnCopyFrom",
            Cls = "greyButton",
            Hidden = true
        };
        private ComboBox _ddlDispatch = new ComboBox
        {
            //Width = 320,
            EmptyText = "-- Select Dispatch --",
            Cls = "companyPickerPersonDropdown",
            ItemID = "ddlDispatch",
            ValueField = "Id",
            Visible = false,
            Flex = 1,
            TriggerAction = TriggerAction.All,
            DisplayField = "Location",
            TypeAhead = false,
            BlankText = "Dispatch is required",
            MarginSpec = "0 0 10 0",
            QueryMode = DataLoadMode.Remote,
            ForceSelection = true,
            Store =
			{
				new Store
				{
					WarningOnDirty = false,
					AutoLoad = false,

					Model =
					{
						new Model
						{
							IDProperty = "Id",
							Fields =
							{
								new ModelField("Id", ModelFieldType.Int),
								new ModelField("Location"),
								new ModelField("DispatchId",ModelFieldType.Int),
							}
						}
					}
				}
			}
        };

        private Button _addDispatch = new Button
        {
            Text = "Add",
            Visible = false,
            Icon = Icon.Add,
            Width = 50,
            ItemID = "addDispatch",
            MarginSpec = "0 5 10 0"
        };
        private ComboBox _ddlPerson = new ComboBox
        {
            //Width = 320,
            EmptyText = "-- Select Employee --",
            Cls = "companyPickerPersonDropdown",
            ItemID = "ddlPerson",
            ValueField = "Id",
            TriggerAction = TriggerAction.All,
            DisplayField = "DisplayString",
            TypeAhead = false,
            BlankText = "Contact is required",
            QueryMode = DataLoadMode.Remote,
            ForceSelection = true,
            Store =
			{
				new Store
				{
					WarningOnDirty = false,
					AutoLoad = false,

					Model =
					{
						new Model
						{
							IDProperty = "Id",
							Fields =
							{
								new ModelField("Id", ModelFieldType.Int),
								new ModelField("DisplayString"),
								new ModelField("AddressDetails"),
								new ModelField("Email"),
								new ModelField("FirstName"),
								new ModelField("LastName"),
								new ModelField("IconCls")
							}
						}
					}
				}
			}
        };

        private Label _txtCompanyNote = new Label
        {
            //	Width = 320,
            Text = "Im not able to copy this text using mouse",
            Flex = 1,
            Disabled = true,
            Cls = "companyPickerCompanyNote",
            ItemID = "txtCompanyNote",
            AutoScroll = true,
          
        };
        private Panel _txtPersonNote = new Panel
        {
            Flex = 1,
            Html = "Im not able to copy this text using mouse",
            MinHeight = 10,
            Disabled = true,
            Cls = "companyPickerPersonNote",
            ItemID = "txtPersonNote",
            AutoScroll = true
        };

        public CompanyPickerControl()
        {
            Height = 230;
        }

        //public void SetCompanyAndPerson(CompanyPickerCompanyDTO company,CompanyPickerPersonDTOLoad person)
        //{
        //    //ActiveCompany = company;
        //    //string serializedCompany = JsonConvert.SerializeObject(company);
        //    //string serializedPerson = JsonConvert.SerializeObject(person);
        //    this.Call("setCompanyAndPerson",company,person);
        //}

      
        public bool DisplayNameOnly { get; set; }

        protected override void OnInit(EventArgs e)
        {
            //((AjaxProxy)_ddlCompany.Store[0].Proxy[0]).ActionMethods.Read = HttpMethod.POST;
            //((AjaxProxy)_ddlPerson.Store[0].Proxy[0]).ActionMethods.Read = HttpMethod.POST;

            if (string.IsNullOrEmpty(ID) == false)
            {
                _ddlCompany.ID = ID + "_ddlCompany";
                _ddlPerson.ID = ID + "_ddlPerson";
            }

            if (_ddlCompany.ListConfig == null)
                _ddlCompany.ListConfig = new BoundList();

            if (DisplayNameOnly)
            {
                _ddlCompany.DisplayField = "Name";
                _ddlCompany.ListConfig.ItemTpl = new XTemplate
                {
                    Html = @"<tpl for="".""><div class=""icon-combo-item"">{Name}</div></tpl>"
                };
            }
            else
            {
                _ddlCompany.ListConfig.ItemTpl = new XTemplate
                {
                    Html = @"<tpl for="".""><div class=""icon-combo-item {IconCls}"">{DisplayString}</div></tpl>"
                };

            }


            if (_ddlPerson.ListConfig == null)
                _ddlPerson.ListConfig = new BoundList();

            _ddlPerson.ListConfig.ItemTpl = new XTemplate
            {
                Html = @"<tpl for="".""><div class=""x-combo-list-item icon-combo-item {IconCls}"">{DisplayString}</div></tpl>"
            };


            Frame = true;
            LayoutConfig.Add(new VBoxLayoutConfig
            {
                Align = VBoxAlign.Stretch
            });


            var iconContainer = new Container
            {
                ItemID = "iconContainer",
                Width = 30,
                Layout = "vbox",
                MarginSpec = "0 7 0 0",
            };
            var buttonContainer = new FieldContainer
            {
                Height = 30,
                LayoutConfig =
				                     {
					                     new HBoxLayoutConfig
					                     {
						                     Align = HBoxAlign.Middle
					                     }
				                     },
                MarginSpec = "0 0 5 0",
                Cls = "companyPickerCompanyButtonPanel",
                Items =
				                     {
					                     new Button
					                     {
						                     MarginSpec="0 5 0 0",
						                     Text = "Search",
						                     Icon = Icon.Magnifier,
						                     ItemID = "btnSearch",
						                     Cls="greyButton"

					                     },
					                     _btnOpeningHours,
					                     _btnCopyFrom
				                     }
            };
            
            Items.AddRange(new List<AbstractComponent>{
			    _ddlCompany,
				new Container
				{
					Flex=1,
					LayoutConfig = {
								new HBoxLayoutConfig
					               {
						               Align = HBoxAlign.Stretch
					              }
								   },
					Items = {

						_txtCompanyNote,
						iconContainer
					}
				},
				
				//new FieldContainer
				//    {
						
				//        Flex = 1,
				//        Layout = "Fit",
				//        Items =
				//            {
				//                _txtCompanyNote
				//            }
				//    },
			    
				
				buttonContainer,
				new Container
				{
					Layout = "hbox",
					Items =
					{
						_ddlDispatch,
						_addDispatch
					}
				},
				
				_ddlPerson,
				_txtPersonNote,
				//new FieldContainer
				//    {
				//        Layout = "Fit",
				//        Flex = 1,
				//        Items =
				//            {
				//                _txtPersonNote
				//            }
				//    }
				
				new FieldContainer
					{
						Height = 30,
						LayoutConfig =
						{
							new HBoxLayoutConfig
								{
									Align = HBoxAlign.Middle
								}
						},
						Items = 
						{
							new Button
							{
								Text = "Add Person",
								Icon = Icon.UserAdd,
								ItemID = "btnAddPerson",
								Cls="greyButton"
							},
							new Container
							{
								Flex=1
							},
							new Button
							{
								Text = "Clear",
								Icon = Icon.Cross,
								ItemID = "btnClear",
								Cls="greyButton"
							}
						}
					}
					

	        });

            base.OnInit(e);
        }

   

      

        public bool AllowBlankCompany
        {
            get
            {
                return _ddlCompany.AllowBlank;
            }
            set
            {
                _ddlCompany.AllowBlank = value;
            }
        }


        public bool AllowBlank
        {
            get
            {
                return _ddlPerson.AllowBlank;
            }
            set
            {
                _ddlPerson.AllowBlank = value;
                _ddlCompany.AllowBlank = value;
            }
        }


        public bool AllowBlankPerson
        {
            get
            {
                return _ddlPerson.AllowBlank;
            }
            set
            {
                _ddlPerson.AllowBlank = value;
            }
        }


      
    }

and following "page"

 <ext:Container Reference="rootContainer"  >
            <Items>
                <ext:Panel runat="server" Html="I can copy this text"></ext:Panel>
                <ext:Label runat="server" Text="I can copy this text"></ext:Label>
                <wa:CompanyPickerControl runat="server"/>
            </Items>
        </ext:Container>

Now what I dont undertand is
- why I can copy text from first two controls ( label +panel) on page
- why I cannot copy text fromlabel and panel inside CompanyPickerControl

[fabricio.murta]

Hello @Zdenek!

Please provide a simplified sample and fully runnable so we can reproduce and provide you with proper advice.

If in doubt on how to come up with a simple runnable example, please refer to these posts:
- Forum Guidelines For Posting New Topics
- More information required

[Zdenek]

Hello

1) can you please tell me what stops you from reproducing based on sample I sent? What you want me to simplify, what control is missing or so?
if you are looking for complete aspx page, here it is

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebAdmin.Test" %>
<%@ Register TagPrefix="wa" Namespace="WebAdmin.Controls" Assembly="WebAdmin" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <ext:ResourceManager runat="server"></ext:ResourceManager>
        <ext:Viewport runat="server">
            <Items>
                <ext:Container Reference="rootContainer"  >
                    <Items>
                        <ext:Panel runat="server" Html="I can copy this text"></ext:Panel>
                        <ext:Label runat="server" Text="I can copy this text"></ext:Label>
                        <wa:CompanyPickerControl runat="server"/>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>

For more details how to setup ext.net environment please follow your guides here https://examples4.ext.net/#/Getting_...tion/Overview/

2) Do you really think that after 154 posts in these forums, reply like

"If in doubt on how to come up with a simple runnable example, please refer to these posts:
- Forum Guidelines For Posting New Topics
- More information required"

adds any value? If yes, please explain what value, if not please do not waste our time by that next time

3) Please answer original question

Thanks
Regards
Zdenek

[Zdenek]

Hello

Any reply here?

Thanks
Zdenek

[fabricio.murta]

Hello @Zdenek!

I was able to not only run your example, but to select+copy text from the field you indicate that you can't copy text from.

You mean by copying:
1. select the text click+dragging the mouse cursor over it
2. pressing ctrl+c to actually copy the text to clipboard

Right? It worked with your sample.

[Zdenek]

OK, glad to here that this thread is not forgotten :-)

Yes I mean exactly that.
I checked in detail and I can copy text in IE (11), but not in chrome or FF

does it work for you in any of these browsers (FF or Chrome)

I'm using Ext.Net version 4.1.0.0 ( I doubt it could make any difference, but just in case....)

Thanks
Z

[fabricio.murta]

Hello again, @Zdenek!

The issue is the layout you are using in the inner containers.

With just this you could reproduce the issue:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager runat="server" />
        <ext:Container Reference="rootContainer" runat="server">
            <Items>
                <ext:Panel runat="server" Html="I can copy this text"></ext:Panel>
                <ext:Label Disabled="true" runat="server" Text="I can copy this text"></ext:Label>
                <ext:FieldContainer runat="server" Layout="VBoxLayout">
                    <Items>
                        <ext:Label Disabled="true" runat="server" Text="I can not copy this text"></ext:Label>
                    </Items>
                </ext:FieldContainer>
            </Items>
        </ext:Container>
    </div>
    </form>
</body>
</html>

Yet, the text will be selectable on IE11, still unselectable on Chrome (and likely firefox).

The issue is on the vbox layout that adds a "x-item-box" class to the elements inside it that, in turn, when combined with the x-item-disabled CSS class, makes the items unselectable.

It is just that IE ignores the CSS and works differently than FF & Chrome that it allows selecting.

So you have two options here to make these text fields selectable:
- do not disable them
- use another layout on the surrounding containers

So, in the event you are working with text fields or text area fields and want to allow selecting whilst not allowing the user to change them, the ReadOnly setting is there.

I hope this helps!..