7

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.

enter image description here

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.

Ashwin
  • 12,081
  • 22
  • 83
  • 117

1 Answers1

8

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 enter image description here

Image 2 enter image description here

Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • 1
    Hiya @MotaBOS Yep if you read my answer - I mentioned its for your help and give you a good start; not a silver bullet but I will see if I can read your question and help further, – Tats_innit May 22 '12 at 21:47
  • Thanks for the answer. But I am not understanding what are the 2 fiddles showing. Can you explain that after we set the value in the form how can we see the form. Or is it not working in this fiddle and I will have to implement in project. – Ashwin May 29 '12 at 13:06
  • @MotaBOS Hiya man - Glad I can help - code is straight fwd - cool so go to this page: **link** => http://flexigrid.info/ scroll down to the end `example 3` - **NOw in your case** where ever you have your flexigrid hooked up; you need to attach the custom Grid function **GetColumnSize** like the one mentioned in the post :) something like this `{display: 'Number Code', name : 'numcode', width : GetColumnSize(100), sortable : true, align: 'right'}` If you can make a js fiddle I can totally help you out man, Cheers! – Tats_innit May 30 '12 at 03:28
  • Somehow I am not able to render a flexigrid in the fiddle. The incomplete fiddle is located here - http://jsfiddle.net/ashwyn/BHkAy/1/. If you can make it work then you can apply your solution and tell me. Thanks. On the other hand, I tried using `GetColumnSize` in my project and by "it is not accurate" I mean't that whatever value I give there it looks perfect but when I resize column it agains gives the same problem. You will understand what I am saying when we both are on the same page i.e. fiddle. Please let me know. Many thanks for your replies. – Ashwin Jun 04 '12 at 11:02
  • @MotaBOS no worries man I will see if I can make exact demo of what you mentioned,(you can try as well) it's really late at my part of globe so will look into this tomorrow, don't worry, cheers! :) – Tats_innit Jun 04 '12 at 12:36
  • Hiya @MotaBOS Cool man I have updated the post above with 2 simple demos, Your demo was not correct because missing the `test` function which was called with in the `button` property in the flexigrid function. `;)` so here you go **Demo:** (If I may recommend read more about the plugin as it seems you have little understanding around this plugin) **Demo 1** http://jsfiddle.net/2TkyR/22/ and **Version you are using version**: http://jsfiddle.net/gaNZR/11/ or full page version here: http://jsfiddle.net/gaNZR/11/show/ ; I will also update the post now. This will surely help you! Cheers! – Tats_innit Jun 05 '12 at 06:59
  • @MotaBOS little extra :) fixed your jsfiddle as well and reside here: http://jsfiddle.net/BHkAy/2/ cheers! *(Issue was call to `test` function which was not there I have commented the line so that you can see)* – Tats_innit Jun 05 '12 at 07:15
  • your fiddle http://jsfiddle.net/gaNZR/11/ have the same issue as in the very first screenshot that I have posted. It seems that this solution is not working. And thanks for pointing out the `test` function mistake. – Ashwin Jun 05 '12 at 09:36
  • My observation about this solution is that instead of specifying absolute width it allows us to specify width in terms of percentages (x1, x2, x3, x4, x5, all sum = 100). But that is not my concern here, I want to hide the rest of the space after last column. – Ashwin Jun 05 '12 at 09:37
  • @MotaBOS Yes thats why you will use `GetCustomSize` function in your table to make the change according to your need. If you read my answer it has a link to google group, might be reading that will give you bit of an insight to the issue hence use `GetCustomizeSize` according to your specific need like I tried to show you in here: http://jsfiddle.net/gaNZR/11/show/ ; hope it helps! `:)` cheers,Oh and in order to hide left over space by last column just increase the percentage of width of last column tune the get custom function `column width` to your need. That will do the trick B-) – Tats_innit Jun 05 '12 at 09:51
  • I have already seen all these resources. The google group link clearly says that to apply width in percentages use getColumnSize(). But apart from that my main focus is to hide rest of the space. – Ashwin Jun 05 '12 at 10:00
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/12154/discussion-between-motabos-and-tats-innit) – Ashwin Jun 05 '12 at 10:00