How To translate “No Rows To Show” message in ag-grid?

问题

How to translate "No Rows To Show" message in ag-grid based on the user selected language?

I tired something like this.

gridOptions: GridOptions = <GridOptions> {
        rowSelection: 'single',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        suppressCellSelection: true,

        overlayNoRowsTemplate: '<span style="padding: 10px; border: 2px solid #444; background: lightgoldenrodyellow;">'+.......+'</span>'
    };

I need to add some thing at that .... place.

回答1:

According to the internationalization section you should be able to just specify this value into the gridOptions like so:

gridOptions: GridOptions = <GridOptions> {
        rowSelection: 'single',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        suppressCellSelection: true,

        localeText: {noRowsToShow: 'No hay nada'}
    };

That is in general how to tackle I18N for ag-grid.

More specifically to what you asked in regards to how to control this behavoir based on user selected language you would have to do something more like this (I am assuming you have some variable already set up that holds the selected language):

function internationalization (){
    return selectedLanguageVariable === 'es'/*or whatever code you use for spanish*/ ? {noRowsToShow: 'No hay nada'} : {noRowsToShow: 'No Rows'}
}

gridOptions: GridOptions = <GridOptions> {
    rowSelection: 'single',
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    suppressCellSelection: true,

    localeText: internationalization()
};

回答2:

put this parans in the grid HTML:

[overlayNoRowsTemplate] = "overlayNoRowsTemplate";

declare in class:

private overlayNoRowsTemplate;

and call in constructor

this.overlayNoRowsTemplate = "<span>This is a custom 'no rows' overlay</span>";

来源：https://stackoverflow.com/questions/40407578/how-to-translate-no-rows-to-show-message-in-ag-grid

标签

ag-grid