Translate Data gird 2 pagination labels of and to in arabic

0
I am trying to translate the pagination labels 'of' and 'to' into Arabic for the default Data Grid 2 pagination. Despite attempting to use system texts, the labels aren't updating correctly. I've attached an image for reference. Could you please advise if there's an option or method to change these labels to Arabic?    
asked
8 answers
1

try this for multiple datagrid in page

setTimeout(function() {
    function translatePagingStatusToArabic() {
        var pagingStatusElements = document.querySelectorAll('.paging-status');
        
        pagingStatusElements.forEach(function(pagingStatus) {
            var text = pagingStatus.innerHTML.trim();
            var parts = text.match(/(\d+)\s*to\s*(\d+)\s*of\s*(\d+)/);

            if (parts && parts.length === 4) {
                var start = parts[1];
                var end = parts[2];
                var total = parts[3];
                var arabicText = `من ${start} إلى ${end} من ${total}`;
                pagingStatus.innerHTML = arabicText;
            }
        });
    }

    translatePagingStatusToArabic();

    var paginationButtons = document.querySelectorAll('.pagination-button');

    paginationButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            setTimeout(translatePagingStatusToArabic, 500);
        });
    });

}, 2000);

 

answered
0

 

Hi Kayalvizhi,

Batch translate doesn't support DG labels , but you can do via JS

try this in your html snippet setting javascript-

 

setTimeout(function() {
    function translatePagingStatusToArabic() {
        var pagingStatus = document.querySelector('.paging-status');
        if (pagingStatus) {
            // Extract numbers from the original text
            var text = pagingStatus.innerHTML.trim();
            var parts = text.match(/(\d+)\s*to\s*(\d+)\s*of\s*(\d+)/);

            if (parts && parts.length === 4) {
                var start = parts[1];
                var end = parts[2];
                var total = parts[3];

                // Create the Arabic translation
                var arabicText = `من ${start} إلى ${end} من ${total}`;

                // Set the Arabic text
                pagingStatus.innerHTML = arabicText;
            }
        }
    }

    translatePagingStatusToArabic();

    // Add an event listener to the buttons with the class 'pagination-button'
    var paginationButtons = document.querySelectorAll('.pagination-button');

    paginationButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            // Call the translation function with a 0.5-second delay on button click
            setTimeout(translatePagingStatusToArabic, 500);
        });
    });

}, 2000);  // Outer setTimeout with 2000ms delay

 

answered
0

Hi Sharad,

It is working fine. Thanks for your answer; it was very helpful to me.

 

answered
0

Hi Sharad,

 I have more than one data gird in same page its reflecting only one grid, other grid labels still same

image.png

answered
0

Hi Sharad,

It is working fine. Thanks for your answer; it was very helpful to me.

answered
0

There is a better solution, which modifies the labels via css, which is more robust and lessen disruptive then javascript. Did this a year ago, or so. Hm, since captain says "ready for take off", more details later. Ah, here is the startdoc I used: https://community.mendix.com/link/space/ui-%26-front-end/exchanges/41

answered
0

Hi Sharad,

It works, but sometimes it doesn't refresh properly. Since I have more than 100 records, it's not displaying the label correctly. Can you provide another solution?

answered
0

To anyone seeing this message, please up-vote this idea from Vojtěch Marek

https://community.mendix.com/link/space/widgets/ideas/4808

 

This may help us to have fix from Mendix.

answered