jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Multiple Select in formedit mode not showing selected items

01/07/2009
07:02

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

(version 1.3.2)

Not sure if I am doing something wrong but for the edittype:”select” col model property with editoptions:{multiple:true,size:4,value:allAccountRoles}, it does not makr the selected items as selected (highlight) items in the listbox. It does show all the selectable options. No matter if I have one option or multiple options selected, it does not select/highlight them.

Here is my colModel {name:'AccountRole', index:'AccountRole', width:40, editable:true, align:”left”, hidden:true, edittype:”select”, editoptions:{multiple:true,size:4,value:allAccountRoles}, editrules:{edithidden:true,required:true}},
During loadComplete I then load the actual data into var allAccountRoles and setColProp appropriately (see below):

loadComplete: function()    {
                //get all Account Roles
                allAccountRoles = $.ajax({url: $('#ajaxAllAccountRolesUrl').val(), async: false, success: function(data, result) {if (!result) alert('Failure to retrieve the Account Roles.');}}).responseText;
                $(item).setColProp('AccountRole',{editoptions:{multiple:true,size:4,value:allAccountRoles}});

I perform this in many grids with no issues and is my modus operandi for al my grids as I perform ajax calls for the list data when I need it. I can see my data being loaded via the ajax call but for some reason it does not highlight the selected options

Here is the result of the ajax call that fecthes the list of account roles:

1:Website Contact;2:Materials Contact;3:Lead Followup;4:Payment

Here is the HTML definition of the column in the formedit (modal dialog):

<option value=”1“>Website Contact</option>

<option value=”2“>Materials Contact</option>

<option value=”3“>Lead Followup</option>

<option value=”4“>Payment</option>

</select>

I tried to set the col properties during both gridComplete and loadComplete, same result.
Not sure if it is not supported or a bug. I see in formedit.js, line 276:

case “select-multiple”:
postdata[this.name]= $(this).val();
var selectedText = [];
$(”option:selected”,this).each(
function(i,selected){
selectedText[i] = $(selected).text();
}
);
extpost[this.name]= selectedText.join(”,”);
break;

I notice that postdata[this.name] = $(this).val(), where the value of this.name = “AccountRole” and the result of this.val() is an array of 2,3 (second and third options selected) :
So in short it does not work when I click to edit the row and the modal dialog shows up, but once I seletc onw/more options in die modal dialog and click subit does stay selected. However after I close the modal dilaog and re-open again does not show my selected items.

Any ideas?

02/07/2009
02:07

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

One reason for this is that in this case the data in the grid does not match the data setted in column properties.

If you set

1:Website Contact;2:Materials Contact;3:Lead Followup;4:Payment

but in the grid you data is by example " Payment " or "Payment    "
you will never get chance for the selection. Note that we compare 
the text for the selected item and not the key.

By the way if you use form edit you do not  need to change the select option
values in loadComplete. You should do it only once. In form edit when the 
select is created we use only once the values from colModel. In your case
I recommend you to set the recreateForm to true in edit and add form 
parameters in order to use your newly generated values.


Regards
Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

02/07/2009
07:12

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

Thank you Tony!

Concerning your advice on the select optionvalues, I did this because I did not want the lookup data loaded unless the person selects to edit a row or add a new one, I did not know where else to set the col properties. I mean, why load the seelect's lookup data unless the user decides to edit/add rows.

I was trying to understand what you meant by "form edit", you mean the "edit options" object definition in navGrid? Example:

...

        .navGrid(item + 'Pager',
            { refresh: true, edit: true, add: true, del: true, search: false }, //options
            {height: 280, width: 500,
            reloadAfterSubmit: true,
            modal: true,
            processData: 'Updating the Contact info...',
            editCaption: 'Edit a Contact',
            recreateForm: true,
            afterSubmit: function(response, postdata) {
                return SetupResponseMessage(item, response, "The Contact has been successfully updated.")
            }
        }, // edit options

...

I guess in stead of this method I could also use the editGridRow method?

So again from my example code above is this what you meant by "form edit"?

Just as a side note, the lookup data I get does not change between rows, it is the same for all the rows.

"Form parameters", I don't know what you meant by this. I assume it is javascript variable that I declare before the jqGrid definition, like so:

var allAccountRoles = $.ajax({ url: $('#ajaxAllAccountRolesUrl').val(), async: false, success: function(data, result) { if (!result) alert('Failure to retrieve the Account Roles.'); } }).responseText;

$(item)
.jqGrid({...

Let me know if this is what you meant.

Why do I need to set recreateForm, I am not sure what the reason for this would be in my situation?

In a perfect world I would like to fetch the lookup data via ajax only when the user selects to edit/add and then only fetch it once, like when initializing the form edit/add modal dialog form. Is this possible?

02/07/2009
16:09

Renso

Member

Members

Forum Posts: 118

Member Since:
11/09/2008

Offline

Tony I tested the content of the options passed into the editoptions valuie defined in the colModel as well as the values passed back to the grid, and no matter how I format it, it does not work. I have included samples of my code below, but if you have a working example of this can you send it to me as none of the demo versions show this example.

Here is my select tag as I copied it out of firebug:

<select multiple="" id="ContactRoleString" name="ContactRoleString" size="4" class="FormElement"><option value="1">Website Contact</option><option value="2">Materials Contact</option><option value="3">Lad Followup</option><option value="4">Payment</option></select>

Since I thought that the problem may be with my ajax call I rather declared a static list of values to elliminate this as a possible suspect:

{name: 'ContactRoleString', index: 'ContactRoleString', width: 40, editable: true, hidden: true, hidedlg: true, edittype: "select", editoptions: { multiple: true, size: 4, value: "1:Website Contact;2:Materials Contact;3:Lead Followup;4:Payment" }, editrules: { edithidden: true, required: true} },

Here is the response returned via the ajax call, also pulled this from firebug's console:

{"CurrentPage":1,"TotalPages":3,"TotalRecords":22,"Message":"","Errors":{"Errors":""},"List":[{"Id":1

,"EditUrl":"\\u003ca class=\\u0027linkedImageEdit popup\\u0027 title=\\u0027Edit the Contact\\u0027 href=

\\u0027/CRM/Contact.mvc/Edit/1\\u0027/\\u003e","FirstName":"Maria","MiddleName":"Jane","LastName":"Anders"

,"Suffix":"","ExternalContact":false,"Title":"Sales Representative","DISCProfile":"Domineering","DMRole"

:"Blocker","ActivityStatus":"Active","AccountRole":null,"ContactRoleString":"1:Materials Contact;2:Lead

 Followup","AccountName":"Alfreds Futterkiste","City":null,"PhoneNumber":"2156751800","Email":"rhollhumer

@vertmarkets.com","Created":null,"CreatedBy":null,"LastUpdated":null,"LastUpdatedBy":null,"FullName"

:"Maria Anders","FullNameUrl":"\\u003ca class=\\u0027popup\\u0027 title=\\u0027Edit the Contact\\u0027 href

=\\u0027/CRM/Contact.mvc/Edit/1\\u0027\\u003eMaria Anders\\u003c/a\\u003e","TotalRows":22},{"TotalRows":22

,"Id":41,"EditUrl":"\\u003ca class=\\u0027linkedImageEdit popup\\u0027 title=\\u0027Edit the Contact\\u0027

 href=\\u0027/CRM/Contact.mvc/Edit/41\\u0027/\\u003e","FirstName":"Annette","MiddleName":"","LastName":"Roulette"

,"Suffix":"","ExternalContact":false,"Title":"Sales Manager","DISCProfile":"Influencer","DMRole":"Influencer"

,"ActivityStatus":"Active","AccountRole":null,"ContactRoleString":"1:Materials Contact;2:Lead Followup"

,"AccountName":"Alfreds Futterkiste","City":null,"PhoneNumber":"030-655-8978 (123)","Email":"mywork@email

.com","Created":null,"CreatedBy":null,"LastUpdated":null,"LastUpdatedBy":null,"FullName":"Annette Roulette"

,"FullNameUrl":"\\u003ca class=\\u0027popup callBlock\\u0027 href=\\u0027/CRM/Contact.mvc/Edit/41\\u0027 title

=\\u0027Note: This Contact has an active Call Block on them (4/8/2009 - open ended). Click to edit the

 selected Contact.\\u0027\\u003eAnnette Roulette\\u003c/a\\u003e"},

I tried to format the values in different ways but to no avail, see some examples here:

"ContactRoleString":"1:Materials Contact;2:Lead Followup"

or, using ASP.NET MVC Json converter:

"ContactRoleString":"{1:\\u0027Materials Contact\\u0027,2:\\u0027Lead Followup\\u0027}"

or, using ASP.NET MVC Json converter:

"ContactRoleString":{"ContentEncoding":null,"ContentType"

:null,"Data":"{1:\\u0027Materials Contact\\u0027,2:\\u0027Lead Followup\\u0027}"}

or, using ASP.NET MVC Json converter:

"ContactRoleString":{"ContentEncoding":null,"ContentType"

:null,"Data":"1:Materials Contact;2:Lead Followup"}

or, using ASP.NET MVC Json converter:

"ContactRoleString":{"ContentEncoding":null,"ContentType"

:null,"Data":"1:Materials Contact;2:Lead Followup"}

I then tried to simplify so I hardcoded the following for editoptions:

<select multiple="true" id="ContactRoleString" name="ContactRoleString" size="4" class="FormElement"><option value="1">One</option><option value="2">Two</option><option value="3">Three</option><option value="4">Four</option></select>

and then pass the following data to the grid to see if it will highlight/select the values (from Firebug console):

"ContactRoleString":"2:Two;4:Four"

or,

"ContactRoleString":"1:Two;2:Four"



and then I tried this as a last resort and it worked:

"ContactRoleString":"Two,Four"



I am not sure if this is right, can you confirm if this is how it is supposed to work? From previpus conversatins are was sure it has to return a key-value pair in Json or array format?

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
86 Guest(s)

Currently Browsing this Page:
1 Guest(s)