### PythonGrid Basic Datagrid Example

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/index.html

Demonstrates the basic setup and usage of a PythonGrid datagrid. This example likely involves initializing a datagrid object and rendering it within an HTML template.

```Python
from pygrid import PyGrid

# Assuming 'data' is a list of dictionaries or similar structure
datagrid = PyGrid(data)

# Further configurations would follow...
```

--------------------------------

### Basic pythonGrid Setup

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/base.html

Demonstrates the minimal code required to initialize and display a pythonGrid instance. This is the fundamental starting point for using the datagrid.

```python
grid = PythonGrid('SELECT * FROM orders', 'orderNumber', 'orders')
grid.display()
```

--------------------------------

### IntroJS Tutorial Initialization

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/base.html

This JavaScript code initializes and starts an Intro.js tutorial, guiding users through the features of the pythonGrid interface. It defines the steps, elements, and corresponding descriptions for the tutorial.

```javascript
function startIntro(){
  var intro = introJs();
  intro.setOptions({
    steps: [
      { element: document.querySelector('#gbox_orders'), intro: "<h4>A 2-line basic grid</h4> \n <code>\ grid = PythonGrid('SELECT * FROM orders', 'orderNumber', 'orders')<br /> \ grid.display() \ </code>", position: 'right' },
      { element: document.querySelector('.ui-jqgrid-titlebar.ui-jqgrid-caption'), intro: "<h4>Set datagrid title</h4><code>grid.set_caption('Orders Table')</code>", position: 'right' },
      { element: document.querySelector('#orders_orderNumber'), intro: "<h4>Change column title</h4><code>grid.set_col_title('orderNumber', 'Order #')</code>", position: 'right' },
      { element: document.querySelector('#orders_orderDate'), intro: "<h4>Change another column title</h4><code>grid.set_col_title('orderDate', 'Order Date')</code>" },
      { element: '.form-control.ui-pg-selbox', intro: "<h4>Set page size</h4><code>grid.set_pagesize(20)</code>", position: 'left' },
      { element: '.btn.ui-pg-button .fa-search', intro: "<h4>Toggle integrated toolbar search</h4><code>grid.enabled_search(True)</code>", position: 'bottom' },
      { element: '.ui-pg-div .fa-external-link', intro: "<h4>Enable CSV export</h4><code>grid.enable_export('CSV', 600)</code>", position: 'bottom' },
      { element: document.querySelector('td.jqgrid-rownum'), intro: "<h4>Display row number</h4><code>grid.enable_rownumbers(True)</code>", position: 'right' },
      { element: document.querySelectorAll('table#orders td:nth-child(6)')[1], intro: "<h4>Set column text align right</h4><code>grid.set_col_align('status', 'center')</code>", position: 'bottom' },
      { element: document.querySelectorAll('table#orders td:nth-child(7)')[1], intro: "<h4>Set column width</h4><code>grid.set_col_width('comments', 600)</code>", position: 'bottom' },
      { intro: '<div class="container-sm"> \ <div class="newsletter-inner section-inner"> \ <div class="newsletter-header text-center"> \ <h3 class="section-title mt-0">Plese subscribe to receive pythonGrid updates!</h3> \ <p class="section-paragraph">Thank you for your support!</p> \ </div> \ <div class="footer-form newsletter-form field field-grouped" style="text-align: center;display:initial !important"> \ <form action="https://www.getdrip.com/forms/251945194/submissions" method="post" class="form-inline"> \ <div class="form-group control control-expanded" style="whitespace:no-wrap"> \ <input type="email" class="form-control" placeholder="Your email..."name="fields[email]" style="width:300px"> \ <input type="submit" value="Subscribe" class="btn btn-primary"> \ </div> \ </form> \ </div> \ </div> \ </div>', position: 'bottom' },
    ]
  });
  intro.start();
}
```

--------------------------------

### Include jqGrid CSS

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/install.txt

This snippet demonstrates how to include the main jqGrid CSS file. This file should be placed in your web server directory, and the `href` attribute should reflect its location.

```html
<link rel="stylesheet" type="text/css" media="screen" href="path_to_jqgrid_css_file/ui.jqgrid.css" />
```

--------------------------------

### Clone pythonGrid Repository

Source: https://github.com/pycr/pythongrid/blob/master/README.md

This command clones the pythonGrid repository from GitHub, which is the recommended way to get started with the project.

```bash
git clone https://github.com/pycr/pythongrid.git
```

--------------------------------

### Include jqGrid JavaScript Files

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/install.txt

