
Scott Smith
Top achievements
Rank 1
Scott Smith
asked on 16 Apr 2010, 01:58 AM
I'm wondering if it's possible to drop the item text into the textbox at the position of the cursor when the mouse button is released. I've tried a few different ways but so far I haven't found how to do it or if it's even possible.
6 Answers, 1 is accepted
0
Hi Scott Smith,
I suggest that you take a look at the following demo. It demonstrates how you can drag and drop items between two listoxes and a textbox.
Best wishes,
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.
I suggest that you take a look at the following demo. It demonstrates how you can drag and drop items between two listoxes and a textbox.
Best wishes,
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.
0

Scott Smith
Top achievements
Rank 1
answered on 20 Apr 2010, 02:18 PM
I've seen the demo and I know how to drag'n'drop between the two, that was never the issue. What I'm wondering is whether or not I can place the cursor at a particular place in the textbox and then have the dropped item from the ListBox inserted at the point of the cursor, not just appended to the end of the text in the textbox.
0
Accepted
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.
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.
0
Maria Ignatius Ephrem
Top achievements
Rank 1
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
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
0
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
instead of
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:
Kind regards,
Genady Sergeev
the Telerik team
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
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
0
Maria Ignatius Ephrem
Top achievements
Rank 1
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.
Thanks and Regards,
Ephrem.J
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