Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
wiki:subgrid [2009/09/18 09:26] tony |
wiki:subgrid [2011/08/30 09:06] (current) sof Colon miss in subGridModel options |
||
|---|---|---|---|
| Line 16: | Line 16: | ||
| ^Property^Type^Description^Default^ | ^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| | |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. | | | |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| | |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| | ||
| |subGridWidth|integer|Determines the width of the subGrid column if subgrid is enabled. |20| | |subGridWidth|integer|Determines the width of the subGrid column if subgrid is enabled. |20| | ||
| |subGridUrl|string|This option has effect only if subGrid option is set to true. This option points to the file from which we get the data for the subgrid. jqGrid adds the id of the row to this url as parameter. If there is a need to pass additional parameters, use the params option in subGridModel|empty string| | |subGridUrl|string|This option has effect only if subGrid option is set to true. This option points to the file from which we get the data for the subgrid. jqGrid adds the id of the row to this url as parameter. If there is a need to pass additional parameters, use the params option in subGridModel|empty string| | ||
| + | |ajaxSubgridOptions|object|This option allow to set global ajax settings for the subgrid when we request data. Note that with this option is possible to overwrite all current ajax setting in the subgrid request including the complete event.|empty object| | ||
| In order to configure the subgrid you will need to configure the subgrid item in xmlReader or jsonReader. The default setting for these are: | In order to configure the subgrid you will need to configure the subgrid item in xmlReader or jsonReader. The default setting for these are: | ||
| <code javascript> | <code javascript> | ||
| Line 63: | Line 64: | ||
| } | } | ||
| }); | }); | ||
| - | }, | + | },subgrid |
| ... | ... | ||
| }); | }); | ||
| Line 74: | Line 75: | ||
| * pID is the unique id of the div element where we can put contents when subgrid is enabled, | * pID is the unique id of the div element where we can put contents when subgrid is enabled, | ||
| * id is the id of the row | * id is the id of the row | ||
| + | * sPostData - the data which is posted when a subgrid request is made | ||
| ^Event^Parameters^Description^ | ^Event^Parameters^Description^ | ||
| Line 79: | Line 81: | ||
| |subGridRowExpanded|pID, id|This event is raised when the subgrid is enabled and is executed when the user clicks on the plus icon of the grid. Can be used to put custom data in the subgrid.| | |subGridRowExpanded|pID, id|This event is raised when the subgrid is enabled and is executed when the user clicks on the plus icon of the grid. Can be used to put custom data in the subgrid.| | ||
| |subGridRowColapsed|pID, id|This event is raised when the user clicks on the minus icon. The event should return true or false; when the returned value is false the row can not be collapsed.| | |subGridRowColapsed|pID, id|This event is raised when the user clicks on the minus icon. The event should return true or false; when the returned value is false the row can not be collapsed.| | ||
| + | |serializeSubGridData|sPostData|If set this event can serialize the data passed to the ajax request. The function should return the serialized data. This event can be used when a custom data should be passed to the server - e.g - JSON string, XML string and etc.| | ||
| ===== Methods ===== | ===== Methods ===== | ||
| ^Method^Parameters^Returns^Description^ | ^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| | |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| | |toggleSubGridRow|rowid|jqGrid object|dynamically toggle the subgrid row with the id = rowid| | ||
| Line 115: | Line 118: | ||
| subGrid: true, | subGrid: true, | ||
| subGridUrl : "subgrid.php", | subGridUrl : "subgrid.php", | ||
| - | subGridModel [ | + | subGridModel : [ |
| { | { | ||
| name : ['No', 'Item', 'Qty', 'Unit', 'Line Total'], | name : ['No', 'Item', 'Qty', 'Unit', 'Line Total'], | ||
| Line 128: | Line 131: | ||
| </code> | </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 innlines and has the following names: invid, item_num, item, qty, unit | + | 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> | + | <code php>subgrid |
| <?php | <?php | ||
| // get the id passed automatically to the request | // get the id passed automatically to the request | ||
| Line 138: | Line 141: | ||
| $date_inv = $_GET['invdate']; | $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 | // connect to the database | ||
| Line 144: | Line 156: | ||
| mysql_select_db($database) or die("Error conecting to db."); | mysql_select_db($database) or die("Error conecting to db."); | ||
| - | // construct the query | + | // 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"; | $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()); | $result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error()); | ||
