Move selection to specific position in ##Platform_Name## Document editor

28 Mar 20253 minutes to read

Using SelectAsync API in selection module, You can set cursor position to anywhere in the document.

Selects content based on start and end hierarchical index

Hierarchical index will be in below format.

sectionIndex;blockIndex;offset

The following code snippet illustrate how to select using hierarchical index.

<button @onclick="SelectText">Select Text</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar="true"  Height="590px" >
</SfDocumentEditorContainer>
@code {
    SfDocumentEditorContainer container;

    // It will select the specified Position
    public async void SelectText()
    {
        // Selection will occur between provided start and end offset
        await container.DocumentEditor.Editor.InsertTextAsync("Welcome");
        // The below code will select the letters “We” from inserted text “Welcome”
        await container.DocumentEditor.Selection.SelectAsync("0;0;0", "0;0;2");
    }
}

The following table illustrates about Hierarchical index in detail.

Element Hierarchical Format Explanation
Move selection to Paragraph sectionIndex;blockIndex;offset
Ex: 0;0;0
It moves the cursor to the start of paragraph.
Move selection to Table sectionIndex;tableIndex;rowIndex;cellIndex;blockIndex;offset
Ex: 0;0;0;0;1;0
It moves the cursor to the second paragraph which is inside first row and cell of table.
Move selection to header pageIndex;H;sectionIndex;blockIndex;offset
Ex: 1;H;0;0;0
It moves cursor to the header in second page.
Move selection to Footer pageIndex;F;sectionIndex;blockIndex;offset
Ex: 1;F;0;0;0
It moves cursor to the footer in second page.

Get the selection start and end hierarchical index

Using GetStartOffsetAsync, you can get start hierarchical index which denotes the start index of current selection. Similarly, using GetEndOffsetAsync, you can get end hierarchical index which denotes the end index of current selection.

The following code snippet illustrate how to get the selection start and end offset on selection changes in document.

<SfDocumentEditorContainer @ref="container" EnableToolbar="true"  Height="590px" SelectionChanged="selectionChange">
</SfDocumentEditorContainer>
@code {
    SfDocumentEditorContainer container;
    private string startOffset;
    private string endOffset;

    // Event gets triggered on selection change in document
    public async void selectionChange()
    {
        //Get the start index of current selection
        startOffset = await container.DocumentEditor.Selection.GetStartOffsetAsync();
        //Get the end index of current selection
        endOffset = await container.DocumentEditor.Selection.GetEndOffsetAsync();
    }
}