Max rowHeight with white-space

[Domantas]

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: 

https://www.syncfusion.com/forums/141018/structured-display-in-grid-cell

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]

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> 

 

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

Regards, 

Madhu Sudhanan P 

[Domantas]

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]

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]

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]

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 

        }]; 

    } 

} 

 

https://stackblitz.com/edit/cell-pre-value?file=default.html 

   

Regards, 

Madhu Sudhanan P 

[Domantas]

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.

https://stackblitz.com/edit/cell-pre-value-cgoynv?file=default.component.ts

[Domantas]

Hello,

Is this still on review ? 

[Madhu Sudhanan P]

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. 

https://stackblitz.com/edit/cell-pre-value-change?file=default.component.ts 

Regards, 

Madhu Sudhanan P