{"id":125504,"date":"2016-08-31T10:47:10","date_gmt":"2016-08-31T08:47:10","guid":{"rendered":"http:\/\/guriddo.net\/?post_type=kbe_knowledgebase&p=125504"},"modified":"2016-08-31T10:47:10","modified_gmt":"2016-08-31T08:47:10","slug":"display-hidden-fields-from-grid-in-edit-form-as-texts","status":"publish","type":"kbe_knowledgebase","link":"http:\/\/guriddo.net\/?kbe_knowledgebase=display-hidden-fields-from-grid-in-edit-form-as-texts","title":{"rendered":"Display hidden fields from grid in edit form as texts"},"content":{"rendered":"

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.<\/p>\n

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. <\/p>\n

In this example we will use custom_element<\/em> and custom_value<\/em> in editoptions object<\/a>. 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:
\n[js]
\ncolModel: [
\n…
\n {
\n label: ‘Freigh’,
\n name: ‘Freight’,
\n width: 150,
\n hidden : true,
\n editable: true,
\n edittype: "custom",
\n editoptions: {
\n custom_value: getFreightElementValue,
\n custom_element: createFreightTextElement
\n },
\n editrules : { edithidden : true }
\n },
\n…
\n],
\n[\/js]<\/p>\n

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<\/a><\/p>\n

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

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

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

As can be seen the function which creates the element createFreightTextElement<\/em> create a simple span element and append the value in this element. The function getFreightElementValue<\/em> 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<\/em> 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.
\n[js]
\n$("#jqGrid").navGrid("#jqGridPager",
\n { edit: true, add: false, del: false, search: false, refresh: true, view: false, align: "left" },
\n \/\/ edit form options
\n {
\n closeAfterEdit: true,
\n serializeEditData:function(data){
\n delete data[‘Freight’];
\n return data;
\n }
\n }
\n);
\n[\/js]<\/p>\n

That is all. The example can be seen in our demo page here<\/a><\/p>\n

Kind Regards,
\nTony Tomov<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","kbe_taxonomy":[94,91],"kbe_tags":[],"_links":{"self":[{"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/kbe_knowledgebase\/125504"}],"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\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=125504"}],"version-history":[{"count":5,"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/kbe_knowledgebase\/125504\/revisions"}],"predecessor-version":[{"id":125509,"href":"http:\/\/guriddo.net\/index.php?rest_route=\/wp\/v2\/kbe_knowledgebase\/125504\/revisions\/125509"}],"wp:attachment":[{"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=125504"}],"wp:term":[{"taxonomy":"kbe_taxonomy","embeddable":true,"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fkbe_taxonomy&post=125504"},{"taxonomy":"kbe_tags","embeddable":true,"href":"http:\/\/guriddo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fkbe_tags&post=125504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}