Flexigrid - Lightweight but rich data grid

[eluser]Kevin Kietel[/eluser]
[quote author="somemilk" date="1210097382"][quote author="Kevin Kietel" date="1210097206"]
In my example I've added the functionality to delete selected items. The actual delete action is disabled in the php page, to prevent data loss [/quote]

Well I mean that in FF i got the message with SQL and grid reload. In MSIE I got no message and no reload. In both browsers there are no data loss of course but in the first one grid is reloaded and in second it isn't [/quote]


Found the problem:

IE is very strict with the returned JSON data...

this is what my page returned:

{
query: 'DELETE FROM `country` WHERE `id` IN (1,5,4)',
total: 3,
}

I removed the trailing comma (,) and voila! it works!

Thanks for testing

[eluser]somemilk[/eluser]
[quote author="Kevin Kietel" date="1210098957"]

I removed the trailing comma (,) and voila! it works!

Thanks for testing [/quote]
Thank you Yes, it works now for me too.

[eluser]Unknown[/eluser]
Hi folks!

First of all, Flexigrid is awesome.

Here's a patch to allow the selection of one-and-only-one record at a time.

1) Find line 52 of flexigrid.js, which reads:

Code:

onSubmit: false // using a custom populate function

and change it to (adding the comma and a new line):

Code:

onSubmit: false, // using a custom populate function
multiselect: false  // allow selection of multiple elements

2) Find line 709 which reads:

Code:

var obj = (e.target || e.srcElement); if (obj.href || obj.type) return true;

and, after it, add:

Code:

if ( p.multiselect == false ) {
  $(t).find("tr.trSelected:not(#" + this.id + ")").removeClass('trSelected');
}

That's it. You can still create multi-select flexigrids, by supplying the:

Code:

multiselect: true

parameter when creating one.

On a side note, I think the ideal solution for Flexigrid would be to always have the mouse click unselect all other items, while giving the option to make multiple selection using control and shift keys (if multiselect is enabled, otherwise don't give that option at all). This is probably the behaviour most GUI users expect.

Hope this is useful for somebody.

Michele.

[eluser]adwin[/eluser]
Hi I just learn about Flexigrid ...

I have question,

I have table that can be updated. for example I have customer orders, I can add new items into the table.
I want to update the table using ajax. But I know how to add ($('tbody').append(data)) but how to sort manually (for exmaple sort by column no 1).

[eluser]adwin[/eluser]
I use Flexigrid ... and I use this example http://flexigrid.eyeviewdesign.com/

I can display the data, doing pagination ... but I cannot search.
I click the magnifier to search, then I enter the keyword, after that I press return.

It doesn't submit anything and I check using firebug ... it doesnt call the ajax function.

anyone has solutions for this ?
Thanks !

[eluser]Kevin Kietel[/eluser]
[quote author="adwin" date="1210156192"]I use Flexigrid ... and I use this example http://flexigrid.eyeviewdesign.com/

I can display the data, doing pagination ... but I cannot search.
I click the magnifier to search, then I enter the keyword, after that I press return.

It doesn't submit anything and I check using firebug ... it doesnt call the ajax function.

anyone has solutions for this ?
Thanks ![/quote]

Did you try the example on http://flexigrid.eyeviewdesign.com/ or did you install it on your own server? The original example works fine in both Firefox and IE6 /IE7
What browser are you using? Firefox or IE6 / IE7?

[eluser]mjhan300[/eluser]
Does anyone know of any examples of using Flexigrid to load an XML file. Nothing fancy here, just need the basics. All the site I run across either use json file format or don't go in to enough detail. Documentation is very limited.

[eluser]tayson[/eluser]
[quote author="mjhan300" date="1210183462"]Does anyone know of any examples of using Flexigrid to load an XML file. Nothing fancy here, just need the basics. All the site I run across either use json file format or don't go in to enough detail. Documentation is very limited.[/quote]

I did this:


data.php

Code:

<?
error_reporting(0);
function runSQL($rsql) {
    $hostname = "xxx";
    $username = "xxx";
    $password = "xxx";
    $dbname   = "xxxx";
    $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 (mysql_error());
    return $result;
    mysql_close($connect);
}

function countRec($fname,$tname,$where) {
$sql = "SELECT count($fname) FROM $tname $where";
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)) {
return $row[0];
}
}
$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];

if (!$sortname) $sortname = 'product';
if (!$sortorder) $sortorder = 'desc';

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

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

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

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

$query = $_POST['query'];
$qtype = $_POST['qtype'];

$where = "";
if ($query) $where = " WHERE $qtype LIKE '%$query%' ";

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

$total = countRec("id","products $where");

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/xml");
$xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
$xml .= "<rows>";
$xml .= "<page>$page</page>";
$xml .= "<total>$total</total>";

while ($row = mysql_fetch_array($result)) {
style='border:0'></a>";
$xml .= "<row id='".$row['id']."'>";
$xml .= "<cell>&lt;![CDATA[".$row['ref']."]]></cell>";
$xml .= "<cell>&lt;![CDATA[".utf8_encode($row['product'])."]]></cell>";
$xml .= "</row>";
}

$xml .= "</rows>";
echo $xml;
?&gt;

index.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Flexigrid&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="css/flexigrid.css" /&gt;



$(document).ready(function(){

    $("#flex1").flexigrid
            (
            {
            url: 'dados.php',
            dataType: 'xml',
            colModel : [
                {display: 'ID', name : 'id', width : 55, sortable : true, align: 'center'},
                {display: 'Product', name : 'product', width : 300, sortable : true, align: 'left'},
                {display: 'Ref', name : 'ref', width :100, sortable : true, align: 'left'},
                ],
            buttons : [
                {name: 'Add', bclass: 'add'},
                {name: 'Delete', bclass: 'delete'},
                {separator: true}
                ],

            searchitems : [
                {display: 'Product', name : 'product'},
                ],

            sortname: "product",
            sortorder: "asc",
            usepager: true,
            useRp: true,
            rp: 15,
            showTableToggleBtn: false,
            width: 647,
            height: 'auto'
            }
            );  
            
});


&lt;/head&gt;
&lt;body&gt;

<table id="flex1" style="display:none"></table>

&lt;/body&gt;
&lt;/html&gt;

It´s ok here!
Tell me if you get some problem.

=)

[eluser]mjhan300[/eluser]
That helped a lot!!

My XML file is always static, so I substituted in "myxml.xml" for the url, and also had formatted my xml file incorrectly. Just a couple of more questions though.

My columns don't seem to be sortable? I am using the sortable:true in my colModel?

Also can I remove the controls at the bottom of the table? My tables will be displayed in full and will not need to refresh or navigate.

PS. I need to read up on formatting XML. My xml file didn't use <cell>&lt;![CDATA[xxx]]></cell> tags for all the data. I used matching pairs like:

<record id='1'>
<fname>John</fname>
<lname>Smith</fname>
<phone>(555) 123-4567</phone>
</record>

<record id='2'>
<fname>Jane</fname>
<lname>Doe</fname>
<phone>(555) 123-9999</phone>
</record>

Is there a way to use data formatted as such?

Thanks for the help!!

[eluser]gius[/eluser]
Hi,
I have a "feature request" :-)
-it would be great if when the column text is longer than the column and connot be seen whole, a tooltip with column content would be shown on mouse hover.

Or do you have an idea how to implement it?

btw: flexigrid is great! thank you for it!