How to insert text in particular cell in Table programmatically

[hardik]

https://ej2.syncfusion.com/angular/documentation/document-editor/table/#tables

Steps:

1. this.documentEditor.editor.insertTable();
2. this.documentEditor.editor.insertText('row1-col1');
3. this.documentEditor.editor.insertColumn();
4. this.documentEditor.editor.insertText('row1-col2');
5. this.documentEditor.editor.insertColumn();
6. this.documentEditor.editor.insertText('row1-col3');
7. this.documentEditor.editor.insertRow();
8. this.documentEditor.editor.insertText('row2-col1');

Now, how to insert text in the second row of the second column and third column.

One more question:

How to insert a text in any cell of the table

[Kurthis Banu Abdul Majeeth]

Hi hardik, 

We are sorry to say that Document Editor doesn’t have options to add text to cells programmatically. Manually, you have to click the cell and have to add content.  

You can select using hierarchal position.  

please refer the below link:  

https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#startoffset-code-classlanguage-textstringcode  

You can set cursor position to anywhere in the document via select API of selection module.  

https://ej2.syncfusion.com/angular/documentation/api/document-editor/selection/#select  

 

Sample code snippet  

StartOffset:  

var startOffset = containerInstance.documentEditor.selection.startOffset;  

 

EndOffset:  

var endOffset   = containerInstance.documentEditor.selection.endOffset  

select  

containerInstance.documentEditor.selection.select(startOffset, endOffset) ;  

Note:   

  

hierarchical index will be in below format.   

  

sectionIndex;blockIndex;offset   

  

If the block is a table, then the hierarchical index will be like below.   

  

SectionIndex;TableIndex;RowIndex;CellIndex;BlockIndex;offset   

  

Sample code snippet: 

containerInstance.documentEditor.editor.insertTable(2,2); 

please refer the below example for your reference: 

(e.g):  

You want insert text in the 0 row in 1 column: 

Welcome

containerInstance.documentEditor. selection.select("0;0;0;1;0;0", "0;0;0;1;0;0"); 

containerInstance.documentEditor.editor.insertText(“Welcome”); 

For your requirement: 

how to insert text in the second row of the second column and third column: 

containerInstance.documentEditor. selection.select("0;0;1;1;0;0", "0;0;1;1;0;0"); 

containerInstance.documentEditor. selection.select("0;0;1;2;0;0", "0;0;1;2;0;0"); 

Please let us know above will satisfy your requirement. 

Regards, 

Kurthis Banu A. 

[Kurthis Banu Abdul Majeeth]

Hi hardik,  

## how to insert text in the second row of the second column  

Please refer the below Code Snippet:  

 

 MoveCursorToNextCell()   

{  

    var startOffset=container.documentEditor.selection.startOffset; 

     var cellIndex= parseInt(startOffset.substring(6, 7)) + 1; 

     startOffset = startOffset.substring(0, 6) + cellIndex.toString() + startOffset.substring(7, startOffset.length); 

     container.documentEditor.selection.select(startOffset, startOffset); 

}  

 

Sample link:  

Please find the code details in index.ts and index.html   

   

https://stackblitz.com/edit/qtvhg4-8bzsn4?file=index.ts 

 

Steps:  

this.documentEditor.editor.insertTable();   

this.documentEditor.editor.insertText('row1-col1');   

this.documentEditor.editor.insertColumn();   

this.documentEditor.editor.insertText('row1-col2');   

this.documentEditor.editor.insertColumn();   

this.documentEditor.editor.insertText('row1-col3');   

this.documentEditor.editor.insertRow();   

this.documentEditor.editor.insertText('row2-col1');   

MoveCursorToNextCell();   

this.documentEditor.editor.insertText('row2-col2');   

MoveCursorToNextCell();   

this.documentEditor.editor.insertText('row2-col3');   

 

Regards,  

Kurthis Banu A.