jQuery Grid: Localization

The Localization demo of the jQuery Grid.

A live JavaScript/jQuery example of jqxGrid, the jQWidgets Grid component, with its complete source code below. It is one of 139 jqxGrid demos for jQuery.

jqxGrid API used in this demo

showfilterrow property – Shows or hides the filter row.
selectionmode property – Sets or gets the selection mode.
autoheight property – Sets or gets the height of the grid to be equal to the summary height of the grid rows.
width property – Sets or gets the Grid's width.
columns property – Sets the Grid columns.
editable property – The editable property enables or disables the Grid editing feature.
filterable property – Enables or disables the Grid Filtering feature.
localization property – Localizes the Grid.
pageable property – Enables or disables the Grid Paging feature.
source property – Sets and gets the source.

Source code

To run it in your own page, load jqx.base.css, a theme and the library files below from npm (npm install jqwidgets-scripts) or the jsDelivr CDN, then add the markup and the script. jQuery is not required: jqxcore.js provides $. Getting started with jqxGrid shows the setup step by step.

The page loads jqx.base.css, a theme and these library files: jqxcore.js, jqxdata.js, jqxbuttons.js, jqxscrollbar.js, jqxlistbox.js, jqxdropdownlist.js, jqxmenu.js, jqxgrid.js, jqxgrid.filter.js, jqxgrid.sort.js, jqxgrid.edit.js, jqxgrid.selection.js, jqxpanel.js, jqxcalendar.js, jqxdatetimeinput.js, jqxgrid.pager.js, jqxnumberinput.js.

It also loads helper scripts of this demo site, which are not part of the library: demos.js (getWidth() and other layout helpers), generatedata.js (generatedata(), random sample rows), localization.js.

script.js

$(document).ready(function () {
    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);


    $("#grid").jqxGrid(
    {
        width: getWidth('Grid'),
        source: dataAdapter,
        showfilterrow: true,
        filterable: true,
        pageable: true,
        autoheight: true,
        editable: true,
        localization: getLocalization('de'),
        selectionmode: 'singlecell',
        columns: [
          { text: 'Name', columntype: 'textbox', filtertype: 'textbox', datafield: 'name', width: 180 },
          { 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' }
        ]
    });
});

body.html

<div id="grid">
</div>

Learn more

More jQuery Grid demos

Data Import from Excel – Import from Excel with jqxGrid.
Data Printing – Get the Grid's HTML, add it to a new browser window and trigger printing.
State Maintenance – Save/Load the Grid's state.
Adaptive Grid Layout – Grid Adaptive Layout Mode. In Adaptive Layout Mode, jqxGrid automatically shows and hides Grid columns depending on the Grid's width. The hidden columns are displayed after the "..." button is clicked.
Grid Lines Appearance – Show/hide grid row and column lines.
DropDown Grid – The Grid is used in a combination with the jqxDropDownButton widget.