Properties Panel - set text tab by default

[Cezary Szacherski]

Hello,
we are using yours DocumentEditor control from Angular library.
We have one small problem with properties pane - exactly with Table properties. 
We want to implement functionality that is setting up Text properties by default when some one sets up cursor on table in text.
Now in properties pane by default "table" tab is chosen - we want to have "text" by default. (look screen) 
Is there any workaround for that? 




Kind regards,
Czarek

[Harini Chellappa]

Hi Cezary, 

When current selection context type is within table, then table tab will be in selected state. There is no direct public API to switch between properties pane tab. 

In use case level, once table is selected or selection is within table, then you need table tab to be selected by default for applying table properties.  

Can you please share why you need text tab to be default when selection is within table? It will be helpful for us to provide solution at the earliest. 

Regards, 

Harini C 

[Cezary Szacherski]

I need that because this is requirement from our clients. 
If there is no standard/easy way using API at the moment to achieve that, I will try to explain that to them. 

[Harini Chellappa]

Hi Cezary, 

There is no direct API to achieve your requirement. As a workaround, you can select the text tab by taking tab object from element, since it’s an EJ2 tab component. 

Selection change event will trigger whenever there is a selection in editor. 

In that event, you can check whether current context type is table, if so, you can get the tab object and select the text tab using EJ2 tab component API. 

Code snippet 

onSelectionChange(): void { 

    var propertyPaneTab = document.querySelector(".e-de-prop-pane>.e-de-property-tab"); 

    if(this.container.documentEditor.selection.contextType.indexOf("Table") >= 0 && propertyPaneTab){ 

      (propertyPaneTab as any).ej2_instances[0].selectedItem = 1; 

    } 

  } 

 

 

For your reference, we have prepared the sample. Kindly check it. 

https://stackblitz.com/edit/angular-xsjguu?file=app.component.ts 

But, due to this there will be some changes in the current tab behavior which I mentioned in the previous update. In the above sample, whenever the current selection is within table, text tab will be shown as default. Hence if you select the whole table or row or cell, then text tab will be in default, instead of table tab. Once if you switch to table tab and apply table properties, it will switch to text tab based on current selection. Kindly check whether this satisfy your need. 

Please find the video of above mentioned behavior from below link. 

https://www.syncfusion.com/downloads/support/directtrac/general/7z/ScreenCapture_8-28-2020_10.21.13_PM.mp4457755699  

Regards, 

Harini C