jqGrid hide columns but show when editing/adding

Issue:

I have a grid which I have what I can only describe as containing “Core” data and “Minor” data. What I'd like to be able to do is to show the Core data in the main grid view but to allow the user to add/edit/view the Core and Minor data when they open the relevant dialog.

In essence this would be like having hidden columns that were viewable/editable when the dialogs were opened with form editing/viewing.

The Minor data is only of interest to some users, so I don't want to show it in the main grid view and this would also help keep the grids width down and not have a long horizontal scroll.

Is this possible?

Short answer: YES it is very possible and very well supported in the jqGrid

Long answer:

Here is an example, it contains a lot but wanted to also show you some other tips that you may find helpful, see the explanation of the tip by matching the color with the colored comment at the end of this post.

        .jqGrid({
            url: listURL,
            postData: { accountId: $('fieldset#AccountDetails #Id').val() },
            datatype: “json”,
            colNames: ['Id', '', 'Name', 'First Name', 'Middle name', 'Last Name', 'Phone', 'Email', 'Activity', 'Title', 'Prefix', 'Suffix', 'Account Role', 'DM Role', 'DISC Profile', 'Notes'],
            colModel: [
                { name: 'Id', index: 'Id', width: 35, sortable: true, align: "center", resizable: false, hidden: false, editable: false, editoptions: { readonly: true, size: 0} },
                { name: 'EditUrl', index: '', width: 28, editable: false, sortable: false, align: "center", resizable: false },
                { name: 'FullNameUrl', index: 'FullNameUrl', width: 80, editable: false, sortable: true, align: "left", resizable: true, editrules: { edithidden: false} },
                { name: 'FirstName', index: 'FirstName', width: 40, editable: true, sortable: true, align: "left", resizable: true, hidden: true, editrules: { edithidden: true, required: true} },
                { name: 'MiddleName', index: 'MiddleName', width: 40, editable: true, sortable: true, align: "left", resizable: true, hidden: true, editrules: { edithidden: true} },
                { name: 'LastName', index: 'LastName', width: 40, editable: true, sortable: true, align: "left", resizable: true, hidden: true, editrules: { edithidden: true} },
                { name: 'PhoneNumber', index: 'PhoneNumber', width: 80, editable: false, sortable: false, align: "left", resizable: true },
                { name: 'Email', index: 'Email', width: 80, editable: false, sortable: false, align: "left", resizable: true },
                { name: 'ActivityStatus', index: 'ActivityStatus', width: 40, editable: true, sortable: true, align: "left", resizable: true, edittype: "select", editoptions: { value: allActivityStatuses }, editrules: { edithidden: true, required: true} },
                { name: 'Title', index: 'Title', width: 80, editable: true, sortable: true, align: "left", resizable: true },
                { name: 'Prefix', index: 'Prefix', width: 80, editable: true, sortable: true, align: "left", resizable: true, hidden: true, editrules: { edithidden: true} },
                { name: 'Suffix', index: 'Suffix', width: 80, editable: true, sortable: true, align: "left", resizable: true, hidden: true, editrules: { edithidden: true} },
               {name: 'ContactRoleNames', index: 'ContactRoleNames', width: 40, editable: true, hidden: true, hidedlg: true, edittype: "select", editoptions: { multiple: true, size: 4, value: allAccountRoles }, editrules: { edithidden: true, required: true} },
                { name: 'DMRole', index: 'DMRole', width: 30, editable: true, sortable: false, align: "center", resizable: false, edittype: "select", hidden: true, editoptions: { value: allDMRoles }, editrules: { edithidden: true, required: true} },
                { name: 'DISCProfile', index: 'DISCProfile', width: 30, editable: true, sortable: false, align: "center", resizable: false, edittype: "select", hidden: true, editoptions: { value: allDISCProfiles }, editrules: { edithidden: true, required: true} },
                { name: 'Notes', index: 'Notes', width: 85, editable: true, sortable: false, align: "left", resizable: true, edittype: "textarea", editoptions: { rows: "2", cols: "40"} }

            ],

To your question, I display the Full Name of the contact, but want to hide the full name when editing but show the FirstName, MiddleName and LastName when editing/adding. Notice the “hidden: true, editrules: { edithidden: true}” properties.

This EditUrl is visible in the grid, but its just an image hyperlink to another page and cannot be edited, hence, “editable: false“

The DISCProfile column has a drop down box with dynamically loaded data: “editoptions: { value: allDISCProfiles }“. This data is retrieved before the grid is defined in the JavaScript file with:

var allDISCProfiles = $.ajax({ url: $('#ajaxAllDISCProfilesUrl').val(), async: false, success: function(data, result) { if (!result) alert('Failure to retrieve the DISC Profiles.'); } }).responseText;

Hope this helps

New on Geeks with Blogs