Flexigrid - Lightweight but rich data grid | Libraries & Helpers

#316 / May 16, 2008 1:12pm

frantic
3 posts

In the addData method, create your own xml parser, and construct a cell row and tbody, before calling the addRowProp and addCellProp

Thanks, I’ll give it a try.
#317 / May 18, 2008 4:40pm

x19.driver
1 posts

I am an embedded software engineer with very little web dev. experience. I want to use the Flexigrid to display some timing results from a piece of hardware that I am making. You can see the interface here: http://www.motocon.net

I have 3 questions:

1. how do I set the font type, size and color of the column data independently of all of the other text? ( the floating point numbers at the above URL )

2. again looking at the above URL, is there a way to put some sort of separator in the toolbar between the buttons, or right justify the initialize button from the others?

3. how can I center the “Timer Test” title?

Many Thanks,

John

#318 / May 19, 2008 1:43am

swhitlow

22 posts

This control is just incredible! It has really helped me out with some projects.

I was wondering - I have recently included it in a SugarCRM instance within a form. It is now displaying the outline of the grid and some of the controls. However, the middle part where the data would be displayed is missing and just plain white. As well as the some of the controls are messed up on the bottom. Now, here is the main problem - no errors or anything is showing up in Firebug. So, I really do not have a way of debugging the problem. Is there a way to debug what is going on so I can track down the problem?

I have attached a screenshot to this post. Here is the js code:

var $j = jQuery.noConflict();
    

    $j(document).ready(function(){
        $j("#flex1").flexigrid
                (
                {
                url: 'pharma_SamplesListGrid.php?current_id={{$current_id}}',
                dataType: 'json',
                colModel : [
                    {display: 'ID', name : 'id', width : 40, sortable : false, align: 'center', hide: true},
                    {display: 'Action', name: 'action', width : 80, sortable : false, align: 'left'},
                    {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
                    {display: 'Status', name : 'status', width : 80, sortable : true, align: 'left'},
                    {display: 'Lot #', name : 'lot_number', width : 120, sortable : true, align: 'left'},
                    {display: 'Quantity', name : 'quantity', width : 90, sortable : true, align: 'left'},
                    {display: 'UM', name : 'um', width : 25, sortable : true, align: 'left'}
                    ],
                searchitems : [
                    {display: 'Name', name : 'name', isdefault: true},
                    {display: 'Status', name : 'status'},
                    {display: 'Lot #', name : 'lot_number'}
                    ],
                sortname: "name",
                sortorder: "asc",
                usepager: true,
                title: 'Add Samples to Transfer',
                useRp: true,
                rp: 10,
                showTableToggleBtn: true,
                width: '100%',
                height: 125
                }
                );   



    });

And here is the PHP code that is generating the data (well the main part that is the heart of it anyway):

while ($row = mysql_fetch_array($result)) {
if ($rc) $json .= ",";

    $json .= "\n{";
    $json .= "id:'".$row['id']."',";
    $json .= "cell:['".$row['id']."'";
    $json .= ", '<a href=\"#\" onclick=\"addToSamplesList(\'" . $row['id'] . "\', \'" . addslashes($row['name']) . "\', \'" . addslashes($row['status']) . "\', \'" . addslashes($row['lot_number']) . "\', \'" . addslashes($row['quantity']) . "\', \'" . addslashes($row['um']) . "\', \'samples_list_table\');\">Add to Transfer</a>'";
    $json .= ",'" . addslashes($row['name']) . "'";
    $json .= ",'" . addslashes($row['status']) . "'";
    $json .= ",'" . addslashes($row['lot_number']) . "'";
    $json .= ",'" . addslashes($row['quantity']) . "'";
    $json .= ",'" . addslashes($row['um']) . "'";
    $json .= "]";
    $json .= "}";
    $rc = true;
}
$json .= "]\n";
$json .= "}";
echo $json;

Thanks for your help! 😊

#319 / May 19, 2008 5:52am

ozskry

10 posts

Hi there,

I’m currently trying to implement Flexigrid in a website but it doesn’t work and don’t know why.

Here is the PHP code generating the JSON file:

<?php
error_reporting(E_ALL);
function runSQL($rsql) {
    $hostname = 'xxx';
    $username = 'xxx';
    $password = 'xxx';
    $dbname   = 'ms_catalog';
    $connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
    $db = mysql_select_db($dbname);
    $result = mysql_query($rsql) or die ('test');
    return $result;
    mysql_close($connect);
}

function countRec($fname,$tname) {
$sql = "SELECT count($fname) FROM $tname ";
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)) {
return $row[0];
} 
}

