JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Cardview
Tagged: smartcard
- This topic has 2 replies, 2 voices, and was last updated 3 years, 1 month ago by VAISHNAVI P.
-
AuthorPosts
-
November 2, 2021 at 11:16 am #102480VAISHNAVI PParticipant
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’,
{ 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’
};
}
});
November 2, 2021 at 4:49 pm #102485Yavor DashevParticipantHi 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 DashevSmart UI Team
https://www.htmlelements.com/November 2, 2021 at 4:49 pm #102481VAISHNAVI PParticipantHi,
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’,
{ 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’
};
}
});
-
AuthorPosts
- You must be logged in to reply to this topic.