<?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: edittype: select support optgroup</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/edittype-select-support-optgroup</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/help/edittype-select-support-optgroup/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>cajn on edittype: select support optgroup</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/edittype-select-support-optgroup#p23772</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/edittype-select-support-optgroup#p23772</guid>
        	        	<description><![CDATA[<blockquote>
<p>Hi Tony,</p>
<p>I am using dataUrl to return a select list of Accounts with &#60;optgroup&#62; groups.&#160;</p>
<p><span style="text-decoration: underline;">My issue:</span> when saving the row no value is passed to the editurl for my Select column If i remove the &#60;optgroup&#62;&#39;s a value is passed to editurl for my Select column.</p>
<p><span style="text-decoration: underline;">Description:</span> For my column data I return the Account Name, not the value, so when the grid loads the name is displayed.</p>
<p>When a line is edited&#160;(in-line editing), the dataUrl is called and the select list is displayed and my Account is selected for the rows data.</p>
<p>I then select a new Account from the Select list and press enter to save. The selected Account value is not passed to the editurl function. if i remove the &#60;optgroup&#62;&#39;s from the select the Account value is passed to the 3editurl function.</p>
<p>I&#39;m not sure if I&#39;m doing something wrong, ie not setting a grid parameter,</p>
</p>
<p>Hoping you can help me out.</p>
<p>Thanks in advance,</p>
<p>Chris</p>
<p><span style="text-decoration: underline;">Sample Select HTML:</span></p>
<p>&#60;select&#62;<br />&#160; &#60;optgroup label=&#39;Expense&#39;&#62;<br />&#160;&#160;&#160; &#60;option value=&#39;60&#39;&#62;Food&#60;/option&#62;<br />&#160;&#160;&#160; &#60;option value=&#39;34&#39;&#62;Fuel&#60;/option&#62;<br />&#160; &#60;/optgroup&#62;<br />&#160; &#60;optgroup label=&#39;Income&#39;&#62;<br />&#160;&#160;&#160; &#60;option value=&#39;55&#39;&#62;Sales&#60;/option&#62;<br />&#160;&#160;&#160; &#60;option value=&#39;audi&#39;&#62;Services&#60;/option&#62;<br />&#160; &#60;/optgroup&#62;<br />&#60;/select&#62;</p>
</p>
<p><span style="text-decoration: underline;">My Grid code:</span></p>
<p>&#160;&#160;&#160; $(document).ready(<br />&#160;&#160;&#160; function () {<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; var lastSelection;<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; var grid = jQuery("#BankTransactions");<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; grid.jqGrid({<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; url: &#39;/DropDown/GridData/&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; datatype: &#39;json&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; mtype: &#39;GET&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; colNames: [&#39;TransactionLineId&#39;, &#39;TransactionId&#39;, &#39;BankTransactionId&#39;, &#39;Number&#39;, &#39;Amount&#39;, &#39;Category&#39;],<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; colModel: [<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;transactionLineId&#39;, index: &#39;transactionLineId&#39;, editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: &#39;left&#39; },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;transactionId&#39;, index: &#39;transactionId&#39;, editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: &#39;left&#39; },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;bankTransactionId&#39;, index: &#39;bankTransactionId&#39;, editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: &#39;left&#39; },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;Number&#39;, index: &#39;Number&#39;, width: 100, align: &#39;left&#39;, sortable: false },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;Amount&#39;, index: &#39;SubAmount&#39;, editable: true, width: 100, align: &#39;right&#39;, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return &#39;class="BankTranEdit"&#39; }, formatter: &#39;currency&#39;, formatoptions: { decimalSeparator: &#39;.&#39;, thousandsSeparator: &#39;,&#39;, decimalPlaces: 2, defaultValue: &#39;&#38;nbsp;&#39;} },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;CategoryIdURL&#39;, index: &#39;CategoryIdURL&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; editable: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; edittype: &#39;select&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; //formatter: &#39;select&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; editoptions: { dataUrl: "/DropDown/CategorySelectList" },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; width: 220,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; align: &#39;left&#39;<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; },<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; ],<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; pager: jQuery(&#39;#pager&#39;),<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; rowNum: 100,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; rowList: [25, 50, 100],<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; editurl: "/Dropdown/GridSave",<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; sortname: &#39;Number&#39;,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; sortorder: "desc",<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; viewrecords: true,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; width: 1250,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; height: 450,<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; onCellSelect: function (rowid, iCol, cellContent, e) {<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; grid.restoreRow(lastSelection);<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; grid.editRow(rowid, true, null, null, null, null, null);<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; lastSelection = rowid;&#160; <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; });<br />&#160;&#160;&#160; });<br />&#160;</p>
</p>
<p>tony said:</p>
<p>Hello,</p>
<p>This is not supported when used with editoption value, but you can use dataUrl and provide the following content</p>
<p>&#60;select&#62;<br />&#160; &#60;optgroup label="Swedish Cars"&#62;<br />&#160;&#160;&#160; &#60;option value="volvo"&#62;Volvo&#60;/option&#62;<br />&#160;&#160;&#160; &#60;option value="saab"&#62;Saab&#60;/option&#62;<br />&#160; &#60;/optgroup&#62;<br />&#160; &#60;optgroup label="German Cars"&#62;<br />&#160;&#160;&#160; &#60;option value="mercedes"&#62;Mercedes&#60;/option&#62;<br />&#160;&#160;&#160; &#60;option value="audi"&#62;Audi&#60;/option&#62;<br />&#160; &#60;/optgroup&#62;<br />&#60;/select&#62;</p>
</p>
<p>This will work.</p>
<p>Regards</p>
<p>Tony</p>
</blockquote>
<hr />
]]></description>
        	        	<pubDate>Mon, 27 Jun 2011 14:12:18 +0300</pubDate>
        </item>
        <item>
        	<title>tony on edittype: select support optgroup</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/edittype-select-support-optgroup#p18054</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/edittype-select-support-optgroup#p18054</guid>
        	        	<description><![CDATA[<p>Hello,</p>
<p>This is not supported when used with editoption value, but you can use dataUrl and provide the following content</p>
<p>&#60;select&#62;<br /> &#160;       &#60;optgroup label="Swedish Cars"&#62;<br /> &#160;&#160;&#160;       &#60;option value="volvo"&#62;Volvo&#60;/option&#62;<br /> &#160;&#160;&#160;       &#60;option value="saab"&#62;Saab&#60;/option&#62;<br /> &#160;       &#60;/optgroup&#62;<br /> &#160;       &#60;optgroup label="German Cars"&#62;<br /> &#160;&#160;&#160;       &#60;option value="mercedes"&#62;Mercedes&#60;/option&#62;<br /> &#160;&#160;&#160;       &#60;option value="audi"&#62;Audi&#60;/option&#62;<br /> &#160;       &#60;/optgroup&#62;<br /> &#60;/select&#62;</p>
</p>
<p>This will work.</p>
<p>Regards</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Sun, 20 Jun 2010 10:45:33 +0300</pubDate>
        </item>
        <item>
        	<title>mikek on edittype: select support optgroup</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/edittype-select-support-optgroup#p17884</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/edittype-select-support-optgroup#p17884</guid>
        	        	<description><![CDATA[<p>When using edittype: select for cell editing, does this support specifying an optgroup so one can group values? For example, instead of this, which doesn&#39;t have a group,</p>
</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160; {name:&#39;ship&#39;,index:&#39;ship&#39;, width:90, editable: true,edittype:"select",editoptions:{ value: "FE:FedEx;IN:InTime;TN:TNT"}},<br />&#160;&#160;&#160;&#160; </p>
<p>something like :</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160; {name:&#39;ship&#39;,index:&#39;ship&#39;, width:90, editable: true,edittype:"select",editoptions:{ label:"MyFedEx", value: "FE:FedEx;IN:InTime;TN:TNT"}},</p>
</p>
<p>Thanks</p>
</p>
<p>Mike</p>
]]></description>
        	        	<pubDate>Sat, 12 Jun 2010 01:59:07 +0300</pubDate>
        </item>
</channel>
</rss>