jQuery UI Widgets Forums Angular JQXDataTable Height

This topic contains 2 replies, has 2 voices, and was last updated by  TusharPatil 1 month, 4 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • JQXDataTable Height #111926

    TusharPatil
    Participant

    Hi,

    We are using JQXDataTable with following options:

    <jqxDataTable 
                      #myGrid 
                      (onRowClick)="RowClick($event)"
                      [ready]="ready"
                      [theme]="'material'" 
                      [source]="dataAdapter"
                      [columns]="columns" 
                      [rowDetails]="true" 
                      [initRowDetails]="initRowDetails"
                      [sortable]="true"
                      [filterable]="true" 
                      [filterMode]="'advanced'"
                      [groups]="['itemname']" 
                      [groupsRenderer]="groupsRenderer"
                      [columnsResize]="true" 
                      [columnsReorder]="true" 
                      [showToolbar]="true" 
                      [renderToolbar]="createButtonsContainers"
                      [width]="'99.0%'" 
                      [height]="height" 
                      >
                    </jqxDataTable>

    The height is being set from the component (typescript). We are making use of the resize function of Windows and calculating the height of the table.

        height;
        @HostListener('window:resize', ['$event'])
        onResize(event) {
            this.height = event.target.innerHeight - 210;
        }
        getHeight() {
            window.dispatchEvent(new Event('resize'));
        }

    When the component is getting initialized for the first time, it is using the above code and calculates the size properly. But when the window is resized, it was expected to calculate the height based on the current state of the window. And well it is doing that too. but not getting applied to the table component.

    One thing I have observed that, this code works fine when the property [groups]=”[‘itemname’]” is removed from the jqxDataTable in the HTML file. But as soon as it is put back in the height is not applied on resize event. It stays at the same height which was calculated in the beginning.

    Can someone please help?

    Thanks in advance.

    JQXDataTable Height #111935

    Hristo
    Participant

    Hello TusharPatil,

    Is there any error message in the console?
    Also, I would like to suggest you try to use the .setOptions({ height: newHeight }) method.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    JQXDataTable Height #111937

    TusharPatil
    Participant

    Hi Hristo, you are a champ! Using the .setOptions from angular resolved the issue. Earlier I tried this.myGrid.height = newHeight; but it didn’t work. Well, thanks much for the resolution. BTW, there was no error on the console. It was clean. Perhaps this was not an error but it is somehow not reading the property “height” from the HTML when the window is resized.

    • This reply was modified 1 month, 4 weeks ago by  TusharPatil.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.