This snippet shows the correct order for including the jqGrid JavaScript files: first the language file, then the main jqGrid JavaScript file. Adjust the `src` paths to match your file locations.

```javascript
<script src="path_to_js_files/grid.locale-en.js" type="text/javascript"></script>
<script src="path_to_js_files/jquery.jqGrid.min.js" type="text/javascript"></script>
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pycr/pythongrid/blob/master/README.md

This command installs all the necessary Python packages listed in the 'requirements.txt' file. This includes libraries like SQLAlchemy that pythonGrid depends on.

```bash
pip install -r requirements.txt
```

--------------------------------

### Include jQuery UI Theme CSS

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/install.txt

This snippet shows how to link the jQuery UI theme CSS file in the HTML head section. Ensure the `href` attribute points to the correct path of your downloaded theme file.

```html
<link rel="stylesheet" type="text/css" media="screen" href="path_to_ui_css_file/jquery-ui-1.7.1.custom.css" />
```

--------------------------------

### Select2 with Templating

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/select2/README.md

This example demonstrates custom rendering of results and selections in Select2 using templates. This allows for richer display of options, including custom formatting or additional information.

```javascript
function formatRepo (repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__forks'>" + repo.forks_count + " Forks</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection (repo) {
  return repo.full_name || repo.text;
}

$(document).ready(function() {
  $(".js-example-templating").select2({
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term,
          page: params.page
        };
      },
      processResults: function (data, params) {
        params.page = params.page || 1;
        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function (markup) {
      return markup;
    },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });
});
```

--------------------------------

### Select2 with Tagging

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/select2/README.md

This example demonstrates enabling the tagging feature in Select2, allowing users to add new options on the fly that are not present in the initial list. This is useful for dynamic data entry.

```javascript
$(document).ready(function() {
  $(".js-example-tokenizer").select2({
    tags: true
  });
});
```

--------------------------------

### Select2 with Placeholder

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/select2/README.md

This example shows how to configure Select2 to display a placeholder text when no option is selected. This improves user experience by providing a hint about the expected input.

```javascript
$(document).ready(function() {
  $(".js-example-placeholder-single").select2({
    placeholder: "Select a state"
  });
});
```

--------------------------------

### Select2 with HTML Structure

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/select2/README.md

This example shows how to use Select2 with a select element that has a complex HTML structure, including optgroups. Select2 handles nested optgroups gracefully, unlike native selects.

```html
<select class="js-example-basic-multiple" multiple="multiple" style="width: 100%">
  <optgroup label="Group 1">
    <option value="1">Option 1.1</option>
    <option value="2">Option 1.2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="3">Option 2.1</option>
    <option value="4">Option 2.2</option>
  </optgroup>
</select>
```

--------------------------------

### PythonGrid HTML Template Structure

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/index.html

Shows the HTML structure for embedding a PythonGrid datagrid within a web page using a base template. It includes block content for the datagrid and navigation links to other examples.

```HTML
{% extends "base.html" %} {% block app_content %}

PythonGrid
==========

[Basic datagrid](/basic) | [Datagrid caption](/caption) | [Change column title](/column_title) | [Hide Column(s)](/column_hidden) | [Set pagination size to 25 per page](/page_size) | [Datagrid dimension](/dimension) | [Integrated search](/search) | [Enable row number](/row_numer) | [Set column width](/column_width) | [Set column text align](/column_align)| [All properties demo](/all) {% endblock %}
```

--------------------------------

### pythonGrid Customization Methods

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/base.html

Provides examples of various methods to customize the appearance and behavior of the pythonGrid datagrid, including setting captions, column titles, alignment, page size, enabling search, export, and row numbers.

```python
grid.set_caption('Orders Table')
```

```python
grid.set_col_title('orderNumber', 'Order #')
```

```python
grid.set_col_title('orderDate', 'Order Date')
```

```python
grid.set_pagesize(20)
```

```python
grid.enabled_search(True)
```

```python
grid.enable_export('CSV', 600)
```

```python
grid.enable_rownumbers(True)
```

```python
grid.set_col_align('status', 'center')
```

```python
grid.set_col_width('comments', 600)
```

--------------------------------

### jqGrid API: footerData

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

API reference for the footerData method, used to get or set data in the jqGrid footer.

```APIDOC
footerData(action, data, format)

Parameters:
  action: ('get' or 'set') Specifies whether to retrieve or set footer data. Defaults to 'get'.
  data: (Object) An object containing name-value pairs for setting footer data. Names should correspond to colModel names.
  format: (Boolean) If true, uses the formatter defined in colModel when setting data. Defaults to true.
