Can Flexigrid auto resize the column' width ? about flexigrid

[paulopmx]

That feature you are describing is not yet available on Flexigrid.

Paulo P. Marinas
Chief Technology Officer

On Wed, Nov 21, 2012 at 11:30 AM, pxchen [email protected] wrote:

Hi, when I zoom in or zoom out the page which contains flexigrid, some
columns on the righthandsize of the flexigrid will be hided. This also
occurs when I resize the browser.

Can Flexigrid auto resize the column' width without reloading data(send a
new request to the server) when the browser or page resizes?

Thanks a lot!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/54.

[mattbryson]

Any timeframe on when auto resize of col width will be added, much needed for responsive layouts!

If not , any known workarounds at the moment - something to run on onSuccess and browser resize perhaps?

m

[mattbryson]

I did find a way to do this with a monkey patch.

Its not ideal, but it does the job.

Firstly, I couldn't see a way to expose the Grid or g class, so I set the getGridClass method, so I could could simply create a reference to the g parameter that is passed.

Then, on success of each grid on the page, I store the original table element, as well as the flexigrid instance in an array.

Then I created a method to size the cols that is called on browser resize (and on load of grid). It checks all the cols with a fixed with, and those without out. It then takes the new grid size, minus the fixed with cols, and divides the remaining width across the other cols.

To make sure everything in the grid is re-drawn correctly, i trigger the dragEnd method, as though the user had manually resized the cols.

    $('.data_grid').flexigrid({
        width: 'auto', //This makes the whole gird auto size, but NOT the cols.
        colModel : [
            {width : 50, sortable : false, align: 'center'},
            {width : 'auto', sortable : false, align: 'left'}, //NOTICE auto here
            {width : 50, sortable : false, align: 'left'},
        ],
        onSuccess: function() {  
            addGrid($('#presentations_table'), this);  //PATCH to get the grids to be responseive 
        },
        getGridClass:function(g) { //PATCH to get the grids to be responseive
            this.g=g; //Is this the only way to expose the grid class ?
            return g;
                }
    });

Then the patch code..

    var grids=[];
    $(window).resize(function() {
        //Resize all the grids on the page
        //Only resize the ones whoes size has actually changed...
        for(var i in grids) {
            if(grids[i].width!=grids[i].$grid.width()) {
                sizeGrid(grids[i]);
            }
        } 
    });

    //Keep track of all grid elements and current sizes
    function addGrid($table, grid) {
        var $grid = $table.closest('.flexigrid');
        var data = {$table:$table, $grid:$grid, grid:grid, width:$grid.width()};
        grids.push(data);
        sizeGrid(data);
    } 

    //Make all cols with auto size fill remaining width..
    function sizeGrid(data) {
        //Auto size the middle col.
        var totalWidth = data.$grid.outerWidth()-15; //15 padding - not found where this is set

        var fixedWidth = 0;
        var fluidCols = [];
        for(var i=0; i<data.grid.colModel.length; i++ ) {
            if( !isNaN(data.grid.colModel[i].width) ) {
                fixedWidth+=data.$table.find('tr:eq('+i+') td:eq('+i+'):visible').outerWidth(true);
            } else {
                fluidCols.push(i);
            }
        } 

        var newWidth = (totalWidth-fixedWidth)/fluidCols.length;
        for(var i in fluidCols) {
            data.grid.g.colresize = { n:fluidCols[i], nw:newWidth };
            data.grid.g.dragEnd( );
        }

        data.width = data.$grid.width();
    }

As i say, not ideal, but it works without too much overhead, as it only re sizes if it needs to. If you continually resize, then it does slow down a bit - but with a responsive site with a handfull of set sizes, its not too bad.

m.

[rmatakajr]

Your a Genius! I implemented your patch in the flexigrid_helper.php class for Code Ignitor

