RadTextBox set Cursor to position

[Oktay]

Hi Guys

I have a quick question, I have created a page with to RadTextBoxes

1 is set as a Input Field, second one is a multiline and read only. What I try is

I load some text into the readonly RadTextBox, then i search for a text I type into the first RadTextBox, I get back the index of the Textstart I was looking for. So far so good

Now I would like to place the Cursor to the text I am serching for in the readonly textBox and mark the text.

how can I go this?

 

Many thanks for all who van help

 

[Attila Antal]

Hi Oktay,

If you must make a selection in another input element (textbox/textarea) the code would look similar to this:

 

<h3>RadTextBox for Input</h3>

<telerik:RadTextBox ID="RadTextBox1" runat="server" CssClass="myinput"></telerik:RadTextBox>

<h3>RadTextBox with MultiLine</h3>

<telerik:RadTextBox ID="RadTextBox2" runat="server" AutoPostBack="false" TextMode="MultiLine" ReadOnly="true" Rows="10" Columns="10" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.">
</telerik:RadTextBox>

 

 

jquery code to attach the keypress event handler to the RadTextBox1 that will listen to the "ENTER" key. 

 

$(document).on('keypress', '.RadInput .riTextBox.myinput', function (e) {

    if (e.keyCode != 13) return;

    e.preventDefault();

    var inputElement = e.target;

    if (!inputElement || !inputElement.control) return;

    var inputTextBox = inputElement.control;
    var inputValue = inputTextBox.get_textBoxValue().toUpperCase();


    if (inputValue.length < 3) return;

    var textArea = $telerik.findControl(document, "RadTextBox2");
    var textAreaValue = textArea.get_textBoxValue().toUpperCase();

    // Start of the Range
    var startIndex = textAreaValue.indexOf(inputValue);

    // End of the Range. Starts from the "startindex" up until the end of the Keyword.
    var endIndex = startIndex + inputValue.length;

    // Select the Text
    textArea.selectText(startIndex, endIndex);

});

 

 

The downside of this is that the main input element will lose focus so you could focus on the second TextBox. If the Text Area is large enough, you would see the selection. If the text is larger than the text area, the selection will be out of boundaries and will not be visible until scrolling to it. You may try and implement an autoscrolling, see https://stackoverflow.com/a/7464575/2289769

 

It would be much better if you had an element that could contain HTML value rather than text and implement a nice functionality that will find and style the text in that element. 

For example, you could have a div element that will contain the Read-Only Text like this:

 

<h3>Simple Div element</h3>

<style>
    .mydiv {
        height: 200px;
        width: 400px;
        border: 1px solid #D9D9D9;
        color: #999999;
    }
</style>

<div class="mydiv">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

 

 

Result

 

And then you can implement a highlight functionality similar to this: Highlight text inside HTML elements and templates with RegEx

 

Regards,
Attila Antal
Progress Telerik