jQuery Grid Plugin - jqGridForum

Topic RSS

Hiding cols in grid but show in add/edit/view

02/09/2009
22:19

Romyn

Member

Members

Forum Posts: 45

Member Since:
13/06/2009

Offline

Hi,

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/updatable when the dialogs were opened with form editing/viewing.

The Minor data is only of interest to some 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 horiz scroll.

Is this possible? Assistance, as always, greatly appreciated.

Regards

Romyn

03/09/2009
07:57

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

Romyn, the jqGrid supports this very nicely. 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

03/09/2009
08:09

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

You can also check out my blog for some other examples:

http://geekswithblogs.net/rens.....dding.aspx

Cool

04/09/2009
10:01

Romyn

Member

Members

Forum Posts: 45

Member Since:
13/06/2009

Offline

Thanks Renso,

That looks to be a pretty comprehensive reply so will no doubt be just what I needed - will be getting round to using it in the next couple of days.

Thanks again for your time.

Regards

Romyn

08/09/2009
17:15

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

Anytime, good luck!

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 994

Currently Online:
35 Guest(s)

Currently Browsing this Page:
1 Guest(s)