```

--------------------------------

### jqGrid Footer Data Manipulation

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Provides functionality to get or set data in the jqGrid footer row. Supports specifying action ('get' or 'set') and whether to use formatters.

```javascript
// Get footer data
var footerData = $('#mygrid').jqGrid('footerData'); // Default action is 'get'

// Set footer data with formatting
var footerValues = {
  'columnA': 'Total',
  'columnB': 100
};
$('#mygrid').jqGrid('footerData', 'set', footerValues, true);

// Set footer data without formatting
$('#mygrid').jqGrid('footerData', 'set', footerValues, false);
```

--------------------------------

### jqGrid dataInit for Element Initialization

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Demonstrates the `dataInit` function within `editoptions`, which is called once when an editing element is created, ideal for attaching plugins like datepickers.

```APIDOC
colModel: [
  {
    name: 'startDate',
    edittype: 'text',
    editoptions: {
      dataInit: function(elem) {
        $(elem).datepicker({ dateFormat: 'yy-mm-dd' });
      }
    }
  }
]
```

--------------------------------

### Create and Activate Virtual Environment

Source: https://github.com/pycr/pythongrid/blob/master/README.md

These commands demonstrate how to create a Python virtual environment named 'venv' and then activate it. Activating the environment ensures that project dependencies are isolated.

```bash
python3 -m venv venv
source venv/bin/activate
```

--------------------------------

### Initialize PythonGrid

Source: https://github.com/pycr/pythongrid/blob/master/README.md

Creates an instance of the PythonGrid class, which is used to manage datagrid data. It requires a SQL SELECT statement, the primary key of the database table, and the database table name.

```python
grid = PythonGrid('SELECT * FROM orders', 'orderNumber', 'orders')
```

--------------------------------

### Project Dependencies

Source: https://github.com/pycr/pythongrid/blob/master/requirements.txt

This section lists the core Python dependencies for the project, including the web framework (Flask), database connectors (psycopg2-binary, PyMySQL), and essential libraries like SQLAlchemy.

```python
click==8.1.3
Flask==2.2.5
Flask-SQLAlchemy==2.4.1
itsdangerous>=2.1.2
Jinja2>=3.1.2
MarkupSafe>=2.0
psycopg2-binary==2.9.7
PyMySQL==0.9.3
scramp==1.1.1
six==1.14.0
SQLAlchemy==1.3.16
SQLAlchemy-Utils==0.36.3
Werkzeug==2.3.7
Flask-Session==0.5.0
Flask-DebugToolbar==0.13.1
```

--------------------------------

### Basic Select2 Initialization

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/select2/README.md

This snippet demonstrates the basic initialization of Select2 on a native select element using jQuery. It assumes the Select2 library and its CSS are included.

```javascript
$(document).ready(function() {
  $(".js-example-basic-single").select2();
});
```

--------------------------------

### Initialize PythonGridDbData

Source: https://github.com/pycr/pythongrid/blob/master/README.md

Creates an instance of the PythonGridDbData class, responsible for retrieving data from the database. It requires the same SQL SELECT statement used for PythonGrid initialization.

```python
data = PythonGridDbData('SELECT * FROM orders')
```

--------------------------------

### Custom Formatter Changes in jqGrid 3.5

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Details the changes in custom formatter parameters starting from jqGrid version 3.5. The formatter function now receives `cellvalue`, `options`, and `rowObject` as parameters and must return the formatted cell value.

```javascript
formatter : function ( cellvalue, options, rowObject )
{
// format the cellvalue to new format
return new_formated_cellvalue;
}

Example:
Code in 3.4.x variant

formatter : function ( elem, cellvalue, options)
{
var newval = "<strong>"+cellvalue+"</strong>";
jQuery(elem).html(newval);
}


Code in 3.5

formatter : function ( cellvalue, options, rowObject )
{
return "<strong>"+cellvalue+"</strong>";
}
```

--------------------------------

### jqGrid API Documentation

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Comprehensive API documentation for jqGrid functionalities including grid manipulation, data handling, editing, and formatting.

```APIDOC
jqGrid API Reference:

Grid Manipulation:
  gridResize(options)
    - Resizes the grid. Accepts jQuery UI resizable options.
  sortableRows()
    - Enables drag-and-drop row sorting.
  gridDnD(targetGrids)
    - Connects grids for drag-and-drop row transfer.
  columnChooser()
    - Allows column selection and reordering (requires multiselect plugin).

