This is a migrated thread and some comments may be shown as answers.

Possible to drop item in a textbox at a specific position?

6 Answers 333 Views

ListBox

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

Accepted

answered on 22 Apr 2010, 09:20 AM

draganddrop.zip

Hello Scott Smith,

It is possible to drag some text and drop it where the cursor is. As an attachment you can find sample project that demonstrates how this can be achieved. The sample is using RadTreeView, however, RadListBox can be used as well.

Sincerely yours,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 24 Sep 2010, 01:55 PM

Hello,

We are using the "RadListBox" control that contains a list of text items. The user can drag any one of the items from the list box and drop it into a "RadTextBox" control. The following code is working in mozilla but not in IE7 and IE8. In the IE browser when the item is dropped, it does not get placed into the text box rather it appears for a moment and the disappears. Please help.

Code:
<body>
    <form id="myForm" runat="server">
    <div>
        <script type="text/javascript">
            function OnClientNodeDroppingHandler(sender, eventArgs) {
                var target = eventArgs.get_htmlElement();
                var textToInsert = eventArgs.get_sourceNode().get_text();
                if (target.tagName == "TEXTAREA") {
                    insertAtCaret(target, textToInsert);
                }
                eventArgs.set_cancel(true);
            }

            function setCaret(textEl) {
                if (textEl.createTextRange) {
                    textEl.caretPos = document.selection.createRange().duplicate();
                }
            }

            function insertAtCaret(obj, string) {
                if (typeof (document.selection) != 'undefined') {
                    if (obj.createTextRange && obj.caretPos) {

                        var caretPos = obj.caretPos;
                        caretPos.text =
            caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
             string + ' ' : string;
                    }
                    else {
                        obj.value = string;
                    }
                }
                else
                    if (typeof (obj.selectionStart) != 'undefined') {
                    var start = obj.selectionStart;

                    obj.value = obj.value.substr(0, start)
            + string
            + obj.value.substr(obj.selectionEnd, obj.value.length);
                    start += string.length;
                    obj.setSelectionRange(start, start);
                }
                else
                    obj.value += string;
                obj.focus();
            }
        </script>
      <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
                </telerik:RadScriptManager>
        <telerik:RadListBox ID="rlistemailbodyparams" runat="server" Height="200" Width="180" DataSourceID="ParamData" DataTextField="ParameterName" DataValueField="ParameterField" EnableDragAndDrop="true"
             OnClientDropping="OnClientlistDroppingHandler"></telerik:RadListBox>
        <telerik:RadTextBox ID="rtxtbody" Runat="server" Text="" Height="100" TextMode="MultiLine" Width="350" onselect="setCaret(this);" onclick="setCaret(this);"    onkeyup="setCaret(this);" ></telerik:RadTextBox>
    </div>
    </form>
</body>

thanks and regards,
Ephrem.J

answered on 30 Sep 2010, 09:56 AM

Hi Maria Ignatius Ephrem,

Two problems with your code. The first one is that in the OnClientNodeDroppingHandler you try to work with the listtbox items as they are treeview nodes. You shoud use

var textToInsert = eventArgs.get_sourceItem().get_text();

instead of

var textToInsert = eventArgs.get_sourceNode().get_text();

The second problem is that you use RadTextBox buty try to work with it as if it was regular text area or a normal ASP.NET TextBox with TextMode=Multiple. If you want your current code to work replace RadTextArea with:

<asp:TextBox runat="server" ID="TextBox" onselect="setCaret(this);" onclick="setCaret(this);"

onkeyup="setCaret(this);" TextMode="MultiLine" Width="200px" Height="100px">

</asp:TextBox>

Kind regards,
Genady Sergeev
the Telerik team

answered on 30 Sep 2010, 12:01 PM

Hello Genady Sergeev,

Thanks for the reply. However i have already found a solution and it works in all browsers. Please find the attached source code.

function OnClientlistDroppingHandler(sender, eventArgs)

{

var target = eventArgs.get_htmlElement();

droptext = "flase";

document.body.style.cursor = "default";

var textToInsert = eventArgs.get_sourceItem().get_value();

if (target.tagName == "TEXTAREA")

{

insertAtCaret(target, textToInsert);

}

eventArgs.set_cancel(true);

}

function setCaret(textEl)

{

caretpostext = "";

var r = document.selection.createRange();

var re = textEl.createTextRange();

var rc = re.duplicate();

re.moveToBookmark(r.getBookmark());

rc.setEndPoint('EndToStart', re);

caretpostext = rc.text;

}

function insertAtCaret(obj, string)

{

if (navigator.appName.indexOf("Microsoft") != -1)

{

selectionend = obj.value.substr(caretpostext.length, obj.value.length)

obj.value = obj.value.substr(0, caretpostext.length) + string + selectionend;

caretpostext = "";

objtxtbox = obj.id.substr(0, obj.id.indexOf("_text"));

document.getElementById(objtxtbox).value = obj.value;

}

else

if (typeof (obj.selectionStart) != 'undefined')

{

var start = obj.selectionStart;

obj.value = obj.value.substr(0, start)

+ string + obj.value.substr(obj.selectionEnd, obj.value.length);

start += string.length;

obj.setSelectionRange(start, start);

}

else

obj.value += string;

obj.focus();

}

</script>

<telerik:RadTextBox ID="rtxtbody" Runat="server"

Text='<%# Bind("EmailBody") %>' Height="100" TextMode="MultiLine" Width="350"  onselect="setCaret(this);" onclick="setCaret(this);" onkeyup="setCaret(this);" ></

telerik:RadTextBox>

<telerik:RadListBox ID="rlistemailbodyparams" runat="server" Height="162" Width="180" DataSourceID="ParamData" DataTextField="ParameterName" DataValueField="ParameterField" EnableDragAndDrop="true"

OnClientDropping="OnClientlistDroppingHandler" ></telerik:RadListBox>

Thanks and Regards,
Ephrem.J