FlexiGrid - set width of Grid in code

Question

Hey, I'm trying out Flexigrid (http://code.google.com/p/flexigrid/) for a new app - I'm really impressed with it but I can't find a way to set the width in code.

The main reason for this is to get the GRID (not the columns inside the grid) to align fully to the size of the window. I know, it makes a mockery of the horizontal resizer, but that's what I have to do!

FYI my set up is the following:

$(document).ready(function() {
            $("#flex1").flexigrid
      (
      {
          url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
          dataType: 'json',
          colModel: [
          { display: '', name: 'view', width: 20, sortable: true, align: 'center' },
       { display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
       { display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
       { display: '', name:'Actions', width:30, sortable: false, align: 'center' }
       ],
          sortname: "Street",
          sortorder: "asc",
          usepager: true,
          title: 'Streets',
          useRp: true,
          rp: 15,
          showTableToggleBtn: false,
          width: 800,
          height: 200
      }
      );
        });

but the following function doesn't work:

function ResizeGrid() { $('#flex1').flexOptions({ width:1000 }).flexReload(); }

It causes the grid to refresh, but nothing more.

Any ideas?

Thanks

Answer 1

Despite having NO LUCK on google for about 20 minutes before posting this, Murphy's law meant that I tried another quick search just afterwards and found the answer.

Turns out that "width" should be set to 'auto' (note the quotes are vital).

 $("#flex1").flexigrid
      (
      {
          url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
          dataType: 'json',
          colModel: [
          { display: '', name: 'view', width: 20, sortable: true, align: 'center' },
       { display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
       { display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
       { display: '', name:'Actions', width:30, sortable: false, align: 'center' }
       ],
          sortname: "Street",
          sortorder: "asc",
          usepager: true,
          title: 'Streets',
          useRp: true,
          rp: 15,
          showTableToggleBtn: false,
          width: 'auto',
          height: 200
      }
      );

I'll leave this post for anyone else who has this problem.