Change CSS of the Add Form Using Jqgrid

Change CSS of the add form using jqGrid

All CSS styles which uses jqGrid for the add/edit forms you can find here and here. If you would examine the lines and examine the HTML fragment of any jqGrid form you would see all classes used by jqGrid.

I don't understand only what you mean under "to import another css". The "import" would works only if you have somewhere another CSS styles with the same class names and the same hierarchy of the elements (dives, tables, tr and so on elements). So it's possible to change the styles of forms used by jqGrid, but the adjustment of the styles will be not so easy. You have to examine the structure of the jqGrid dialogs (forms) exactly to be able to make the changes.

UPDATED: jqGrid uses jQuery UI styles. So you need just change the jQuery UI to another one and jqGrid will use it.

For example the demo (simple modification of the old demo from the answer) produce the following Edit form:

Sample Image

jqGrid: Create a custom edit form

You can definitely achieve this by jquery ui dialog. However I can not put full code for you but helps you in the steps you have to do.
1 design your custom form whatever CSS and style you want to apply.
Suppose this is youe custome form

<div id="dialog-div">
<input type="text">
</div>

2 on jquery dialog open the dialog on your jqgrid editbutton click

$("#edit").click(function(){
var rowdata = $("#coolGrid").jqGrid('getGridParam','selrow');
if(rowdata){
$("#dialog-div").dialog('open');
var data = $("#coolGrid").jqGrid('getRowData',rowdata);
alert(data);
}
});

by default it will close as-

$("#dialog-div").dialog({
autoOpen: false,
});

Now as you get data in variable you can put in your edit form and of jquery dialog button save it according to your logic.
Hope this helps you.

PHP jqGrid can edit the add/edit form properties?

If I currently understand your first problem then you should add recreateForm: true option to both Add and Edit options. Default behavior of jqGrid is hiding of the Add/Edit form. At the next call the form will be shown again and some properties will be just tried to adjusted. So if the user first click Add button and then Edit then Add form will be created first and at the click on Edit button later jqGrid show Addit form back and just set some properties (title, call some callbacks and so on). More safe in my opinion to use recreateForm: true which first delete any old for if some exist and only then it creates new form.

The usage of textarea instead of input field can be managed by usage edittype property: edittype: "textarea".

jqGrid - How to modify form_editing construction?

There are rowpos and colpos properties of formoptions which would be helpful for you.

The demo demonstrate how you can change the standard editing form created by jqGrid to the following

Sample Image

If I understand correct your problem the usage of rowpos and colpos could be very helpful in your case.

Custom radio button jqgrid edit form

Your code have at least two errors.

The first problem is in the GenderRadio function (used as the value of custom_element). It should return one HTML element, but GenderRadio return HTML fragment which consist of two <input> elements and additional text nodes. You can fix the problem by wrapping the returned value inside of <span>... </span>.

The second problem: the code of GenderValue (used as the value of custom_value) need be fixed. You use strange syntax to set the value: $('GenderValue', elem). What is "GenderValue"? And it's sure is not the name of some element. I suppose that you means the value of name attribute (RadioGender), used by radio buttons. In the case you should use $("input[name=RadioGender]", elem) or better $(elem).find("input[name=RadioGender]"). Additionally you should use .is(":checked") of the first (Male) or on the second (Female) radio button to test whether it's checked or not. The corresponding fixed code could be the following:

function GenderRadio(value, options) {
var male = '<span><input type="radio" name="RadioGender" value="0"';
var breakline = '/>Male';
var female = ' <input type="radio" name="RadioGender" value="1"';
var end = '/>Female</span>';
var radiohtml;
if (value == 0) {
radiohtml = male + ' checked="checked"' + breakline + female + end;
return radiohtml;
} else if (value == 1) {
radiohtml = male + breakline + female + ' checked="checked"' + end;
return radiohtml;
} else {
return male + breakline + female + end;
}
}

function GenderValue(elem, operation, value) {
var $elems = $(elem).find("input[name=RadioGender]");
if (operation === "get") {
return $elems.first().is(":checked") ? 0 : 1;
} else if (operation === "set") {
$elems.val(value);
}
}

How to fix duplicate form key post in form edit after free jqgrid upgrade

You use useDataproxy option. Thus jqGrid don't send any data at all. If some problems exists than it should be probably in the code of dataProxyAjax or the code of jquery.form.js. jqGrid just prepare the data in postdata object. The object contains only one property with Pilt name. Thus any problems with "duplicate form key post" could be not a bug in free jqGrid.

If you want that free jqGrid use the same encoding of output characters as before, then you need just include autoEncodeOnEdit: true jqGrid option. Moreover you can use any custom encoding by usage of serializeEditData.