Here is the full code

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed'); 
/**
 * Flexigrid CodeIgniter implementation
 *
 * PHP version 5
 *
 * @category  CodeIgniter
 * @package   Flexigrid CI
 * @author    Frederico Carvalho ([email protected])
 * @version   0.3
 * Copyright (c) 2008 Frederico Carvalho  (http://flexigrid.eyeviewdesign.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
*/
if (! function_exists('build_grid_js'))
{
    /**
     * Build Javascript to display grid
     *
     * @param   grid id, or the div id
     * @param   url to make the ajax call
     * @param   array with colModel info:        
     *          * 0 - display name
     *          * 1 - width
     *          * 2 - sortable
     *          * 3 - align
     *          * 4 - searchable (2 -> yes and default, 1 -> yes, 0 -> no.)
     *          * 5 - hidden (TRUE or FALSE, default is FALSE. This index is optional.) 
     * @param   array with button info:     
     *          * 0 - display name
     *          * 1 - bclass
     *          * 2 - onpress
     * @param   default sort column name
     * @param   default sort order
     * @param   array with aditional parameters
     * @return  string
     */
    function build_grid_js($grid_id,$url,$colModel,$sortname,$sortorder,$gridParams = NULL,$buttons = NULL,$searchable=true)
    {
        //Basic propreties
        $grid_js = '<script type="text/javascript">$(document).ready(function(){';
        $grid_js .= '$("#'.$grid_id.'").flexigrid({';
        $grid_js .= "url: '".$url."',";
        $grid_js .= "dataType: 'json',";
        $grid_js .= "sortname: '".$sortname."',";
        $grid_js .= "sortorder: '".$sortorder."',";
        $grid_js .= "usepager: true,";
        $grid_js .= "useRp: true,";

        //Other propreties
        if (is_array($gridParams))
        {
            //String exceptions that dont have ' '. Must be lower case.
            $string_exceptions = array("rpoptions");

            //Print propreties
            foreach ($gridParams as $index => $value) {
                //Check and print with or without ' '
                if (is_numeric($value)) {
                    $grid_js .= $index.": ".$value.",";
                } 
                else 
                {
                    if (is_bool($value))
                        if ($value == true)
                            $grid_js .= $index.": true,";
                        else
                            $grid_js .= $index.": false,";
                    else
                        if (in_array(strtolower($index),$string_exceptions))
                            $grid_js .= $index.": ".$value.",";
                        else
                            $grid_js .= $index.": '".$value."',";
                }
            }
        }

        $grid_js .= "colModel : [";

        //Get colModel
        foreach ($colModel as $index => $value) {
            $grid_js .= "{display: '".$value[0]."', ".($value[2] ? "name : '".$index."', sortable: true," : "")." width : '".$value[1]."', align: '".$value[3]."'".(isset($value[5]) && $value[5] ? ", hide : true" : "")."},";  

            if($searchable==true){
                //If item is searchable
                if ($value[4] != 0)
                {
                    //Start searchitems var
                    if (!isset($searchitems))
                        $searchitems = "searchitems : [";

                    if ($value[4] == 2)
                        $searchitems .= "{display: '".$value[0]."', name : '".$index."', isdefault: true},";
                    else if ($value[4] == 1)
                        $searchitems .= "{display: '".$value[0]."', name : '".$index."'},";
                }
            }

        }

        if($searchable==true){
        //Remove the last ","
            $grid_js = substr($grid_js,0,-1).'],';
            //Remove the last ","
            $searchitems = substr($searchitems,0,-1).']';
            $grid_js .= $searchitems;
        }else{
            $grid_js = substr($grid_js,0,-1).']';
        }
        //Get buttons
        if (is_array($buttons)) 
        {
            $grid_js .= ",buttons : [";
            foreach ($buttons as $index => $value) {
                if ($value[0] == 'separator')
                    $grid_js .= "{separator: true},";
                else
                    $grid_js .= "{name: '".$value[0]."', bclass : '".$value[1]."', onpress : ".$value[2]."},";
            }
            //Remove the last ","
            $grid_js = substr($grid_js,0,-1).']';
        } 

        //Patch Make Responisive
        $grid_js.',
        onSuccess: function() {  
            addGrid($("#'.$grid_id.'"), this);  //PATCH to get the grids to be responseive 
        },
        getGridClass:function(g) { //PATCH to get the grids to be responseive
            this.g=g; //Is this the only way to expose the grid class ?
            return g;
        }';

        //Finalize
        $grid_js .= "}); })";

        //Patch Grid Responisive
        $grid_js .='
        var grids=[];
            $(window).resize(function() {
                //Resize all the grids on the page
                //Only resize the ones whoes size has actually changed...
                for(var i in grids) {
                    if(grids[i].width!=grids[i].$grid.width()) {
                        sizeGrid(grids[i]);
                    }
                } 
            });';
           $grid_js .='
            //Keep track of all grid elements and current sizes
            function addGrid($table, grid) {
                var $grid = $table.closest(\'.flexigrid\');
                var data = {$table:$table, $grid:$grid, grid:grid, width:$grid.width()};
                grids.push(data);
                sizeGrid(data);
            }'; 
            $grid_js .='
            //Make all cols with auto size fill remaining width..
            function sizeGrid(data) {
                //Auto size the middle col.
                var totalWidth = data.$grid.outerWidth()-15; //15 padding - not found where this is set

                var fixedWidth = 0;
                var fluidCols = [];
                for(var i=0; i<data.grid.colModel.length; i++ ) {
                    if( !isNaN(data.grid.colModel[i].width) ) {
                        fixedWidth+=data.$table.find(\'tr:eq(\'+i+\') td:eq(\'+i+\'):visible\').outerWidth(true);
                    } else {
                        fluidCols.push(i);
                    }
                } 

                var newWidth = (totalWidth-fixedWidth)/fluidCols.length;
                for(var i in fluidCols) {
                    data.grid.g.colresize = { n:fluidCols[i], nw:newWidth };
                    data.grid.g.dragEnd( );
                }

                data.width = data.$grid.width();
            }';     
        //close
        $grid_js.='</script>';

        return $grid_js;
    }
}
?>

[EnergeticDreams]

rmatakajr - Great job. I added the flexigrid_helper to my CI project and it works great except the column headings don't re-size. Do you have that same issue or do you have a fix? Thanks.

[paulopmx]

Don't have same issue. Usually a sign of a js error somewhere. if you have
either firefox or chome can you post the console errors?

Paulo P. Marinas
Chief Technology Officer

On Tue, Jul 23, 2013 at 5:58 AM, EnergeticDreams
[email protected]:

rmatakajr - Great job. I added the flexigrid_helper to my CI project and
it works great except the column headings don't re-size. Do you have that
same issue or do you have a fix? Thanks.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/54#issuecomment-21378954
.

[EnergeticDreams]

Thanks for the offer to help. No errors show up. I re-sized columns, sorted, selected/unselected rows but no JS errors. Here is how it renders though:

I'm using the flexigrid_helper code posted by rmatakajr

[rmatakajr]

Yea I could not figure out a way to do that for the colums.. what I just
did was give the cols a set width in the controller
so when its expanded it looks good but when it collapses it just collapses
like so… not the biggest deal for me
but I would love to figure out a solution

Ricky

On Mon, Jul 22, 2013 at 11:21 PM, EnergeticDreams
[email protected]:

Thanks for the offer to help. No errors show up. I re-sized columns,
sorted, selected/unselected rows but no JS errors. Here is how it renders
though:
[image: image]https://f.cloud.github.com/assets/4941904/839445/bb549f50-f346-11e2-9894-edccb44667ae.png

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/54#issuecomment-21390968
.

[paulopmx]

It could be a jquery version thing.

Have you tried doing a trial and error test? removing different css and js
files that might be conflicting with flexigrid?

Paulo P. Marinas
Chief Technology Officer

On Tue, Jul 23, 2013 at 11:21 AM, EnergeticDreams
[email protected]:

Thanks for the offer to help. No errors show up. I re-sized columns,
sorted, selected/unselected rows but no JS errors. Here is how it renders
though:
[image: image]https://f.cloud.github.com/assets/4941904/839445/bb549f50-f346-11e2-9894-edccb44667ae.png

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/54#issuecomment-21390968
.

[suuuunto]

paulopmx, do you think there is a chance for a standard implementation for a responsive function?

[noncent]

//Patch Make Responisive
        $grid_js.',

should be

//Patch Make Responisive
        $grid_js =.',