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

Max rowHeight with white-space

Thread ID:

Created:

Updated:

Platform:

Replies:

142336 Jan 29,2019 07:41 AM UTC Feb 11,2019 06:35 PM UTC Angular - EJ 2 8
loading
Tags: Grid
Domantas
Asked On January 29, 2019 07:41 AM UTC

Hello,

I'm displaying structured data in grid and to display structured data in grid I'm using white-space: pre; css property as you suggested in this thread: 

But when I'm using white space pre, the row will spread as much as there's something to show and that's the issue, cause it will get way too big height.

So Query would be: How to set grid rows max height to work with white-space: pre; property


Madhu Sudhanan P [Syncfusion]
Replied On January 30, 2019 04:24 AM UTC

Hi Domantas, 

Thanks for contacting Syncfusion support. 

You can achieve max height of the reported case using the template column as follows. 

<ejs-grid [dataSource]='data'> 
    <e-columns> 
        <e-column field='XML' width='120'> 
          <ng-template #template let-data> 
            <div style="height:55px">{{data.XML}}</div> 
          </ng-template> 
        </e-column> 
    </e-columns> 
</ejs-grid> 

 


Regards, 
Madhu Sudhanan P 


Domantas
Replied On January 30, 2019 01:20 PM UTC

Hello,

Thank you for your answer. But, can you make an example where template is assigned programmatically ? 

Cause I use remote data, I don't have initial data ngOnInit() so I can't set variable to template and for other purposes it would be better if I could set it programmatically 

Query: Set template for column programmatically 

Madhu Sudhanan P [Syncfusion]
Replied On January 31, 2019 12:07 PM UTC

Hi Domantas,  

Thanks for the update.  

Could you please confirm whether you are using auto generated column or not, based on that we will update the sample for you.  

Regards,  
Madhu Sudhanan P  


Domantas
Replied On January 31, 2019 03:01 PM UTC

Hello,

Not sure what you've meant by auto generated column, but I'll show how we're adding them.

CustomGridComponent -> BaseGridComponent -> ejs-grid

As you can see in the picture, we set columns in our parent component, then we pass girdColumns with input to our BaseGridComponent and then afterViewInit() we're giving columns to ejs-grid. Template does  work if I set "template: '<div> test </div>'" in gridColumns property, but I can't user data variable, cause columns will be set in different component. So I want to set template programmatically before I pass gridColumns for ejs-grid



Madhu Sudhanan P [Syncfusion]
Replied On February 1, 2019 04:15 AM UTC

Hi Domantos, 

Thanks for the information. 

We have now modified the sample to pass the template programmatically using columns property as follows. 


<ng-template #template let-data> 
    <div style="height:55px">{{data.XML}}</div> 
</ng-template> 
<ejs-grid [dataSource]='data' [columns]="gridColumns"> 
</ejs-grid> 


export class DefaultComponent implements OnInit { 
   ... 
    public gridColumns: Object[]; 
 
    @ViewChild('template') 
    public template: Object; 
 
    .... 
    ngOnInit(): void { 
        ... 
        this.gridColumns = [{ 
          field: 'XML', 
          template: this.template // Programmatically assigned 
        }]; 
    } 
} 


 

   
Regards, 
Madhu Sudhanan P 


Domantas
Replied On February 1, 2019 10:15 AM UTC

Hello,

Thank you for your update, but in my case I want it a little bit different. So here you are assigning totally new column object to gridColumns, but what if I just want to loop through columns and update templates for specific columns. For example, lets say that every 10 seconds the column template would change depending on something and I can't give totally new columnObject to gridColumns, I just want to replace the template.

I've prepared the basic sample to understand what I was saying. The example isn't working but you will get the idea.


Domantas
Replied On February 8, 2019 02:27 PM UTC

Hello,

Is this still on review ? 

Madhu Sudhanan P [Syncfusion]
Replied On February 11, 2019 06:35 PM UTC

Hi Domantas, 

Sorry for the delayed response. 

As per your requirement we have modified the sample to refresh the template column dynamically. Here templateComplier method from the grid is used to compile the template at the client side.  


export class DefaultComponent implements OnInit { 
  . . . . . 
 
  ngAfterViewInit(): void { 
    let j = 0; 
    setInterval(() => { 
      for(let i = 0; i < this.gridColumns.length ; i++) { 
        if(this.gridColumns[i]["field"] == "XML") { 
          this.gridColumns[i]["template"] = j % 2 === 0 ? this.template : this.template5; 
          this.gridColumns[i]['templateFn'] = templateCompiler(this.gridColumns[i]["template"]); 
        } 
      } 
      this.grid.refreshColumns(); 
      j++; 
    }, 3000) 
  } 
} 


In this sample we have used two ng-template to switch between template value. 


Regards, 
Madhu Sudhanan P 


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

;