jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Localization

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by  Mariya 11 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Localization Posts
  • October 16, 2013 at 1:33 am Localization #30784

    rama
    Member

    When there is no data to display, we say “No data to display”. Is there a way to localize this string as well?

    October 16, 2013 at 7:04 am Localization #30803

    Mariya
    Participant

    Hi rama,

    Please take a look at the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme();
                var data = generatedata(250);
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'name', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'date', type: 'date' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                var getLocalization = function () {
                    var localizationobj = {};
                    localizationobj.pagergotopagestring = "Gehe zu:";
                    localizationobj.pagershowrowsstring = "Zeige Zeile:";
                    localizationobj.pagerrangestring = " von ";
                    localizationobj.pagernextbuttonstring = "voriger";
                    localizationobj.pagerpreviousbuttonstring = "nächster";
                    localizationobj.sortascendingstring = "Sortiere aufsteigend";
                    localizationobj.sortdescendingstring = "Sortiere absteigend";
                    localizationobj.sortremovestring = "Entferne Sortierung";
                    localizationobj.firstDay = 1;
                    localizationobj.emptydatastring = "New Text";
                    localizationobj.currencysymbol = "€";
                    localizationobj.currencysymbolposition = "after";
                    localizationobj.decimalseparator = ".";
                    localizationobj.thousandsseparator = ",";
                    var days = {
                        // full day names
                        names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
                        // abbreviated day names
                        namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
                        // shortest day names
                        namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
                    };
                    localizationobj.days = days;
                    var months = {
                        // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
                        names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
                        // abbreviated month names
                        namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
                    };
                    var patterns = {
                        d: "dd.MM.yyyy",
                        D: "dddd, d. MMMM yyyy",
                        t: "HH:mm",
                        T: "HH:mm:ss",
                        f: "dddd, d. MMMM yyyy HH:mm",
                        F: "dddd, d. MMMM yyyy HH:mm:ss",
                        M: "dd MMMM",
                        Y: "MMMM yyyy"
                    }
                    localizationobj.patterns = patterns;
                    localizationobj.months = months;
                    localizationobj.todaystring = "Heute";
                    localizationobj.clearstring = "Löschen";
                    return localizationobj;
                }
                $("#jqxgrid").jqxGrid(
                {
                    width: 685,
                    showfilterrow: true,
                    filterable: true,
                    pageable: true,
                    autoheight: true,
                    editable: true,
                    theme: theme,
                    localization: getLocalization(),
                    selectionmode: 'singlecell',
                    columns: [
                      { text: 'Name', columntype: 'textbox', filtertype: 'textbox', datafield: 'name', width: 115 },
                      { text: 'Produkt', filtertype: 'textbox', datafield: 'productname', width: 220 },
                      { text: 'Datum', datafield: 'date', columntype: 'datetimeinput', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
                      { text: 'Qt.', datafield: 'quantity', columntype: 'numberinput', filtertype: 'textbox', cellsalign: 'right', width: 60 },
                      { text: 'Preis', datafield: 'price', columntype: 'numberinput', filtertype: 'textbox', cellsformat: "c2", cellsalign: 'right' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    In order to localize the no data to display, you can use the ’emptydatastring’ as shown. I hope the example would work for you.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.