UPDATED: The problem was in the usage of jQuery.val() for filling of all fields of Add/Edit form. The changes was introduced to allow support of HTML5 input elements with new type values (number, color, range and so on). As the side effect jqGrid filled the fields which had the type image and file. It was the origin of the reported problem.

The problem should be fixed after posting the commit.

jqGrid: how to do form edit if all fields do not fit to screen

You can try to use Edit/Add option like

afterShowForm: function($form) {
$form.css({overflow: 'scroll'});
}

to force the usage of the scroll bar in the form or to change the CSS for form.FormGrid with the same overflow: scroll value.

You can try to use different values of height and width property of the Edit/Add option (see the documentation).

Probably you can solve the problem just by setting of the cols and rows attributes:

edittype:'textarea', editoptions: {rows:"10",cols:"80"}

for the corresponding column (see the documentation)

JQGrid - show additional columns in edit form

If you want to show and not to edit the columns then the usage of viewGridRow as the usage of editGridRow. Moreover I would suggest you to consider to use columnChooser which allows user to hide/show columns of the grid or to change its order. For example you can display in the grid only subset of 30 rows, use navGrid to add View Details button (you need use view: true option) and use navButtonAdd to add custom button with column chooser. You can additionally makes explicit call of viewGridRow inside of ondblClickRow callback. One need add the properties editrules: {edithidden: true} in the definition of all hidden columns which need be visible/editable in View/Edit/Add forms

The resulting grid can look like on the following demo or like here:

$(function () {  "use strict";  var mydata = [    { id: "10",  invdate: "2007-10-01", name: "test1",  note: "note1",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },    { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },    { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },    { id: "40",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },    { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },    { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },    { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },    { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },    { id: "90",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },    { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },    { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },    { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }  ],      $grid = $("#list"),      initDateEdit = function (elem) {        $(elem).datepicker({          dateFormat: "dd-M-yy",          autoSize: true,          changeYear: true,          changeMonth: true,          showButtonPanel: true,          showWeek: true        });      },      initDateSearch = function (elem) {        var $self = $(this);        setTimeout(function () {          $(elem).datepicker({            dateFormat: "dd-M-yy",            autoSize: true,            changeYear: true,            changeMonth: true,            showWeek: true,            showButtonPanel: true,            onSelect: function () {              if (this.id.substr(0, 3) === "gs_") {                // call triggerToolbar only in case of searching toolbar                setTimeout(function () {                  $self[0].triggerToolbar();                }, 100);              }            }          });        }, 100);      },      numberTemplate = {formatter: "number", align: "right", sorttype: "number",                        editrules: {number: true, required: true},                        searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
$grid.jqGrid({ datatype: "local", data: mydata, colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"], colModel: [ { name: "name", align: "center", editable: true, width: 65, editrules: {required: true} }, { name: "invdate", width: 80, align: "center", sorttype: "date", formatter: "date", formatoptions: { newformat: "d-M-Y" }, editable: true, datefmt: "d-M-Y", editoptions: { dataInit: initDateEdit }, searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } }, { name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox", edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } }, { name: "ship_via", width: 105, align: "center", editable: true, formatter: "select", edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" }, stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } }, { name: "note", width: 60, sortable: false, editable: true, edittype: "textarea", hidden: true }, { name: "tax", width: 52, editable: true, template: numberTemplate, hidden: true }, { name: "amount", width: 75, editable: true, template: numberTemplate, hidden: true }, { name: "total", width: 60, template: numberTemplate } ], cmTemplate: {editable: true, editrules: {edithidden: true}}, rowNum: 10, rowList: [5, 10, 20], pager: "#pager", gridview: true, autoencode: true, ignoreCase: true, sortname: "name", viewrecords: true, sortorder: "desc", rownumbers: true, shrinkToFit: false, height: "auto", ondblClickRow: function (rowid) { $(this).jqGrid("viewGridRow", rowid); } }); $.extend($.jgrid.view, { caption: "View Record Details", recreateForm: true }); $grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false, search: false, refresh: false, view: true, viewtitle: "View details of selected row" }); $grid.jqGrid("navButtonAdd", "#pager", { caption: "", buttonicon: "ui-icon-calculator", title: "Choose Columns to display in the grid", onClickButton: function () { $(this).jqGrid("columnChooser"); } });});
.ui-jqgrid-hdiv { overflow-y: hidden; }
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/><link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/><link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script><script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/ui.multiselect-fixed.js"></script><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script><script type="text/javascript">  $.jgrid.no_legacy_api = true;  $.jgrid.useJSON = true;</script><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script><script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/jQuery.jqGrid.columnChooser.js"></script>
<table id="list"><tr><td></td></tr></table><div id="pager"></div>


Related Topics



Leave a reply



Submit