Data Retrieval:
  getRowData(rowid)
    - Retrieves data for a specific row or all rows if rowid is omitted.
  getCol(columnName, summaryType)
    - Retrieves column data. summaryType can be 'sum', 'avg', 'count' for aggregation.
  getGridParam(parameterName)
    - Returns the value of a specified grid parameter.

Data Modification:
  setRowData(rowid, data, cssPropertiesOrClasses)
    - Updates row data. The third parameter can be a string for classes or an object for CSS properties.
  addRowData(rowid, data, position, srcrowid)
    - Adds a new row to the grid. Supports key:true for primary key handling.
  delGridRow(rowid, options)
    - Deletes a row from the grid.
  saveRow(rowid, successfunc, url, extraparam, aftersavefunc, onerror, donetext)
    - Saves changes made to a row.

Editing and Formatting:
  editGridRow(id, options)
    - Edits a grid row.
  setColWidth(colname, width)
    - Sets the width of a specific column.
  formatter.checkbox(value, options, rowdata, colname)
    - Formats a cell as a checkbox. Handles undefined values and provides a default format.
  unformat(cellvalue, options, cellobject)
    - Unformats a cell value, making it compatible with the original data type. Accepts cellobject as a third parameter.

Events:
  ondblClickRow(rowid, event, ...)
    - Callback for double-clicking a row. Receives rowid and event object.
  onRightClickRow(rowid, event, ...)
    - Callback for right-clicking a row. Receives rowid and event object.

AJAX:
  ajaxRequest(settings)
    - Configures and executes AJAX requests with custom settings.

Utility:
  stripHtml(value)
    - Parses numeric values from HTML strings.
  format(value, options)
    - Formats a value. Accepts undefined parameters.

Bug Fixes Summary:
  - Resolved issues with getAbsoluteIndex on IE8.
  - Corrected triggerReload grid to reset savedRow array.
  - Fixed setGridWidth for grids with no data.
  - Improved header alignment in IE8.
  - Enhanced createEl function to check 'val' instead of 'html' for selects.
  - Made getChangedCells compatible with unformat function.
  - Fixed record count with scroll enabled.
  - Modified setSelection to accept numbers.
  - Addressed IE header checkbox behavior with multiselect.
  - Fixed searching DOM elements with IDs containing special characters.
  - Corrected checkbox checking in form editing.
  - Ensured getCol uses unformat function.
  - Improved button appearance in form editing.
  - Fixed searchFilter in IE7/IE6 to prevent undefined return values.
  - Addressed datepicker UI issues in inline and cell editing.
  - Fixed setLabel to retain sort icons when setting new labels.
  - Resolved form edit issues with select formatters.
  - Prevented ID pollution with multiselect enabled.
  - Fixed deselectAfterSort behavior in multiselect mode.
  - Corrected unformat for numbers and currency.
  - Addressed bugs with dataUrl and multiple selects.
  - Fixed attribute setting for multiple select options.
  - Trimmed compared values in form edit to handle spaces from split(",").
  - Fixed jqGrid loader for IE browsers.
  - Resolved form icon issues in Opera.
  - Ensured getGridParam returns 0 or false correctly.
  - Optimized local functions to avoid overhead.
  - Fixed Opera cursor col-resize issue.
  - Prevented saving in textarea elements when Enter key is pressed in editGridRow.
  - Fixed formatter checkbox for undefined values and added default format.
  - Ensured addRowData uses key:true when rowid is not defined.
  - Fixed formatter bug for select to use defaultFormat.
  - Added a third parameter (cellobject) to the unformat function.
  - Corrected alternate row styling during local sorting.
  - Fixed addRowData for alternate rows when adding items at the end.
  - Resolved collapseRow recursion issue in treegrid.
  - Updated stripHtml function to parse numeric values.
  - Ensured delGridRow retrieves fresh data from delData object.
  - Fixed width option issues when set as a string.
  - Resolved $jgrid.format function issue with undefined parameters.
  - Fixed saveRow method's aftersave function to pass request instead of responseText.
  - Corrected serchhidden in searchGrid method.
  - Fixed setGridWidth method.
  - Corrected setColWidth function.
  - Ensured topinfo and bottom info appear separately in edit/add dialogs.
  - Fixed searchFilter CSS for subgrid calls.
  - Improved celledit behavior with datepicker.
  - Ensured viewGrid row visualizes only non-hidden columns.
```

--------------------------------

### jqGrid API: navGrid

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Documentation for the navGrid method, used for navigating through grid records, particularly in form editing.

```APIDOC
navGrid(selector, {...options...}, {...editOptions...}, {...addOptions...}, {...delOptions...}, {...searchOptions...}, {...viewOptions...})

Parameters:
  selector: The selector for the pager element.
  options: General options for the navigation grid.
  editOptions: Options specific to the edit functionality.
    navkeys: [Boolean, Number, Number] - Enables keyboard navigation. The boolean enables/disables it, the numbers are key codes for up/down navigation.
  addOptions: Options specific to the add functionality.
  delOptions: Options specific to the delete functionality.
  searchOptions: Options specific to the search functionality.
  viewOptions: Options specific to the view functionality.
```

--------------------------------

### jqGrid Footer Row and Data Options

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Demonstrates how to enable and configure the footer row in jqGrid, including placing user data in the footer and formatting options.

```javascript
// Enable footer row
$('#mygrid').jqGrid('setGridParam', {
  footerrow: true
});

// Enable user data in footer
$('#mygrid').jqGrid('setGridParam', {
  userDataOnFooter: true
});

// Get data from footer
var footerData = $('#mygrid').jqGrid('footerData', 'get');

// Set data to footer with formatting
var dataToSet = {
  colName1: 'Value1',
  colName2: 'Value2'
};
$('#mygrid').jqGrid('footerData', 'set', dataToSet, true);

// Set data to footer without formatting
$('#mygrid').jqGrid('footerData', 'set', dataToSet, false);
```

--------------------------------

### jqGrid searchGrid API Documentation

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Documentation for the searchGrid method in jqGrid, detailing its new search engine and configuration options. This section covers deprecated options and newly added features for advanced searching.

```APIDOC
searchGrid Method:

This method utilizes the jquery.searchFilter.js plugin for enhanced search capabilities.

Deprecated Options:
- top: 0
- left: 0
- width: 360
- height: 80
- modal: false
- closeicon: 'ico-close.gif'
- dirty: false
- processData: ""

Added Options:
- recreateFilter: boolean (default: false)
  Constructs the filter every time a search button is clicked.
- multipleSearch: boolean (default: false)
  When true, allows adding/deleting multiple search conditions. The posted data is a stringified JSON array.
- sFilter: string (default: 'filters')
  Used only when multipleSearch is true. Defines the name of the posted string containing search conditions.
  Example structure:
  {
    "groupOp": "AND",
    "rules": [
      {"field": "id", "op": "gt", "data": "1"},
      {"field": "name", "op": "bw", "data": "Client"}
    ]
  }
  - groupOp: Logical operator ('AND' or 'OR') for WHERE clause.
  - rules: Array of search conditions.
    - field: The name of the field to search.
    - op: The operator to use (e.g., 'gt', 'bw').
    - data: The data to search for.

Column Model Search Options:
- search: boolean (true/false)
  Enables or disables searching for a column.
- stype: string ('text' or 'select')
  Determines the search input type. Defaults to 'text'.
- searchoptions: object
  Configuration for the search input element.
  - dataUrl: string
    For 'select' type, populates the select element with data from a URL.
    Example:
    <select>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
    This is called only once.
  - dataInit: function(elem)
    Callback function executed once when the element is created. Ideal for initializing plugins like datepickers.
    Example:
    dataInit: function (elem) {
        $(elem).datepicker();
    }
  - dataEvents: array
    List of events to bind to the data element.
    Example:
    dataEvents: [
      { type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }},
      { type: 'keypress', fn: function(e) { console.log('keypress'); } }
    ]
    Events are called only once.
  - attr: object
    Sets valid HTML attributes to the created element.
    Example: attr : { title: "Some title" }
  - searchhidden: boolean (default: false)
    If true, hidden columns will appear in the search interface.
  - sopt: array
    Corresponds to the 'op' element in the posted data, defining available operators for the search.
```

--------------------------------

### JSON Data Handling

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Demonstrates secure JSON data handling with `while(1);` and comments to prevent execution, as used by jqGrid for data retrieval.

```javascript
while(1);/*{
    "name":"safe value 1",
    "name":"safe value 2"
}*/
```

--------------------------------

### PyGrid Search Operators and Descriptions

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Lists the available search operators ('sopt') and their corresponding textual descriptions used for filtering grid data.

```APIDOC
Search Operators (sopt):
['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']

Descriptions:
['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']
```

--------------------------------

### jqGrid API: editGridRow

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Documentation for the editGridRow method, including parameters for form editing.

```APIDOC
editGridRow(rowid, add, edit, view, del, search, data)

Parameters:
  rowid: The id of the row to edit, add, view, delete or search.
  add: Object with options for adding a new row.
  edit: Object with options for editing an existing row.
    checkOnSubmit: (Boolean) If set to true, checks if data is changed in the form and prompts for confirmation.
  view: Object with options for viewing a row.
  del: Object with options for deleting a row.
  search: Object with options for searching rows.
  data: Object with data to be passed to the form.
```

--------------------------------

### Drip Newsletter Integration

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/base.html

This JavaScript code integrates with Drip for newsletter subscriptions. It initializes Drip's tracking script and sets up the account ID for form submissions.

```javascript
var _dcq = _dcq || [];
var _dcs = _dcs || {};
_dcs.account = '8708792';
(function() {
  var dc = document.createElement('script'); dc.type = 'text/javascript'; dc.async = true;
  dc.src = '//tag.getdrip.com/8708792.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(dc, s);
})();
```

--------------------------------

### Render Grid Template

Source: https://github.com/pycr/pythongrid/blob/master/README.md

Renders the 'grid.html' template, passing the PythonGrid object and a title to the template for display.

```python
return render_template('grid.html', title='GRID', grid=grid)
```

--------------------------------

### AJAX Request Configuration

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Provides support for configuring AJAX requests according to user preferences.

```javascript
ajaxRequest(settings)
  - Configures and performs AJAX requests.
  - Parameters:
    - settings: An object containing AJAX request configurations.
```

--------------------------------

### Displaying Grid in HTML Template

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/grid.html

This snippet shows how to extend a base HTML template and render a PythonGrid object using Jinja2 templating. It assumes a 'grid' object is passed to the template context.

```jinja2
{% extends "base.html" %}
{% block app_content %}
{{ grid.display()|safe }}
{% endblock app_content %}
{% block scripts %}{% endblock %}
```

--------------------------------

### PyGrid Grid Event: importComplete

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Fires after the grid has been fully constructed, useful for performing actions once the grid is ready.

```APIDOC
importComplete: event which fires after constructing the grid.
```

--------------------------------

### Grid Configuration Options

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Details specific configuration options for the grid, such as enabling saving with a key press and associating a key code for saving. It also mentions the alignment of buttons in the form.

```javascript
savekey: [true,13]
// The first item enables saving with pressing certain key.
// The second item corresponds to key code for saving. Default Enter (key code 13)
```

--------------------------------

### File Not Found Page Template

Source: https://github.com/pycr/pythongrid/blob/master/app/templates/404.html

This is a basic HTML template for a 'File Not Found' page, likely used within a Python web framework like Flask or Django. It extends a base template and includes a link to return to the index page.

```html
{% extends "base.html" %} {% block app_content %} 

File Not Found
==============

[Back]({{ url_for('index') }})

{% endblock %}
```

--------------------------------

### Deprecated pythongrid Options

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Lists options that are no longer recommended for use in pythongrid. These include image paths for sorting and navigation, CSS classes for sorting and resizing, and the 'imgpath' option which is no longer used.

```javascript
imgpath: "",
sortascimg: "sort_asc.gif",
sortdescimg: "sort_desc.gif",
firstimg: "first.gif",
previmg: "prev.gif",
nextimg: "next.gif",
lastimg: "last.gif",
sortclass: "grid_sort",
resizeclass: "grid_resize"
```

--------------------------------

### jqGrid Loading Message Styling

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Enhancement to the loading message by adding the 'ui-state-active' class for better visual feedback during data loading.

```javascript
// Loading message now includes 'ui-state-active' class for active state indication.
```

--------------------------------

### UI Icon Configuration

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Defines the mapping for UI icons, specifically for 'minus' and 'leaf' states. It emphasizes the use of icons from the UI Theme.

```javascript
var icon = {
    minus:'ui-icon-triangle-1-s',
    leaf:'ui-icon-radio-off'
};
// Note that icons from UI Theme should be used.
```

--------------------------------

### Configure MySQL Database Connection

Source: https://github.com/pycr/pythongrid/blob/master/README.md

This Python code snippet shows how to configure the database connection for pythonGrid when using a MySQL database. It specifies the hostname, database name, username, password, and database type.

```python
PYTHONGRID_DB_HOSTNAME = 'mysqldatabase.example.com'
PYTHONGRID_DB_NAME = 'sampledb'
PYTHONGRID_DB_USERNAME = 'root'
PYTHONGRID_DB_PASSWORD = 'root'
PYTHONGRID_DB_TYPE = 'mysql+pymysql'
```

--------------------------------

### jqGrid Base Module Fixes

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Details fixes related to the base module of jqGrid, including jQuery usage and event handling.

```javascript
// Replaced '$' with 'jQuery' to avoid conflicts with other libraries.
// Removed 'e.srcElement' checking as it's handled by jQuery.
```

--------------------------------

### jqGrid Options for Table Conversion

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Extends the tableToGrid method to use custom options when building the grid from an HTML table.

```javascript
tableToGrid(selector, options)

// selector: The CSS selector for the table.
// options: An object with jqGrid options to configure the created grid.
```

--------------------------------

### jqGrid Set Columns Module Fix

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Fixes an issue where the modal dialog for setting columns did not appear correctly due to a missing parameter.

```javascript
// Added a missing parameter to ensure the modal dialog for column settings displays correctly.
```

--------------------------------

### getCol Method Enhancements

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

The getCol method now supports returning summary, average, and count for selected rows. A third parameter determines the aggregation type.

```javascript
getCol(columnName, summaryType)
  - Retrieves data from a specific column.
  - Parameters:
    - columnName: The name of the column.
    - summaryType: Specifies the aggregation to perform (e.g., 'sum', 'avg', 'count'). If valid, returns a scalar; otherwise, an empty array.
```

--------------------------------

### APIDOC: Grid Event and Method Behavior

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Documents fixes and improvements related to grid events and methods. This includes correct calculation of rowIndex in onCellSelect for IE, handling of column widths with multiselect and subgrids, and adding data to an empty grid.

```APIDOC
onCellSelect event:
  - Fixed bug in onCellSelect event when used in IE browsers - now the rowIndex passed to this event is calculated correctly regardless of hidden columns.

Column Width Handling:
  - Fixed width bug when multiselect is used. Previously the width of this column is recalculated according to table width and when shrinkToFit is set to true. Now the column has fixed width and is no longer recalculated when the grid width is changed. See documentation for the new options.
  - Fixed width bug when subgrid is used. Previously the width of this column is recalculated according to table width and when shrinkToFit is set to true. Now the column has fixed width and is no longer recalculated when the grid width is changed. See documentation for the new options.

addRowData method:
  - Fixed bug in addRowData method when the grid is empty and we try to add one row.
```

--------------------------------

### PyGrid Tree Grid Icons Configuration

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Illustrates how to customize the tree icons in a `treeGrid` by setting the `treeIcons` parameter. Provides default icon class names.

```javascript
treeIcons = {
    plus:'ui-icon-triangle-1-e'
}
```

--------------------------------

### jqGrid EditType Support

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Details the extended `edittype` property in jqGrid, now supporting 'button', 'image', and 'file' input elements for editing.

```APIDOC
colModel: [
  {
    name: 'myButton',
    edittype: 'button',
    editoptions: { caption: 'Click Me' }
  },
  {
    name: 'myImage',
    edittype: 'image',
    editoptions: { src: 'path/to/image.png' }
  },
  {
    name: 'myFile',
    edittype: 'file',
    editoptions: { enctype: 'multipart/form-data' }
  }
]
```

--------------------------------

### jqGrid dataUrl for Select Elements

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Explains the usage of `dataUrl` within `editoptions` for dynamically populating select elements via AJAX. The response should be an HTML select element.

```APIDOC
colModel: [
  {
    name: 'country',
    edittype: 'select',
    editoptions: {
      dataUrl: '/api/countries',
      recreateForm: true // To refetch data each time form is shown
    }
  }
]

// Server response for /api/countries:
// <select>
//     <option value="1">USA</option>
//     <option value="2">Canada</option>
// </select>
```

--------------------------------

### New pythongrid Options

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Details new configuration options available in pythongrid. These options enhance functionality such as data types, automatic resizing, scrollbar adjustments, cell layout, subgrid and multiselect column widths, row numbering, pager positioning, and toolbar configurations.

```javascript
datatype: 'script',
reccount: 0,
autowidth: false,
scrollOffset: 18,
cellLayout: 5,
subGridWidth: 20,
multiselectWidth: 20,
rownumbers: false,
rownumWidth: 25,
pagerpos: 'center',
recordpos: 'right',
toolbar: [true, "both"],
gridview: false
```

--------------------------------

### Date Formatter Enhancements

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Details improvements to the date formatter, allowing month names in the source format (srcformat).

```html
- the source format for date formatter (srcformat) now can accept month names
```

--------------------------------

### jqGrid Hide/Show Footer Row

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Demonstrates how to dynamically hide or show the jqGrid footer row using jQuery selectors.

```javascript
// Hide the footer row
jQuery(".ui-jqgrid-sdiv", "#gbox_mygrid").hide();

