sftextbox cursor location

[DAN]

Dear Support, 

I have an sfTextBox defined as:

SfTextBox Multiline="true" style="height: 842px;width:595px" @bind-Value="Phrase"></SfTextBox>

I currently add phrases to the end of the textbox, through a datagrid recordClickHandler3 which is shown below. sometimes instead of adding to the end of the textbox, i need to add to another location of the textbox

-How can i get the location of the Keyboard/mouse cursor. Can you provide a working sample/OR working Code?

thanks

        public void RecordClickHandler3(RecordClickEventArgs<Model.TemplateReportDetail> args)

        {

            //Console.WriteLine(args.RowData.Phrase);

            if (args.RowData.Phrase != null)

            {

                if (Phrase != null)

                {

                    Phrase = Phrase + "\n" + args.RowData.Phrase;

                }

                else

                {

                    Phrase = Phrase + args.RowData.Phrase;

                }

            }

        }

[Deepak Ramakrishnan]

Hi Danil, 

 

Greetings from Syncfusion support. 

 

We have created a sample as per your requirement ,kindly refer to below highlighted code and sample for your reference. In below sample the phrase will be included in the textbox at current cursor position. 

 

[Index.js] 

 

@using Syncfusion.Blazor.Inputs 

@inject IJSRuntime JSRuntime 

 

<SfTextBox ID="Default" Placeholder='Enter First name' FloatLabelType='@FloatLabelType.Always'></SfTextBox> 

 

<button class="e-btn apply-limit" @onclick="@Apply">Insert</button> 

 

 

@code { 

 

 

 

    //This method inserts the phrase at current cursor position 

    public async Task Apply() 

    { 

        await JSRuntime.InvokeVoidAsync("insertAtCursor", "Default", "!!Hello!!"); 

    } 

 

 

} 

 

 

 

[Filter.js] 

 

window.insertAtCursor = function (id, myValue) { 

    var myField = document.getElementById(id); 

    //IE support 

    if (document.selection) { 

        myField.focus(); 

        sel = document.selection.createRange(); 

        sel.text = myValue; 

    } 

    //MOZILLA and others 

    else if (myField.selectionStart || myField.selectionStart == '0') { 

        var startPos = myField.selectionStart; 

        var endPos = myField.selectionEnd; 

        myField.value = myField.value.substring(0, startPos) 

            + myValue 

            + myField.value.substring(endPos, myField.value.length); 

    } else { 

        myField.value += myValue; 

    } 

} 

 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/169258/ze/TextBox_Cursor-931448547 

 

Kindly revert us if you have any concern in it. 

 

Thanks, 

Deepak R. 

 

[DAN]

hello, thank you for your reply. The code you provided is working But there is problem with saving the added text:

please see below our code

when we save the report,the content that was added dynamically is not saved.

can you please supporrt?

OUR CODE

 <SfTextBox ID="Default"Multiline="true" @bind-Value="Phrase"></SfTextBox>

@code {

public string Phrase { get; set; }

 public async Task RecordClickHandler3(RecordClickEventArgs<Model.TemplateReportDetail> args)

        {

            //Console.WriteLine(args.RowData.Phrase);

            //

            if (args.RowData.Phrase != null)

            {

                if (Phrase != null)

                {

                    //Phrase = Phrase + "\n" + args.RowData.Phrase;

                    await JsRuntime.InvokeVoidAsync("insertAtCursor", "Default", "\n"+args.RowData.Phrase);

                }

                else

                {

                    // Phrase = Phrase + args.RowData.Phrase;

                    await JsRuntime.InvokeVoidAsync("insertAtCursor", "Default", args.RowData.Phrase);

                }

            }

        }

[Deepak Ramakrishnan]

Hi  Danil, 

 

Thanks for your update. 

 

We have modified the sample as per your requirement .Kindly refer the below highlighted code and sample for your reference. 

 

We have updated the value in the server end using @bind-value attribute to set the value to the component using a js invokable function. 

 

[Index.razor] 

@code { 

 

    public string val { get; set; } 

 

 

 

    //This method inserts the phrase at current cursor position 

    public async Task Apply() 

    { 

        var dotNetReference = DotNetObjectReference.Create(this); 

        await JSRuntime.InvokeVoidAsync("insertAtCursor", "Default", "\n!!Hello!!", dotNetReference); 

    } 

 

    [JSInvokable] 

    public async Task UpdateValue(string updatedValue) 

    { 

        this.val = updatedValue; 

    } 

} 

 

[Script] 

window.insertAtCursor = function (id, myValue,dotnetref) { 

    var myField = document.getElementById(id); 

    //IE support 

    if (document.selection) { 

        myField.focus(); 

        sel = document.selection.createRange(); 

        sel.text = myValue; 

    } 

    //MOZILLA and others 

    else if (myField.selectionStart || myField.selectionStart == '0') { 

        var startPos = myField.selectionStart; 

        var endPos = myField.selectionEnd; 

        //myField.value = myField.value.substring(0, startPos) 

        //    + myValue 

        //    + myField.value.substring(endPos, myField.value.length); 

        var value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length); 

        dotnetref.invokeMethodAsync('UpdateValue', value); 

    } else { 

        //myField.value += myValue; 

        dotnetref.invokeMethodAsync('UpdateValue', myField.value + myValue); 

    } 

} 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/169258/ze/TextBox_Cursor732463663 

 

 

Kindly revert us if you have any concerns in it. 

 

Thanks, 

Deepak R.