event and provided event object

[Peter]

Hi,

I’m trying to act on some events, in this case ‘cellClick’, but I unsure which properties the event object provide and where I can see a description of this object.

The following:

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

grid.locale = 'da'; // doesn't seem to have any effect.

grid.addEventListener('cellClick', function (e)
{
   console.log('[cellClick] e.detail.id: ' + e.detail.id);
   console.log('[cellClick] e.detail.dataField: ' + e.detail.dataField);
   console.log('[cellClick] e.detail.cell: ' + e.detail.cell);
});

results in (when clicking on a cell with a value):

[cellClick] e.detail.id: 0
[cellClick] e.detail.dataField: nameOfColumn
[cellClick] e.detail.cell: [object Object]

Where can I see a description of Smart.Grid.Cell?

Also, the “locale” doesn’t seem to have any effect – I would assume that texts in sorting drop-downs etc. should change with the locale or maybe “da” doesn’t exist?

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

[ivanpeevski]

Hi Peter,

 

In the Grid API Typescript section, you can see the properties of the GridCell object.

 

The translation of the Grid is not automatic. Before you set the ‘locale’, you should set the translations inside the ‘messages’ property, like this:

messages: {“da”: {….}}

 

Then, set the locale to ‘da’ and the Grid will be translated.

We have a detailed guide on Localization here – Grid Localization

Best Regards,
Ivan Peevski

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

[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?

[ivanpeevski]

Hi Peter,

The full list of messages option is in the Grid API, under the ‘messages’ property – https://www.htmlelements.com/docs/grid-api/#toc-messages_any

Regarding translations – we don’t have any ready translations, since many of the ‘messages’ phrases can be translated in multiple ways depending on the context, instead providing the tools for localization gives more flexibility to developers.

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[Peter]

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

[svetoslav_borislavov]

Hi,

Yes, as my colleague said. If you want to translate to ‘de’, for example, the messages object will be something like this:
messages: {
‘de’: {
‘pagerFirstButton’: ‘First’,
‘min’: ‘Min value: {{value}}’
}
}

Please see the Localization guide, my colleague forwarded to you, to get a full understanding.
Here is a demo with a localized grid: https://www.htmlelements.com/demos/grid/localization/
Codepen: https://codepen.io/svetoslavjqwidgets/pen/JjaZaKW

I hope this helps!

Best Regards,
Svetoslav Borislavov

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

[Author]

Posts