Skip to content

Localization and Theming

Before to use the grid component you will need to determine which languages you will use and which css framework for styling your grids.

As of date of writing this documentation we support 41 languages and two css frameworks - jQuery UI and Bootstrap 3, 4, 5.

Localization

A complete list of available predefined language packs is in the path_to_dist/js/i18n folder with their filename. Language packs are in the form of javascript files, containing definitions for all strings in the grid that can be localized - this includes messages, captions, paging information, search/add/delete dialog labels, etc.

The name of language file has the following structure:

grid.locale-XX.js

where XX is ISO 639-1 code which identifies the language.

The language javascript files can be loaded before or after jqGrid library. Historically the language file should be loaded before the jqGrid library, so we will continue with this.

Guriddo jqGrid can support different languages on one page. This means that you can load two or more language files and use it for a particular grid.

Another feature is that the language set of Guriddo jqGrid can be loaded dynamically without to reload the page - this is in case when appropriate language files are loaded.

Guriddo jqGrid can't work properly if the language file is not loaded. Be a sure that this file is loaded when working with the grid and setup correctly.

Using predefined language packs

Since the grid is a component with combination of php code, Java Script and CSS files it is needed first to load the needed javascript and css files and then use the grid php classes.

In order to use a particular language pack, you need to include the javascript language pack to the head section of your page, after the jQuery library reference (since language packs depend on jQuery). The default setup for English localization look like this:

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

where path_to_dist is the path to the dist directory from the package. See Installation via composer

Dynamically set language

Dynamically set with PHP

It is possible to use more than one language pack in the page and dynamically determine which one to use.

By example let suppose that you have a multilingual application which support English and Bulgarian languages. To dynamically determine which language to load you will need first to include the both languages in the head section:

<head>   
    ...   
    <!-- jQuery runtime minified -->   
    <script src="path_to_dist/js/ext/jquery-min.js" type="text/javascript"></script>   
    <!-- The localization files we need, English and Bulgarian -->
    <script src="path_to_dist/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="path_to_dist/js/i18n/grid.locale-bg.js" type="text/javascript"></script>
    <!-- The jqGrid client-side javascript -->
    <script src="path_to_dist/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>

Then in the PHP script use the regional grid option to tell the grid which language to use.

<?php
...
$grid = new Guriddo\jqGrid\Render\Render($conn, 'pdo');
...
if($some_condition) {
    $grid->setGridOption(array(
        "regional"=>"bg"
    ));
} else {
    $grid->setGridOption(array(
        "regional"=>"en"
    ));
}

Where en and bg are ISO 639-1 codes

Having this it is possible to have two grids in the same page with different languages.

Dynamically set with JavaScript

Changing language dynamically is possible with the common jqGrid function setRegional. To call it use the following code:

$.jgrid.setReginal('grid_id', { regional : 'XX' });

where the grid_id is the id of the grid and XX and a two letter language code.

In this example we use a select html element to select the language dynamically.

<div style="margin-bottom: 10px">
   Select Language :
   <select id="lang">
       <option value="bg">Bulgarian</option>
       <option value="en" selected>English</option>
   </select>
</div>
<script>
      $("#lang").change(function(){
         var lng = $(this).val();
         if(lng) {
            $.jgrid.setRegional('grid',{regional: lng});
         }
    });
</script>

Modifying/Creating a new language pack

It is possible to modify and create your own language pack. To do this, please read the Java Script language setup of Guriddo jqGrid JavaScript lib

Right-To-Left languages

Some language locales require right-to-left (RTL) support. We are fully committed to that and provide the best right-to-left support in the industry. In order for this to work, just use the respective language locale javascript file and set the direction property of the grid to rtl, e.g.

<?php
...
$grid = new Guriddo\jqGrid\Render\Render($conn, 'pdo');
...
$grid->setGridOptions(array("direction"=>"rtl"));
?>

Theming

As of version 5 Guriddo jqGrid changes the way the styling of the grid is made. This mean that we have parametrize with classes every component of the grid. This allow us with little additions to make grid adoptable to any CSS framework.

Currently we have definitions for jQuery UI CSS Framework, Bootstrap v3, Bootstrap v4 and Bootstrap v5 CSS Framework

Using jQuery UI CSS Framework

The install package of jqGrid for PHP comes with just the default Redmond theme. It is available in the [path_to_dist/css/ext] folder of the install package. You can download any additional themes directly from jQuery UI's ThemeRoller site available here:

