Using templates in form editing

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 :

In navigator the code is:

[js]$("#grid").jqGrid("navGrid",
{add:true, edit:true,…},
{template: "template string for edit",…}
{template: "template string for add",…},
…
);
[/js]

and in editGridRow method:

[js]
$("#grid").jqGrid("editGridRow",
rowid,
{template: "template string",…}
);[/js]

where the ‘template string’ is a string containing html tags and a special marks which points where the field from the grid should be.

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.

Let suppose that we have the following colModel (not all fields are present)

[js]
$("grid").jqGrid({
…
colModel: [
{
label: ‘Customer ID’,
name: ‘CustomerID’,
width: 75,
key: true,
editable: true,
editrules : { required: true}
},
{
label: ‘Company Name’,
name: ‘CompanyName’,
width: 140,
editable: true // must set editable to true if you want to make the field editable
},
…
],

…

});[/js]

To place the CustomerID field in the template the following code string should be inserted in the template string

[js]{CustomerID}[/js]

With other words this is the name from colModel put in { }.

To place the Save and Cancel buttons we need to write a special code:
For the save button this is {sData} and for the cancel button this is a {cData}

The same apply for the navigator buttons for previous and next record.
For previous button this is {pData} and for the next button this is a {nData}

Below is the simple template which implements divs to represent the form.

[js]
var template = "<div style=’margin-left:15px;’><div> Customer ID ^*:</div><div> {CustomerID} </div>";
template += "<div> Company Name: </div><div>{CompanyName} </div>";
template += "<div> Phone: </div><div>{Phone} </div>";
template += "<div> Postal Code: </div><div>{PostalCode} </div>";
template += "<div> City:</div><div> {City} </div>";
template += "<hr style=’width:100%;’/>";
template += "<div> {sData} {cData} </div></div>";

$("#jqGrid").jqGrid({
url: ‘data.json’,
// we set the changes to be made at client side using predefined word clientArray
editurl: ‘clientArray’,
datatype: "json",
colModel: [
{ label: ‘Customer ID’,
name: ‘CustomerID’,
width: 75,
key: true,
editable: true,
editrules : { required: true} },
{ label: ‘Company Name’,
name: ‘CompanyName’,
width: 140,
editable: true /* must set editable to true if you want to make the field editable*/ },
{
label : ‘Phone’,
name: ‘Phone’,
width: 100,
editable: true
},
{
label: ‘Postal Code’,
name: ‘PostalCode’,
width: 80,
editable: true
},
{
label: ‘City’,
name: ‘City’,
width: 140,
editable: true
}
],
sortname: ‘CustomerID’,
sortorder : ‘asc’,
loadonce: true,
viewrecords: true,
width: 780,
height: 200,
rowNum: 10,
pager: "#jqGridPager"
});

$(‘#jqGrid’).navGrid(‘#jqGridPager’,
// the buttons to appear on the toolbar of the grid
{ edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
//options for the Edit Dialog
{
editCaption: "The Edit Dialog",
template: template,
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
},
// options for the Add Dialog
{
template: template,
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
},
// options for the Delete Dailog
{
errorTextFormat: function (data) {
return ‘Error: ‘ + data.responseText
}
} );

[/js]