1. Home
  2. Forum
  3. Angular - EJ 2
  4. insert table with Image and text

insert table with Image and text

Hi,

I am using Document editor for my Angular Application.


  1. I would like to insert Table with some Image and text. 
  2. I would like to hide border of the table

i.e. 
ImageImage
TextText


table, Image and text needs to be inserted Programmatically from .ts file


Regards,

Parth


8 Replies
SM Suriya Murugan Syncfusion Team July 7, 2021 08:16 AM UTC

Hi Parth, 

Syncfusion Greetings! 

We have prepared the sample for your requirement. 


1.      Used insertTable API, to insert table 
2.      InsertImage API to insert image 
3.      InsertText API to insert Text 
4.      To hide border, used applyborders API with noBorders Type. 
5.      Updated selection using select API to move selection to next cell. 

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



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”);  


Please check it and let us know if you have any questions. 

Regards,  
Suriya M.  



PK Parthkumar Kakadiya July 21, 2021 01:22 PM UTC

Hi Suriya, 

Thanks for your solution.

It help me to achieve some part of the requirement.


What want to achieve is:

  1. I want to insert table at the end of the document.
  2. How can I set courser to specific place (give example if possible)
  3. I have list of Images and it's name as an separate Array.  I wanted to insert Image and it's dynamically into table.
i.t Images = [Image1, Image2 , Image3  , Image4 , Image5]
name= [ name 1,  name 2 ,  name 3  ,  name 4 , name 5]

Image1
 Image2
 Image3
 Image4
 Image5
name1
 name2
 name3
 name4
 name5


Like this. If possible please provide me example.


Regards,

Parth


KB Kurthis Banu Abdul Majeeth Syncfusion Team July 22, 2021 12:57 PM UTC

Hi Parth, 

     Queries  
 
                                   Solution 
I want to insert table at the end of the document. 
 
 
Kindly refer the below code snippet to achieve your requirement. 
 
Code snippet: 
 
container.documentEditor.selection.moveToDocumentEnd(); 
container.documentEditor .editor .insertTable(2,2); 
 
Kindly refer below API documentation link : 
 
 
 
How can I set courser to specific place (give example if possible) 
 
You can set cursor position to anywhere in the document via select API of selection module.    
 
 
if block is a paragraph, then the hierarchical index will be like below.  
SectionIndex;ParagraphIndex;offset  
 
Sample code snippet  
 
documentEdContainerIns.documentEditor.editor.insertText("Welcome")  
 
documentEdContainerIns.documentEditor.selection.select("0;0;0", "0;0;2")  
 
The above code will select the letters “We” from inserted text “Welcome” 
 
 
I have list of Images and its name as an separate Array.  I wanted to insert Image and it's dynamically into table. 
 
We will share the sample based on your requirement on July 23,2021. 

Regards, 
Kurthis Banu A. 


SM Suriya Murugan Syncfusion Team July 26, 2021 03:25 AM UTC

Hi Parth, 

Thanks for your patience! 


We have modified the sample based on your requirement. 

1.       Using insertTable API parameter, rows and columns, you can customize required number of rows and cloumns. 
2.       MoveCursorToNextCell API used to navigate next cell. 
3.       MoveCursorToNextCell API used to navigate next row. 

Please let us know if you have any questions. 

Regards, 
Suriya M. 



PK Parthkumar Kakadiya July 27, 2021 10:09 AM UTC

Hi Suriya,


I would like to insert this table at the end of the document. for that I have used

container.documentEditor.selection.moveToDocumentEnd();


before we insert the table in to the editor.


Now with this code it's throwing error :



Just Try to add line which I added and try it .


One more scenario for same error: when you have some text into editor and than you go very end and click  at the editor and than try to add table throwing same error. 

Also provide solution for that error.

Regards,

Parth



SM Suriya Murugan Syncfusion Team July 28, 2021 05:40 AM UTC

Hi Parth, 

We have tried in below stackblitz and imported default document 


Can you please confirm are you facing reported issue for all document or specific document? if specific document, please share the document, we will check and provide you details. 

Regards, 
Suriya M. 


PK Parthkumar Kakadiya August 16, 2021 04:29 PM UTC

Hi,


Thanks a lot. You  solution works. 


Some more requirements:


  1. How to manually break line and start from the new line
  2. How to manually insert white-space 
  3. When the track changes is on and I try to remove the text from the editor it automatically opens track changes pan which I dont want to open at this place.  

please provide me some inputs on my requirement. Also please update this query https://www.syncfusion.com/forums/167811/possibility-to-manually-accept-or-decliend-track-change-changes 

Regards,
Parth

SM Suriya Murugan Syncfusion Team August 17, 2021 09:17 AM UTC

Hi Parth, 


Insert line break 
Using insertText API, you can insert line break. 
 
 
Code snippet:  
 
This.containerInstance.documentEditor.editor.insertText(“\v”);  
 
 
Insert white space 
Using insertText API, you can insert white space. 
 
 
Code snippet:  
 
this.containerInstance.documentEditor.editor. insertText(“ ”);  
 
Insert new line 
We are sorry to say that we don’t have API to insert new line programmatically. 
When the track changes is on and I try to remove the text from the editor it automatically opens track changes pan which I dont want to open at this place.  
We have prepared work-around solution for your requirement. Kindly check the below sample.  
 


 
In this sample, we are making another button to control the track changes pane open/close as a manual option using showRevisions property. Also, binded this property in selectionChange and contentChange. 
 
 

Please let us know if you have any questions. 

Regards, 
Suriya M. 


Loader.
Up arrow icon