As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add\/or add options of navigator. This can be done in navigator or in the editing method editGridRow :<\/p>\n
In navigator the code is:<\/p>\n
[js]$("#grid").jqGrid("navGrid",
\n {add:true, edit:true,…},
\n {template: "template string for edit",…}
\n {template: "template string for add",…},
\n…
\n);
\n[\/js]<\/p>\n
and in editGridRow method:<\/p>\n
[js]
\n$("#grid").jqGrid("editGridRow",
\n rowid,
\n {template: "template string",…}
\n);[\/js]<\/p>\n
where the ‘template string’ is a string containing html tags and a special marks which points where the field from the grid should be.<\/p>\n
Note that the template for edit can be a different from the template from add operation. The template can be present only for add and only for edit operation.<\/p>\n
Let suppose that we have the following colModel (not all fields are present)<\/p>\n
[js]
\n$("grid").jqGrid({
\n…
\ncolModel: [
\n {
\n label: ‘Customer ID’,
\n name: ‘CustomerID’,
\n width: 75,
\n key: true,
\n editable: true,
\n editrules : { required: true}
\n },
\n {
\n label: ‘Company Name’,
\n name: ‘CompanyName’,
\n width: 140,
\n editable: true \/\/ must set editable to true if you want to make the field editable
\n },
\n …
\n],<\/p>\n
…<\/p>\n
});[\/js]<\/p>\n
To place the CustomerID field in the template the following code string should be inserted in the template string <\/p>\n
[js]{CustomerID}[\/js]<\/p>\n
With other words this is the name from colModel put in { }.<\/p>\n
To place the Save and Cancel buttons we need to write a special code:
\nFor the save button this is {sData} and for the cancel button this is a {cData}<\/p>\n
The same apply for the navigator buttons for previous and next record.
\nFor previous button this is {pData} and for the next button this is a {nData}<\/p>\n
Below is the simple template which implements divs to represent the form.<\/p>\n
[js]
\nvar template = "<div style=’margin-left:15px;’><div> Customer ID <sup>*<\/sup>:<\/div><div> {CustomerID} <\/div>";
\ntemplate += "<div> Company Name: <\/div><div>{CompanyName} <\/div>";
\ntemplate += "<div> Phone: <\/div><div>{Phone} <\/div>";
\ntemplate += "<div> Postal Code: <\/div><div>{PostalCode} <\/div>";
\ntemplate += "<div> City:<\/div><div> {City} <\/div>";
\ntemplate += "<hr style=’width:100%;’\/>";
\ntemplate += "<div> {sData} {cData} <\/div><\/div>";<\/p>\n
$("#jqGrid").jqGrid({
\n url: ‘data.json’,
\n \/\/ we set the changes to be made at client side using predefined word clientArray
\n editurl: ‘clientArray’,
\n datatype: "json",
\n colModel: [
\n { label: ‘Customer ID’,
\n name: ‘CustomerID’,
\n width: 75,
\n key: true,
\n editable: true,
\n editrules : { required: true} },
\n { label: ‘Company Name’,
\n name: ‘CompanyName’,
\n width: 140,
\n editable: true \/* must set editable to true if you want to make the field editable*\/ },
\n {
\n label : ‘Phone’,
\n name: ‘Phone’,
\n width: 100,
\n editable: true
\n },
\n {
\n\t label: ‘Postal Code’,
\n name: ‘PostalCode’,
\n width: 80,
\n editable: true
\n },
\n {
\n\t label: ‘City’,
\n name: ‘City’,
\n width: 140,
\n editable: true
\n }
\n ],
\n sortname: ‘CustomerID’,
\n sortorder : ‘asc’,
\n loadonce: true,
\n viewrecords: true,
\n width: 780,
\n height: 200,
\n rowNum: 10,
\n pager: "#jqGridPager"
\n});<\/p>\n
$(‘#jqGrid’).navGrid(‘#jqGridPager’,
\n \/\/ the buttons to appear on the toolbar of the grid
\n { edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
\n \/\/options for the Edit Dialog
\n {
\n editCaption: "The Edit Dialog",
\n template: template,
\n errorTextFormat: function (data) {
\n return ‘Error: ‘ + data.responseText
\n }
\n },
\n \/\/ options for the Add Dialog
\n {
\n template: template,
\n errorTextFormat: function (data) {
\n return ‘Error: ‘ + data.responseText
\n }
\n },
\n \/\/ options for the Delete Dailog
\n {
\n errorTextFormat: function (data) {
\n return ‘Error: ‘ + data.responseText
\n }
\n } );<\/p>\n
[\/js]<\/p>\n","protected":false},"excerpt":{"rendered":"
As of version 4.8 we support templates in the form editing. This allow to customize the edit form in a way the developer want. To use a template it is needed to set the parameter template in the edit add\/or […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","kbe_taxonomy":[94,91],"kbe_tags":[],"_links":{"self":[{"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/kbe_knowledgebase\/123769"}],"collection":[{"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/kbe_knowledgebase"}],"about":[{"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/types\/kbe_knowledgebase"}],"author":[{"embeddable":true,"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=123769"}],"version-history":[{"count":1,"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/kbe_knowledgebase\/123769\/revisions"}],"predecessor-version":[{"id":123770,"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/kbe_knowledgebase\/123769\/revisions\/123770"}],"wp:attachment":[{"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=123769"}],"wp:term":[{"taxonomy":"kbe_taxonomy","embeddable":true,"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fkbe_taxonomy&post=123769"},{"taxonomy":"kbe_tags","embeddable":true,"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fkbe_tags&post=123769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}