Cardview

[VAISHNAVI P]

Hi,

 

I’m an intern the company has asked to evaluate jqwidgets and smartcards, When I tried in https://www.jqwidgets.com/ they gave me a link to your site to enable the calendar (date picker) in edits. Your Smartcard is exactly what we require, but they want me to build POC before deciding.

 

I’m trying to work on this, where I’m trying to call Json, I’m getting error on this it’s saying ‘No data to display’ But I have got data which worked on cardview. My requirement is I want a calendar on click.

 

Can You please let me know where am I wrong?

 

Please find my code below:

 

 

/// <reference path=”../../../source/typescript/smart.elements.d.ts” />

 

import {CardView, DataAdapter, CardViewColumn} from “../../../source/typescript/smart.elements”

 

window.Smart(‘#cardView’, class {

get properties() {

return {

dataSource: new window.Smart.DataAdapter(

{

 

virtualDataSource: function (resultCallbackFunction: any, details: any) {

fetch(‘http://localhost:8080/vetan/screen/getReimburse&#8217;,

{ method: ‘POST’ })

.then(function (response: { json: () => any }) {

 

resultCallbackFunction({

dataSource: response.json,

virtualDataSourceLength: parseInt(response.length)

})

});

},

dataFields:

[

‘expense: string’,

‘inv_no: number’,

‘inv_amt: number’,

‘inv_date: date’,

‘ent_amt: number’,

‘vendor: string’,

‘remarks: string’

],

}),

columns: [

{ label: ‘Expense’, dataField: ‘expense’, icon: ‘expense’ },

{ label: ‘Invoice No’, dataField: ‘inv_no’, icon: ‘inv_no’ },

{ label: ‘Amount’, dataField: ‘inv_amt’, icon: ‘inv_amt’},

{ label: ‘Invoice Date’, dataField: ‘inv_date’, icon: ‘inv_date’ },

{ label: ‘Entitled Amount’, dataField: ‘ent_amt’, icon: ‘ent_amt’ },

{ label: ‘Vendor’, dataField: ‘vendor’, icon: ‘vendor’ },

{ label: ‘Remarks’, dataField: ‘remarks’, icon: ‘remarks’}

 

],

scrolling: ‘virtual’,

titleField: ‘name’

};

}

});

 

 

 

 

 

 

[Yavor Dashev]

Hi VAISHANVIP,

I would like to ask you to create a more detailed code example in order to be able to give you a proper solution for your use case.

In the mean time I strongly suggest you having a look at the following demos:
https://www.htmlelements.com/demos/cardview/virtual-scroll/
https://www.htmlelements.com/demos/cardview/server-side-crud/
https://www.htmlelements.com/demos/cardview/server-side-sorting-filtering-mysql-php/

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[VAISHNAVI P]

Hi,

 

I’m an intern the company has asked to evaluate jqwidgets and smartcards, When I tried in https://www.jqwidgets.com/ they gave me a link to your site to enable the calendar (date picker) in edits. Your Smartcard is exactly what we require, but they want me to build POC before deciding.

 

I’m trying to work on this, where I’m trying to call Json, I’m getting error on this it’s saying ‘No data to display’ But I have got data which worked on cardview. My requirement is I want a calendar on click.

 

Can You please let me know where am I wrong?

 

Please find my code below:

 

 

/// <reference path=”../../../source/typescript/smart.elements.d.ts” />

 

import {CardView, DataAdapter, CardViewColumn} from “../../../source/typescript/smart.elements”

 

window.Smart(‘#cardView’, class {

get properties() {

return {

dataSource: new window.Smart.DataAdapter(

{

 

virtualDataSource: function (resultCallbackFunction: any, details: any) {

fetch(‘http://localhost:8080/vetan/screen/getReimburse&#8217;,

{ method: ‘POST’ })

.then(function (response: { json: () => any }) {

 

resultCallbackFunction({

dataSource: response.json,

virtualDataSourceLength: parseInt(response.length)

})

});

},

dataFields:

[

‘expense: string’,

‘inv_no: number’,

‘inv_amt: number’,

‘inv_date: date’,

‘ent_amt: number’,

‘vendor: string’,

‘remarks: string’

],

}),

columns: [

{ label: ‘Expense’, dataField: ‘expense’, icon: ‘expense’ },

{ label: ‘Invoice No’, dataField: ‘inv_no’, icon: ‘inv_no’ },

{ label: ‘Amount’, dataField: ‘inv_amt’, icon: ‘inv_amt’},

{ label: ‘Invoice Date’, dataField: ‘inv_date’, icon: ‘inv_date’ },

{ label: ‘Entitled Amount’, dataField: ‘ent_amt’, icon: ‘ent_amt’ },

{ label: ‘Vendor’, dataField: ‘vendor’, icon: ‘vendor’ },

{ label: ‘Remarks’, dataField: ‘remarks’, icon: ‘remarks’}

 

],

scrolling: ‘virtual’,

titleField: ‘name’

};

}

});

 

 

 

 

 

 

[Author]

Posts