if (isset($_POST['page'])) {
    $page = $_POST['page'];
}
if (isset($_POST['rp'])) {
    $rp = $_POST['rp'];
}
if (isset($_POST['sortname'])) {
    $sortname = $_POST['sortname'];
}
if (isset($_POST['sortorder'])) {
    $sortorder = $_POST['sortorder'];
}

if (!isset($sortname)) {
    $sortname = 'name';
}
if (!isset($sortorder)) {
    $sortorder = 'desc';
}

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

if (!isset($page)) {
    $page = 1;
}
if (!isset($rp)) {
    $rp = 10;
}

$start = (($page-1) * $rp);

$limit = "LIMIT $start, $rp";

$sql = "SELECT * FROM ms_smurfs $sort $limit";
$result = runSQL($sql);

$total = countRec('name','ms_smurfs');

header("Expires: Mon, 26 Jul 1997 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;
while ($row = mysql_fetch_array($result)) {
if ($rc) $json .= ",";
$json .= "\n{";
$json .= "id:'".$row['id_ms_smurfs']."',";
$json .= "cell:['".$row['id_ms_smurfs']."'";
$json .= ",'".addslashes($row['name'])."'";
$json .= ",'".addslashes($row['category'])."'";
$json .= ",'".addslashes($row['vectorization'])."'";
$json .= ",'".addslashes($row['availability'])."'";
$json .= ",'".addslashes($row['random_id'])."']";
$json .= "}";
$rc = true; 
}
$json .= "]\n";
$json .= "}";
echo $json;
?>

Here the JSON file generated:

{
page: 1,
total: 623,
rows: [
{id:'651',cell:['651','settings_work_006','settings','Vectorized','Available','9Pk10w8D1emzPIL']},
{id:'650',cell:['650','settings_work_005','settings','Vectorized','Available','ZGqfv50wRsiw44S']},
{id:'649',cell:['649','settings_work_004','settings','Vectorized','Available','fHNuGg2JO4rSOu']},
{id:'648',cell:['648','settings_work_003','settings','Vectorized','Available','xbRoHaKRV7HavVO']},
{id:'647',cell:['647','settings_work_002','settings','Vectorized','Available','ipZp9tUDZXTS9mr']},
{id:'646',cell:['646','settings_work_001','settings','Vectorized','Available','CPtUYaMXMm8IGf4']},
{id:'645',cell:['645','settings_winter_013','settings','Vectorized','Available','4uLHgYj4FiVXSau']},
{id:'644',cell:['644','settings_winter_012','settings','Vectorized','Available','02nBkstgJ621bd']},
{id:'466',cell:['466','settings_winter_011','settings','Vectorized','Available','IvY02RkyX2pDbdB']},
{id:'319',cell:['319','settings_winter_010','settings','Vectorized','Available','t66coq3CvMS5VZD']}]
}

Here is the script:

$("#flex1").flexigrid
    (
    {
    url: 'post2.php',
    dataType: 'json',
    colModel: [
        {display: 'ID', name : 'id_ms_smurfs', width : 40, sortable : true, align: 'center'},
        {display: 'Name', name : 'name', width : 40, sortable : true, align: 'center'},
        {display: 'Category', name : 'category', width : 180, sortable : true, align: 'left'},
        {display: 'Vectorization', name : 'vectorization', width : 120, sortable : true, align: 'left'},
        {display: 'Availability', name : 'availability', width : 130, sortable : true, align: 'left'},
        {display: 'Random ID', name : 'random_id', width : 80, sortable : true, align: 'right'}
        ],
    searchitems: [
        {display: 'ID', name : 'id'},
        {display: 'Name', name : 'name', isdefault: true}
        ],
    sortname: 'id',
    sortorder: 'asc',
    usepager: true,
    title: 'Smurfs',
    useRp: true,
    rp: 10,
    showTableToggleBtn: true,
    width: 700,
    height: 255
    }
    );
});

And here is the result:

Flexigrid

The processing never ends and nothing displays in the table. What’s wrong?

Thanks in advance.

Best regards,
Cary

#320 / May 19, 2008 9:34am

EvilBMP
1 posts

Hi - is it possible to fix the cols, so that they are not resizable?

Greets, EvilBMP
#321 / May 19, 2008 10:33pm

paulopmx
164 posts

@swhitlow, @ozskry

Please use firebug to see what the server is actually saying to flexigrid, usually this is where the mistake is coming from. or if you want give me an online url to test it myself.

@EvilBMP

Right now no. Next release yes.

Paulo

#322 / May 20, 2008 7:00am

Piet_

1 posts

Hello from Luxembourg,

I need some help with the implementation of flexigrid.

I encontered some problems and can’t find suitable solutions.

1 - Some columns won’t sort ( processing occurs but never ends )

2 - Setting “sortable : false” seems to have no effect at all ( columns stays sortable )

3 - Quick search don’t produce any results ( process occurs but grid show all the records, even one which doesn’t match )

I’m not familiar with jQuery, Can someone help me? Thank you.

P.S. : Sorry for my poor english :-(

$("#Frame").flexigrid
            ({
                        url: 'php/ListeBiens.php',
                        dataType: 'xml',
                    colModel : [
                    {display: 'Ref.', name : 'reference', width : 100, sortable : true, align: 'center'},
                    {display: 'Act.', name : 'actif', width : 20, sortable : false, align: 'center'},
                    {display: 'Phts.', name : 'photos', width : 30, sortable : false, align: 'center'},
                    {display: 'Opération', name : 'operation', width : 65, sortable : false, align: 'center'},
                    {display: 'Type', name : 'type', width : 90, sortable : false, align: 'center'},
                    {display: 'Prix', name : 'numcode', width : 100, sortable : false, align: 'center'},
                    {display: 'Chbrs.', name : 'chambres', width : 40, sortable : false, align: 'center'},
                    {display: 'Surface', name : 'surface', width : 80, sortable : false, align: 'center'},
                    {display: 'Pays', name : 'pays', width : 90, sortable : false, align: 'center'},
                    {display: 'Commune', name : 'commune', width : 180, sortable : false, align: 'center'},
                    {display: 'No.', name : 'numero', width : 20, sortable : false, align: 'center'},
                    {display: 'Rue', name : 'rue', width : 120, sortable : false, align: 'center'}
                    ],
                        buttons : [
                            {name: 'Ajouter', bclass: 'add', onpress : ajoutBien},
                            {separator: true},
                            {name: 'Effacer', bclass: 'delete', onpress : test},
                            {separator: true},
                    {name: 'Modifier', bclass: 'edit', onpress : test},
                            {separator: true},
                    {name: 'Activer/Desactiver', bclass: 'activate', onpress : test},
                            {separator: true}
                            ],
                        searchitems : [
                            {display: 'Ref', name : 'reference', isdefault: true},
                    {display: 'Act.', name : 'actif'},
                    {display: 'Phts.', name : 'photos'},
                    {display: 'Opération', name : 'operation'},
                    {display: 'Type', name : 'type'},
                    {display: 'Prix', name : 'numcode'},
                    {display: 'Chbrs.', name : 'chambres'},
                    {display: 'Surface', name : 'surface'},
                    {display: 'Pays', name : 'pays'},
                    {display: 'Commune', name : 'commune'},
                    {display: 'No.', name : 'numero'},
                    {display: 'Rue', name : 'rue'}
                            ],
                        sortname: "reference",
                        sortorder: "asc",
                        usepager: true,
                        title: 'Liste des biens',
                        useRp: false,
                        rp: 15,
                        showTableToggleBtn: false,
                    resizable: false,
                pagestat: 'Affichage des biens de {from} a {to} sur {total} biens',
                 procmsg: 'Chargement en cours ...',
                nomsg: 'Aucun bien disponnible.',
                        height: 401,
                showToggleBtn: false
                    });

#323 / May 20, 2008 10:01am

ozskry
10 posts

@ Lab Assistant

As I don’t know how to use Firebug, here is an online url:

http://flexigrid.cary.be/

Cheers,
Cary
#324 / May 20, 2008 10:05am

Holla die Waldfee
8 posts

Hi,

Cary, ur json.php just returns a “test”!

Holla
#325 / May 20, 2008 10:13am

ozskry
10 posts

I don’t understand. Personally, if I go to http://flexigrid.cary.be/json.php I receive this:

{
page: 1,
total: 623,
rows: [
{id:'651',cell:['651','settings_work_006','settings','Vectorized','Available','9Pk10w8D1emzPIL']},
{id:'650',cell:['650','settings_work_005','settings','Vectorized','Available','ZGqfv50wRsiw44S']},
{id:'649',cell:['649','settings_work_004','settings','Vectorized','Available','fHNuGg2JO4rSOu']},
{id:'648',cell:['648','settings_work_003','settings','Vectorized','Available','xbRoHaKRV7HavVO']},
{id:'647',cell:['647','settings_work_002','settings','Vectorized','Available','ipZp9tUDZXTS9mr']},
{id:'646',cell:['646','settings_work_001','settings','Vectorized','Available','CPtUYaMXMm8IGf4']},
{id:'645',cell:['645','settings_winter_013','settings','Vectorized','Available','4uLHgYj4FiVXSau']},
{id:'644',cell:['644','settings_winter_012','settings','Vectorized','Available','02nBkstgJ621bd']},
{id:'466',cell:['466','settings_winter_011','settings','Vectorized','Available','IvY02RkyX2pDbdB']},
{id:'319',cell:['319','settings_winter_010','settings','Vectorized','Available','t66coq3CvMS5VZD']}]
}

Cheers,
Cary
#326 / May 20, 2008 11:10am

Holla die Waldfee
8 posts

hmmmmmmm… Strange. I do attache u a screenshot. It is made from the “firebug”-Debugview. Firebug is cool, it runs as an extension for firefox.
In the shown view, u have can see the transfered response from the PHP-File. When I do call the file directly, I get the right json-structure like u.
I would advice u to write a new, very simple PHP File (with a different filename ;-) ). The new file should just echo the json data.

Sorry for my bad (germanized) english 😉

hope that helps

Holla
#327 / May 20, 2008 11:33am

ozskry
10 posts

Ok. Problem solved. Thanks to your help and Firebug.

Cheers,
Cary
#328 / May 20, 2008 11:37am

Holla die Waldfee
8 posts

Paulo,

is there a good and easy way to do two things:

1. make the grid single-selectable (just one row)
2. react on a click on a row

I know the sources (not well, but I can understand whats going on). And I have an idea how to do it. But I am afraid I will be cut of from any updates u will release in the future, when I patch the “hardcore-way”

Holla
#329 / May 20, 2008 11:40am

Holla die Waldfee
8 posts

Ok. Problem solved. Thanks to your help and Firebug.

Cheers,
Cary

nice 😊
Please write us ur solution, so anyone with the same problem will find its way…

Holla
#330 / May 20, 2008 12:00pm

ozskry
10 posts

Please write us ur solution, so anyone with the same problem will find its way…

An error in the javascript. I had [sortname: ‘id’] in place of [sortname: ‘id_ms_smurfs’]. So, when I was accessing the json.php, the PHP script was working. But, inside the javascript, due to the wrong sortname, I had a query error. That’s the reason you received “test”.

Cheers,
Cary

Thread