JQX Angular Grid Not working with auto row height And fix grid Height

[faizanParticipant]

Angular JQX Grid is not working with dynamic loaded component in row.

Below mentioned URL of JQX widget (Dynamic Components with Angular and jQWidgets WITH GRID) not working.
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-dynamic-components/index.htm?search=

When Initially loaded it works fine
screenshot

NOT WORKING : After scroll it get distorted the row height it start increasing with scroll.
screenshot-1
screenshot-2

Configuration
<jqxGrid #grid [autorowheight]=”true” [width]=”‘100%'” [pageable]=”true” [height]=”300″ [theme]=”‘metro'” [columns]=columns>

[MartinParticipant]

Hello faizan,

Thank you for your feedback!
Yes, this is a known issue and we are currently working to fix it.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[adminKeymaster]

Hi faizan,

The issue here, requires extension of the demo code and especially the app.component.ts.

The solution is:

import { jqxDomService } from './jqwidgets-dom.service';
import { Component, OnInit, EventEmitter } from '@angular/core';
import { jqxButtonComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxbuttons';
export class Hero {
    id: number;
    name: string;
	

}

@Component({
  selector: 'app-root',
  template: 

Angular Dynamic Component Loader

Id Name {{hero.id}} {{hero.name}}

{{clickMessage}}
`
})
export class AppComponent {
HEROES: Hero[] = [
{ id: 11, name: ‘Mr. Nice’ },
{ id: 12, name: ‘Narco’ },
{ id: 13, name: ‘Bombasto’ },
{ id: 14, name: ‘Celeritas’ },
{ id: 15, name: ‘Magneta’ },
{ id: 16, name: ‘RubberMan’ },
{ id: 17, name: ‘Dynama’ },
{ id: 18, name: ‘Dr IQ’ },
{ id: 19, name: ‘Magma’ },
{ id: 20, name: ‘Tornado’ }
]

clickMessage = ”;

onClickMe(event) {
this.clickMessage = ‘You are my hero ‘ + event.target.textContent;
}

constructor(private jqxDomService: jqxDomService) {

}

ngOnInit() {
}

columns: any[] =
[
{
text: ‘Id’, width: 110, datafield: ‘Id’,
createwidget: (row: number, column: any, value: string, htmlElement: HTMLElement): void => {
const that = this;

let container = document.createElement(‘div’);
htmlElement.style.overflow= “hidden”;
htmlElement.style.maxHeight = “30px”;
htmlElement.appendChild(container);
let result = this.jqxDomService.loadComponent(jqxButtonComponent, container);
(result.componentRef.instance).autoCreate = false;
(result.componentRef.instance).onClick.subscribe((clickEvent, value) => {
that.onClickMe(clickEvent);
});
(result.componentRef.instance).createComponent({value: value, height:30, width: 100});
},
initwidget: (row: number, column: any, value: any, htmlElement: HTMLElement): void => { }
},
{ text: ‘Name’, datafield: ‘Name’ }

];
}`

Best Regards,
Peter

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts