cfgrid auto height and width

Question

I am trying to have the height and width of the cfgrid to fit on the page no matter what size of the screen.

 <cfform>
  <!-- I have tried: But it can not have percentages. -->
  <cfgrid name="FLines" height="60%" width="60%" format="html" selectmode="EDIT" striperows="Yes" query="PGs" appendkey="No" hrefkey="True">
  <!-- I do not want to tell it a hardcoded way for width and height. -->
  <cfgrid name="FLines" height="600" width="600" format="html" selectmode="EDIT" striperows="Yes" query="PGs" appendkey="No" hrefkey="True">

    <cfgridcolumn name="PRID" display="No">
    <cfgridcolumn name="PROFILE" header="Profile" width="50">
    <cfgridcolumn name="DESCRIPTION" header="Description" width="200">
    <cfgridcolumn name="Qty" header="Prod Cat" width="50">
    <cfgridcolumn name="CARTONWIDTH" header="Carton Width" width="75">
    <cfgridcolumn name="Configuration" header="Config" width="50">
  </cfgrid>

Any suggestions?

Yes, don't use `cfgrid` (or any of the Cf UI elements, really). Try jQGrid. — Scott Stroz, Dec 11 '14 at 21:45
jqGrid is a nightmare to style into an existing design. I spent months trying and it never worked. Try http://www.datatables.net. — Adrian J. Moreno, Dec 11 '14 at 22:30
While I prefer datatables, Scott's base statement is right. After enough time dealing with CF's UI elements, you find out they're shoddy crutches. Lean on them too hard, and they start cracking. — Regular Jo, Dec 11 '14 at 22:52
I agree with Scott / Adrian. Restart your work using something other than `` — Adam Cameron, Dec 12 '14 at 07:08
(2023) datatables has an annual subscription for the "Editor" features. https://editor.datatables.net/purchase/index — Scott Jibben, Apr 13 '23 at 21:28

score 0 · Answer 1 · answered Dec 11 '14 at 21:45

Source: CFGrid - Use full document width by Jules

The author here suggests that on your member-area home-page, you use javascript to set a cookie.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}

function readCookie(name) {
var nameEQ = escape(name) + "=";
var ca = document.cookie.split(‘;’);
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ‘ ‘) c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length, c.length));
}
return null;
}

function eraseCookie(name) {
createCookie(name, "", -1);
}

$(document).ready(function(){
createCookie("bodyWidth", $(document).width()-20, 14);
});
</script>
<cfset structDelete(session, ‘bodyWidth’) />

They then use this in OnRequestStart of Application.cfc (would also work in application.cfm if you're using that)

<!— GRID WIDTHS —>
<cfif not isDefined("session.bodyWidth")>
<cfif isDefined("cookie.bodyWidth")>
<cfset session.bodyWidth = cookie.bodyWidth>
<cfelse>
<cfset session.bodyWidth = 1067>
</cfif>
</cfif>

And your cfgrids can now use session.bodywidth as a variable.

The downside is that it doesn't dynamically respond to resizing, but it does work for different resolutions.

The author uses JQuery, but pure javascript can do anything JQuery can do and it looks like JQuery is used really really minimally here, most of this solution is just Javascript.

cfgrid auto height and width

1 Answers1