jQuery UI Widgets Forums Grid Setting height to header and columns

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 2 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • rsilva
    Participant

    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

    Setting height to header and columns #115062

    Yavor Dashev
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.