Grid

[angulardev19Participant]

Hi,

I am facing the wired issue of a grid in the popup. I open a popup with jqxgrid. When the popup is open the grid header is not loaded sometimes and sometimes it workes fine. Let me know as soon as possible.

Here is the code for popup component .html:

 <jqxGrid #itemDetailGrid [theme]="'imms'" [width]="'100%'" [autoheight]="true" [source]="detailDataAdapter"
    [pageable]="true" [columns]="detailColumns" [sortable]="true" [filterable]="true" [editable]="true"
    [showfilterrow]="true" [autoloadstate]="true" [columnsreorder]="true" [columnsmenu]="false"
    (onCelldoubleclick)="Celldoubleclick($event)">

Code for .ts file

export class SearchitemComponent implements OnInit {

  @Input() inputItemCode;
  @Input() inputResponsDataField: any;
  @Input() inputTextDataField: any;
  @Input() inputDataAllocation: any;
  @Input() inputDataFieldList: any;

  @Output() code = new EventEmitter<string>();

  @ViewChild('itemDetailGrid') itemDetailGrid: jqxGridComponent;
  detailSource: any;
  detailDataAdapter: any;
  detailColumns = [];
  dataAllocation = [];
  commonResourceModel: any = {};
  pager: any = {};
  dataFields = [];
  textField = [];
  formGroup: FormGroup;

  constructor(private alertService: AlertService,
    private resourceService: ResourceService,
    private pagerServcie: PagerService,
    private fb: FormBuilder,
    private modelService: NgbModal,
    private cdref: ChangeDetectorRef) { }

  ngOnInit() {
    this.createFormGroup();
    this.loadResoruce();
    this.formGroup.controls['item'].setValue(this.inputItemCode);

  }

  createFormGroup() {
    this.formGroup = this.fb.group({
      item: ''
    });
  }

  private loadResoruce() {
    this.resourceService.loadResoruce(ResourceFilePath.common).pipe(first()).subscribe(
      response => {
        this.commonResourceModel = response;
        let responsDataField = this.inputResponsDataField;
        let textDataField = this.inputTextDataField;
        this.dataFields.push(responsDataField);
        this.textField.push(textDataField);
        this.bindGridSource();
        this.bindGridColumns();
        this.onSearchItemCode();
      },
      error => {
        this.alertService.showError(Utils.formatError(error));
      });
  }

  private bindGridColumns() {
    this.detailColumns = [];
    for (let i = 0; i < this.dataFields[0].length; i++) {
      this.detailColumns.push(
        { text: this.textField[0][i], dataField: this.dataFields[0][i], editable: false },
      );
    }
  }

  private bindGridSource() {
    // Dynamic data pass here...
    this.dataAllocation = this.inputDataAllocation;

    let dataFieldList = this.inputDataFieldList;

    this.detailSource = {
      datatype: 'json',
      localdata: this.dataAllocation,
      datafields: dataFieldList,
      cache: false
    };
    this.detailDataAdapter = new jqx.dataAdapter(this.detailSource);
    this.itemDetailGrid.hideloadelement();
    this.itemDetailGrid.beginupdate();
    this.itemDetailGrid.endupdate();
  }

  Celldoubleclick(event: any) {
    // this.itemcode = event.args.value;
    this.code.emit(event.args.value);
    this.modelService.dismissAll();
  }

  onSearchItemCode() {
    let code = this.formGroup.controls['item'].value;
    let newSource = this.dataAllocation.find(x => x.itemCode === code);
    this.detailSource = {
      datatype: 'json',
      localdata: newSource,
      cache: false
    };
    this.detailDataAdapter = new jqx.dataAdapter(this.detailSource);
  }

  onClose() {
    this.modelService.dismissAll();
  }

  onKeyUP(event: any) {
    if (event.target.value === '') {
      this.detailSource = {
        datatype: 'json',
        localdata: this.dataAllocation,
        cache: false
      };
      this.detailDataAdapter = new jqx.dataAdapter(this.detailSource);
    } else {
      let code = event.target.value;
      let newSource = this.dataAllocation.find(x => x.itemCode === code);
      this.detailSource = {
        datatype: 'json',
        localdata: newSource,
        cache: false
      };
      this.detailDataAdapter = new jqx.dataAdapter(this.detailSource);
    }
  }

}

[TodorParticipant]

Hello angulardev19,

Please share a stackblitz.com example demonstrating the reported issue, so that we may determine what causes it.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts