We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Structured display in grid cell

Thread ID:

Created:

Updated:

Platform:

Replies:

141018 Nov 19,2018 12:02 PM UTC Nov 30,2018 12:47 PM UTC Angular - EJ 2 5
loading
Tags: Grid
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



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. 
    } 
} 
 


Regards, 
Thavasianand S. 


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



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 {. . . .  } 



 


Regards, 
Madhu Sudhanan P 


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

<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 [Syncfusion]
Replied On November 30, 2018 12:47 PM UTC

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); 
     } 
 
 
 
 
Regards,  
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;