<?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: Help! - Can't make it select a cell!</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/help-cant-make-it-select-a-cell</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/help-cant-make-it-select-a-cell/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>mice-pace on Help! - Can't make it select a cell!</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/help-cant-make-it-select-a-cell#p26192</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/help-cant-make-it-select-a-cell#p26192</guid>
        	        	<description><![CDATA[<div>I&#39;m trying to get a jqGrid to select a specific cell when you create a new row by pressing tab. Right now it creates the new row, selects the correct cell &#39;Description&#39;... then a split second later selects &#39;Labour&#39;. Can someone help me with this? I&#39;ve been stuck on this for days</div>
<div>NOTE: When i use the Navigator to add a row it selects Description perfectly, but i need it to happen when you press tab on the last cell of the last row.</div>
<div></div>
<div>
<p><input type='button' class='sfcodeselect' name='sfselectit7479' value='Select Code' data-codeid='sfcode7479' /></p>
<div class='sfcode' id='sfcode7479'>&#60;script src=&#34;js/jquery-1.5.2.min.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;<br /> &#60;script src=&#34;js/jquery-ui-1.8.11.custom.min.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;<br /> &#60;script src=&#34;js/i18n/grid.locale-en.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;<br /> &#60;script type=&#34;text/javascript&#34;&#62;<br /> $.jgrid.no_legacy_api = true;<br /> &#60;/script&#62;<br /> &#60;script src=&#34;js/jquery.jqGrid.src.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;</p>
<p> &#60;script type=&#34;text/javascript&#34;&#62;<br /> $(function() {<br /> var trades;<br /> $.ajax({url: &#39;trade_options.php&#39;, dataType: &#39;json&#39;, async: false, success: function(data) {<br /> var items = [&#39;:&#39;];<br /> $.each(data, function(i, v) {<br /> items.push(v.value + &#39;:&#39; + v.display);<br /> });<br /> trades = items.join(&#39;;&#39;);<br /> }});<br /> var personnel;<br /> $.ajax({url: &#39;personnel_options.php&#39;, dataType: &#39;json&#39;, async: false, success: function(data) {<br /> var items = [&#39;null:&#39;];<br /> $.each(data, function(i, v) {<br /> items.push(v.value + &#39;:&#39; + v.display);<br /> });<br /> personnel = items.join(&#39;;&#39;);<br /> }});<br /> var lastSel = null;<br /> var grid = $(&#39;#list&#39;);<br /> grid.jqGrid({<br /> url:&#39;possiblejob_procedure_list.php?jobNo=&#60;?= $jobNo ?&#62;&#38;scope=&#60;?= $scope ?&#62;&#39;,<br /> datatype: &#34;json&#34;,<br /> /*height: &#39;100%&#39;,*/<br /> colNames:[&#39;ID&#39;,&#39;Display&#39;, &#39;Step&#39;, &#39;Trade&#39;, &#39;Personnel&#39;, &#39;Quote&#39;, &#39;Invoice&#39;, &#39;Description&#39;, &#39;Labour&#39;, &#39;Materials&#39;, &#39;Cost Allowed&#39;, &#39;Reserve&#39;],<br /> colModel:[<br /> {name:&#39;procedureid&#39;,index:&#39;procedureid&#39;, hidden:true},<br /> {name:&#39;display&#39;,index:&#39;display&#39;, width:53, sortable:false, editable:true, edittype:&#39;checkbox&#39;, editoptions:{value:&#34;1:0&#34;, defaultValue:&#34;1&#34;}, formatter:&#39;checkbox&#39;},<br /> {name:&#39;step&#39;,index:&#39;step&#39;, width:45, editable:true, editrules:{required:true, integer:true}, editoptions:{}},<br /> {name:&#39;trade&#39;,index:&#39;trade&#39;, width:200, sortable:false, editable:true, formatter: &#39;select&#39;, edittype:&#39;select&#39;, editoptions: {<br /> value: trades,<br /> dataInit: function(elem) {<br /> var colProp = grid.jqGrid(&#39;getColProp&#39;, &#39;personnelid&#39;);<br /> colProp.editoptions.dataUrl = &#39;personnel_options.php?trade=&#39; + escape($(elem).val());<br /> },<br /> dataEvents: [<br /> {<br /> type: &#39;change&#39;,<br /> fn: function(e) {<br /> var newOptions = &#39;&#39;<br /> $.ajax({url: &#39;personnel_options.php&#39;, dataType: &#39;json&#39;, data:{trade: $(e.target).val()}, async: false, success: function(data) {<br /> newOptions = &#39;&#60;option value=&#34;null&#34;&#62;&#60;/option&#62;&#39;;<br /> $.each(data, function(i, v) {<br /> newOptions += &#39;&#60;option value=&#34;&#39; + v.value + &#39;&#34;&#62;&#39; + v.display + &#39;&#60;/option&#62;&#39;;<br /> });<br /> }<br /> });<br /> if ($(e.target).is(&#39;.FormElement&#39;)) {<br /> // form editing<br /> var form = $(e.target).closest(&#39;form.FormGrid&#39;);<br /> $(&#34;select#personnelid.FormElement&#34;, form[0]).html(newOptions);<br /> } else {<br /> // inline editing<br /> var row = $(e.target).closest(&#39;tr.jqgrow&#39;);<br /> var rowId = row.attr(&#39;id&#39;);<br /> $(&#34;select#&#34; + rowId + &#34;_personnelid&#34;, row[0]).html(newOptions);<br /> }<br /> }<br /> }<br /> ]<br /> }, editrules:{required:true}<br /> },<br /> {name:&#39;personnelid&#39;,index:&#39;personnelid&#39;, width:200, sortable:false,<br /> editable:false, formatter: &#39;select&#39;, edittype:&#39;select&#39;, editoptions: {<br /> value: personnel,<br /> dataUrl: &#39;personnel_options.php&#39;,<br /> buildSelect: function(data) {<br /> var response = $.parseJSON(data);<br /> var select = &#39;&#60;select&#62;&#39;;<br /> select += &#39;&#60;option value=&#34;null&#34;&#62;&#60;/option&#62;&#39;;<br /> if (response &#38;&#38; response.length) {<br /> $.each(response, function(i, v) {<br /> select += &#39;&#60;option value=&#34;&#39; + v.value + &#39;&#34;&#62;&#39; + v.display + &#39;&#60;/option&#62;&#39;;<br /> });<br /> }<br /> return select + &#39;&#60;/select&#62;&#39;;<br /> }<br /> }, editrules:{required:false}<br /> },<br /> {name:&#39;quoteno&#39;,index:&#39;quoteno&#39;, width:55, editable:true},<br /> {name:&#39;invoiceno&#39;,index:&#39;invoiceno&#39;, width:55, editable:false},<br /> {name:&#39;description&#39;,index:&#39;description&#39;, width:400, sortable:false,<br /> editable:true, edittype:&#34;textarea&#34;, editoptions:{rows:&#34;2&#34;,cols:&#34;60&#34;},<br /> editrules:{required:true}},<br /> {name:&#39;labour&#39;,index:&#39;labour&#39;, width:85, editable:true,<br /> editrules:{required:true, number:true}, formatter:&#39;currency&#39;, formatoptions:{prefix:&#39;$&#39;, thousandsSeparator:&#39;,&#39;}, editoptions:{}},<br /> {name:&#39;materials&#39;,index:&#39;materials&#39;, width:85, editable:true, editrules:{required:true, number:true}, formatter:&#39;currency&#39;,<br /> formatoptions:{prefix:&#39;$&#39;, thousandsSeparator:&#39;,&#39;}, editoptions:{}},<br /> {name:&#39;costbilled&#39;,index:&#39;costbilled&#39;, width:85, editable:true,<br /> editoptions: {<br /> dataEvents: [<br /> {<br /> type: &#39;keydown&#39;,<br /> fn: function(e) {<br /> var key = e.charCode &#124;&#124; e.keyCode; // to support all browsers<br /> if(key == 9) { // tab<br /> if (lastSel) {<br /> var ind = grid.jqGrid(&#39;getInd&#39;, lastSel, false);<br /> var dataIDs = grid.jqGrid(&#39;getDataIDs&#39;);<br /> if (ind &#60; dataIDs.length) {<br /> var nextRowID = dataIDs[ind];<br /> grid.jqGrid(&#39;setSelection&#39;, nextRowID, true); // trigger onSelectRow<br /> //You are at the end of the row, but not the last row. Go to next row<br /> //$(&#39;textarea[name=&#34;description&#34;]&#39;, ind).focus();<br /> grid.jqGrid(&#39;editCell&#39;, nextRowID, 7, true);<br /> } else {<br /> addRow();<br /> var nextRowID = dataIDs[ind];<br /> grid.jqGrid(&#39;editCell&#39;, nextRowID, 7, true);<br /> //You are at the end of the last row. Create new row... Selects it automatically?<br /> }<br /> }<br /> return false;<br /> }<br /> }<br /> }<br /> ]<br /> }, editrules:{required:true, number:true}, formatter:&#39;currency&#39;,<br /> formatoptions:{prefix:&#39;$&#39;, thousandsSeparator:&#39;,&#39;}},<br /> {name:&#39;reserve&#39;,index:&#39;reserve&#39;, width:85, formatter:&#39;currency&#39;,<br /> formatoptions:{prefix:&#39;$&#39;, thousandsSeparator:&#39;,&#39;}}<br /> ],<br /> loadComplete: function(data) {</p>
<p> calculateProfits();<br /> },<br /> onSelectRow: function(id) {<br /> if (id &#38;&#38; id !== lastSel) {<br /> if (saveRow(lastSel) === false) {<br /> grid.jqGrid(&#39;setSelection&#39;, lastSel, false); // set selection back to last selected row but do not trigger onSelectRow<br /> return;<br /> }<br /> lastSel = id;<br /> }<br /> grid.jqGrid(&#39;editRow&#39;, id, true, onEditRow, null, null, {},<br /> afterSave, null, afterRestore);<br /> },<br /> editurl: &#34;update_scope_procedures.php?jobNo=&#60;?= $jobNo ?&#62;&#38;scope=&#60;?= $scope ?&#62;&#38;&#34;,<br /> rowNum: 10000,<br /> //rowList:[10,20,30],<br /> sortname: &#39;step&#39;,<br /> sortorder: &#39;asc&#39;,<br /> //viewrecords:true,<br /> pager: &#39;#pager&#39;,<br /> pgbuttons:false,<br /> pginput:false,<br /> footerrow: true,<br /> userDataOnFooter: true,<br /> caption:&#34;Job Procedure&#34;<br /> }).jqGrid(&#39;navGrid&#39;,&#39;#pager&#39;,<br /> {edit: false, add: true, del: true, search: false, addfunc:function(){<br /> addRow();<br /> }, delfunc:function(dr) {<br /> if (true){<br /> if (dr === &#39;_empty&#39;) {<br /> grid.jqGrid(&#39;delRowData&#39;, dr);<br /> } else {<br /> grid.jqGrid(&#39;restoreRow&#39;, dr);<br /> grid.jqGrid(&#34;delGridRow&#34;,dr,{reloadAfterSubmit:false, afterSubmit:function(data,postd){<br /> var json = $.parseJSON(data.responseText);<br /> grid.jqGrid(&#39;footerData&#39;, &#39;set&#39;, json.footerData);</p>
<p> calculateProfits();<br /> return [true, &#39;&#39;];<br /> }});<br /> }<br /> }<br /> }}, //options<br /> {}, // edit options<br /> {}, // add options<br /> {}, // del options<br /> {} // search options<br /> )<br /> $(&#39;#labour_profit_percent&#39;).change(function() {<br /> calculateProfits();<br /> $.ajax({<br /> type: &#39;POST&#39;,<br /> url: &#39;update_job_profit_percentage.php&#39;,<br /> data: {scope:&#60;?= $scope ?&#62;, jobNo:&#60;?= $jobNo ?&#62;, type:&#39;labour&#39;, percentage:$(this).val()},<br /> dataType: &#39;json&#39;<br /> });<br /> });<br /> $(&#39;#material_profit_percent&#39;).change(function() {<br /> calculateProfits();<br /> $.ajax({<br /> type: &#39;POST&#39;,<br /> url: &#39;update_job_profit_percentage.php&#39;,<br /> data: {scope:&#60;?= $scope ?&#62;, jobNo:&#60;?= $jobNo ?&#62;, type:&#39;material&#39;, percentage:$(this).val()},<br /> dataType: &#39;json&#39;<br /> });<br /> });<br /> $(document).click(function(e) {<br /> if (!$(e.target).closest(&#34;#list&#34;).length) {<br /> var ind = grid.jqGrid(&#39;getInd&#39;, lastSel, true);<br /> if (ind !== false &#38;&#38; $(ind).attr(&#39;editable&#39;) === &#39;1&#39;) {<br /> if (grid.jqGrid(&#39;saveRow&#39;, lastSel, null, null, {}, afterSave) === false) {<br /> grid.jqGrid(&#39;setSelection&#39;, lastSel, false);<br /> }<br /> }<br /> }<br /> });</p>
<p> function formatCurrency(number, decimals) {<br /> decimals = (typeof (decimals) !== &#34;undefined&#34; &#38;&#38; decimals !== null)<br /> ? decimals<br /> : 2;<br /> var currency = number.toFixed(decimals);<br /> var re = /(-?[0-9]+)([0-9]{3})/;<br /> while(re.test(currency)) {<br /> currency = currency.replace(re, &#39;$1,$2&#39;);<br /> }<br /> return currency.replace(/^(-?)([0-9,.]+)$/, &#39;$1$$$2&#39;);<br /> }</p>
<p> function calculateProfits() {</p>
<p> var footerData = grid.jqGrid(&#39;footerData&#39;, &#39;get&#39;);</p>
<p> var re = /[^0-9.-]/g;</p>
<p> var tax = &#60;? $branch = branchDetailsByJob($jobNo); echo $branch[&#39;tax&#39;]; ?&#62;</p>
<p> var labourProfit = parseFloat(footerData.labour.replace(re, &#39;&#39;)) * (parseInt($(&#39;#labour_profit_percent&#39;).val()) / 100.0 + 1);<br /> var materialProfit = parseFloat(footerData.materials.replace(re, &#39;&#39;)) * (parseInt($(&#39;#material_profit_percent&#39;).val()) / 100.0 + 1);<br /> var costBilled = parseFloat(footerData.costbilled.replace(re, &#39;&#39;));<br /> var reserve = parseFloat(footerData.reserve.replace(re, &#39;&#39;));</p>
<p> var labourProfitGross = parseFloat(footerData.labour.replace(re, &#39;&#39;)) * (parseInt($(&#39;#labour_profit_percent&#39;).val()) / 100.0);<br /> var materialProfitGross =<br /> parseFloat(footerData.materials.replace(re, &#39;&#39;)) * (parseInt($(&#39;#material_profit_percent&#39;).val()) / 100.0);</p>
<p> //var profitEx = labourProfit + materialProfit - costBilled;<br /> var profitEx = labourProfitGross + materialProfitGross + reserve;<br /> var totalAmount = (labourProfit + materialProfit) * (1+tax);</p>
<p> $(&#39;#labour_profit&#39;).html(formatCurrency(labourProfit, 2));<br /> $(&#39;#material_profit&#39;).html(formatCurrency(materialProfit, 2));<br /> $(&#39;#profit_ex&#39;).html(formatCurrency(profitEx, 2));<br /> $(&#39;#total_inc&#39;).html(formatCurrency(totalAmount, 2));</p>
<p> $.ajax({<br /> type: &#39;POST&#39;,<br /> url: &#39;update_pscopes_total_amount.php&#39;,<br /> data:{scope:&#60;?= $scope ?&#62;, jobNo:&#60;?= $jobNo ?&#62;, &#34;totalAmount&#34;:totalAmount},<br /> dataType: &#39;json&#39;<br /> });<br /> }</p>
<p> function afterSave(rowid, data) {<br /> var json = $.parseJSON(data.responseText);<br /> var postd = json.postData;<br /> if (postd.oper === &#39;add&#39;) {<br /> var datarow =<br /> procedureid:postd.id,display:postd.display,step:postd.step,trade:postd.trade,personnelid:postd.personnelid,quoteno:postd.quoteno,description:postd.description,<br /> labour:postd.labour,materials:postd.materials,costbilled:postd.costbilled,reserve:json.rowData.reserve};<br /> grid.jqGrid(&#39;addRowData&#39;, postd.id, datarow, &#34;before&#34;, &#34;_empty&#34;);<br /> grid.jqGrid(&#39;delRowData&#39;, &#34;_empty&#34;);<br /> } else {<br /> grid.jqGrid(&#39;setRowData&#39;, rowid, json.rowData);<br /> }<br /> grid.jqGrid(&#39;footerData&#39;, &#39;set&#39;, json.footerData);</p>
<p> calculateProfits();<br /> }</p>
<p> function afterRestore(rowid) {<br /> if (rowid === &#39;_empty&#39;) { // new row<br /> grid.jqGrid(&#39;delRowData&#39;, rowid);<br /> }<br /> }</p>
<p> function onEditRow(id) {<br /> if (id === &#39;_empty&#39;) { // new row<br /> var ind = grid.jqGrid(&#39;getInd&#39;, id, true);<br /> if (ind !== false) {<br /> $(&#39;textarea[name=&#34;description&#34;]&#39;, ind).focus();<br /> }<br /> }<br /> }</p>
<p> function addRow() {<br /> if (lastSel) {<br /> if (saveRow(lastSel) === false) {<br /> return;<br /> }<br /> }</p>
<p> if (true){<br /> var step = &#39;&#39;, trade = &#39;&#39;;<br /> $.ajax({url: &#39;last_job_procedure.php&#39;, data: {jobNo: &#60;?= $jobNo ?&#62;},<br /> dataType: &#39;json&#39;, async: false, success: function(data) {<br /> if (data.error === false) {<br /> step = data.step + 1;<br /> trade = data.trade;<br /> }<br /> }});</p>
<p> var datarow = {procedureid:&#34;_empty&#34;,display:&#34;1&#34;,step:step,trade:trade,personnelid:&#34;&#34;,quoteno:&#34;&#34;,description:&#34;&#34;,<br /> labour:&#34;&#34;,materials:&#34;&#34;,costbilled:&#34;&#34;,reserve:&#34;&#34;};<br /> //grid.jqGrid(&#39;restoreRow&#39;, lastSel);<br /> lastSel = &#34;_empty&#34;;<br /> var success = true;<br /> var ind = grid.jqGrid(&#39;getInd&#39;, lastSel, false);<br /> if (ind === false) {<br /> success = grid.jqGrid(&#39;addRowData&#39;, lastSel, datarow, &#34;last&#34;) ;<br /> }<br /> if (success) {<br /> grid.jqGrid(&#39;editRow&#39;, lastSel, true, onEditRow, null, null, {}, afterSave, null, afterRestore);<br /> grid.jqGrid(&#39;setSelection&#39;, lastSel, false);<br /> }<br /> }<br /> }</p>
<p> function saveRow(id) {<br /> var ind = grid.jqGrid(&#39;getInd&#39;, id, true);<br /> if (ind !== false &#38;&#38; $(ind).attr(&#39;editable&#39;) === &#39;1&#39;) {<br /> if (grid.jqGrid(&#39;saveRow&#39;, id, null, null, {}, afterSave) === false) {<br /> return false;<br /> }<br /> }<br /> return true;<br /> }<br /> });<br /> &#60;/script&#62;</p>
</div>
</div>
<ol class="code"> </ol>
]]></description>
        	        	<pubDate>Thu, 22 Mar 2012 02:31:10 +0200</pubDate>
        </item>
</channel>
</rss>