<?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: column freezing of jqgrid</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/column-freezing-of-jqgrid-1</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/column-freezing-of-jqgrid-1/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>Shaili on column freezing of jqgrid</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/column-freezing-of-jqgrid-1#p26819</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/column-freezing-of-jqgrid-1#p26819</guid>
        	        	<description><![CDATA[<p>i want to do&#160;column freezing&#160;of jqgrid .i am using&#160;</p>
<p>jquery-1.6.2.min.js and jquery-ui-1.8.16.custom.min.js</p>
<p>i hav aslo write frozen:true in colmodel and&#160;&#160;jQuery("#tblgrid").jqGrid(&#39;setFrozenColumns&#39;); but then also first column is not freezed.plz help me to freeze first column.</p>
<p>this is my .js file</p>
<p>*************************************</p>
<p>var result = [];</p>
</p>
<p>$(document).ready(function () {</p>
<p>&#160;&#160;&#160;</p>
<p>&#160;&#160;&#160; $("#AddNewCommon_BandsDialog").dialog({</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; width: 500,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; modal: true,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; autoOpen: false,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; buttons: {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; "Save": function () {</p>
</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; AddNewBands();</p>
</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; },</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; "Cancel": function () {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; $(this).dialog("close");</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; }</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; }</p>
<p>&#160;&#160;&#160; });</p>
</p>
<p>&#160;&#160;&#160; LoadData();</p>
</p>
<p>});</p>
</p>
<p>function LoadData() {</p>
<p>&#160;&#160;&#160; var grid = $("#tblgrid");</p>
</p>
<p>&#160;&#160;&#160; grid.jqGrid({</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; url: &#39;../Demo/GetBands&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; loadonce: true,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; datatype: &#39;json&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; mtype: &#39;GET&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; postData: {},</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; width: 400,</p>
<p>//&#160;&#160;&#160;&#160;&#160;&#160;&#160; width: 750,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; colNames: [&#39;BandID&#39;, &#39;BandName&#39;,&#39;&#39;],</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; colModel: [</p>
<p>&#160;&#160;&#160; &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;{ name: &#39;BandID&#39;, align: "center", index: &#39;ID&#39;, width: 200, sortable: false , frozen: true },</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;BandName&#39;, align: "center", index: &#39;Name&#39;, width: 200 ,frozen: false,editable: true, edittype: &#39;text&#39;, editoptions: { maxlength: 3, onKeypress: &#39;javascript:return ValidDecimal(this, event)&#39;} },</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { name: &#39;act&#39;, index: &#39;act&#39;, width: 200 ,frozen: false, sortable: false,formatter: ActionFormatter },</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; ],</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; jsonReader: {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; repeatitems: false</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; },</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; editurl: &#39;#&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; ignoreCase: true,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; height: &#39;100%&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; rownumbers: true,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; rowNum: 5,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; rowList: [5, 10, 20, 50],</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; viewrecords: true,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; sortorder: "desc",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; forceFit: false,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; pgbuttons: true,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; pager: &#39;#dvBands&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; caption: "Bands Detail",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; recordtext: "View Band {0} To {1} Of {2}",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; emptyrecords: "No Record Found",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; shrinkToFit: false</p>
<p>&#160;&#160;&#160; }).jqGrid(&#39;navGrid&#39;, &#39;#dvBands&#39;,</p>
<p>&#160;&#160;&#160; {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; search: false, edit: false, add: true, del: true, view: false,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; refresh: false,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; alertcap: "Bands Error",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; alerttext: "&#60;ul style=&#39;color:#FF3300&#39;&#62;&#60;li&#62;Please select Bands.&#60;/li&#62;&#60;/ul&#62;",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; searchtext: "Search",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; searchtitle: "Search Detail(s)",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; addtitle: "Add Detail",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; addtext: "Add",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; addfunc: AddBands,</p>
<p>//&#160;&#160;&#160;&#160;&#160;&#160;&#160; edittext: "Update",</p>
<p>//&#160;&#160;&#160;&#160;&#160;&#160;&#160; edittitle: "Update Selected Detail",</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; /*editfunc: UpdateNew,*/</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; viewtext: &#39;View&#39;,</p>
<p>&#160;&#160;&#160; &#160;&#160;&#160;&#160;viewtitle: &#39;View Selected Bands&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; /*viewfunc: ViewNew,*/</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; deltext: &#39;Delete&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; deltitle: &#39;Delete Selected Bands&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; delfunc: DeleteBands,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; position: "left"</p>
<p>&#160;&#160;&#160; },</p>
<p>&#160;&#160;&#160;&#160;&#160; {}, // default settings for edit</p>
<p>&#160;&#160; {}, // default settings for add</p>
<p>&#160;&#160; {}, // delete</p>
<p>&#160;&#160; {closeOnEscape: true, multipleSearch: false,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; closeAfterSearch: true }, // search options</p>
<p>&#160;&#160; {}</p>
</p>
<p>&#160;&#160;&#160; );</p>
</p>
<p>&#160;&#160;&#160; jQuery("#tblgrid").jqGrid(&#39;setFrozenColumns&#39;);&#160;</p>
<p>&#160;&#160;&#160;</p>
<p>}</p>
<p>function ActionFormatter(cellvalue, options, rowObject) {</p>
<p>&#160;&#160;&#160; var ret;</p>
<p>&#160;&#160; &#160;&#160;//&#160;&#160;&#160;&#160;&#160;&#160; var ddd = rowObject.IsSubmissionSubmitted == true ? 1 : 0;</p>
</p>
<p>&#160;&#160;&#160; ret = &#39;&#60;input id = "btnedit&#39; + options.rowId + &#39;" style="height:22px;width:20px;" value="E"COLOR: maroon"&#62;&#39;);" /&#62;&#39;;</p>
<p>&#160;&#160;&#160; 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:saveBands(&#39;" + options.rowId + "&#39;);" /&#62;";</p>
<p>&#160;&#160;&#160; 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>&#160;&#160;&#160; return ret;</p>
<p>}</p>
<p>function editcall(cl, drp) {</p>
</p>
<p>&#160;&#160;&#160; jQuery(&#39;#tblgrid&#39;).editRow(cl);</p>
</p>
<p>&#160;&#160;&#160; $("#btnedit" + cl).css("display", "none");</p>
<p>&#160;&#160;&#160; $("#btnsave" + cl).css("display", "block");</p>
<p>&#160;&#160;&#160; $("#btncancel" + cl).css("display", "block");</p>
<p>}</p>
</p>
<p>function cancelcall(cl) {</p>
<p>&#160;&#160;&#160; jQuery(&#39;#tblgrid&#39;).restoreRow(cl);</p>
</p>
<p>&#160;&#160;&#160; $("#btnedit" + cl).css("display", "block");</p>
<p>&#160;&#160;&#160; $("#btnsave" + cl).css("display", "none");</p>
<p>&#160;&#160;&#160; $("#btncancel" + cl).css("display", "none");</p>
<p>&#160;&#160;&#160;</p>
<p>}</p>
</p>
<p>function saveBands(index) {</p>
<p>&#160;&#160;&#160; jQuery("#tblgrid").jqGrid(&#39;saveRow&#39;, index);</p>
<p>&#160;&#160;&#160; var row = $("#tblgrid").jqGrid(&#39;getRowData&#39;, index);</p>
<p>&#160;&#160;&#160; var BandIDContent = row.BandID;</p>
<p>&#160;&#160;&#160; var BandNameContent = row.BandName;</p>
<p>&#160;&#160;&#160; $.post(&#39;../Demo/UpdateBands&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { BandID: BandIDContent, BandName: BandNameContent },</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; function (data) {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160; if (data == "True") {</p>
<p>&#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; LoadData();</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160; }</p>
</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; });</p>
</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; $("#btnedit" + index).css("display", "block");</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; $("#btnsave" + index).css("display", "none");</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; $("#btncancel" + index).css("display", "none");</p>
<p>}</p>
</p>
<p>function DeleteBands() {</p>
<p>&#160;&#160;&#160; debugger;</p>
<p>&#160;&#160;&#160; var row_id = jQuery("#tblgrid").jqGrid(&#39;getGridParam&#39;, &#39;selrow&#39;);</p>
</p>
<p>&#160;&#160;&#160; $.post(&#39;../Demo/DeleteBands&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; {BandID:row_id},</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; function (data) {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160; if (data == "True") {</p>
<p>&#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; LoadData();</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160; }</p>
</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; });</p>
<p>}</p>
</p>
<p>function AddBands() {</p>
<p>&#160;&#160;&#160; $("#AddNewCommon_BandsDialog").dialog({ title: "Add New Common_Bands" });</p>
<p>&#160;&#160;&#160; $("#AddNewCommon_BandsDialog").dialog("open");</p>
<p>&#160;&#160;&#160; $("#AddNewAreaDialog input").css("border-color", "silver");</p>
<p>}</p>
<p>function AddNewBands() {</p>
<p>&#160;&#160;&#160; var BandName = $("#txtCommon_Bands_BandName").val();</p>
<p>&#160;&#160;&#160; $("#AddNewCommon_BandsDialog").dialog("close");</p>
</p>
<p>&#160;&#160;&#160; $.post(&#39;../Demo/AddBands&#39;,</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; { BandName: BandName },</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; function (data) {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160; if (data == "True") {</p>
<p>&#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; LoadData();</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160; }</p>
</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; });</p>
<p>}</p>
<p>function ValidDecimal(objTextbox, event) {</p>
<p>&#160;&#160;&#160; //Allows 0 to 9 and only one .(46)</p>
<p>&#160;&#160;&#160; var keyCode = (event.which) ? event.which : (window.event) ? window.event.keyCode : -1;</p>
<p>&#160;&#160;&#160; if (keyCode &#62;= 48 &#38;&#38; keyCode &#60;= 57 &#124;&#124; keyCode == 46) {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; if (keyCode == 46) {</p>
<p>&#160; &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (objTextbox.value.indexOf(".") == -1)</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; return true;</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; else</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; return false;</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; }</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; else</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; return true;</p>
<p>&#160;&#160;&#160; }</p>
<p>&#160;&#160;&#160; if (keyCode == 8 &#124;&#124; keyCode == -1) {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; return true;</p>
<p>&#160;&#160;&#160; }</p>
<p>&#160;&#160;&#160; else {</p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160; return false;</p>
<p>&#160;&#160;&#160; }</p>
<p>}&#160;&#160;&#160;&#160;&#160;</p></p>
]]></description>
        	        	<pubDate>Tue, 19 Jun 2012 16:51:40 +0300</pubDate>
        </item>
</channel>
</rss>