Customize Edit Form Layout

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.

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
$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");

// 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. Make sure change “orders” to your own table name used for 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.

custom form edit layout php datagrid

See Live Example! (double click a row to see 2-column edit form)

No related content found.

Tags: , ,