<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
	<title>jQuery Grid Plugin - jqGrid - Topic: Multiple Select in formedit mode not showing selected items</title>
	<link>http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items</link>
	<description><![CDATA[Grid plugin]]></description>
	<generator>Simple:Press Version 5.7.5.3</generator>
	<atom:link href="http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>Renso on Multiple Select in formedit mode not showing selected items</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7638</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7638</guid>
        	        	<description><![CDATA[<p>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.</p>
<p>Here is my select tag as I copied it out of firebug:</p>
<p><span class="sfcode">&#60;select multiple="" id="ContactRoleString" name="ContactRoleString" size="4" class="FormElement"&#62;&#60;option value="1"&#62;Website Contact&#60;/option&#62;&#60;option value="2"&#62;Materials Contact&#60;/option&#62;&#60;option value="3"&#62;Lad Followup&#60;/option&#62;&#60;option value="4"&#62;Payment&#60;/option&#62;&#60;/select&#62;</span></p>
</p>
<p>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:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit3649' value='Select Code' data-codeid='sfcode3649' /></p>
<div class='sfcode' id='sfcode3649'>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {name: &#39;<span style="color: #0000ff;">ContactRoleString</span>&#39;, index: &#39;ContactRoleString&#39;, 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} },</div>
</p>
<p>Here is the response returned via the ajax call, also pulled this from firebug&#39;s console:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit2047' value='Select Code' data-codeid='sfcode2047' /></p>
<div class='sfcode' id='sfcode2047'>
<pre>{"CurrentPage":1,"TotalPages":3,"TotalRecords":22,"Message":"","Errors":{"Errors":""},"List":[{"Id":1</pre>
<pre>,"EditUrl":"\\u003ca class=\\u0027linkedImageEdit popup\\u0027 title=\\u0027Edit the Contact\\u0027 href=</pre>
<pre>\\u0027/CRM/Contact.mvc/Edit/1\\u0027/\\u003e","FirstName":"Maria","MiddleName":"Jane","LastName":"Anders"</pre>
<pre>,"Suffix":"","ExternalContact":false,"Title":"Sales Representative","DISCProfile":"Domineering","DMRole"</pre>
<pre>:"Blocker","ActivityStatus":"Active","AccountRole":null,<strong>"<span style="color: #0000ff;">ContactRoleString</span>":"1:Materials Contact;2:Lead</strong></pre>
<pre><strong> Followup"</strong>,"AccountName":"Alfreds Futterkiste","City":null,"PhoneNumber":"2156751800","Email":"rhollhumer</pre>
<pre>@vertmarkets.com","Created":null,"CreatedBy":null,"LastUpdated":null,"LastUpdatedBy":null,"FullName"</pre>
<pre>:"Maria Anders","FullNameUrl":"\\u003ca class=\\u0027popup\\u0027 title=\\u0027Edit the Contact\\u0027 href</pre>
<pre>=\\u0027/CRM/Contact.mvc/Edit/1\\u0027\\u003eMaria Anders\\u003c/a\\u003e","TotalRows":22},{"TotalRows":22</pre>
<pre>,"Id":41,"EditUrl":"\\u003ca class=\\u0027linkedImageEdit popup\\u0027 title=\\u0027Edit the Contact\\u0027</pre>
<pre> href=\\u0027/CRM/Contact.mvc/Edit/41\\u0027/\\u003e","FirstName":"Annette","MiddleName":"","LastName":"Roulette"</pre>
<pre>,"Suffix":"","ExternalContact":false,"Title":"Sales Manager","DISCProfile":"Influencer","DMRole":"Influencer"</pre>
<pre>,"ActivityStatus":"Active","AccountRole":null,"ContactRoleString":"1:Materials Contact;2:Lead Followup"</pre>
<pre>,"AccountName":"Alfreds Futterkiste","City":null,"PhoneNumber":"030-655-8978 (123)","Email":"mywork@email</pre>
<pre>.com","Created":null,"CreatedBy":null,"LastUpdated":null,"LastUpdatedBy":null,"FullName":"Annette Roulette"</pre>
<pre>,"FullNameUrl":"\\u003ca class=\\u0027popup callBlock\\u0027 href=\\u0027/CRM/Contact.mvc/Edit/41\\u0027 title</pre>
<pre>=\\u0027Note: This Contact has an active Call Block on them (4/8/2009 - open ended). Click to edit the</pre>
<pre> selected Contact.\\u0027\\u003eAnnette Roulette\\u003c/a\\u003e"},</pre>
</div>
<p>I tried to format the values in different ways but to no avail, see some examples here:</p>
<pre></pre>
<pre><span class="sfcode">"ContactRoleString":"1:Materials Contact;2:Lead Followup"</span><br /><br />or, using ASP.NET MVC Json converter:<br /></pre>
<pre></pre>
<pre><span class="sfcode">"ContactRoleString":"{1:\\u0027Materials Contact\\u0027,2:\\u0027Lead Followup\\u0027}"</span></pre>
</p>
<p>or, using ASP.NET MVC Json converter:</p>
<pre></pre>
<pre>"ContactRoleString":{"ContentEncoding":null,"ContentType"</pre>
<pre>:null,"Data":"{1:\\u0027Materials Contact\\u0027,2:\\u0027Lead Followup\\u0027}"}</pre>
</p>
<p>or, using ASP.NET MVC Json converter:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit9044' value='Select Code' data-codeid='sfcode9044' /></p>
<div class='sfcode' id='sfcode9044'>
<pre>"ContactRoleString":{"ContentEncoding":null,"ContentType"</pre>
<pre>:null,"Data":"1:Materials Contact;2:Lead Followup"}</pre>
</div>
<p>or, using ASP.NET MVC Json converter:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit9540' value='Select Code' data-codeid='sfcode9540' /></p>
<div class='sfcode' id='sfcode9540'>
<pre>"ContactRoleString":{"ContentEncoding":null,"ContentType"</pre>
<pre>:null,"Data":"1:Materials Contact;2:Lead Followup"}</pre>
</div>
<p>I then tried to simplify so I hardcoded the following for editoptions:</p>
<p><span class="sfcode">&#60;select multiple="true" id="ContactRoleString" name="ContactRoleString" size="4" class="FormElement"&#62;&#60;option value="1"&#62;One&#60;/option&#62;&#60;option value="2"&#62;Two&#60;/option&#62;&#60;option value="3"&#62;Three&#60;/option&#62;&#60;option value="4"&#62;Four&#60;/option&#62;&#60;/select&#62;</span></p>
<p>and then pass the following data to the grid to see if it will highlight/select the values (from Firebug console):</p>
<pre></pre>
<pre><span class="sfcode">"ContactRoleString":"2:Two;4:Four"</span><br /><br />or,<br /></pre>
<p><input type='button' class='sfcodeselect' name='sfselectit1156' value='Select Code' data-codeid='sfcode1156' /></p>
<div class='sfcode' id='sfcode1156'>
<pre>"ContactRoleString":"1:Two;2:Four"</pre>
</div>
<pre></pre>
<pre><br /><br />and then I tried this as a last resort and <strong>it worked</strong>:<br /><br /></pre>
<p><input type='button' class='sfcodeselect' name='sfselectit3091' value='Select Code' data-codeid='sfcode3091' /></p>
<div class='sfcode' id='sfcode3091'><span style="color: #ff6600;">"ContactRoleString":"Two,Four"</span></div>
<pre></pre>
<pre></pre>
<pre><br /><br />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?<br /></pre></p>
]]></description>
        	        	<pubDate>Thu, 02 Jul 2009 16:09:55 +0300</pubDate>
        </item>
        <item>
        	<title>Renso on Multiple Select in formedit mode not showing selected items</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7623</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7623</guid>
        	        	<description><![CDATA[<p>Thank you Tony!</p>
<p>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&#39;s lookup data unless the user decides to edit/add rows.</p>
<p><span style="color: #ff0000;">I was trying to understand what you meant by "form edit", you mean the "edit options" object definition in navGrid?</span> Example:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit3666' value='Select Code' data-codeid='sfcode3666' /></p>
<div class='sfcode' id='sfcode3666'>
<p>...</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; .<span style="color: #3366ff;">navGrid</span>(item + &#39;Pager&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { refresh: true, edit: true, add: true, del: true, search: false }, //options <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: #3366ff;">{height: 280, width: 500,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; reloadAfterSubmit: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; modal: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; processData: &#39;Updating the Contact info...&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; editCaption: &#39;Edit a Contact&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; recreateForm: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; afterSubmit: function(response, postdata) {<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; return SetupResponseMessage(item, response, "The Contact has been successfully updated.")<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; }, // edit options</span></p>
<p>...</p>
</div>
<p><span style="color: #ff0000;">I guess in stead of this method I could also use the editGridRow method?</span></p>
<p><span style="color: #ff0000;">So again from my example code above is this what you meant by "form edit"?</span></p>
<p>Just as a side note, the lookup data I get does not change between rows, it is the same for all the rows.</p>
<p><span style="color: #ff0000;">"Form parameters", I don&#39;t know what you meant by this.</span> I assume it is javascript variable that I declare before the jqGrid definition, like so:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit8351' value='Select Code' data-codeid='sfcode8351' /></p>
<div class='sfcode' id='sfcode8351'>
<p>var  allAccountRoles = $.ajax({ url: $(&#39;#ajaxAllAccountRolesUrl&#39;).val(), async: false, success: function(data, result) { if (!result) alert(&#39;Failure to retrieve the Account Roles.&#39;); } }).responseText;</p>
<p>&#160;&#160;&#160; $(item)<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; .jqGrid({...</p>
</div>
<p>Let me know if this is what you meant.</p>
<p><span style="color: #ff0000;">Why do I need to set recreateForm, I am not sure what the reason for this would be in my situation?</span></p>
<p>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.<span style="color: #ff0000;"> Is this possible?</span></p></p>
]]></description>
        	        	<pubDate>Thu, 02 Jul 2009 07:12:59 +0300</pubDate>
        </item>
        <item>
        	<title>tony on Multiple Select in formedit mode not showing selected items</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7587</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7587</guid>
        	        	<description><![CDATA[<p>Hello,</p>
<p>One reason for this is that in this case the data in the grid does not match the data setted in column properties.</p>
<p>If you set</p>
<pre></pre>
<pre>1:Website Contact;2:Materials Contact;3:Lead Followup;4:Payment<br /><br />but in the grid you data is by example " Payment " or "Payment    "<br />you will never get chance for the selection. Note that we compare <br />the text for the selected item and not the key.<br /><br />By the way if you use form edit you do not  need to change the select option<br />values in loadComplete. You should do it only once. In form edit when the <br />select is created we use only once the values from colModel. In your case<br />I recommend you to set the recreateForm to true in edit and add form <br />parameters in order to use your newly generated values.<br /><br /><br />Regards<br />Tony<br /></pre>
]]></description>
        	        	<pubDate>Thu, 02 Jul 2009 02:07:18 +0300</pubDate>
        </item>
        <item>
        	<title>Renso on Multiple Select in formedit mode not showing selected items</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7574</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/multiple-select-in-formedit-mode-not-showing-selected-items#p7574</guid>
        	        	<description><![CDATA[<p>(version 1.3.2)</p>
<p>Not sure if I am doing something wrong but for the edittype:&#8221;select&#8221; 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.</p>
<p>Here is my colModel <span class="sfcode">{name:&#39;AccountRole&#39;,&#160;&#160;&#160; index:&#39;AccountRole&#39;, width:40, editable:true, align:&#8221;left&#8221;, hidden:true, edittype:&#8221;select&#8221;, editoptions:{multiple:true,size:4,value:allAccountRoles}, editrules:{edithidden:true,required:true}}, </span><br />During loadComplete I then load the actual data into var allAccountRoles and setColProp appropriately (see below):</p>
<p><input type='button' class='sfcodeselect' name='sfselectit9523' value='Select Code' data-codeid='sfcode9523' /></p>
<div class='sfcode' id='sfcode9523'>loadComplete: function()&#160;&#160;&#160; {<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; //get all Account Roles<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; allAccountRoles = $.ajax({url: $(&#39;#ajaxAllAccountRolesUrl&#39;).val(), async: false, success: function(data, result) {if (!result) alert(&#39;Failure to retrieve the Account Roles.&#39;);}}).responseText;<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; $(item).setColProp(&#39;AccountRole&#39;,{editoptions:{multiple:true,size:4,value:allAccountRoles}});</div>
<p>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</p>
<p>Here is the result of the ajax call that fecthes the list of account roles:</p>
<pre></pre>
<pre>1:Website Contact;2:Materials Contact;3:Lead Followup;4:Payment<br /><br />Here is the HTML definition of the column in the formedit (modal dialog):<span class="nodeLabelBox repTarget "><br /></span></pre>
<p><input type='button' class='sfcodeselect' name='sfselectit7670' value='Select Code' data-codeid='sfcode7670' /></p>
<div class='sfcode' id='sfcode7670'>
<div class="nodeChildBox ">
<div class="nodeBox containerNodeBox  repIgnore  open selected">
<div class="nodeLabel "><span class="nodeLabelBox repTarget ">&#60;<span class="nodeTag ">select</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">id</span>=&#8221;<span class="nodeValue editable ">AccountRole</span>&#8220;</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">class</span>=&#8221;<span class="nodeValue editable ">FormElement</span>&#8220;</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">multiple</span>=&#8221;&#8221;</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">name</span>=&#8221;<span class="nodeValue editable ">AccountRole</span>&#8220;</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">size</span>=&#8221;<span class="nodeValue editable ">4</span>&#8220;</span><span class="nodeBracket editable insertBefore ">&#62;</span></span></div>
<div class="nodeChildBox ">
<div class="nodeBox textNodeBox  repIgnore ">
<div class="nodeLabel "><span class="nodeLabelBox repTarget ">&#60;<span class="nodeTag ">option</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">value</span>=&#8221;<span class="nodeValue editable ">1</span>&#8220;</span><span class="nodeBracket editable insertBefore ">&#62;</span><span class="nodeText editable ">Website Contact</span>&#60;/<span class="nodeTag ">option</span>&#62;</span></div>
</div>
<div class="nodeBox textNodeBox  repIgnore ">
<div class="nodeLabel "><span class="nodeLabelBox repTarget ">&#60;<span class="nodeTag ">option</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">value</span>=&#8221;<span class="nodeValue editable ">2</span>&#8220;</span><span class="nodeBracket editable insertBefore ">&#62;</span><span class="nodeText editable ">Materials Contact</span>&#60;/<span class="nodeTag ">option</span>&#62;</span></div>
</div>
<div class="nodeBox textNodeBox  repIgnore ">
<div class="nodeLabel "><span class="nodeLabelBox repTarget ">&#60;<span class="nodeTag ">option</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">value</span>=&#8221;<span class="nodeValue editable ">3</span>&#8220;</span><span class="nodeBracket editable insertBefore ">&#62;</span><span class="nodeText editable ">Lead Followup</span>&#60;/<span class="nodeTag ">option</span>&#62;</span></div>
</div>
<div class="nodeBox textNodeBox  repIgnore ">
<div class="nodeLabel "><span class="nodeLabelBox repTarget ">&#60;<span class="nodeTag ">option</span><span class="nodeAttr editGroup ">&#160;<span class="nodeName editable ">value</span>=&#8221;<span class="nodeValue editable ">4</span>&#8220;</span><span class="nodeBracket editable insertBefore ">&#62;</span><span class="nodeText editable ">Payment</span>&#60;/<span class="nodeTag ">option</span>&#62;</span></div>
</div>
</div>
<div class="nodeCloseLabel "><span class="nodeCloseLabelBox repTarget ">&#60;/<span class="nodeTag ">select</span>&#62;</span></div>
</div>
</div>
</div>
<p>I tried to set the col properties during both gridComplete and loadComplete, same result.<br />Not sure if it is not supported or a bug. I see in formedit.js, line 276:</p>
<p><input type='button' class='sfcodeselect' name='sfselectit2126' value='Select Code' data-codeid='sfcode2126' /></p>
<div class='sfcode' id='sfcode2126'>case &#8220;select-multiple&#8221;:<br /> postdata[this.name]= $(this).val();<br /> var selectedText = [];<br /> $(&#8221;option:selected&#8221;,this).each(<br /> function(i,selected){<br /> selectedText[i] = $(selected).text();<br /> }<br /> );<br /> extpost[this.name]= selectedText.join(&#8221;,&#8221;);<br />break;</div>
<p> I notice that <span class="sourceRowText">postdata[this.name]</span> = $(this).val(), where the value of this.name = &#8220;AccountRole&#8221; and the result of this.val() is an array of 2,3 (second and third options selected) : <br /> 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.</p>
</p>
<p>Any ideas?</p>
]]></description>
        	        	<pubDate>Wed, 01 Jul 2009 07:02:26 +0300</pubDate>
        </item>
</channel>
</rss>