Cannot read property 'appendChild' of undefined

[hank1991Participant]

ngAfterViewInit() {
    this.myGrid.width('100%');
  this.createButtons();

}
  ngOnInit() {
    // console.log(this.kindList);
    this._productKindService.getAllProductKind().subscribe((res: any) => {
      this.kindList = res;
      this.setData();
      console.log(res);
    });
  }
  setData(){
    this.source =
      {
        datatype: 'json',
        datafields: [
          {name: 'id', type: 'int'},
          {name: 'code', type: 'string'},
          {name: 'name', type: 'string'},
          // { name: 'UnitsInStock', type: 'float' },
          // { name: 'Discontinued', type: 'bool' }
        ],
        root: 'Products',
        record: '',
        id: 'ProductID',
        // url: '../assets/products.json'
        localdata: this.kindList,
        _cachedcolumns: null
      };
    this.dataAdapter = new jqx.dataAdapter(this.source);

  }
  createButtonsContainers(statusbar: any): void {
    let buttonsContainer = document.createElement('div');
    buttonsContainer.style.cssText = 'overflow: hidden; position: relative; margin: 5px;';

    let addButtonContainer = document.createElement('div');
    let deleteButtonContainer = document.createElement('div');
    let reloadButtonContainer = document.createElement('div');
    let searchButtonContainer = document.createElement('div');

    addButtonContainer.id = 'addButton';
    deleteButtonContainer.id = 'deleteButton';
    reloadButtonContainer.id = 'reloadButton';
    searchButtonContainer.id = 'searchButton';

    addButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
    deleteButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
    reloadButtonContainer.style.cssText = 'float: left; margin-left: 5px;';
    searchButtonContainer.style.cssText = 'float: left; margin-left: 5px;';

    buttonsContainer.appendChild(addButtonContainer);
    buttonsContainer.appendChild(deleteButtonContainer);
    buttonsContainer.appendChild(reloadButtonContainer);
    buttonsContainer.appendChild(searchButtonContainer);

    statusbar[0].appendChild(buttonsContainer);
  }

  createButtons(): void {
    let addButtonOptions = {
      width: 80, height: 25, value: 'Add',
      imgPosition: 'center', textPosition: 'center',
      textImageRelation: 'imageBeforeText'
    }
    let addButton = jqwidgets.createInstance('#addButton', 'jqxButton', addButtonOptions);

    let deleteButtonOptions = {
      width: 80, height: 25, value: 'Delete',
      imgPosition: 'center', textPosition: 'center',
      textImageRelation: 'imageBeforeText'
    }
    let deleteButton = jqwidgets.createInstance('#deleteButton', 'jqxButton', deleteButtonOptions);

    let reloadButtonOptions = {
      width: 80, height: 25, value: 'Reload',
      imgPosition: 'center', textPosition: 'center',
      textImageRelation: 'imageBeforeText'
    }
    let reloadButton = jqwidgets.createInstance('#reloadButton', 'jqxButton', reloadButtonOptions);

    let searchButtonOptions = {
      width: 80, height: 25, value: 'Find',
      imgPosition: 'center', textPosition: 'center',
      textImageRelation: 'imageBeforeText'
    }
    let searchButton = jqwidgets.createInstance('#searchButton', 'jqxButton', searchButtonOptions);

    // add new row.
    addButton.addEventHandler('click', (event: any): void => {
      let datarow = generatedata(1);
      this.myGrid.addrow(null, datarow[0]);
    });
    // delete selected row.
    deleteButton.addEventHandler('click', (event: any): void => {
      let selectedrowindex = this.myGrid.getselectedrowindex();
      let rowscount = this.myGrid.getdatainformation().rowscount;
      let id = this.myGrid.getrowid(selectedrowindex);
      this.myGrid.deleterow(id);
    });
    // reload grid data.
    reloadButton.addEventHandler('click', (event: any): void => {
      this.myGrid.source(this.setData());
    });
    // search for a record.
    searchButton.addEventHandler('click', (event: any): void => {
      this.myWindow.open();
      this.myWindow.move(60, 60);
    });
  }

[HristoParticipant]

Hello hank1991,

Could you clarify it, what happens?
About mentioned error in the title of the topic, it looks like something does not exist.
I would like to suggest you try to isolate this.createButtons();, just a moment, while you are doing tests.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts