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.
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):
