properties, events and methods

[Peter]

Hi,

I’m a little unsure of how and where these are to be used.

I have a hard time finding examples showing how they are used. e.g. if I wanted to act on the grid initializing having complete I would assume that this be an event, but it doesn’t seem to be – instead the is an onLoad property listed, which seems to be what I’m looking for, but there is no example of how to use it, at least I can’t find it.

[Steven Peterson]

Hi,

You should pass a callback function to the onLoad property.
Here is an example of that: https://codepen.io/Steevee222/pen/OJojywm

Many demos of our properties and events, you may find here: https://www.htmlelements.com/demos/grid/overview/
This is our documentation of the Grid: https://www.htmlelements.com/docs/grid/
along with its API: https://www.htmlelements.com/docs/grid/

I hope now you are familiar with the usage of our properties

Best Regards,
Svetoslav Borislavov

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

[Peter]

Hi Svetoslav,

I know of these links – I just didn’t find the samples that I was looking for. Your first link however, shows me how and where to use onLoad, which I was looking for.
I can not make it work though – maybe it has something to do with how/when I set the configuration for the grid…

the grid object on my page is set just as the page has completed loading:

grid = document.querySelector('smart-grid');

Then later when I have retrieved that data I want to load into the grid, along with some other data, I call my grid_init method:

function grid_init()
{
Smart('#grid', class
{
get properties()
{
var config = smart_grid_config;

config.dataSource = new Smart.DataAdapter(
{
"dataSource": lj_data,
"dataFields": smart_grid_data_fields
});

return config;
}
});
}

The page uses a javascrit file that contains this:

var smart_grid_data_fields = [
'Line_Number: number',
'Journal_Template_Name: string',
'Journal_Batch_Name: string',
'Posting_Date: date',
'Document_Type: string',
'Document_No: string',
'Account_Type: string',
'Account_No: string',
'AccountName: string',
'Description: string',
'Currency_Code: string',
'Amount: number',
'Amount_LCY: number',
'Gen_Bus_Posting_Group: string',
'Gen_Prod_Posting_Group: string',
'VAT_Bus_Posting_Group: string',
'VAT_Prod_Posting_Group: string',
'Debit_Amount: number',
'Credit_Amount: number',
'VAT_Amount: number',
'Bal_VAT_Amount: number',
'Bal_Account_Type: string',
'Bal_Account_No: string',
'Bal_Gen_Posting_Type: string',
'On_Hold: bool'
];

var smart_grid_config = {
dataSource: null,
appearance: {
alternationCount: 2,
showRowHeader: true,
showRowHeaderSelectIcon: true,
showRowHeaderFocusIcon: true,
allowHover: true
},
paging: {
enabled: false
},
pager: {
visible: false
},
sorting: {
enabled: true,
mode: 'many'
/*commandKey: 'altKey'*/
},
filtering: {
enabled: true
},
editing: {
enabled: true,
mode: 'cell',
addNewRow: {
autoCreate: true
}
},
selection: {
enabled: true,
allowCellSelection: true,
//allowRowHeaderSelection: true,
//allowColumnHeaderSelection: true,
mode: 'extended'
},
summaryRow: {
visible: false,
editing: true
},
behavior: { columnResizeMode: 'growAndShrink' },
/*keyboardNavigation: true,*/
columns: [
{
label: '#', dataField: 'Line_Number', width: 50
},
{
label: 'Template Name', dataField: 'Journal_Template_Name', width: 150, visible: false
},
{
label: 'Batch Name', dataField: 'Journal_Batch_Name', width: 150, visible: false
},
{
label: 'Date', dataField: 'Posting_Date', dataType: 'date', cellsFormat: 'dd-MM-yyyy', width: 150, editor: {
template: 'dateTimePicker',
formatString: 'dd-MM-yyyy',
onInit(index, dataField, editor)
{
},
onRenader()
{

}
}
/*label: 'Date', dataField: 'Posting_Date', dataType: 'date', cellsFormat: 'dd-MM-yyyy', width: 150, editor: 'dateInput', */
//formatFunction(inp)
//{
// const dt = new Date();

// console.log('inp.value: '+ inp.value);

// inp.value = date_auto_complete_dmy(dt.getDate() +'-'+ dt.getMonth() +'-'+ dt.getFullYear());
//}
},
{
label: 'Document Type', dataField: 'Document_Type', width: 150
},
{
label: 'Document No', dataField: 'Document_No', width: 150
},
{
label: 'Account Type', dataField: 'Account_Type', width: 150
},
{
label: 'Account No', dataField: 'Account_No', width: 150
},
{
label: 'Account Name', dataField: 'AccountName', width: 150
},
{
label: 'Description', dataField: 'Description', width: 150
},
{
label: 'Currency', dataField: 'Currency_Code', width: 150
},
{
label: 'Amount', dataField: 'Amount', width: 100, editor: 'numberInput'
},
{
label: 'Amount LCY', dataField: 'Amount_LCY', width: 100, editor: 'numberInput', visible: false
},
{
label: 'GenBusPosGroup', dataField: 'Gen_Bus_Posting_Group', width: 150, visible: false
},
{
label: 'GenProPosGroup', dataField: 'Gen_Prod_Posting_Group', width: 150, visible: false
},
{
label: 'VATBusPosGroup', dataField: 'VAT_Bus_Posting_Group', width: 150, visible: false
},
{
label: 'VATProPosGroup', dataField: 'VAT_Prod_Posting_Group', width: 150
},
{
label: 'Deb. Amount', dataField: 'Debit_Amount', width: 100, editor: 'numberInput', visible: false
},
{
label: 'Cre. Amount', dataField: 'Credit_Amount', width: 100, editor: 'numberInput', visible: false
},
{
label: 'VAT Amount', dataField: 'VAT_Amount', width: 100
},
{
label: 'BalVAT Amount', dataField: 'Bal_VAT_Amount', width: 120, editor: 'numberInput', visible: false
},
{
label: 'BalAccount Type', dataField: 'Bal_Account_Type', width: 150
},
{
label: 'BalAccount No', dataField: 'Bal_Account_No', width: 120
},
{
label: 'BalGenPosType', dataField: 'Bal_Gen_Posting_Type', width: 120, visible: false
},
{
label: 'On Hold', dataField: 'On_Hold', width: 80, template: 'checkBox', editor: 'checkBox', visible: false
}
],
onLoad() {
console.log('grid initialized');
}
};

[Steven Peterson]

Hi,

Can you please share a whole demo of the problem
I have tried to reproduce the problem but without success.

Here is the reproduction of your case, the onLoad works: https://codepen.io/Steevee222/pen/RwYZemm

You can send the demo here support@jqwidgets.com

Best Regards,
Steven Peterson

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

[Author]

Posts