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 2 years, 10 months ago by
VAISHNAVI P.
-
AuthorPosts
-
November 2, 2021 at 11:16 am #102480
VAISHNAVI P
ParticipantHi,
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 Dashev
ParticipantHi 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 P
ParticipantHi,
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.