Modifying/Creating a new language pack

Structure of a language pack

A language pack is essentially a javascript code file with constants for specific strings in the grid that can be localized. In addition to that, there are formats (e.g. currency format, date format, etc) that can be predefined to match the locale of the specific country.

In order to modify a language pack, just open the respective javascript file and edit it with your favourite text editor. For example, let's say we want to modify the English language pack. Opening the /js/i18n/grid.locale-en.js file in a text editor brings are something along the lines of (this is just a part of the file):

$.jgrid = {
   defaults : {
      recordtext: "View {0} - {1} of {2}",
      emptyrecords: "No records to view",
      loadtext: "Loading...",
      pgtext : "Page {0} of {1}"
   },
   search : {
      caption: "Search...",
      Find: "Find",
      Reset: "Reset",
      odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with',
            'does not begin with','is in','is not in','ends with',
            'does not end with','contains','does not contain'],
      groupOps: [   { op: "AND", text: "all" },   { op: "OR",  text: "any" }   ],
      matchText: " match",
      rulesText: " rules"
   },
   ...

Just modify any of the strings/rules you wish. The naming of the string is self-explanatory - for example in order to modify the pager text displaying the number of pages, just modify the pgtext variable in the defaults array. Some of the variables have parameters, e.g. {0}, {1}, etc - this is place for dynamic parameters for the respective string - e.g. pgtext requires two parameters - the current page and the total number of pages. They will be provided automatically by jqGrid.

You can also modify various locale specific formats in the same file. They are defined in the formatter portion of the localization file, for example (this is just a part of the formatter)

formatter : {
      integer : {thousandsSeparator: " ", defaultValue: '0'},
      number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},
      currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},
      date : {
         dayNames:   [
            "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
            "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
         ],
         monthNames: [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
            "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
         ],
         ...

Just modify anything you wish, like thousandsSeparator for integer format, or the month or dayNames. Finally, save the file with another name, for example, "grid.locale-custom.js" and include it in your page instead of the English file, e.g.

...
<head>  
<!-- The jQuery UI theme that will be used by the grid -->  
<link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.7.1.custom.css" />  

<!-- The jQuery UI theme extension jqGrid needs -->  
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />  

<!-- jQuery runtime minified -->  
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>  
<!-- The localization file we need, Custom in this case -->  
<script src="/js/i18n/grid.locale-custom.js" type="text/javascript"></script>  
<!-- The jqGrid client-side javascript -->  
<script src="/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
...
</head>
...