jqGrid Wiki
http://www.trirand.com/jqgridwiki/
2024-03-19T10:38:18+00:00jqGrid Wiki
http://www.trirand.com/jqgridwiki/
http://www.trirand.com/jqgridwiki/lib/tpl/monobook/images/favicon.icotext/html2018-11-10T03:44:11+00:00adminwiki:faq - [Where can I see live examples of jqGrid?]
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:faq&rev=1541821451&do=diff
Where can I see live examples of jqGrid?
<http://www.trirand.com/blog/jqgrid/jqgrid.html>
Can I use jqGrid with an ASP MVC?
<http://haacked.com/archive/2009/04/14/using-jquery-grid-with-asp.net-mvc.aspx>text/html2018-02-02T20:55:48+00:00adminwiki:singe_searching
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching&rev=1517604948&do=diff
Single field searching
Single field searching is a way to search data (at server) on one field at a time. When using this method we construct a modal form where the user can select a field and condition to apply the search.
[ Singe Field serching]
This method uses the url to post the search data and differ from the custom and toolbar search methods. The difference is that the posted search data is not in pair name:value. See below how data is posted.text/html2018-02-02T20:55:18+00:00adminwiki:toolbar_searching
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching&rev=1517604918&do=diff
Toolbar Searching
This method construct searching creating input elements just below the header elements of the grid. When the header elements are re sized the input search elements are also re sized according to the new width.
The method uses the url option in grid to perform a search to the server.text/html2018-02-02T20:54:41+00:00adminwiki:colmodel_options
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options&rev=1517604881&do=diff
ColModel API
The colModel property defines the individual grid columns as an array of properties. This is the most important part of the jqGrid.
Syntax:
jQuery("#gridid").jqGrid({
...
colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
...
});text/html2018-02-02T20:54:17+00:00adminwiki:events
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events&rev=1517604857&do=diff
Events
The action to take on an event is set as a property of the grid, e.g.
See also jqGrid Methods
var lastSel;
jQuery("#gridid").jqGrid({
...
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery('#gridid').restoreRow(lastSel);
lastSel=id;
}
jQuery('#gridid').editRow(id, true);
},
...
});text/html2018-02-02T20:53:54+00:00adminwiki:methods
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods&rev=1517604834&do=diff
Methods
This chapter describes the basic methods of jqGrid. Some methods require that additional modules should be loaded.
As of version 3.6 jqGrid uses new API which is compatible with jQuery UI library. See below.
See also jqGrid Events
Grid Related Methodstext/html2018-02-02T20:53:26+00:00adminwiki:navigator
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator&rev=1517604806&do=diff
Navigator
The Navigator is a user interface feature that allows easy accessibility to record actions such as Find or Edit.
The user can activate a grid action by pressing the appropriate icon button in the Navigation layer.
Developers can create custom actions, or they can use any of the six predefined actions that come withtext/html2018-02-02T20:52:56+00:00adminwiki:predefined_formatter
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter&rev=1517604776&do=diff
Predefined Formatter
Formatter supports advanced formatting of the contents of cells in form, in-line and cell editing.
Formatter can be used in either of two ways: Predefined and Custom.
In this section, we discuss the Predefined Formatter.
jqGrid Module Requirementstext/html2018-02-02T20:50:05+00:00adminwiki:options
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options&rev=1517604605&do=diff
Options
The setup and configuration of jqGrid are controlled by setting options for the grid. Examples of configuration settings include the height and width of the grid, type of data that should be in each column, and other similar settings.
These options are set in the grid options array, and many of the options are set intext/html2018-01-15T12:23:12+00:00adminwiki:jqgridexamples
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgridexamples&rev=1516018992&do=diff
Working examples of jqGrid, with explanations, can be found here.text/html2018-01-15T08:55:14+00:00adminwiki:jqgriddocs - [Documentation]
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs&rev=1516006514&do=diff
Documentation
This documentation cover the last release of jqGrid
Upgrading
* Upgrade from 3.8 to 4.0.0
* Upgrade from 3.6.4 to 3.6.5
* Upgrade from 3.4.x to 3.5
Installing jqGrid
* Before you begin
* System Requirements
* Download jqGrid
* Change Log
* How to Install
* How it Works
* My First Grid
Basic Grid
* Conventions
* Options :!:
* colModel Options :!:
* Data manipulation
* Events :!:
* Methods :!:
* HOWTO :!:
Navigating
* Pager
* Na…text/html2017-12-12T17:28:25+00:00adminwiki:jquery_ui_methods
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods&rev=1513099705&do=diff
UI Integrations
Sortable Columns
This method is integrated in jqGrid, so there it is not necessary to do something special. The method allow to reorder the grid columns using the mouse. The only necessary setting in this case is to set the sortable option in jqGrid to true.
using our example this will look like this:text/html2017-12-12T17:26:41+00:00adminwiki:show_hide_columns
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:show_hide_columns&rev=1513099601&do=diff
| Documentation menu
Description
Display a modal window where the user can select which column to show and hide .
Author
Piotr Roznicki
Installation
In order to use this module you should mark the Set Columns plugin (in Other modules) when you download the grid. For more information refer totext/html2017-12-12T17:25:56+00:00adminwiki:import_methods
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:import_methods&rev=1513099556&do=diff
Importing and exporting
There are times when it is useful to be able to import or export the entire grid configuration to another file format:
* Grids constructed on the server can be reconstructed after sorting or paging, so a different configuration can be quickly used as requiredtext/html2017-12-12T17:25:19+00:00adminwiki:pivotexample
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pivotexample&rev=1513099519&do=diff
Pivot Example
With this example we will try to explain and build pivot grid. We hope it will be clear, so that more user can have idea what is happen.
Now - lets do first with the data.
Data
Let’s say that we have a table with sales data with the following fields:text/html2017-12-12T17:24:10+00:00adminwiki:pivotsettings
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pivotsettings&rev=1513099450&do=diff
Methods
jqPivot
jqPivotGrid has the following calling convention.
jQuery("#grid").jqGrid('jqPivot', data, pivotoptions, gridoptions, ajaxoptions);
Where
#grid is the id of the table element as used in the jqGrid.
data
- can be a string or array of data to be passed to the pivot. In case the parameter is a string a ajax request is made. The data that should be returned should have a name value pair like this:text/html2017-12-12T17:23:27+00:00adminwiki:pivotdescription
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pivotdescription&rev=1513099407&do=diff
What is a Pivot Table?
A lot of definitions can be found in the web. More deeper information can be found In Wikipedia
Simple we can say that pivot table is a program tool that allows you to reorganize and summarize
selected columns and rows of data in a spreadsheet or database table to obtain a desired report.text/html2017-12-12T17:21:45+00:00adminwiki:adjacency_model
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:adjacency_model&rev=1513099305&do=diff
Adjacency Model
As discussed in previous chapter Configuration one of the important part is the treeReader property. Configuring this properly and understanding the basic concept of the nested set model will make your life easy.
treeReader Configuration
The default treeReader Configuration when we use tree grid with adjacency model is:text/html2017-12-12T17:21:18+00:00adminwiki:nested_set_model
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:nested_set_model&rev=1513099278&do=diff
Nested Set Model
As discussed in previous chapter Configuration one of the important part is the treeReader property. Configuring this properly and understanding the basic concept of the nested set model will make your life easy.
treeReader Configuration
The default treeReader Configuration when we use tree grid with nested set model is:text/html2017-12-12T17:20:52+00:00adminwiki:treegrid
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:treegrid&rev=1513099252&do=diff
TreeGrid
Treegrid is a way to represent hierarchical data in grid.
Treegrid supports both the Nested Set model and the Adjacency model. Good articles describing the Nested Set model can be found here:
<http://ftp.ntu.edu.tw/MySQL/tech-resources/articles/hierarchical-data.html>
<http://www.sitepoint.com/article/hierarchical-data-database> .
Installation
In order to use this module you should mark the Treegrid when you download the grid. For more information refer to