Setting height to header and columns

[rsilvaParticipant]

Hi
I’m using angular to set dinamic header height and I cannot find which property I should use. So far I’ve tried with columnsheight on the template and on code but is not working. I’ve seen examples like this http://jsfiddle.net/jqwidgets/LspfG/ but is javascript not angular.

Also, how can I get rows (not header) height to grow as content increases? Say I implement a multiline cell using cellrenderer and adding <br/> per each line?

Regards

[Yavor DashevParticipant]

Hi rsilva,

I would recommend you to take a look at this demo:
https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-computedcolumn.htm

And here are some modifications of the demo on how to achieve similar functionality:
//In your app.component.html file

<jqxGrid
    [width]="getWidth()" [source]="dataAdapter" [columns]="columns" 
    [editable]="true" [selectionmode]="'multiplecellsadvanced'"
    [columnsheight]="columnsheight"
    [rowsheight]="rowsHeight"
    >
</jqxGrid>

And in the app.component.ts file:

export class AppComponent {
   columnsheight: any = 50
   rowsHeight: any = 10
//rest of the code

Then in the cellsrenderer function in the ‘Total’ column:

 {
            text: 'Total', editable: false, datafield: 'total',
            cellsrenderer: (index: number, datafield: string, value: any, defaultvalue: any, column: any, rowdata: any): string => {
                let total = parseFloat(rowdata.price) * parseFloat(rowdata.quantity);
                if(total < 15){
                
                  return '<div style="margin: 4px;" class="jqx-right-align">' + this.dataAdapter.formatNumber(total, 'c2') + '</div>';

                }else {
                  this.rowsHeight = 50
                  return '<div style="margin: 4px;" class="jqx-right-align">' + this.dataAdapter.formatNumber(total, 'c2') + '<br> Cell value</div>';
                }
            }
        }

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts