header visible

[@gtz.com]

Hi,
I’m using aurelia 2.0
If I hard code the json data or use you examples the grid works with he Header Buttons as expected. When I use an await with a fetch and verify that data has no undefined or null data, the coloum sorting and filters work but The Header Buttons [Customize Columns, Filter, Sort . Condtional Formating ] do not display anything
`
<div></div>
<div>
<div>
<div>export class Grid5 {</div>
<div>  constructor() {</div>
<div>  }</div>
<div>  onClick() {</div>
<div>    alert(‘this is ms fast!’ + this.firstname);</div>
<div>    console.log(‘this is ms fast clicked!’);</div>
<div>  }</div>
<div>  async sleep(ms) {</div>
<div>    return new Promise(resolve => setTimeout(resolve, ms));</div>
<div>  }</div>
<div>  async attached() {</div>
<div>    await this.getdata();</div>
<div>    const datasource = this.vendorarray;</div>
<div>    // alert(‘displaygrid ‘ + datasource.length)</div>
<div>    window.Smart(‘#grid’, class {</div>
<div>      get properties() {</div>
<div>        return {</div>
<div>          sorting: {</div>
<div>            enabled: true,</div>
<div>            mode: ‘many'</div>
<div>          },</div>
<div>          filtering: {</div>
<div>            enabled: true,</div>
<div>            filterRow: {</div>
<div>              visible: true</div>
<div>            },</div>
<div>          },</div>
<div>          header: {</div>
<div>            visible: true</div>
<div>          },</div>
<div>          dataSource: new window.Smart.DataAdapter({</div>
<div>            dataSource: datasource,</div>
<div>            dataFields: [</div>
<div>              ‘id: int’,</div>
<div>              ‘VendorID: string’,</div>
<div>              ‘CompanyName: string’,</div>
<div>              ‘City: string’,</div>
<div>               ‘ZipCode: string'</div>
<div></div>
<div>            ]</div>
<div>          }),</div>
<div>          columns: [</div>
<div>            { label: ‘id’, dataField: ‘id’, allowSort: false, allowHide: false, width: 100 },</div>
<div>            { label: ‘VendorID’, dataField: ‘VendorID’, allowSort: true, allowHide: false, width: 100 },</div>
<div>            { label: ‘CompanyName’, dataField: ‘CompanyName’, allowSort: true, width: 250 },</div>
<div>            { label: ‘City’, dataField: ‘City’, allowSort: true, width: 250 },</div>
</div>
<div>             { label: ‘ZipCode’, dataField: ‘ZipCode’, allowSort: true, width: 250 },</div>
<div></div>
<div>          ]</div>
<div>        };</div>
<div>      }</div>
<div>    });</div>
<div>  }</div>
<div>  async getdata() {</div>
<div>    const vendor = await fetch(‘https://backend.xxx.com/api/xxx/vendor&#8217;, {</div>
<div>      method: ‘get’,</div>
<div></div>
<div>      mode: ‘cors'</div>
<div>    })</div>
<div>      .then(response => response.json())</div>
<div>      .then(result => {</div>
<div>        console.log(‘Success:’, result);</div>
<div>        this.vendorarray = result</div>
<div>        console.log(this.vendorarray)</div>
<div>      })</div>
<div>      .catch(error => {</div>
<div>        console.error(‘Error:’, error);</div>
<div>      });</div>
<div></div>
<div>    let ct = 0</div>
<div>    let tenant2 = {}</div>
<div>    let vends = this.vendorarray.map(tenant => {</div>
<div></div>
<div>      ct++</div>
<div>      tenant.id = ct</div>
<div>      if (tenant.State === null) {</div>
<div>        tenant.State = ‘na'</div>
<div>      }</div>
<div>      if (tenant.City === null) {</div>
<div>        tenant.City = ‘na'</div>
<div>      }</div>
<div>      if (tenant.Address === null) {</div>
<div>        tenant.Address = ‘na'</div>
<div>      }</div>
<div>      if (tenant.ZipCode === null || tenant.ZipCode === ” || tenant.ZipCode === undefined) {</div>
<div>        tenant.ZipCode = ‘na'</div>
<div>      }</div>
<div></div>
<div>      return { id:tenant.id,VendorID:tenant.VendorID,CompanyName:tenant.CompanyName,City:tenant.City,ZipCode:tenant.ZipCode}</div>
<div>    }).sort();</div>
<div>    this.vendorarray = vends;</div>
<div>    return;</div>
<div>  }</div>
<div>}</div>
</div>
`
error
`
smart.grid.js:1006 Uncaught TypeError: Cannot read property ‘$’ of null
at HTMLElement.openSortPanel (smart.grid.js:1006)
at HTMLElement.o (smart.grid.js:859)
at n (smart.grid.js:1020)
at HTMLElement._headerClickHandler (smart.grid.js:1020)
at HTMLElement._headerClickHandler (smart.grid.js:922)
at HTMLDivElement.d (smart.grid.js:859)
at f.dispatch (smart.grid.js:859)
`

[yavordashew]

Hi jrt@gtz.com,
I will test the SmartGrid with Aurelia 2.0 and in the mean time its best to create a complete code example which reproduces the error that you get in order to able to properly assess the situation and give you a solution about it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts