Thread

I’ve been using flexigrid for a few different projects and I recently cut/pasted it into one i’m working on now but i’ve got some sort of glitch that i can’t locate. What is happening is the column headers and the data columns are displaying with different widths. Any ideas?

I just re-downloaded the CSS from the site and uploaded it as a double check, so it is the original css file, but that made no difference.

This can be a CSS conflict. try removing your own css and see if it makes a difference. if it does, then you know there is a conflict.

paulo:
Is it possible, by abdicating the “drag” and “resize” features, to be able to size the columns in %?

Thanks

Nope. for one thing the header and the main table is actually separate tables, that’s how you get the scrolling while having the column headers stay. for another reason, one of the main problems i’ve had (and I’m sure the guys that makes this kind of grid had) with tables is that browsers handle table sizes differently, specially %. So to fix this, i handle the size setting of the columns by placing a div within the cell, and I resize that div not the cell.

I have two text boxes (ids are #sdate and #edate) with search button(search) where these form controls are placed outside the flex grid container.

When i click on search button by entering values in two text boxes the value are passing correctly via URL but the problem comes when I modify values again and click on search button, the prior values which I have entered is taking up and I want the newly entered values should be passed in the URL string when I click on search button.

seems URL have got cached.

I appreciate if anyone have solution for this.

I have sample code below:

Thanks Paulo, I fixed it with this:

//td[removed] = $("cell:eq("+ idx +")",robj).text();
td[removed] = $("cell:eq("+ count +")",robj).text();
count++;

since I register with Ajax the new order of the columns to a session var every time a user moves them I basically ignore what the grid is keeping track of and have it constantly pull the order from the session as count is just 0->n it pulls the order of the session var every time it loads the data.  I had to change this code for the table rows as well as the total line.

I have this almost completely functional now, users want to be able to drag columns off the grid and the column Divs get an ‘X’ over them and if they release it removes it from the grid similar to Outlook….sigh, give them a bunch of nice new features and they just want more.  Isn’t that what programming is all about?

Hi guys!

First of all, flexigrid is a superb jquery plugin!

But i´m facing some troubles to get it work perfectly.

Please see the page http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp, and click in “mostrar” button.

The flexgrid is shown, but the margin of each header didn’t match with the rows. If you access this page using IE7 more visual problems is shown. What have i done wrong?

Otherwise, how can i put a function to be executed when the user select one row?

Thank you!

Can’t access your link. But it could be a CSS conflict problem.

for single select, use the new option { singleSelect: true } when creating your flexigrid.

Sorry about that! I´ve just unlocked the page, you can access now (http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp).

About css conflict i´m afraid that is not the problem. In that page, only the flexigrid css file is included.

In IE7 under winxp professional sp3, my page show the following error:
Character: 4
Error: Invalid Argument
Code: 0
Url: http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/grid_baixa.asp

Sorry too for my poor english, but in wanted to say “how can i start a javascript function when the user select a row?”

Single select i already use it.

Thank you!

Paulo, amazing work. You have been all over the social sites and i recently ditched phpGrid for your much nicer javascript code.

Im an odd ball using PHP5 + MS SQL 2000 + Flexigrid. Im having some issues where the flexigrid control will error out when paging through the data or during certain sorting operations. I can’t seem to pin point my issue. I was wondering if there are any debug options. Id really love to see the actual query that my PHP JSON script is executing during the ajax requests, but im just not sure how to do so. Here is my PHP JSON script (hacked from yours)

<?

include '../classes/class.mssql.php'; //this class works fine.

$page       = $_POST['page'];
$rp         = $_POST['rp'];
$sortname   = $_POST['sortname'];
$sortorder  = $_POST['sortorder'];
$name       = $_POST['name'];

$fields = " ID,Name,State,Phone ";
$table = " tbl ";
$pk = " ID ";

if (!$sortname)             $sortname   = 'ID';
if (!$sortorder)            $sortorder  = ' DESC ';
if ($sortorder == 'DESC')   $osort      = ' ASC '; 

if($_REQUEST['query'] != ""){
    $where  = $_REQUEST['qtype']." LIKE '%".$_REQUEST['query']."%' ";
    $where2 = " WHERE " .$_REQUEST['qtype']." LIKE '%".$_REQUEST['query']."%' ";
    $where3 = " AND " .$_REQUEST['qtype']." LIKE '%".$_REQUEST['query']."%' ";
} 
else {
    $where  = "";
    $where2 = "";
    $where3 = "";
}

$sort = "ORDER BY $sortname $sortorder";

if (!$page) $page   = 1;
if (!$rp)   $rp     = 15;

if ( (($page-1) * $rp) == 0 ) {
    $start = $rp;
}
else {
    $start = (($page-1) * $rp);
}

$db = new DB();
$db->connect();

$db->query("SELECT COUNT(ID) AS [count] FROM $table $where2");
$db->fetchRow();
$total = $db->record['count'];

header("Expires: Aug, 04 Aug 1980 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");

$json = "";
$json .= "{\n";
$json .= "page: $page,\n";
$json .= "total: $total,\n";
$json .= "rows: [";

$rc = false;

$sql = "SELECT TOP $rp $fields FROM $table WHERE $pk NOT IN (SELECT $pk FROM (SELECT TOP $start $fields FROM $table $where2 $sort) as [tbl1]) $where3 $sort";

$db->query($sql);

while ($db->fetchRow()) {
    if ($rc) $json .= ",";
    $json .= "\n{";
    $json .= "id:'".$db->record['ID']."',";
    $json .= "cell:['<a id=".record['ID'].">".$db->record['ID']."</a>','".$db->record['Name']."','".addslashes($db->record['State'])."','".addslashes($db->record['Phone'])."']";
    $json .= "}";
    $rc = true;
    //please note the anchor tag above is syntactically correct, dunno why the BBS is not taking my code, but that's NOT and issue thanks.
}

$json .= "]\n";
$json .= "}";

echo $json;

$db->disconnect();

?>

Hi guys,

I didn’t really design flexigrid to use % sizes as the dragndrop and resizing functions are dependent on accurate per pixel measurements.

Paulo

Thanks for the reply Paulo

its more of an visual appeal factor - i use 100% width grid for my project and having columns in px will leave a blank space in the grid on a larger screen (which doesn’t look to nice)

from what i can remember open rico grid does some funky % -> px calculation based on grid size to handle resize etc and columns based on %

question: is there an easy way to find the px width of a flexigrid? - if so then i can look at writing a % -> px type conversion type

If anyone else has any suggestions i would appreciate hearing them

Cheers

Justin

Hi Everyone, I found flexigrid yesterday myself and am also amazed at its functionality. I am very good at C and php, but learning quite well in js/jQuery land. THANKS to all of you for the incredible code snippets above. I believe my js knowledge has doubled reading these pages! As others have said, this is going to be my default tool for table display!

I need some help. Say when someone clicks next page, is there any way i can append onto the tbody, the next pages rows? So basically instead of going to the next page, itll just append the next pages rows to the tbody?
Paul

@mrpaul: I noticed behaviour like this when the rp: option is initialized to a value larger than choices in the rpOptions: [10,15,20,25,40] array.

I do not know enough about how these things interact to provide code, but you could / should be able to use an API call to extend rp with each call. You would keep the initial/default rp value in javascript and then pass to flexigrid as n*rp

??? Hope this helps.

Hello,
Don’t know if this question was already answered but is it possible to maintain item selection even if you change page? You can see this in the http://www.magentocommerce.com/demo datagrid. You can select only visible records or all records and if you change page it always maintains the selection.Thanks

@Armorfist: This is something of a hack, however I find it effective for one of my edit-in-place tables (implemented solely as form elements in TDs, written by the php)

Anyhow, I use javascript to add hidden elements to the HTML of the form I use:

var loc_text="   You've selected this location: "+loc_brand[idx[0]]+' > '+loc_page[idx[1]]+' > '+loc_group[idx[2]];
var pButton='<input type="button" class="right" id="changeButton">';

temp='<input type="hidden" name="action" value="doThisToItems" ><input type="name" name="loc" value="'+loc+'" >
'+temp+loc_text+'
'+pButton;

$('#container').empty().append(temp).fadeIn();

#container is the DIV around my form (external to flexigrid). loc is a string representing the coordinates of a location: 1,8,235 which are the IDs of each layer of my data where we are currently sitting. loc_text is the text label I present to the user to confirm their location choice. the loc_XXXX arrays are in the javascript, built dynamically on page load, have the human names for each of the location IDs. All of this is done independent of flexigrid, and I’m implementing checkboxes to add the row to the location or just delete the row.

As this is a sequential process, if you subsequently reverse one of your entries, the most latest addition is what is passed on POST.

Example:

<input type="hidden" value="modify" name="action"/>
<input type="hidden" value="523X" name="pn-3"/>
<input type="hidden" value="3" name="mfg_id-7"/>
<input type="hidden" value="224B" name="pn-9"/>
<input type="hidden" value="0" name="mfg_id-7"/>

I loop through $_POST and do:

list($tableLookup, $id) = explode("-", $_POST['name'] )

the ‘action’ => ‘modify’ pair tells that script what to do. I then have a lookup hash to get the table name from the “name”. Then it sets the VALUE to what is passed in. Ultimately, there is only one item with name=“mfg_id-7” and it’s value will be 0.

😊 Chris

(another post follows…)

hello,
i’m going to use flexigrid for my new programs.
however, i would like to dynamically parse the grid’s attributes to add new functions to the grids (printing, csv output, etc).
i’ve passed the all day trying to get the colModel definition but i didnt succeed.
i want to get the colModel definition, the sortname & sortorder attributes, in javascript, so that i can generate the sql command coresponding to the user choices once he had played with the grid appearance…
maybe someone here can help me ?

@tof: I did something similar to dynamically populate TD cells with the proper form element via a lookup:

//     mysql> show fields from `group`;
    //     +-------------+------------+------+-----+---------+----------------+
    //     | Field       | Type       | Null | Key | Default | Extra          |
    //     +-------------+------------+------+-----+---------+----------------+
    //     | id          | bigint(1)  | NO   | PRI | NULL    | auto_increment |
    //     | title       | longtext   | YES  |     | NULL    |                |
    //     | description | longtext   | YES  |     | NULL    |                |
    //     | page_id     | bigint(20) | YES  |     | NULL    |                |
    //     | misc        | longtext   | YES  |     | NULL    |                |
    //     | sort        | int(11)    | YES  |     | NULL    |                |
    //     | misc_sort   | int(11)    | YES  |     | NULL    |                |
    //     +-------------+------------+------+-----+---------+----------------+
    // do this to learn about data types for each fieldname ...
    $sql="show columns from `".$this->myType."`"; // limit 0,1";
    $data=multiRow( $sql );
    if( $data ){
        for( $i=0; $i<sizeof($data); $i++ ){
            $dataTypes[$data[$i]['Field']]  = $data[$i]['Type'];
        }
    } else {
        echo $sql."\n";
        echo '... <font color="red">'.mysql_error()."</font>\n";
    }
    //    print_r( $dataTypes); //Types );
    //     [id] => bigint(1)
    //     [pn] => char(50)
    //     [models_desc] => char(50)
    //     [price] => float(255,8)
    //     [img] => char(50)
    //     [description] => longtext
    $formInput=array(
        "text"=>'textarea cols="60" rows="2" onChange="enSubmit();"',
        "longtext"=>'textarea cols="60" rows="3" onChange="enSubmit();" ',
        "char(50)"=>'input type="text" size="35" onChange="enSubmit();" ',
        "varchar(50)"=>'input type="text" size="35" onChange="enSubmit();" '
        );

/////////////////////// then later on, I'm in nested foreach() loops and implement it:


    // this structure chooses the input type, etc
        elseif( ($input=$formInput[$dataTypes[$name]]) == NULL ){
            echo '<input type="text" size="35"
        }

$this is a class object of my creation with member variable myType. Also note that I left the input tags open ended so the loop can enter dynamic ID and NAME info.

😊 chris

Paulo, amazing work. You have been all over the social sites and i recently ditched phpGrid for your much nicer javascript code.

Im an odd ball using PHP5 + MS SQL 2000 + Flexigrid. Im having some issues where the flexigrid control will error out when paging through the data or during certain sorting operations. I can’t seem to pin point my issue. I was wondering if there are any debug options. Id really love to see the actual query that my PHP JSON script is executing during the ajax requests, but im just not sure how to do so. Here is my PHP JSON script (hacked from yours)

<?

include '../classes/class.mssql.php'; //this class works fine.

$page       = $_POST['page'];
$rp         = $_POST['rp'];
$sortname   = $_POST['sortname'];
$sortorder  = $_POST['sortorder'];
$name       = $_POST['name'];

$fields = " ID,Name,State,Phone ";
$table = " tbl ";
$pk = " ID ";

if (!$sortname)             $sortname   = 'ID';
if (!$sortorder)            $sortorder  = ' DESC ';
if ($sortorder == 'DESC')   $osort      = ' ASC '; 

if($_REQUEST['query'] != ""){
    $where  = $_REQUEST['qtype']." LIKE '%".$_REQUEST['query']."%' ";
    $where2 = " WHERE " .$_REQUEST['qtype']." LIKE '%".$_REQUEST['query']."%' ";
    $where3 = " AND " .$_REQUEST['qtype']." LIKE '%".$_REQUEST['query']."%' ";
} 
else {
    $where  = "";
    $where2 = "";
    $where3 = "";
}

$sort = "ORDER BY $sortname $sortorder";

if (!$page) $page   = 1;
if (!$rp)   $rp     = 15;

if ( (($page-1) * $rp) == 0 ) {
    $start = $rp;
}
else {
    $start = (($page-1) * $rp);
}

$db = new DB();
$db->connect();

$db->query("SELECT COUNT(ID) AS [count] FROM $table $where2");
$db->fetchRow();
$total = $db->record['count'];

header("Expires: Aug, 04 Aug 1980 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");

$json = "";
$json .= "{\n";
$json .= "page: $page,\n";
$json .= "total: $total,\n";
$json .= "rows: [";

$rc = false;

$sql = "SELECT TOP $rp $fields FROM $table WHERE $pk NOT IN (SELECT $pk FROM (SELECT TOP $start $fields FROM $table $where2 $sort) as [tbl1]) $where3 $sort";

$db->query($sql);

while ($db->fetchRow()) {
    if ($rc) $json .= ",";
    $json .= "\n{";
    $json .= "id:'".$db->record['ID']."',";
    $json .= "cell:['<a id=".record['ID'].">".$db->record['ID']."</a>','".$db->record['Name']."','".addslashes($db->record['State'])."','".addslashes($db->record['Phone'])."']";
    $json .= "}";
    $rc = true;
    //please note the anchor tag above is syntactically correct, dunno why the BBS is not taking my code, but that's NOT and issue thanks.
}

$json .= "]\n";
$json .= "}";

echo $json;

$db->disconnect();

?>

Try firebug, the friend of every javascript programmer. 😊

Hi guys!

First of all, flexigrid is a superb jquery plugin!

But i´m facing some troubles to get it work perfectly.

Please see the page http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp, and click in “mostrar” button.

The flexgrid is shown, but the margin of each header didn’t match with the rows. If you access this page using IE7 more visual problems is shown. What have i done wrong?

Otherwise, how can i put a function to be executed when the user select one row?

Thank you!

Can’t access your link. But it could be a CSS conflict problem.

for single select, use the new option { singleSelect: true } when creating your flexigrid.

Sorry about that! I´ve just unlocked the page, you can access now (http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/contas_pagar_quitacao.asp).

About css conflict i´m afraid that is not the problem. In that page, only the flexigrid css file is included.

In IE7 under winxp professional sp3, my page show the following error:
Character: 4
Error: Invalid Argument
Code: 0
Url: http://www.goldmaxbrasil.com.br/desenvolvimento/sisfinanceiro/lanc_financ/grid_baixa.asp

Sorry too for my poor english, but in wanted to say “how can i start a javascript function when the user select a row?”

Single select i already use it.

Thank you!

You didn’t load any rows so i can’t verify if you have a problem with rows lining up with headers. But I also so this error using firebug:

parent.document.getElementById(“qtd_registro”) is null
[Break on this error] parent.document.getElementById(’...qtd_registro’)[removed] = ‘0’;

Look it up, it might be the cause of your problems.

Hey All, I’m trying to get a click handler to work, but I must be missing something fundamental to jQuery. Could anyone verify that any of the code in posts 302 and 303 works?

Adwin did both these posts (post 302: http://ellislab.com/forums/viewreply/397357/ ) and after spending today reading all 51 pages of this thread trying to get my click handler working, Adwin, your comments are made well. Reading your posts made me think that it was going to be easy. 😊

I’ll get something simple on a public site when I get into work later today, too. I’m wanting to use flexigrid to manage inventory as well as orders. I attached an image… I add hidden (or text) inputs to that form. In this example, I’ve got the desired location ready and now want to add the IDs of checked items from the grid.

Thanks,
Chris