Want to stretch the last column in Flexigrid

Question

I have not found a way to apply column width in flexigrid in terms of percentages.
I gave the absolute length as follows:

colModel : [ {display:'ISO', width:50}, {display:'Name', width:300}, {display:'Printable Name', width:200}, {display:'ISO3', width:200}, {display:'Number Code', width:100}, ], 

So what happens when I resize the last columns, there is a space to the right of it. Please view screenshot.

Is there a way to make the last column occupy the remaining space and the remaining columns absolute. This function was implemented in Flex in our application, and I do not know how to do it.

Answer 1

Hiya demo http://jsfiddle.net/GNqZn/1/show and http://jsfiddle.net/GNqZn/1/

You probably need to write a custom function like this one that I wrote for this particular case in the demo above:

In the demo view above my table view was 700 width and 4 columns before number code hence 700/4

Read here: http://groups.google.com/group/flexigrid/browse_thread/thread/3da4473a5f467cea

Hope this helps you in the right direction and the demo will help you play. Hooray!

This is not a silver bullet, but you can do it by tuning to your specific need. :)

UPDATE June 5th . To give OP a simple demo: http://jsfiddle.net/2TkyR/22/ or > http://jsfiddle.net/gaNZR/11 or http://jsfiddle.net/gaNZR/11/show/

If I can recommend, it is very important that if you read a little more about the plugin, play a little, you will feel more confident.

See attached image. All you have to do is add this customization feature to suit your needs.

Read this: http://flexigrid.info/ and some good lessons and this: http://www.kenthouse.com/blog/2009/07/fun-with-flexigrids/

JQuery code

 function GetColumnSize(percent){ screen_res = (700/4)*0.95; // 700 is the width of table; col = parseInt((percent*(screen_res/100))); if (percent != 100){ // alert('foo= ' + col-18); return col-18; }else{ // alert(col); return col; } } 

name it like this width : GetColumnSize(100),

  $("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'}, {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true}, {display: 'Number Code', name : 'numcode', width : GetColumnSize(100), sortable : true, align: 'right'} ], 

2 Images below

Image 1

Image 2