<?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: Subgrid width in IE8 won't produce a scroll bar</title>
	<link>http://www.trirand.com/blog/?page_id=393/bugs/subgrid-width-in-ie8-wont-produce-a-scroll-bar</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/bugs/subgrid-width-in-ie8-wont-produce-a-scroll-bar/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>tony on Subgrid width in IE8 won't produce a scroll bar</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/subgrid-width-in-ie8-wont-produce-a-scroll-bar#p13918</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/subgrid-width-in-ie8-wont-produce-a-scroll-bar#p13918</guid>
        	        	<description><![CDATA[<p>Hello,</p>
<p>Thanks. Will check it and let you known</p>
<p>Best Regards</p>
<p>Tony</p>
]]></description>
        	        	<pubDate>Thu, 14 Jan 2010 22:20:03 +0200</pubDate>
        </item>
        <item>
        	<title>msshushu on Subgrid width in IE8 won't produce a scroll bar</title>
        	<link>http://www.trirand.com/blog/?page_id=393/bugs/subgrid-width-in-ie8-wont-produce-a-scroll-bar#p13915</link>
        	<category>Bugs</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/bugs/subgrid-width-in-ie8-wont-produce-a-scroll-bar#p13915</guid>
        	        	<description><![CDATA[<p>Hi guys,&#160;</p>
</p>
<p>Another what i hope is a minor problem. I am testing with IE 8 and Firefox. I have a master/subgrid scenario built.</p>
<p>When i expand a row to display my subgrid, the width of the subgrid matches the width of the parent row. When i resize the window however, the subgrid doesn&#39;t resize yet the parent does. I&#39;m fine with that. However, in firefox, when i make the screen smaller, a horizontal scroll bar automatically appears for the sub grid, which is good, because users can at least still see the columns. In IE 8 however, the columns just disappear off the page as i decrease the window size.</p>
</p>
<p>Any advice on how to make IE8 force a scroll like firefox does? I tried several CSS tricks with no luck.</p>
</p>
<p>here is my code so far:</p>
</p>
<p>&#60;script type="text/javascript"&#62;</p>
</p>
<p>function init() {</p>
<p>&#160;&#160; &#160;var lastsel;</p>
<p>&#160;&#160; &#160;$("#contractors").jqGrid({</p>
<p>&#160;&#160; &#160; &#160; &#160;url:&#39;contractor_data.aspx?call=&#39; + $("#&#60;%= lblContractorCompany.ClientID %&#62;").text(),</p>
<p>&#160;&#160; &#160; &#160; &#160;datatype: &#39;json&#39;,</p>
<p>&#160;&#160; &#160; &#160; &#160;mtype: &#39;GET&#39;,</p>
<p>&#160;&#160; &#160; &#160; &#160;colNames:[&#39;ID&#39;,&#39;Full Name&#39;],</p>
<p>&#160;&#160; &#160; &#160; &#160;colModel:[</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;{name:&#39;ID&#39;,index:&#39;ID&#39;, width:100,hidden:true},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;{name:&#39;FullName&#39;,index:&#39;FullName&#39;, width:55}<span> </span> &#160; &#160; &#160; &#160; &#160; &#160;<span> </span></p>
<p>&#160;&#160; &#160; &#160; &#160;],</p>
<p>&#160;&#160; &#160; &#160; &#160;pager: "#contractorsPager",</p>
<p>&#160;&#160; &#160; &#160; &#160;rowNum:-1,</p>
<p>&#160;&#160; &#160; &#160; &#160;autowidth:true,</p>
<p>&#160;&#160; &#160; &#160; &#160;height:"100%",</p>
<p>&#160;&#160; &#160; &#160; &#160;sortname: &#39;ID&#39;,</p>
<p>&#160;&#160; &#160; &#160; &#160;sortorder: "desc",</p>
<p>&#160;&#160; &#160; &#160; &#160;viewrecords: true,</p>
<p>&#160;&#160; &#160; &#160; &#160;caption: &#39;Contractors&#39;,</p>
<p>&#160;&#160; &#160; &#160; &#160;subGrid: true,</p>
<p>&#160;&#160; &#160; &#160; &#160;subGridRowExpanded: function(subgrid_id, row_id) {</p>
</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;var listUrl = "";</p>
</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;// we pass two parameters</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;// subgrid_id is a id of the div tag created within a table</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;// the row_id is the id of the row</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;// If we want to pass additional parameters to the url we can use</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;// the method getRowData(row_id) - which returns associative array in type name-value</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;// here we can easy construct the following</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;var subgrid_table_id;</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;subgrid_table_id = subgrid_id+"_t";</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;$("#"+subgrid_id).html("&#60;table id=&#39;"+subgrid_table_id+"&#39; class=&#39;scroll&#39;&#62;&#60;/table&#62;");</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;$("#"+subgrid_table_id).jqGrid({</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;url:"contractor_data.aspx?sub=true&#38;fullname="+$("#contractors").getRowData(row_id).FullName + "&#38;complete=" + $("#cbComplete").attr("checked") + "&#38;verified=" + $("#cbVerified").attr("checked"),</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;datatype: "json",</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;colNames: [&#39;ID&#39;,&#39;Customer&#39;,&#39;Full Name&#39;,&#39;Start Time&#39;,&#39;End Time&#39;,&#39;Project Name&#39;,&#39;Job Category&#39;,&#39;Actual Hours Worked&#39;, &#39;Labor Cost&#39;,&#39;Project Expense&#39;,&#39;Complete&#39;,&#39;Verified by Manager&#39;],</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;colModel: [</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"ID",index:"ID",hidden:true,key:true},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"Customer",index:"Customer",width:250},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"FullName",index:"FullName",width:150},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"StartTime",index:"StartTime",width:100}, &#160; &#160; &#160; &#160; &#160;&#160;</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"EndTime",index:"EndTime",width:100},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"ProjectName",index:"ProjectName",width:400},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"JobCategory",index:"JobCategory",width:150},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"ActualHoursWorked",index:"ActualHoursWorked",width:150,editable:true},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"LaborCost",index:"LaborCost",width:150,editable:true},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"ProjectExpense",index:"ProjectExpense",width:150,editable:true},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"Complete",index:"Complete",width:100,editable:true,edittype:"checkbox",editoptions: {value:"Yes:No"}},</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;{name:"VerifiedByManager",index:"VerifiedByManager",width:150,editable:true,edittype:"checkbox",editoptions: {value:"Yes:No"}}</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;],</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;rowNum:-1,</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;height: "100%",</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;autowidth:true,</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;rowNum:20,</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;onSelectRow: function(id){</p>
<p><span> </span> &#160; &#160; &#160; &#160;if(id &#38;&#38; id!==lastsel){</p>
<p><span> </span> &#160; &#160; &#160; &#160;$("#"+subgrid_table_id).jqGrid(&#39;restoreRow&#39;,lastsel);</p>
<p><span> </span> &#160; &#160; &#160; &#160;$("#"+subgrid_table_id).jqGrid(&#39;editRow&#39;,id,true);</p>
<p><span> </span> &#160; &#160; &#160; &#160;lastsel=id;</p>
<p><span> </span> &#160; &#160; &#160; &#160;}</p>
<p><span> </span> &#160; &#160; &#160; &#160; &#160;},</p>
<p><span> </span> &#160; &#160; &#160; &#160; &#160;editurl:"contractor_data.aspx",</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;sortname: &#39;ID&#39;,</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160; &#160;sortorder: "desc"</p>
<p>&#160;&#160; &#160; &#160; &#160; &#160; &#160;});</p>
<p>&#160;&#160; &#160; &#160; &#160;}</p>
<p>&#160;&#160; &#160;});</p>
</p>
<p>&#160;&#160; &#160;$("#contractors").jqGrid(&#39;navGrid&#39;,&#39;#contractorsPager&#39;,{search:false,edit:false,add:false,del:false});</p>
</p>
<p>&#160;&#160; &#160;resize_the_grid();</p>
</p>
<p>}</p>
</p>
<p>function resize_the_grid()</p>
<p>{ &#160; &#160;</p>
<p>&#160;&#160; &#160;// we have to subtract 240 because that&#39;s approximately the size of the quick launch bar space</p>
<p>&#160;&#160; &#160;if ($("div[ID^=&#39;gbox_contractors&#39;]").length &#62; 0) {</p>
<p>&#160;&#160; &#160; &#160; &#160;$(&#39;#contractors&#39;).setGridWidth($(window).width()-40, true);</p>
<p>&#160;&#160; &#160;}</p>
<p>}</p>
</p>
<p>$(document).ready(init);</p>
</p>
<p>$(window).resize(resize_the_grid);</p>
</p>
<p>&#60;/script&#62;</p>
]]></description>
        	        	<pubDate>Thu, 14 Jan 2010 21:40:11 +0200</pubDate>
        </item>
</channel>
</rss>