JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › header visible
Tagged: grid headers
- This topic has 1 reply, 2 voices, and was last updated 3 years, 3 months ago by yavordashew.
-
AuthorPosts
-
June 15, 2021 at 7:47 pm #101890@gtz.comMember
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)
`
June 16, 2021 at 8:44 am #101892yavordashewMemberHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.