Flexigrid
Flexigrid copied to clipboard
paulopmx
Can Flexigrid auto resize the column' width ?
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!
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/paulopmx/Flexigrid/issues/54.
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
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.
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;
}
}
?>
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.
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/paulopmx/Flexigrid/issues/54#issuecomment-21378954 .
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
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/paulopmx/Flexigrid/issues/54#issuecomment-21390968 .
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/paulopmx/Flexigrid/issues/54#issuecomment-21390968 .
paulopmx, do you think there is a chance for a standard implementation for a responsive function?
//Patch Make Responisive
$grid_js.',
should be
//Patch Make Responisive
$grid_js =.',
