https://trirand.com/jqgridwiki/jqgridwiki/ 2026-04-16T19:36:53+03:00 https://trirand.com/jqgridwiki/jqgridwiki/ https://trirand.com/jqgridwiki/jqgridwiki/lib/tpl/monobook/images/favicon.ico text/html 2025-07-18T15:01:36+03:00 admin https://trirand.com/jqgridwiki/jqgridwiki/doku.php?id=start&rev=1752840096&do=diff Introduction jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. text/html 2018-11-10T05:44:11+03:00 admin https://trirand.com/jqgridwiki/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/html 2018-02-02T22:55:48+03:00 admin https://trirand.com/jqgridwiki/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/html 2018-02-02T22:55:18+03:00 admin https://trirand.com/jqgridwiki/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/html 2018-02-02T22:54:41+03:00 admin https://trirand.com/jqgridwiki/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/html 2018-02-02T22:54:17+03:00 admin https://trirand.com/jqgridwiki/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/html 2018-02-02T22:53:54+03:00 admin https://trirand.com/jqgridwiki/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 Methods text/html 2018-02-02T22:53:26+03:00 admin https://trirand.com/jqgridwiki/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 with text/html 2018-02-02T22:52:56+03:00 admin https://trirand.com/jqgridwiki/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 Requirements text/html 2018-02-02T22:50:05+03:00 admin https://trirand.com/jqgridwiki/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 in text/html 2018-01-15T14:23:12+03:00 admin https://trirand.com/jqgridwiki/jqgridwiki/doku.php?id=wiki:jqgridexamples&rev=1516018992&do=diff Working examples of jqGrid, with explanations, can be found here. text/html 2018-01-15T10:55:14+03:00 admin https://trirand.com/jqgridwiki/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/html 2017-12-12T19:28:25+03:00 admin https://trirand.com/jqgridwiki/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/html 2017-12-12T19:26:41+03:00 admin https://trirand.com/jqgridwiki/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 to text/html 2017-12-12T19:25:56+03:00 admin https://trirand.com/jqgridwiki/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 required text/html 2017-12-12T19:25:19+03:00 admin https://trirand.com/jqgridwiki/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/html 2017-12-12T19:24:10+03:00 admin https://trirand.com/jqgridwiki/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/html 2017-12-12T19:23:27+03:00 admin https://trirand.com/jqgridwiki/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/html 2017-12-12T19:21:45+03:00 admin https://trirand.com/jqgridwiki/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/html 2017-12-12T19:21:18+03:00 admin https://trirand.com/jqgridwiki/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: