Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Yavor Dashev 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101890
    Avatar
    jrt@gtz.com
    Participant

    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’, {</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)

    `

    #101892
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.