<?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 - id is being retained</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-id-is-being-retained</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-id-is-being-retained/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>steve_o on jqGrid - id is being retained</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/jqgrid-id-is-being-retained#p28931</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/jqgrid-id-is-being-retained#p28931</guid>
        	        	<description><![CDATA[<p>I&#39;m working with a jqGrid that displays data returned from a SQL query. &#160;It has 4 columns, the last column contains 2 submit buttons which will allow the user to re-send an item, or to cancel their action. &#160;When loaded, the grid loads with the buttons displayed in it, but they are disabled. &#160;When the user selects a row, that action enables the buttons on that row only.</p>
</p>
<p>I created a beforeSelectRow event in which I look at lastSel (set to -1 outside the jqGrid) &#38; compare it to the rowid. &#160;if rowID !== lastSel, I then check to see if lastSel = -1 &#38; return true from the beforeSelectRow event. &#160;If lastSel &#60;&#62; -1 and lastSel &#60;&#62; rowID, then I return false ("locking" the grid from selecting another row). &#160;I only return True if lastSel = -1 (first pass thru) or if lasSel = rowID. &#160;</p>
<p>What was happening was that if I loaded the grid &#38; didn&#39;t do the beforeSelectRow, a user could click on any number of rows &#38; if they clicked the re-send submit button, it would re-send the last item however many times they clicked on other rows in the grid. &#160;Clicking the re-send button on the selected row takes a couple fields from the selected row &#38; passes them on to a function that makes an AJAX POST to add that item to a SQL table. &#160;It then resets the selection, disables the re-send/cancel buttons in the grid and exits. &#160;</p>
<p>I have the .click event functions for the re-send/cancel buttons inside the onSelectRow event.&#160;</p>
<p>What I&#39;ve noticed is that if I click on rows other than the initially selected one is that the click event gets called for the submit buttons multiple times. &#160;</p>
<p>The desired behavior is to display the grid, and allow the user to select a row (enabling the display of the re-send/cancel buttons), keeping the user tied to that row until either the re-send or cancel button is clicked, and to then perform the appropriate actions, refreshing the grid at the end. &#160;</p>
<p>The process performs as desired if the user selects a row, then clicks either cancel/re-send, and it executes the code only once. &#160;For whatever reason, other clicks on rows other than the selected one will make it execute the re-send/cancel functions numerous times.</p>
<p>I&#39;ll be glad to post any additional code I have that would be helpful. &#160;</p>
</p>
<p>this is the colNames &#38; colModel portion of the grid.</p>
<blockquote>
<p style="padding-left: 30px;">colNames: ["Destination", "Message Text", "Send Time","Message Action"],</p>
<p style="padding-left: 30px;">colModel:[</p>
<p style="padding-left: 30px;">{name:"Destination",index:"Destination",width:col1width,align:"left", xmlmap:"Rowset&#62;Row&#62;Destination",sortable:false},</p>
<p style="padding-left: 30px;">{name:"MessageText",index:"MessageText",width:col2width,align:"left",xmlmap:"Rowset&#62;Row&#62;MessageText",sortable:false},</p>
<p style="padding-left: 30px;">{name:"SendTime",index:"SendTime",width:col3width,align:"center",formatter:"date",formatoptions: {"srcformat":"ISO8601Long", "newformat":"Y-m-d H:i:s"},xmlmap:"Rowset&#62;Row&#62;SendTime",sortable:false},</p>
<p style="padding-left: 30px;">{name: "msgAct",</p>
<p style="padding-left: 30px;">width: col4width,</p>
<p style="padding-left: 30px;">align: "center",</p>
<p style="padding-left: 30px;">formatter: function() {</p>
<p style="padding-left: 30px;">return "&#60;input name=&#39;resendMsg&#39; style=&#39;height:25px;&#39; type=&#39;submit&#39; value=&#39;Re-Send&#39; disabled=&#39;disabled&#39; /&#62;" +</p>
<p style="padding-left: 30px;">"&#60;input name=&#39;cancelMsg&#39; style=&#39;height:25px;&#39; type=&#39;submit&#39; value=&#39;Cancel&#39; disabled=&#39;disabled&#39; /&#62;"</p>
<p style="padding-left: 30px;">}}</p>
<p style="padding-left: 30px;">],</p>
</blockquote>
<p>Here is the onSelectRow:</p>
</p>
<blockquote>
<p style="padding-left: 30px;">onSelectRow:  function(id) {</p>
<p style="padding-left: 30px;">var tr = $(this).jqGrid("getInd",id,true);</p>
<p style="padding-left: 30px;">var gridRow = $(this).jqGrid("getRowData",id);</p>
<p style="padding-left: 30px;">var srow = $(this).jqGrid("getGridParam","selrow");</p>
<p style="padding-left: 30px;">// disable all resendMsg &#38; cancelMsg buttons in the grid</p>
<p style="padding-left: 30px;">$(this).find("input[name=resendMsg]").attr("disabled","disabled");</p>
<p style="padding-left: 30px;">$(this).find("input[name=cancelMsg]").attr("disabled", "disabled");</p>
<p style="padding-left: 30px;">// now enable the buttons for the current row only</p>
<p style="padding-left: 30px;">$(tr).find("input[name=resendMsg]").removeAttr("disabled");</p>
<p style="padding-left: 30px;">$(tr).find("input[name=cancelMsg]").removeAttr("disabled");</p>
<p style="padding-left: 30px;">// catch the Cancel button click</p>
<p style="padding-left: 30px;">$(tr).find("input[name=cancelMsg]").click(function() {</p>
<p style="padding-left: 30px;">// disable all resendMsg &#38; cancelMsg buttons in the grid</p>
<p style="padding-left: 30px;">$(this).find("input[name=resendMsg]").attr("disabled","disabled");</p>
<p style="padding-left: 30px;">$(this).find("input[name=cancelMsg]").attr("disabled", "disabled");</p>
<p style="padding-left: 30px;">$("#myGrid").resetSelection(id);</p>
<p style="padding-left: 30px;">//ReloadGrid();</p>
<p style="padding-left: 30px;">lastSel = -1;</p>
<p style="padding-left: 30px;">$("#myGrid").trigger("reloadGrid");</p>
<p style="padding-left: 30px;">});</p>
<p style="padding-left: 30px;">// catch the Re-Send button click</p>
<p style="padding-left: 30px;">$(tr).find("input[name=resendMsg]").click(function() {</p>
<p style="padding-left: 30px;">ReSendMessage(gridRow.Destination, gridRow.MessageText);</p>
<p style="padding-left: 30px;">$("#myGrid").resetSelection(id);</p>
<p style="padding-left: 30px;">// disable all resendMsg &#38; cancelMsg buttons in the grid</p>
<p style="padding-left: 30px;">$(this).find("input[name=resendMsg]").attr("disabled","disabled");</p>
<p style="padding-left: 30px;">$(this).find("input[name=cancelMsg]").attr("disabled", "disabled");</p>
<p style="padding-left: 30px;">});</p>
<p style="padding-left: 30px;">},</p>
</blockquote>
]]></description>
        	        	<pubDate>Fri, 31 May 2013 23:42:53 +0300</pubDate>
        </item>
</channel>
</rss>