JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › properties, events and methods
Tagged: Events, methods, properties
- This topic has 3 replies, 2 voices, and was last updated 1 year, 5 months ago by
Steven Peterson.
-
AuthorPosts
-
March 3, 2023 at 1:16 pm #104461
Peter
ParticipantHi,
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.
March 6, 2023 at 10:43 am #104479Steven Peterson
ParticipantHi,
You should pass a callback function to the onLoad property.
Here is an example of that: https://codepen.io/Steevee222/pen/OJojywmMany 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 BorislavovSmart UI Team
https://www.htmlelements.com/March 6, 2023 at 11:57 am #104481Peter
ParticipantHi 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'); } };
March 7, 2023 at 6:01 am #104487Steven Peterson
ParticipantHi,
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 PetersonSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.