<?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: JQGrid and JQuery Autocomplete </title>
	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete</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/jqgrid-and-jquery-autocomplete/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>justinkneff on JQGrid and JQuery Autocomplete </title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27566</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27566</guid>
        	        	<description><![CDATA[<div class="post-text">
<p>I posted on stack overflow as well:</p>
<p>I have a custom enable/disable function before  the calling of the auto complete. This causes multiple reference calls  to the same jqgrid cell causing conflict. So during my double click event on the row where it&#39;s supposed to open  up inline-editing. The row is taken and analyzed for what cells need to  be enabled/disabled based on the record type it is. It determines the  fields that are available by an associative array, serialized into a  hidden field value, from the code behind during page load.</p>
<pre class="default prettyprint"><p><input type='button' class='sfcodeselect' name='sfselectit2595' value='Select Code' data-codeid='sfcode2595' /></p><div class='sfcode' id='sfcode2595'>function tableRowDoubleClick(id, iRow, iCol, e) {<br />...<br />setCellEditabilityByRecordType(id);<br />... &#160; &#160;<br />}</div></pre>
<p>The Cell editability is set by the following way:</p>
<pre class="default prettyprint"><p><input type='button' class='sfcodeselect' name='sfselectit9797' value='Select Code' data-codeid='sfcode9797' /></p><div class='sfcode' id='sfcode9797'>&#160;function setCellEditabilityByRecordType(id) {<br />//change some of the fields to read-only<br />var grid = $(&#39;#mygrid&#39;);<br />var i;<br />var cm;<br />var cellRecordType = grid.jqGrid(&#39;getCell&#39;, id, &#39;RecordType&#39;)<br />//Determine Fields Disabled by evaluation of data from a hidden field.<br />var disablefields = eval(pg_FieldDisable[cellRecordType]);<br />for (i = 0; i &#60; disablefields.length; i++) {<br />cm = grid.jqGrid(&#39;getColProp&#39;, disablefields[i]);<br />cm.editable = false;<br />}<br />...<br />}<br />...</div></pre>
<p>So when the initial setup of the row reacts to being double clicked,  the cell editability is set. Then the "CreateCustomSearchElement"  triggers.</p>
<p>However if the user double clicks on the row, it triggers the double  click again, setting the cell editability, but for the same row. So this  causes multiple references to the cell that, at this point, I&#39;m not  sure what&#39;s happening. All I know is I have to centralize the row  editability to one function or find a way to read if the current row  that was double clicked really needs the editability set again.</p>
<p><strong>References</strong> <a href="http://blog.xkoder.com/2008/07/10/javascript-associative-arrays-demystified/" target="_blank">JavaScript Assocaitive Arrays</a></p>
</div>
]]></description>
        	        	<pubDate>Wed, 17 Oct 2012 19:59:26 +0300</pubDate>
        </item>
        <item>
        	<title>justinkneff on JQGrid and JQuery Autocomplete </title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27562</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27562</guid>
        	        	<description><![CDATA[<p>Hi Kris,</p>
<p>I tried to add the delay to my jqgrid auto complete generation but it doesnt seem to have resolved anything.<br />As of right now i generate the auto complete and it does pull data. I&#39;ll explain how i generate the jqgrid and that may help.<br />I use a remote json source. When generating the grid it sets up ondblClickRow as "tableRowDoubleClick," This generates the mode from the the previous function where the row is structured with the following:</p>
<p>item.edittype = JQGrid_EditType.custom<br />Dim edOpt As New JQGridEditOptionsCustom()<br />edOpt.custom_element = "CustomSearchElementSingle"<br />edOpt.custom_value = "CustomSearchSingleValue"<br />item.editoptions = edOpt</p>
<p>function CustomSearchElementSingle(value, options) {<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; return CreateCustomSearchElement(value, options, &#39;Single&#39;);<br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; }</p>
<p>This is the call to the top statement where it generates the "custom element" for it to be an "auto complete" textbox.</p>
<p>var c1 = document.createElement("td")<br />... custom search code fom previous post...<br />c1.appendChild(el);</p>
]]></description>
        	        	<pubDate>Wed, 17 Oct 2012 16:25:07 +0300</pubDate>
        </item>
        <item>
        	<title>krisreddy on JQGrid and JQuery Autocomplete </title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27551</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27551</guid>
        	        	<description><![CDATA[<p>Hi justinkneff,</p>
<p>If you are using jquery ui autocomplete with cell edit in jqgrid - you can do this as follows</p>
<p><input type='button' class='sfcodeselect' name='sfselectit2191' value='Select Code' data-codeid='sfcode2191' /></p>
<div class='sfcode' id='sfcode2191'>
<p>afterEditCell:function(rowid,cellname,value,iRow,iCol)</p>
<p>{</p>
<p><span style="white-space: pre;"> </span>if(cellname==&#39;column_name&#39;)</p>
<p><span style="white-space: pre;"> </span>{</p>
<p><span style="white-space: pre;"> </span>jQuery("#"+iRow+"_column_name").autocomplete({source:&#60;source&#62;,delay:500});</p>
<p><span style="white-space: pre;"> </span>}</p>
<p>}</p>
</div>
<p>If you are using inline edit - call this onedit</p>
</p>
<p>Hope this helps.</p>
</p>
<p>Thanks,</p>
<p>kris</p>
]]></description>
        	        	<pubDate>Tue, 16 Oct 2012 20:14:33 +0300</pubDate>
        </item>
        <item>
        	<title>justinkneff on JQGrid and JQuery Autocomplete </title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27548</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27548</guid>
        	        	<description><![CDATA[<p>Still having issues. This doesnt work in either browser. It doesnt seem to matter what type of text is in there. Sometimes it doesnt occur, but more so it does than not.</p>
<p>Once in inline edit mode double click a textbox-input and press delete. Then hit escape to cancel the edit. This is how i recreate the issue of the textbox&#39;s not going away.</p>
<p>Shameless Bump.</p>
<p>Also just tried editing the javascript so on focus or blur it creates or destroy&#39;s(unautocomplete) the auto complete.</p>
<p>That did not resolve it either.</p>
<p>It happens on firefox/IE8+</p>
]]></description>
        	        	<pubDate>Tue, 16 Oct 2012 16:08:05 +0300</pubDate>
        </item>
        <item>
        	<title>justinkneff on JQGrid and JQuery Autocomplete </title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27537</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/jqgrid-and-jquery-autocomplete#p27537</guid>
        	        	<description><![CDATA[<p>When implementing JQGrid 4.3.0, Jquery 1.6.2, and JQuery UI 1.8.16 Ive come across an issue with the Inline edit. When the inline edit is activated, some of the elements get assigned an auto complete. When the inline edit is canceld or saved, the auto complete does not always go away. Leaving the auto complete controls in edit mode when the row is no longer considered in edit mode.</p>
<p>I&#39;ve tried removing the DOM after close, .remove() and .empty():<br />...<br />"afterrestorefunc": funciton(){ <br />&#160;&#160; &#160;$(&#39;.ui-autocomplete-input&#39;).remove(); <br />}...</p>
<p>&#160;but that causes other issues, such as the jqgrid is not able to find the cell when serializing the row for data or edit, and requires a refresh of the page, not just jqgrid, to be able to once again see the data from that row.</p>
<p>&#160;Auto complete functionality for the element is created on the double click of the row: </p>
<pre class="default prettyprint"><p><input type='button' class='sfcodeselect' name='sfselectit9466' value='Select Code' data-codeid='sfcode9466' /></p><div class='sfcode' id='sfcode9466'>function CreateCustomSearchElement(value, options, selectiontype) {<br />...<br />&#160; &#160; &#160; &#160; &#160; &#160; var el;<br />&#160; &#160; &#160; &#160; &#160; &#160; el = document.createElement("input");<br />&#160; &#160; &#160; &#160; &#160; &#160; ...<br />&#160; &#160; &#160; &#160; &#160; &#160; $(el).autocomplete({<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; source: function (request, response) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; $.ajax({<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; url: &#39;&#60;%=ResolveUrl("~/Services/AutoCompleteService.asmx/GetAutoCompleteResponse") %&#62;&#39;,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; data: "{ &#39;prefixText&#39;: &#39;" + request.term + "&#39;, &#39;contextKey&#39;: &#39;" + options.name + "&#39;}",<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; dataType: "json",<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; type: "POST",<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; contentType: "application/json; charset=utf-8",<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; success: function (data) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; response($.map(data.d, function (item) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; return {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; label: Trim(item),<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; value: Trim(item),<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; searchVal: Trim(item)<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; }<br /><br />&#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; }<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; });<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; },<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; select: function (e, item) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; //Select is on the event of selection where the value and label have already been determined. &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; },<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; minLength: 1,<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; change: function (event, ui) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; //if the active element was not the search button &#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; }<br />&#160; &#160; &#160; &#160; &#160; &#160; }).keyup(function (e) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; if (e.keyCode == 8 &#124;&#124; e.keyCode == 46) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; //If the user hits backspace or delete, check the value of the textbox before setting the searchValue &#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; &#160; }<br />&#160; &#160; &#160; &#160; &#160; &#160; }).keydown(function (e) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; //if keycode is enter key and there is a value, you need to validate the data through select or change(onblur)<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; if (e.keyCode == &#39;13&#39; &#38;&#38; ($(el).val())) {<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; return false;<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; }<br />&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; if (e.keyCode == &#39;220&#39;) { return false }<br />&#160; &#160; &#160; &#160; &#160; &#160; });<br />&#160; &#160; &#160; &#160; }<br /></div></pre>
<p>...<br />&#160;&#160; &#160;&#160;&#160; &#160;&#160;&#160; &#160; <br />Other Sources:<br /><a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing" rel="nofollow" target="_blank"><a href="http://www.trirand.com/jqgridw" rel="nofollow">http://www.trirand.com/jqgridw</a>.....ne_editing</a><br /><a href="http://api.jqueryui.com/autocomplete/" rel="nofollow" target="_blank">http://api.jqueryui.com/autocomplete/</a></p>
]]></description>
        	        	<pubDate>Mon, 15 Oct 2012 22:07:01 +0300</pubDate>
        </item>
</channel>
</rss>