Products

[Peter]

This is true. So I only have to make translations of the phrases I use?

[Peter]

Thank you, it is done.

[Peter]

Ok, I wasn’t aware that some sections have documentation that other sections don’t. I’m using JavaScript so I haven’t been looking under the TypeScript section at all as I saw no reason to.

The “messages” object – where is this found?
And also, I understand this as a confirmation that no translation exist, I have to create it myself before the locale will have any effect, yeah?

[Peter]

Hmm if I’m to share an online demo of this it would be behind a login, which I shouldn’t share with everyone here.

There somewhere I can send this information that isn’t on this public forum?

[Peter]

In the code below “attachment_count” is “CellA”, and “Attachment” is “CellB” in regard to my initial post.

Grid and columns and settings:

var smart_grid_config = {
    dataSource: null,
    appearance: {
        alternationCount: 2,
        showRowHeader: true,
        showRowHeaderSelectIcon: true,
        showRowHeaderFocusIcon: true,
        allowHover: true
    },
    paging: {
        enabled: true,
        pageSize: 30,
        pageIndex: 0
    },
    pager: {
        visible: true
    },
    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: 'RowId', dataField: 'RowId', width: 0, visible: false
        },
        {
            label: '#', dataField: 'Line_Number', width: 50, freeze: true
        },
        {
            label: 'Template Name', dataField: 'Journal_Template_Name', visible: false
        },
        {
            label: 'Batch Name', dataField: 'Journal_Batch_Name', visible: false
        },
        {
            label: 'Dato', dataField: 'Posting_Date', width: 150, cellsFormat: 'dd-MM-yyyy'
        },
        {
            label: 'Document Type', dataField: 'Document_Type', visible: false
        },
        {
            label: 'Bilagsnr.', dataField: 'Document_No', width: 150
        },
        {
            label: 'Account Type', dataField: 'Account_Type', width: 150, visible: false /*, editor: {
                template: 'autoComplete',
                autoOpen: true,
                dropDownButtonPosition: 'right',
                dataSource: ['Finanskonti', 'Kunder', 'Leverandører']
            } */
        },
        {
            label: 'Konto', dataField: 'Account_No', width: 150
        },
        {
            label: 'Navn', dataField: 'AccountName', allowEdit: false
        },
        {
            label: 'Beskrivelse', dataField: 'Description'
        },
        {
            label: 'Currency', dataField: 'Currency_Code', visible: false
        },
        {
            label: 'Amount', dataField: 'Amount', editor: 'numberInput', visible: false
        },
        {
            label: 'Amount LCY', dataField: 'Amount_LCY', editor: 'numberInput', visible: false
        },
        {
            label: 'GenBusPosGroup', dataField: 'Gen_Bus_Posting_Group', visible: false
        },
        {
            label: 'GenProPosGroup', dataField: 'Gen_Prod_Posting_Group', visible: false
        },
        {
            label: 'VATBusPosGroup', dataField: 'VAT_Bus_Posting_Group', visible: false
        },
        {
            label: 'VATProPosGroup', dataField: 'VAT_Prod_Posting_Group', visible: false
        },
        {
            label: 'Udgift', dataField: 'Debit_Amount', editor: 'numberInput', width:100
        },
        {
            label: 'Indtægt', dataField: 'Credit_Amount', editor: 'numberInput', width:100
        },
        {
            label: 'VAT Amount', dataField: 'VAT_Amount', visible: false
        },
        {
            label: 'BalVAT Amount', dataField: 'Bal_VAT_Amount', editor: 'numberInput', visible: false
        },
        {
            label: 'BalAccount Type', dataField: 'Bal_Account_Type', visible: false
        },
        {
            label: 'Beholdningskonto', dataField: 'Bal_Account_No', width: 150, editor: {
                template: 'autoComplete',
                autoOpen: true,
                dropDownButtonPosition: 'right'
            }
        },
        {
            label: 'BalGenPosType', dataField: 'Bal_Gen_Posting_Type', visible: false
        },
        {
            label: 'On Hold', dataField: 'On_Hold', template: 'checkBox', editor: 'checkBox', visible: false
        },
        {
            label: '', dataField: 'Attachments', cellsVerticalAlign: 'middle', verticalAlign: 'middle', align: 'center', cellsAlign: 'center', width: 80, freeze: 'far', allowEdit: false, 
            template: function (formatObject)
            {
                const data = formatObject.row.data;
                //console.log('data.attachment_count: ' + data.attachment_count);
                if (data.attachment_count < 1)
                {
                    formatObject.template = '';
                }
                else if (data.attachment_count == 1)
                {
                    formatObject.template = init.icons.image.fa_font;
                }
                else
                {
                    formatObject.template = init.icons.images.fa_font;
                }
            }
        },
        {
            label: '', dataField: 'attachment_count', width: 40, allowEdit: false, visible: false
        }
    ],
    onLoad()
    {
        console.log('grid.onLoad');
    }
};

Data fields:

var smart_grid_data_fields = [
    'RowId: string',
    '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',
    'Attachments: string',
    'attachment_count: number'
];

Grid init:

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

                    config.dataSource = new Smart.DataAdapter(
                        {
                            dataSource: data_source, // not shown here, but is an array of data rows.
                            dataFields: smart_grid_data_fields
                        });

                    return config;
                }
            });

Also, onLoad in the grid config never seems to fire – at least the line is not written to the console as expected.

• This reply was modified 1 year, 8 months ago by Peter.

[Peter]

Using the custom example was just want I was looking for. However, it is behaving a but odd.

I have 13 rows where only 1 row has CellA = 2 and the rest have CellA = 0.
I’m trying to change the content of CellB based on this value.
So I’m doing the following on CellB column:

 {
label: '', dataField: 'CellB', cellsVerticalAlign: 'middle', verticalAlign: 'middle', align: 'center', cellsAlign: 'center', width: 80, freeze: 'far', allowEdit: false,
template: function (formatObject)
{
const data = formatObject.row.data;

console.log('data.CellA: ' + data.CellA);

if (data.CellA == 0)
{
formatObject.template = '';
}
else if (data.CellA == 1)
{
formatObject.template = '(font awesome icon X)';
}
else if (data.CellA > 1)
{
formatObject.template = '(font awesome icon Y)';
}
}
}

What I can see in the console is that the console.log line is fired 13 * 13 times.
(‘data.CellA: 2’ 1 time and ‘data.CellA: 0’ 12 times) * 13.

The method that “Smart('#grid', class ... etc. etc.” is called only once though, so what could be going on here?

[Peter]

Hi svetoslav,

Thank you for your response.

I have tried using this event and it triggers as expected, however the value that i returned at this point is a JavaScript Date object, not a text value, so it seems that if I’m to change what the user typed in the field, I need to catch the value before this point in time.

How/where should I be doing this?

[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');
}
};

[Peter]

Hmm apparently it seems that it has to do with how fast I type the value.

Ok, so let’s say that this works as intended, how do I act on what was typed in, and potentially change the value?

One thing could be to complete a date if the user types like “2” and then leaves the cell – I want to finis the value adding e.g. “02-02-2023”.
Also if the user types “0202” I want to change it to “02-02-2023” and for “02022023” -> “02-02-2023”.

Where is the correct place to catch this event and perform the action?

[Author]

Posts