Structured display in grid cell

Domantas

Asked On November 19, 2018 12:02 PM UTC

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

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On November 20, 2018 08:45 AM UTC

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.

Reply | Reply with quote

Domantas

Replied On November 26, 2018 12:44 PM UTC

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

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On November 27, 2018 11:39 AM UTC

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

Reply | Reply with quote

Domantas

Replied On November 29, 2018 02:54 PM UTC

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.):

<ButtonText>Mamoms</ButtonText>