Display hidden fields from grid in edit form as texts

There are situation where we need to display the fields in edit form as texts, without a need to update it – just for information. In this article I will explain how to achieve this.

In Guriddo jqGrid there is no build-in way to display certain fields in forms as text for information purposes. Fortunately we have a custom functions with which we can do this.

In this example we will use custom_element and custom_value in editoptions object. The another requirement is that the field should be hidden in grid, but displayed into the form. Below are the settings in colModel which will do this:
[js]
colModel: [
…
{
label: ‘Freigh’,
name: ‘Freight’,
width: 150,
hidden : true,
editable: true,
edittype: "custom",
editoptions: {
custom_value: getFreightElementValue,
custom_element: createFreightTextElement
},
editrules : { edithidden : true }
},
…
],
[/js]

In order not to display the field in grid, but in edit form we need to set the hidden option to true and edithidden option to true in editrules object

Now the field should be defined as editable and tell that a custom edit will be applied. This is done with editable: true and edittype: “custom” options in colModel. When a custom edit type is used we need to define two functions in editoptions – custom_element, which is responsible for the creation of our element and custom_value which is responsible for the manipulation of the value for that element. Bello are our two functions.

[js]
function createFreightTextElement(value, editOptions) {
return $("<span>"+value+"</span>");
}

function getFreightElementValue(elem, oper, value) {
if (oper === "set") {
$(elem).text(value)
}
if (oper === "get") {
return $(elem).text();
}
}
[/js]

As can be seen the function which creates the element createFreightTextElement create a simple span element and append the value in this element. The function getFreightElementValue set the value in form when we walk through the records with navigator buttons (oper = set) and return the value when we push the Submit button form (oper= get). In case if there is a no need to submit this value to the server a serrializeEditData event should be defined in order to remove this Element. Below is the code that do this.
[js]
$("#jqGrid").navGrid("#jqGridPager",
{ edit: true, add: false, del: false, search: false, refresh: true, view: false, align: "left" },
// edit form options
{
closeAfterEdit: true,
serializeEditData:function(data){
delete data[‘Freight’];
return data;
}
}
);
[/js]

That is all. The example can be seen in our demo page here

Kind Regards,
Tony Tomov