jQuery Theme Roller

There are currently 25 professional jQuery UI themes available. You can also create a new theme (either from scratch or based on another theme).

In addition to the "Redmond" theme, there is one more file in the [themes] folder - ui.jqgrid.css. This is the one and only Css file jqGrid for PHP needs for themeing in addition to the ThemeRoller theme. Just add it after you add the reference to the ThemeRoller theme in your PHP file.

Example:

<head> 
<link rel="stylesheet" type="text/css" href="path_to_dist/css/ext/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="path_to_dist/css/ui.jqgrid.css" /> 
...
</head>

Code Explanation: In the code above, the first stylesheet loads the CSS code for the jQuery UI theme selected. The second stylesheet loads the CSS settings for jqGrid itself.

The jQuery UI CSS is a default framework, so it is not necessary to write additional code ( except defining the css styles for it ).

Using Bootstrap v5 CSS Framework.

To setup Bootstrap 5 it is needed to load jqgrid css bootstrap 5 file, the Bootstrap 5 css file and the native Bootstrap 5 icon set. Below is a example using the Bootstrap 5 native icon set.

Note

As can be seen the Bootstrap5 has build in icon set and there is no need to download or include different iconic sets. Other icon set can be used with Bottstrap 5 - see Bootstrap 4 example.

<!DOCTYPE html> 
<html lang="en"> 
    <head>   
        <meta charset="utf-8" />   
        <!-- A link to a Bootstrap css -->   
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">   
        <!-- A link to a build in icon set css -->   
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">   
        <!-- A link to a jqGrid Bootstrap 5 css -->   
        <link rel="stylesheet" type="text/css" media="screen" href = "path_to_dist/css/ui.jqgrid-bootstrap5.css" /> 
        ...
    </head>
    ...
</html>

In case of using the Render class It is needed only to setup php code to tell the grid to use the Bootstrap 5 css.

With php code 

<?php
...
$grid = new Guriddo\jqGrid\Render\Render($conn, 'pdo');
...
$grid->setCssFrameWork('Bootstrap5', 'Bootstrap5');
...

The first parameter is the name of the css framework, the second parameter is the icon set.

In case of using other classes like Edit, jqGrid, Export use Java Script code after loading the jqGrid Java Script library

<!DOCTYPE html> 
<html lang="en">
<head>
....
<script> 
    $.jgrid.defaults.styleUI = 'Bootstrap5'; 
    $.jgrid.defaults.iconSet = 'Bootstrap5';  
</script> 
</head> 
<body> 
... 
</body> 
</html>

or setup these parameters ( styleUI, iconSet ) in jqGrid options object.

Using Bootstrap v4 CSS Framework.

To use this styling it is needed to include the appropriate files from the jqGrid package and to download additionally the iconic set. Currently we support the following icon sets: GitHub Octicons, Iconic and free Font Awesome.

The appropriate names of this option in grid options are: Octicons, Iconic, fontAwesome

To setup Bootstrap 4 it is needed to load jqgrid css bootstrap 4 file, the appropriate iconic CSS file downloaded from the links above and the the bootstrap css file. Below is a example using the Octicon icon set. 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <!-- A link to a Bootstrap css -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">     
   <!-- A link to a Octicons css -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
   <!-- A link to a jqGrid Bootstrap 4 css -->
   <link rel="stylesheet" type="text/css" media="screen" href="path_to_dist/css/ui.jqgrid-bootstrap4.css" />
    ...
</head>
<body>
...
</body>
</html>

With php code with Render class it is needed to do

<?php
...
$grid = new Guriddo\jqGrid\Render\Render($conn, 'pdo');
...
// icon set names can be: Octicons, Iconic, fontAwesome
$grid->setCssFrameWork('Bootstrap4', 'Octicons');
...

The first parameter is the name of the css framework, the second parameter is the icon set.

or

With Java Script code (when other clsses are used) after loading the jqGrid Java Script library

<!DOCTYPE html> 
<html lang="en">
<head>
....
<script> 
    $.jgrid.defaults.styleUI = 'Bootstrap4'; 
    $.jgrid.defaults.iconSet = 'Octicons';  

    //$.jgrid.defaults.iconSet = "Iconic";      
    //$.jgrid.defaults.iconSet = "fontAwesome";
</script> 
</head> 
<body> 
... 
</body> 
</html>