Want to stretch the last column in Flexigrid

Question

I did not find any way to apply column width in flexigrid in terms of percentages.
I have given absolute lengths 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 is happening is, when I resize the last columns the there is a white space to the right of it. Please refer screenshot.

Is there a way to make last column occupy the remaining space and rest of the columns absolute. This feature has been implemented in Flex in our app and there is no way I can know how it is done.

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 I wrote for this specific case in demo above:

In the demo above my table view had 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 will help you in right direction and demo will help you to play around. cheers!

D'uh this is no silver bullet but you can make it by tweaking for your specific need. :)

UPDATE 5th June 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 may recommend it is vital if you read bit more about the plugin, play around a bit you will feel more confident.

Please see an image attached below All you need to do is add this customize function according to your needs.

Please Read this: http://flexigrid.info/ and some good tutorials & 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; 
    } 
} 

call 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