JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › event and provided event object

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 14, 2023 at 1:45 pm #104510
    Peter
    Participant

    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.
    March 14, 2023 at 8:28 pm #104513
    ivanpeevski
    Participant

    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/

    March 16, 2023 at 10:54 am #104527
    Peter
    Participant

    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?

    March 16, 2023 at 9:24 pm #104531
    ivanpeevski
    Participant

    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/

     

    March 17, 2023 at 8:08 am #104543
    Peter
    Participant

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

    March 17, 2023 at 9:19 am #104547
    svetoslav_borislavov
    Participant

    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
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.