By default, the edit form is displayed a single column table. This is fine for table with small numbers of fields. When you got a large number of fields, the chances are that you want to modify the layout to display multiple columns. Use formoptions property “rowpos” and “colpos” for this purpose.
IMPORTANT
- The column order on the edit form, from top to bottom, and left to right, must match EXACTLY as the order in your Sql Select statement.
- set_col_required() function should always go BEFORE set_col_property(). This is because an existing bug in jqGrid that adds extra TD tags after the formoptions has been already created that will push everything else to the next line.
1 2 3 | // Always include namespace and conf.php on TOP of the script. use phpCtrl\C_DataGrid; require_once("/file/path/to/conf.php"); |
The following example demonstrates a 2-column edit form.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders"); // Required should be called BEFORE set_col_property $dg -> set_col_required("orderDate, shippeDate, customerNumber"); // change column titles $dg -> set_col_title("orderNumber", "Order No."); $dg -> set_col_title("orderDate", "Order Date"); $dg -> set_col_title("shippedDate", "Shipped Date"); $dg -> set_col_title("customerNumber", "Customer No."); // hide a column $dg -> set_col_hidden("requiredDate"); // enable edit $dg -> enable_edit("FORM", "CRUD"); $dg -> set_col_property("orderNumber", array("formoptions"=>array("rowpos"=>1,"colpos"=>1))); $dg -> set_col_property("orderDate", array("formoptions"=>array("rowpos"=>1,"colpos"=>2))); $dg -> set_col_property("requiredDate", array("formoptions"=>array("rowpos"=>2,"colpos"=>1))); $dg -> set_col_property("shippedDate", array("formoptions"=>array("rowpos"=>2,"colpos"=>2))); $dg -> set_col_property("status", array("formoptions"=>array("rowpos"=>3,"colpos"=>1))); $dg -> set_col_property("customerNumber", array("formoptions"=>array("rowpos"=>3,"colpos"=>2))); $dg -> set_col_property("comments", array("formoptions"=>array("rowpos"=>4,"colpos"=>1))); $dg -> set_col_property("comments", array("editoptions"=>array("style"=>"width:95%;"))); $dg->set_form_dimension(700, 400); $dg->enable_debug(false); $dg -> display(); |
Bonus! Set comments field to always have the full width of the form. Please change text “orders” to table name used for your grid.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script> // Make sure nothing else is sharing the same row! $(document).ready(function(){ var grid=$("#orders"); // your jqGrid (the <table> element) var orgEditGridRow = grid.jqGrid.editGridRow; // save original function $.jgrid.extend ({editGridRow : function(rowid, p){ $.extend(p, { beforeShowForm : function(form) { form = $(form); $("tr", form).each(function() { var inputs = $(">td.DataTD:has(textarea)",this); if (inputs.length == 1) { var tds = $(">td", this); tds.eq(1).attr("colSpan", tds.length - 1); tds.slice(2).hide(); } }); } }); orgEditGridRow.call (this,rowid, p); }}); }); </script> |
Form Layout Screenshot
Hint: the edit form is resizable by click and drag bottom-right corner using mouse.
See Live Example! (double click a row to see 2-column edit form)
A sample form layout (from a actual customer):
