Differences

This shows you the differences between two versions of the page.

--- wiki:subgrid [2010/06/16 01:46]
speige
+++ wiki:subgrid [2011/08/30 09:06] (current)
sof Colon miss in subGridModel options
@@ Line 16: / Line 16: @@
 ^Property^Type^Description^Default^
 |subGrid|boolean|If set to true this enables using a subgrid. If the subGrid is enabled a additional column at left side is added to the basic grid. This column contains a 'plus' image which indicate that the user can click on it to expand the row. By default all rows are collapsed.|false|
+|subGridOptions| object | A set of options for the subgrid. Below are all the options with their default values \\ { \\ plusicon : "ui-icon-plus",\\ minusicon : "ui-icon-minus",\\ openicon: "ui-icon-carat-1-sw", \\ expandOnLoad:  false, \\ selectOnExpand : false, \\ reloadOnExpand : true \\ } \\ //plusicon// and //minusicon// defies the icons when the grid is collapsed/expanded. A valid name of icon from Theme Roller should be set. \\ //openicon// the icon bellow the minusicon when the subgrid row is expanded \\ //expandOnLoad// when set to true make it so that all rows will be expanded automatically when a new set of data is loaded. \\ //selectOnLoad// when set to true the row is selected when a plusicon is clicked with the mouse. \\ //reloadOnExpand// If set to false the data in the subgrid is loaded only once and all other subsequent clicks just hide or show the data and no more ajax calls  are made.| |
 |subGridModel|array|This property, which describes the model of the subgrid, has an effect only if the subGrid property is set to true. It is an array in which we describe the column model for the subgrid data. The syntax is :\\ subGridModel : [ \\ { name : ['name_1','name_2',...,'name_n'], \\ width : [width_1,width_2,...,width_n] , \\ align : ['left','center',...,'right'] , \\ params : [param_1,...,param_n], \\ mapping:['name_1_map','name_2_map',...,'name_n_map']} \\ Where \\ //name:// an array containing the labels of the columns of the subgrid.\\ //width:// an array containing the width of the columns. This array should have the same length as in name array. \\ //align:// an array containing the alignment of the columns. The values can be left, center or right. If omited  the aliment is left. \\ //params:// an array in which we can add a name from main grid's colModel to pass as additional parameter to the subGridUrl. \\ //mapping:// the parameter is used only when repeatitems in subgrid is set to false. When defined in this case we use the names from this array to map it to the subgrid names. If not set and repeatitems is false we use the name option. | |
 |subgridtype|mixed|This option allow loading subgrid as a service. If not set, the datatype parameter of the parent grid is used. See the example below|null|
@@ Line 63: / Line 64: @@
          }
       });
-   },
+   },subgrid
 ...
 });
@@ Line 84: / Line 85: @@
 ===== Methods =====
 ^Method^Parameters^Returns^Description^
-|expandSubgridRow|rowid|jqGrid object|dynamically expand the subgrid row with the id = rowid|
+|expandSubGridRow|rowid|jqGrid object|dynamically expand the subgrid row with the id = rowid|
 |collapseSubGridRow|rowid|jqGrid object|dynamically collapse the subgrid row with the id = rowid|
 |toggleSubGridRow|rowid|jqGrid object|dynamically toggle the subgrid row with the id = rowid|
@@ Line 90: / Line 91: @@
 |subGridXml|xml, rowid|false|Add data in a subgrid row. xml is a xml dom element, rowid is the id of the row after which the data will be added|
+===== Example =====
+Continuing to use the example from the tutorial, let's suppose that there is a need to display the line items for each invoice in a subgrid. The Java script code should look like this.
+<code javascript>
+<script type="text/javascript">
+jQuery(document).ready(function(){
+  jQuery("#list").jqGrid({
+    url:'example.php',
+    datatype: 'xml',
+    mtype: 'GET',
+    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
+    colModel :[
+      {name:'invid', index:'invid', width:55},
+      {name:'invdate', index:'invdate', width:90},
+      {name:'amount', index:'amount', width:80, align:'right'},
+      {name:'tax', index:'tax', width:80, align:'right'},
+      {name:'total', index:'total', width:80, align:'right'},
+      {name:'note', index:'note', width:150, sortable:false}
+    ],
+    pager: '#pager',
+    rowNum:10,
+    rowList:[10,20,30],
+    sortname: 'invid',
+    sortorder: 'desc',
+    viewrecords: true,
+    caption: 'My first grid',
+    subGrid: true,
+    subGridUrl : "subgrid.php",
+    subGridModel : [
+      {
+      name  : ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
+      width : [55, 200, 80, 80, 80],
+      align : ['left','left','right','right','right'],
+      params: ['invdate']
+      }
+    ]
+  });
+});
+</script>
+</code>
+The next step is to configure the subgrid.php file. The example is in PHP and MySQL. \\ We suppose that the table name that contain the invoice item data has name invlines and has the following names: invid, item_num, item, qty, unit
+<code php>subgrid
+<?php
+// get the id passed automatically to the request
+$id = $_GET['id'];
+// get the invoice date passed to this request via params array in
+//subGridModel. We do not use it here - this is only demostration
+$date_inv = $_GET['invdate'];
+		suboptions = {
+			plusicon : "ui-icon-plus",
+			minusicon : "ui-icon-minus",
+			openicon: "ui-icon-carat-1-sw",
+			expandOnLoad:  false,
+			delayOnLoad : 50,
+			selectOnExpand : false,
+			reloadOnExpand : true
+		};
+// connect to the database
+$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
+mysql_select_db($database) or die("Error conecting to db.");
+// construct the query		suboptions = {
+			plusicon : "ui-icon-plus",
+			minusicon : "ui-icon-minus",
+			openicon: "ui-icon-carat-1-sw",
+			expandOnLoad:  false,
+			delayOnLoad : 50,
+			selectOnExpand : false,
+			reloadOnExpand : true
+		};
+$SQL = "SELECT item_num, item, qty, unit FROM invlines WHERE invid=".$id." ORDER BY item";
+$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());
+// set the header information
+if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
+            header("Content-type: application/xhtml+xml;charset=utf-8");
+} else {
+            header("Content-type: text/xml;charset=utf-8");
+}
+echo "<?xml version='1.0' encoding='utf-8'?>";
+echo "<rows>";
+// be sure to put text data in CDATA
+while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
+            echo "<row>";
+            echo "<cell>". $row[item_num]."</cell>";
+            echo "<cell><![CDATA[". $row[item]."]]></cell>";
+            echo "<cell>". $row[qty]."</cell>";
+            echo "<cell>". $row[unit]."</cell>";
+            echo "<cell>". number_format($row[qty]*$row[unit],2,'.',' ')."</cell>";
+            echo "</row>";
+}
+echo "</rows>";
+?>
+</code>
+===== Enable/Disable Subgrid =====
+A subGrid can be enabled (or disabled) dynamically (to respond to changes in the data in the main grid, for example).\\
+To disable subgrid :
+<code javascript>
+jQuery("#grid_id").hideCol('subgrid');
+</code>
+To enable subgrid
+<code javascript>
+jQuery("#grid_id").showCol('subgrid');
+</code>
+Where
+   * grid_id is to be replaced by the name of your grid, but
+   * subgrid is a keyword, not to be replaced
+To make this work, subGrid must be initially set to true in the jqGrid properties; only then can we enable and disable it using the code above.

Differences

Navigation

Search

Toolbox

QR Code