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

7 posts, 1 answers
  1. Scott Smith
    Scott Smith avatar
    14 posts
    Member since:
    Mar 2010

    Posted 15 Apr 2010 Link to this post

    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.
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 20 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Scott Smith
    Scott Smith avatar
    14 posts
    Member since:
    Mar 2010

    Posted 20 Apr 2010 Link to this post

    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.
  5. Answer
    Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 22 Apr 2010 Link to this post

    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.
  6. Maria Ignatius Ephrem
    Maria Ignatius Ephrem avatar
    2 posts
    Member since:
    May 2010

    Posted 24 Sep 2010 Link to this post

    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
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 30 Sep 2010 Link to this post

    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
    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
  8. Maria Ignatius Ephrem
    Maria Ignatius Ephrem avatar
    2 posts
    Member since:
    May 2010

    Posted 30 Sep 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017