Structured display in grid cell

[Domantas]

Hello,

Got two question here about structured data displaying.

1. How can I display structured data with new lines and etc. in grid cell like:

2. What input component should I use to get it like textarea where I can enter multiple lines and save them as in picture below. Is the rich editor the only way ? And this entered text should be displayed in grid as new lines so this redirects to question number 1

[Thavasianand Sankaranarayanan]

Hi Domantas, 

 

Thanks for contacting Syncfusion support. 

 

Query : How can I display structured data with new lines and etc. in grid cell. What input component should I use to get it like textarea where I can enter multiple lines and save them as in picture below. Is the rich editor the only way?  

 

We have checked your query and yes, you can achieve your requirement by using RichTextEditor. We have prepared a sample where you can enter multiple lines and save them in grid cell. Please refer the below code example, sample link and documentation link. 

 

[app.component.ts] 

@Component({ 

    selector: 'app-root', 

    template: ` 

    <ejs-richtexteditor #t id='defaultRTE' [(value)]='value'></ejs-richtexteditor> 

    <button (click)="h(t)">Assign</button> 

    <ejs-grid #grid [dataSource]='data' allowTextWrap='true' 

    [textWrapSettings]='wrapSettings'  height='400'> 

    <e-columns> 

    <e-column field='Mainfieldsofinvention' headerText='Main fields of invention' width='150'></e-column> 

    </e-columns> 

    </ejs-grid>`, 

    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService], 

   styleUrls: ['./app.component.css'] 

}) 

export class AppComponent implements OnInit { 

 

    public data: Object[]; 

    public wrapSettings: TextWrapSettingsModel; 

    public value = ` 

    <p>The RichTextEditor triggers events based on its actions. </p> 

                        <p> The events can be used as an extension point to perform custom operations.</p> 

                        <ul> 

                            <li>created - Triggers when the component is rendered.</li> 

                            .  .  .  .  .  .  

                        </ul>`; 

    ngOnInit(): void { 

        this.data = []; 

        this.wrapSettings = { wrapMode: 'Content' }; 

    } 

    h(t: HTMLTextAreaElement) { 

        this.data = [{ 'Mainfieldsofinvention': t.value }];           // you can save the text in grid cell. 

    } 

} 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/RichTextEditor-487117188  

Documentation : https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started#insert-images-and-links  

Regards, 

Thavasianand S. 

[Domantas]

Hello,

Thank you for your answer, but I'm still having troubles when trying to display xml format in editor as it should be.

e.g. : 

this.value = `

<CD>

<TITLE>Empire Burlesque</TITLE>

<ARTIST>Bob Dylan</ARTIST>

<COUNTRY>USA</COUNTRY>

<COMPANY>Columbia</COMPANY>

<PRICE>10.90</PRICE>

<YEAR>1985</YEAR>

</CD>

<CD>

<TITLE>Hide your heart</TITLE>

<ARTIST>Bonnie Tyler</ARTIST>

<COUNTRY>UK</COUNTRY>

<COMPANY>CBS Records</COMPANY>

<PRICE>9.90</PRICE>

<YEAR>1988</YEAR>

</CD>`

This structure is displaying as in picture below, but I wan't it to be shown as in string, with all tags and new lines

[Madhu Sudhanan P]

Hi Domantas, 

You can use the below custom CSS and enable disableHtmlEncode property from column to display XML format in the grid. 

<ejs-grid [dataSource]='data'> 

    <e-columns> 

        <e-column field='XML' width='120' disableHtmlEncode="true"></e-column> 

    </e-columns> 

</ejs-grid> 

@Component({ 

  selector: 'app-container', 

  ..... 

  styles: [` 

    .e-grid.e-responsive .e-rowcell     { 

        white-space: pre; 

    } 

    `] 

}) 

export class AppComponent implements OnInit {. . . .  } 

Sample: https://stackblitz.com/edit/angular-ugfxbk?file=default.html 

 

https://ej2.syncfusion.com/angular/documentation/api/grid/columnDirective#disablehtmlencode 

Regards, 

Madhu Sudhanan P 

[Domantas]

Hi,

So the disableHTMLencode and white space pre fix did the job with the grid, but also I meant the issue with RichTextEditor.

I passed to RichTextEditor string value which contains some tag structured data and I want it to show as it comes (with tags and etc.):

<AlwaysVisibleTouchBarcodesButtons>

<Buttons>

<AlwaysVisibleTouchBarcodeButton>

<Barcode>7310791096803</Barcode>

<ButtonText>Mamoms</ButtonText>

</AlwaysVisibleTouchBarcodeButton>

<AlwaysVisibleTouchBarcodeButton>

<Barcode>1002</Barcode>

<ButtonText>Bananai</ButtonText>

</AlwaysVisibleTouchBarcodeButton>

<AlwaysVisibleTouchBarcodeButton>

<Barcode>4779020201877</Barcode>

<ButtonText>Alus</ButtonText>

</AlwaysVisibleTouchBarcodeButton>

<AlwaysVisibleTouchBarcodeButton>

<Barcode>8401</Barcode>

<ButtonText>Spurga</ButtonText>

</AlwaysVisibleTouchBarcodeButton>

<AlwaysVisibleTouchBarcodeButton>

<Barcode>1215</Barcode>

<ButtonText>Kokosas 2</ButtonText>

</AlwaysVisibleTouchBarcodeButton>

</Buttons>

</AlwaysVisibleTouchBarcodesButtons>

Html encode is disabled by default in RichTextEditor but it still creates it as HTML and renders as this:

Expected output:

[Thavasianand Sankaranarayanan]

Hi Team,   

   

We have checked your reported scenario and prepared sample based on your requirement.   

 

Refer the below code example. 

 

 

public onCreate(args): void {    

       this.rteObj.focusIn(); 

      this.rteObj.contentModule.getDocument().execCommand('insertText', true, this.content); 

     } 

 

 

 

Sample Link: https://stackblitz.com/edit/angular-dhauhv-x1z5b2?file=rich-text-editor.component.ts   

 

Regards,  

Thavasianand S.