<?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: Inline editing of jqgrid using formatter</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/inline-editing-of-jqgrid-using-formatter</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/inline-editing-of-jqgrid-using-formatter/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>Shaili on Inline editing of jqgrid using formatter</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/inline-editing-of-jqgrid-using-formatter#p26810</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/inline-editing-of-jqgrid-using-formatter#p26810</guid>
        	        	<description><![CDATA[<p>hi,</p>
<p>i am using this code to do inline editing in jqgrid.I have used action formatter to do inline editing.but when i click on &#39;s&#39; (save) button then</p>
<p>function SaveStudentEvaluation called.problem is that in this fuction</p>
<p>var row = $("#tblgrid").jqGrid(&#39;getRowData&#39;, index); to get row data of particulay row.it should give value when i write var name = row.BandName;but instead of value ,this line row.BandName returns html value</p>
<p>so, how can i get that updated cell value after performing edit and then save ?</p>
<p>plz experts help me out, i am stucked at this point</p>
<p>**********************************************************************************************************</p>
<p>this is my .js file</p>
<p>**********************************************************************************************************</p>
</p>
<p>var result = [];</p>
</p>
<p>$(document).ready(function () {</p>
</p>
<p>$("#AddNewCommon_BandsDialog").dialog({</p>
<p>width: 500,</p>
<p>modal: true,</p>
<p>autoOpen: false,</p>
<p>buttons: {</p>
<p>"Save": function () {</p>
</p>
<p>AddNewBands();</p>
</p>
<p>},</p>
<p>"Cancel": function () {</p>
<p>$(this).dialog("close");</p>
<p>}</p>
<p>}</p>
<p>});</p>
</p>
<p>LoadData();</p>
</p>
<p>});</p>
</p>
<p>function LoadData() {</p>
<p>var grid = $("#tblgrid");</p>
</p>
<p>grid.jqGrid({</p>
<p>url: &#39;../Demo/GetBands&#39;,</p>
<p>datatype: &#39;json&#39;,</p>
<p>mtype: &#39;GET&#39;,</p>
<p>postData: {},</p>
<p>width: 750,</p>
<p>colNames: [&#39;BandID&#39;, &#39;BandName&#39;,&#39;&#39;],</p>
<p>colModel: [</p>
<p>{name: &#39;BandID&#39;, align: "center", index: &#39;ID&#39; },</p>
<p>{ name: &#39;BandName&#39;, align: "center", index: &#39;Name&#39;, editable: true,edittype: &#39;text&#39; },</p>
<p>{ name: &#39;act&#39;, index: &#39;act&#39;, width: 40, sortable: false,formatter: ActionFormatter },</p>
<p>],</p>
<p>jsonReader: {</p>
<p>repeatitems: false</p>
<p>},</p>
<p>editurl: &#39;#&#39;,</p>
<p>ignoreCase: true,</p>
<p>height: &#39;100%&#39;,</p>
<p>rownumbers: true,</p>
<p>rowNum: 5,</p>
<p>rowList: [5, 10, 20, 50],</p>
<p>viewrecords: true,</p>
<p>sortorder: "desc",</p>
<p>forceFit: false,</p>
<p>pager: &#39;#dvBands&#39;,</p>
<p>caption: "Bands Detail",</p>
<p>recordtext: "View Band {0} To {1} Of {2}",</p>
<p>emptyrecords: "No Record Found",</p>
<p>shrinkToFit: true</p>
<p>}).jqGrid(&#39;navGrid&#39;, &#39;#dvBands&#39;,</p>
<p>{</p>
<p>search: false, edit: false, add: true, del: true, view: false,</p>
<p>refresh: false,</p>
<p>alertcap: "Bands Error",</p>
<p>alerttext: "&#60;ul style=&#39;color:#FF3300&#39;&#62;&#60;li&#62;Please select Linkage.&#60;/li&#62;&#60;/ul&#62;",</p>
<p>searchtext: "Search",</p>
<p>searchtitle: "Search Detail(s)",</p>
<p>addtitle: "Add Detail",</p>
<p>addtext: "Add",</p>
<p>addfunc: AddBands,</p>
<p>// edittext: "Update",</p>
<p>// edittitle: "Update Selected Detail",</p>
<p>/*editfunc: UpdateNewJoinee,*/</p>
<p>viewtext: &#39;View&#39;,</p>
<p>viewtitle: &#39;View Selected Bands&#39;,</p>
<p>/*viewfunc: ViewNewJoinee,*/</p>
<p>deltext: &#39;Delete&#39;,</p>
<p>deltitle: &#39;Delete Selected Bands&#39;,</p>
<p>delfunc: DeleteBands,</p>
<p>position: "left"</p>
<p>},</p>
<p>{}, // default settings for edit</p>
<p>{}, // default settings for add</p>
<p>{}, // delete</p>
<p>{closeOnEscape: true, multipleSearch: false,</p>
<p>closeAfterSearch: true }, // search options</p>
<p>{}</p>
</p>
<p>);</p>
</p>
<p>}</p>
<p>function ActionFormatter(cellvalue, options, rowObject) {</p>
<p>var ret;</p>
<p>ret = &#39;&#60;input id = "btnedit&#39; + options.rowId + &#39;" style="height:22px;width:20px;" type="button" value="E" onclick="editcall(&#39; + options.rowId + &#39;);" /&#62;&#39;;</p>
<p>ret = ret + "&#60;input id=&#39;btnsave" + options.rowId + "&#39; style=&#39;height:22px;width:20px;display:none;&#39; type=&#39;button&#39; value=&#39;S&#39; onclick="javascript:SaveStudentEvaluation(&#39;" + options.rowId + "&#39;);" /&#62;";</p>
<p>ret = ret + "&#60;input id=&#39;btncancel" + options.rowId + "&#39; style=&#39;height:22px;width:20px;display:none;&#39; type=&#39;button&#39; value=&#39;C&#39; onclick="cancelcall(&#39;" + options.rowId + "&#39;);" /&#62;";</p>
<p>return ret;</p>
<p>}</p>
</p>
<p>function SaveStudentEvaluation(index) {</p>
<p>debugger;</p>
</p>
<p>saveparameters = {</p>
<p>"successfunc": null,</p>
<p>"url": null,</p>
<p>"extraparam": {},</p>
<p>"aftersavefunc": null,</p>
<p>"errorfunc": null,</p>
<p>"afterrestorefunc": null,</p>
<p>"restoreAfterError": true,</p>
<p>"mtype": "POST"</p>
<p>}</p>
<p>jQuery("#tblgrid").jqGrid(&#39;saveRow&#39;, index);</p>
<p>// jQuery("#tblgrid").jqGrid(&#39;saveRow&#39;, index, saveparameters);</p>
<p>var row = $("#tblgrid").jqGrid(&#39;getRowData&#39;, index);</p>
<p>var name = row.BandName;</p>
<p>jQuery("#tblgrid").jqGrid(&#39;editRow&#39;, index);</p>
<p>$("#btnedit" + index).css("display", "block");</p>
<p>$("#btnsave" + index).css("display", "none");</p>
<p>$("#btncancel" + index).css("display", "none");</p>
<p>}</p>
</p>
<p>function editcall(cl, drp) {</p>
</p>
<p>jQuery(&#39;#tblgrid&#39;).editRow(cl);</p>
</p>
<p>$("#btnedit" + cl).css("display", "none");</p>
<p>$("#btnsave" + cl).css("display", "block");</p>
<p>$("#btncancel" + cl).css("display", "block");</p>
<p>}</p>
</p>
<p>function cancelcall(cl) {</p>
<p>jQuery(&#39;#tblgrid&#39;).restoreRow(cl);</p>
</p>
<p>$("#btnedit" + cl).css("display", "block");</p>
<p>$("#btnsave" + cl).css("display", "none");</p>
<p>$("#btncancel" + cl).css("display", "none");</p>
</p>
<p>}</p>
<p>function LoadData1() {</p>
<p>var grid = $("#tblgrid");</p>
</p>
<p>grid.jqGrid({</p>
<p>url: &#39;../Demo/GetBands&#39;,</p>
<p>datatype: &#39;json&#39;,</p>
<p>mtype: &#39;GET&#39;,</p>
<p>postData: {},</p>
<p>width: 750,</p>
<p>colNames: [&#39;BandID&#39;, &#39;BandName&#39;],</p>
<p>colModel: [</p>
<p>{ name: &#39;BandID&#39;, align: "center", index: &#39;BandID&#39; },</p>
<p>{ name: &#39;BandName&#39;, align: "center", index: &#39;BandName&#39; },</p>
<p>],</p>
<p>jsonReader: {</p>
<p>repeatitems: false</p>
<p>},</p>
<p>editurl: &#39;#&#39;,</p>
<p>ignoreCase: true,</p>
<p>height: &#39;100%&#39;,</p>
<p>rownumbers: true,</p>
<p>rowNum: 5,</p>
<p>rowList: [5, 10, 20, 50],</p>
<p>viewrecords: true,</p>
<p>sortorder: "desc",</p>
<p>forceFit: false,</p>
<p>pager: &#39;#dvBands&#39;,</p>
<p>caption: "Bands Detail",</p>
<p>recordtext: "View Band {0} To {1} Of {2}",</p>
<p>emptyrecords: "No Record Found",</p>
<p>shrinkToFit: true</p>
<p>});</p>
</p>
<p>}</p>
</p>
<p>function saveBands() {</p>
<p>debugger;</p>
<p>$.post(&#39;../Demo/UpdateBands&#39;,</p>
<p>{ BandID: BandIDContent, BandName: BandNameContent },</p>
<p>function (data) {</p>
<p>if (data == "True") {</p>
<p>LoadData();</p>
<p>}</p>
</p>
<p>});</p>
</p>
<p>}</p>
</p>
<p>function DeleteBands() {</p>
<p>debugger;</p>
<p>var row_id = jQuery("#tblgrid").jqGrid(&#39;getGridParam&#39;, &#39;selrow&#39;);</p>
</p>
<p>$.post(&#39;../Demo/DeleteBands&#39;,</p>
<p>{BandID:row_id},</p>
<p>function (data) {</p>
<p>if (data == "True") {</p>
<p>LoadData();</p>
<p>}</p>
</p>
<p>});</p>
<p>}</p>
</p>
<p>function AddBands() {</p>
<p>$("#AddNewCommon_BandsDialog").dialog({ title: "Add New Common_Bands" });</p>
<p>$("#AddNewCommon_BandsDialog").dialog("open");</p>
<p>$("#AddNewAreaDialog input").css("border-color", "silver");</p>
<p>}</p>
<p>function AddNewBands() {</p>
<p>var BandName = $("#txtCommon_Bands_BandName").val();</p>
<p>$("#AddNewCommon_BandsDialog").dialog("close");</p>
</p>
<p>$.post(&#39;../Demo/AddBands&#39;,</p>
<p>{ BandName: BandName },</p>
<p>function (data) {</p>
<p>if (data == "True") {</p>
<p>LoadData();</p>
<p>}</p>
</p>
<p>});</p>
<p>}</p>
]]></description>
        	        	<pubDate>Mon, 18 Jun 2012 16:20:30 +0300</pubDate>
        </item>
</channel>
</rss>