Use colspan and rowspan in edit form table + set width of select fields

QuestionsUse colspan and rowspan in edit form table + set width of select fields
Richard Kooijman asked 8 years ago

Hi, is it possible to use "colspan" and "rowspan" in the edit form (table) to have a better control on positioning the smaller and bigger fields. I'm also looking for a way to set fixed widths for the "select" fields in the edit form. Those are now controlled by the longest value in the list.

5 Answers
Abu Ghufran answered 8 years ago

Hi,

You can try using rowpos, colpos. Following setting means show this column in 1st row and 2nd column.
You can try some combinations with all fields.

$col["formoptions"] = array("rowpos"=>"1", "colpos"=>"2");

Abu Ghufran answered 6 years ago

Found 2 useful links w.r.t this query. Updating for reference and help others.

http://stackoverflow.com/questions/10006976/jqgrid-modal-colspan
http://www.trirand.com/blog/?page_id=393/help/making-a-multicolumn-form-for-edit

To set beforeShowForm event,

$opt["add_options"]["beforeShowForm"] = "function(){ ….. }";
$opt["edit_options"]["beforeShowForm"] = "function(){ ….. }";

$g->set_options($opt);

Abu Ghufran answered 6 years ago

Here is working demo and code.

Demo: http://phpgrid.org/demo/demos/integrations/html-editor.php
Code: http://phpgrid.org/demo/demos/integrations/html-editor.phps

$grid["add_options"]["afterShowForm"] = "function(form){
$('#tr_note>td:eq(1)').attr('colspan', '3');
$('#tr_note>td:eq(1)>input').css('width', '95%');
}";

Antonis Kosmopoulos answered 6 years ago

Hello. We are using premium version.
I tried to implement the 2nd approach in order to make rows containing textareas on the 1st column span the entire row (except for the label), but I can't get it to work. Is there something obviously wrong with my code?

$opt_pr["edit_options"]["beforeShowForm"] = 'function(form) {
form = $(form);
$("tr", form).each(function() {
var inputs = $(">td.DataTD:has(input,textarea)",this);
if (inputs.length == 1) {
var tds = $(">td", this);
tds.eq(1).attr("colSpan", tds.length – 1);
tds.slice(2).hide();
}
});
}';
$grid_pr->set_options($opt_pr);

Antonis Kosmopoulos answered 6 years ago

Thank you Abu, works like a charm.

Your Answer

4 + 9 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?