JQXDataTable Height

[TusharPatilParticipant]

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.

[HristoParticipant]

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

[TusharPatilParticipant]

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.

[Author]

Posts