// Show the footer row
jQuery(".ui-jqgrid-sdiv", "#gbox_mygrid").show();
```

--------------------------------

### TreeGrid Initial Datatype

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Configures the treeGrid to initially work with datatype 'local' for better performance with local data.

```javascript
// jqGrid initialization option for treeGrid:
treeGrid: true,
datatype: 'local'
```

--------------------------------

### jqGrid Search Options in colModel

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Defines the `searchoptions` object within `colModel` for configuring search behavior, including data sources, initialization, events, default values, attributes, and search scope.

```APIDOC
colModel: [
  {
    name: 'columnName',
    search: true, // Enable searching for this column
    stype: 'text', // Search input type (e.g., 'text', 'select')
    searchoptions: {
      dataUrl: '/api/data',
      dataInit: function(elem) { $(elem).datepicker(); },
      dataEvents: [
        { type: 'click', fn: function(e) { console.log('Clicked!'); } }
      ],
      defaultValue: 'default',
      attr: { 'data-custom': 'value' },
      searchhidden: true, // Whether to search hidden columns
      sopt: ['eq', 'cn'] // Search operators available
    }
  }
]
```

--------------------------------

### jqGrid Search Module Fixes

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Fixes for the searchGrid functionality, specifically regarding the passing of group options to 'searchFilter' and language file integration.

```javascript
// Ensured group options are correctly passed to searchFilter.
// Resolved issues with retrieving search options from the language file.
```

--------------------------------

### jqGrid dataEvents for Element Events

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Shows how to use `dataEvents` in `editoptions` to bind custom events (like 'click', 'keypress') to editing elements, with support for event data and handler functions.

```APIDOC
colModel: [
  {
    name: 'quantity',
    edittype: 'text',
    editoptions: {
      dataEvents: [
        {
          type: 'input',
          fn: function(e) {
            console.log('Input value:', $(e.target).val());
          }
        },
        {
          type: 'keydown',
          data: { keyCode: 13 },
          fn: function(e) {
            if (e.data.keyCode === 13) {
              console.log('Enter pressed!');
            }
          }
        }
      ]
    }
  }
]
```

--------------------------------

### Select2 with Remote Data Loading

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/select2/README.md

This snippet shows how to configure Select2 to load data from a remote URL using AJAX. This is essential for handling large datasets or dynamically populated options.

```javascript
function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
    '<span>' + state.element.value + '</span>'
  );
  return $state;
}

$(document).ready(function() {
  $(".js-example-data-ajax").select2({
    templateResult: formatState,
    templateSelection: formatState
  });
});
```

--------------------------------

### Column Chooser Method

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

The columnChooser method allows users to select and reorder columns simultaneously. This functionality requires the multiselect plugin.

```javascript
columnChooser()
  - Enables column selection and reordering.
  - Requires the multiselect plugin.
```

--------------------------------

### jqGrid defaultValue for Form Editing

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Explains the `defaultValue` option in `editoptions` for setting initial values in form editing (add mode), supporting static values or functions that return values.

```APIDOC
colModel: [
  {
    name: 'status',
    edittype: 'select',
    editoptions: {
      value: 'A:Active;I:Inactive',
      defaultValue: 'A' // Sets 'Active' as default
    }
  },
  {
    name: 'creationDate',
    edittype: 'text',
    editoptions: {
      defaultValue: function() {
        const today = new Date();
        return today.toISOString().split('T')[0];
      }
    }
  }
]
```

--------------------------------

### Import Complete Event Response

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Passes the response object to the importComplete event in the jqGridImport method.

```javascript
// jqGridImport method event handler:
importComplete: function(response) {
  // 'response' object contains details about the import.
}
```

--------------------------------

### PyGrid Filter Toolbar Control Methods

Source: https://github.com/pycr/pythongrid/blob/master/app/static/js/Changes.txt

Provides methods to interact with the filter toolbar: `triggerToolbar` to initiate a search, `clearToolbar` to reset search fields, and `toggleToolbar` to show/hide the toolbar.

```javascript
var sgrid = $("#mygrid")[0]
sgrid.triggerToolbar();
sgrid.clearToolbar();
sgrid.toggleToolbar();
```