Questions about cells in the document editor

[François]

Hi,

I'm currently working on tables in the document editor,

when my selection caret is in a cell, I can retrieve some cell's informations in the SelectionCellFormat property like margins, but there is no information about cell's borders, where can I found it?

Second question, programmatically I would like to loop in each cells of a selected table, is it possible to do that? the purpose is to insert an image in each cell.

Regards,

François

[Harini Chellappa]

Hi François, 

Thank you for contacting syncfusion support. 

when my selection caret is in a cell, I can retrieve some cell's informations in the SelectionCellFormat property like margins, but there is no information about cell's borders, where can I found it?	Currently, document doesn’t provide border information’s on selection cell format. We are validating on this. We will update further details on this by March 13, 2020.
Second question, programmatically I would like to loop in each cells of a selected table, is it possible to do that? the purpose is to insert an image in each cell.	Currently, document editor doesn’t provide any API to navigate cells. Can you please share your usecase scenario in detail? This will be helpful for us to provide better solution at earliest.

 

Regards, 

Harini C 

[François]

Hi Harini,

Thank you for your answer,

Good to know about the borders.

About the cells navigation, I'm working on an application for people making documents which can contain a lot of photos.
My usecase scenario is that the application provides the functionnality to choose photos, to choose the number of photos per page, and then to produce theses pages so the users do not have to position the photos one by one in the document. The use of the table is to have a beautifull structure in the page.

So my 'dream' is that the documenteditor API, after selecting the table, could navigate in each cell and each row of the table to insert whatever I want programmatically.

Thank's again for your answers,

Regards,

François

[Suriya Murugan]

Hi Francois, 

Currently, DocumentEditor does not have support for insert image at each cells of table. We have already logged the feature request for your requirement. We will implement this feature in any of our upcoming release.  

You can track the status of feature through below feedback link: 

https://www.syncfusion.com/feedback/5669/add-support-for-insert-table-with-text-in-each-cell 

## Cell borders 

We will provide details by March 13,2020. 

Regards, 

Suriya M. 

[Harini Chellappa]

Hi Francois, 

Reg cell borders 

We need some additional time to validate the cell borders feature. We will update further details on this March 17, 2020. 

Regards, 

Harini C 

[Harini Chellappa]

Hi François, 

Reg cell borders 

We have considered this as feature request. We will implement this feature in any of our upcoming release. We will update scheduled status of the below feedback link once it is taken for implementation. We will update you once this feature is implemented.  

Feature status can be tracked from the below feedback link. 

https://www.syncfusion.com/feedback/12798/support-to-retrieve-borders-in-a-cell-based-on-selection 

Regards, 

Harini C 

[Kurthis Banu Abdul Majeeth]

 Hi Francois,  

Regarding: Navigate each cell and row in a table and insert content (text or image) 

You can be achieving your requirement of inserting table with text/image by following steps, 

1. Insert table using `insertTable` API in editor module. 

2. Once table inserted, cursor will be automatically placed inside first cell. 

3. Insert text using `insertText` API or image using `insertImage` in editor module. 

4. Then navigate to next cell and insert text or image. Continue till all the cells are filled with content. 

 

You can use the following functions to navigate between the cells inside a table through code. 

function moveCursorToCellStart(selection: Selection): Boolean { 

  if (selection.contextType.includes('Table')) { 

    selection.selectCell(); 

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

    return true; 

  } 

  return false; 

} 

function moveCursorToCellEnd(selection: Selection): Boolean { 

  if (selection.contextType.includes('Table')) { 

    selection.selectCell(); 

    selection.select(selection.endOffset, selection.endOffset); 

    return true; 

  } 

  return false; 

} 

function moveCursorToNextCellStart(selection: Selection): Boolean { 

  if (selection.contextType.includes('Table')) { 

    selection.selectCell(); 

selection.select(selection.endOffset, selection.endOffset); 

    selection.moveToNextCharacter(); 

    if (!selection.contextType.includes('Table')) { 

      selection.moveToPreviousCharacter(); 

      return false; 

    } 

    return true; 

  } 

  return false; 

} 

function moveCursorToPreviousCellEnd(selection: Selection): Boolean { 

  if (selection.contextType.includes('Table')) { 

    selection.selectCell(); 

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

    selection.moveToPreviousCharacter(); 

    if (!selection.contextType.includes('Table')) { 

      selection.moveToNextCharacter(); 

      return false; 

    } 

    return true; 

  } 

  return false; 

} 

 

The following code example illustrate how to insert a table with text in Document editor component. 

function onInsertTable(): void { 

  var rowCount = 3; 

  var columnCount = 3; 

  container.documentEditor.editor.insertTable(rowCount, columnCount); 

  for (var i = 0; i < rowCount * columnCount; i++) { 

      //Inserts the text to cursor position. 

    container.documentEditor.editor.insertText('Cell ' + (i + 1).toString()); 

    if (i < rowCount * columnCount - 1) { 

        //Skips moving cursor to next cell when it reached the last cell. 

      var isNavigated = moveCursorToNextCellStart(container.documentEditor.selection); 

      if (!isNavigated) { 

        break; 

      } 

    } 

  } 

} 

 

The following code example illustrate how to insert a table with image in Document editor component. 

function onInsertTable(): void { 

  var rowCount = 3; 

  var columnCount = 3; 

  container.documentEditor.editor.insertTable(rowCount, columnCount); 

  for (var i = 0; i < rowCount * columnCount; i++) { 

      //Inserts the image to cursor position. 

    container.documentEditor.editor.insertImage("https://raw.githubusercontent.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/master/ASP.NET%20Core/appData.PNG", 150, 60); 

    if (i < rowCount * columnCount - 1) { 

        //Skips moving cursor to next cell when it reached the last cell. 

      var isNavigated = moveCursorToNextCellStart(container.documentEditor.selection); 

      if (!isNavigated) { 

        break; 

      } 

    } 

  } 

} 

Please let us know if you have any other questions. 

Regards, 

Kurthis Banu A.