jqgrid form editing: add field to the form

Question

I've been using jqGrid since a couple of months and I'm really happy to do that :)

I'm using successfully jqGrid in a ASP.NET web application, everything works correctly. I decided to use jqGrid form editing, 'cause entities have a lot of properties I've to cope with. I understand that if colModel contains 5 cols they appear on the modal dialog form (edit action) if properties have editable:true. Moreover, I can set that 4 properties are visibile and last one is hidden (even if it can appear on the form, by setting edithidden: true).

Is there a way I can set 4 properties in the colModel, but there are one,two or much more fields in the popup modal form?

EDIT:

Please look at this code:

ajaxSelectOptions: { type: "POST", contentType: "application/json; charset=utf-8", },
colNames: [
        'ID', 'Code', 'Number',  'Floor (nr.)', 'Descr', 'Type', 
        'Create by', 'Creation date', 
        'Status', 'Features'],
colModel: [
        { name: 'ID', index: 'id', width: 10, align: "center", search: false, sorttype: 'int', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { name: 'Code', index: 'Code', width: 20, align: "center", sorttype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { 
        name: 'Number', 
        index: 'Number', 
        width: 20, 
        align: "center", 
        sorttype: 'int', 
        searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
        editable: true, 
        editoptions: { size : 20 },
        editrules: { required: true }
        },
        {
        name: 'Floor',
        index: 'Floor',
        width: 30,
        align: "center",
        sorttype: 'int',
        search: false,
        edittype: 'select',
        editable: true,
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid" name="myid">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        },
        editrules: { required: true }
        },
        { name: 'Descr', index: 'Descr', width: 40, align: "center", sorttype: 'text', editable: true, editoptions: { size: 10} },
        { 
        name: 'Type', 
        index: 'Type', 
        width: 50, 
        align: "center", 
        sorttype: 'text', 
        edittype: 'select',
        editable: true,
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid2" name="myid2">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        },
        editrules: { required: true }
        },
        { name: 'CreatedBy', index: 'CreatedBy', align: "center", search: false, sorttype: 'text', width: 40, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { name: 'CreationDate', index: 'CreationDate', align: "center", search: false, sorttype: 'text', width: 30, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, editable: false, editoptions: { readonly: true} },
        { 
        name: 'Status',
        index: 'Status', 
        width: 50, 
        hidden: true, 
        edittype: 'select',
        editable: true, 
        editrules: { edithidden: true, required: true }, 
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid3" name="myid3">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        }
        },
        { 
        name: 'Features',
        index: 'Features', 
        width: 50, 
        hidden: true, 
        edittype: 'select',
        editable: true, 
        editrules: { edithidden: true, required: true }, 
        editoptions: {
            dataUrl: '<%# ResolveUrl("~/path/to/myCSharpWebService") %>',
            buildSelect: function (data) {
            var retValue = $.parseJSON(data);
            var response = $.parseJSON(retValue.d);

            var s = '<select id="myid4" name="myid4">';

            if (response && response.length) {
                for (var i = 0, l = response.length; i < l; i++) {
                s += '<option value="' + response[i]["Id"] + '">' + response[i]["Descrizione"] + '</option>';
                }
            }

            return s + "</select>";
            }
        }
        }
      ],

this is an extract of the function I use to create a grid on my aspx page. There are 10cols, as you can see from colModel, but just 7 of them are shown by jqGrid; I need the others 'cause I want to show them up in modal popup form when I edit a record on the grid.

Now, I'd like to write down cleaner code: I'd prefer to add these 3 more fields on edit button click when popup is built, instead of listing them in colModel

Do you want to customize the edit form adding some additional information? Do you want that the values from the additional fields will be sent to the server? From where you want get the information for the fields? Is it just fields from hidden columns or some another information? I am not sure what you exactly want. An example would clear all. — Oleg, Jan 16 '12 at 23:15
pls look at the EDIT section ... thx for your comment, Oleg (I really appreciate your job on stackoverflow) — frabiacca, Jan 17 '12 at 09:22

score 1 · Accepted Answer · edited May 23 '17 at 10:34

If I understand your question correct you will be able to implement your requirements by setting readonly='readonly' or disabled='disabled' attributes dynamically in beforeShowForm callback of the edit form.

For general understanding it's important to know that when jqGrid create the edit form then it place all hidden fields in the form too. It simplify sending of hidden fields to the server on the form submit. So you can have in hidden columns of the grid any information which you plan to show in the edit form. Inside of your implementation of the beforeShowForm callback you can dynamically show the hidden fields, but set 'readonly' attributes if needed. The 'ID', 'Code', 'CreatedBy' and 'CreationDate' from your grid for example can be shown in the way.

You can use additionally column chooser to hide the columns initially, but allow the user to display the additional information if it's really needed. You can find here an example of the usage of the column chooser.

Some more general recommendation to your code. I would recommend you to use so named column templates in your grid and to share the code of buildSelect which you use.

For example, if you use align: "center" in the most columns of the grid you can use cmTemplate: {align: "center"} option of the jqGrid and remove align: "center" from every column. You can also define some templates which you use everywhere in all your grids as template parameter of colModel. In the answer you will find an example of one simple myDateTemplate formatter. In case of the usage datepicker in the columns the template will be more complex, but the sharing of the code will be even more important. See the demo from the answer or the demo from the another answer.

thx oleg, i'm going to try in the next few hourse .. I'll be back with a feedback :) — frabiacca, Jan 17 '12 at 11:19

jqgrid form editing: add field to the form

1 Answers1