Flexigrid - Lightweight but rich data grid

[eluser]paulopmx[/eluser]
[quote author="slith" date="1207210254"]awesome job with this script paulo! just wondering...is there a way to hide /toggle the grid by default when the page loads?[/quote]

just place the table in a div then hide that div

[eluser]Unknown[/eluser]
Do you have any plans to add grouping capability to FlexiGrid? I love what you have so far and am already planning to use it in an enterprise level product, but grouping support would really push it over the top

Thanks,
JC

[eluser]slith[/eluser]
[quote author="paulopmx" date="1207211002"][quote author="slith" date="1207210254"]awesome job with this script paulo! just wondering...is there a way to hide /toggle the grid by default when the page loads?[/quote]

just place the table in a div then hide that div[/quote]

well i dont want to hide it completely, i simply want the grid hidden, with only the title and toggle button visible...like what you see when you click on the toggle button.

[eluser]lucap[/eluser]
[quote author="paulopmx" date="1207193252"][quote author="lucap" date="1207191501"]
Okay technically it doesn't have that functionality. But there are a couple of API you can use that maybe can simulate that.

you can assign a function to the onChangePage API, the function will tell you what new page the user is clicking to or entering. onChangeSort will tell you the sort name and sort order that the user wants.

For paging items just within one page and one table, then right now, nope.[/quote]

wish I had time to look into this! but for now I reverted to tablesorter (and missed the hide/show of the columns)

Congrats on flexigrid!

[eluser]dark_lord[/eluser]
How come I am having error like this is my browser when I run it.

Code:

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\flex\post.php:65) in C:\xampp\htdocs\flex\post.php on line 105

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\flex\post.php:65) in C:\xampp\htdocs\flex\post.php on line 106

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\flex\post.php:65) in C:\xampp\htdocs\flex\post.php on line 107

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\flex\post.php:65) in C:\xampp\htdocs\flex\post.php on line 108

Warning: Cannot modify header information - headers already sent by (output started at C:\xampp\htdocs\flex\post.php:65) in C:\xampp\htdocs\flex\post.php on line 109
{ page: 1, total: 2, rows: [ {id:'USA',cell:['USA','United States of America','USA','USA','2']}, {id:'NZ',cell:['NZ','New Zealand','New Zealand','NZ3','45']}] }

Please help me.

[eluser]dark_lord[/eluser]
Problem Solve...

Question here...

* Does the Add and Delete Button Working?

thanks again!

Your work is magnificent! Nicely Done. Great Job Dude.

[eluser]dark_lord[/eluser]
Question again:

What about the search button? How can I enable it?

Thanks again.

[eluser]Kevin Kietel[/eluser]
@whishbear:

the search button works, but you will have to modify the query in your php script.
This should do the trick:

[quote author="paulopmx" date="1207209267"]Insert this in your post.php, just look at it carefully where you should insert it:

Code:

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

if (!$sortname) $sortname = 'name';
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";

//added code

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

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

$sql = "SELECT iso,name,printable_name,iso3,numcode FROM country $where $sort $limit";
$result = runSQL($sql);

//modified code

$total = countRec("iso","country $where");

[/quote]

[eluser]dark_lord[/eluser]
@@Kevin Kietel

Thanks Dude! Problem Solve..

* What about the ADD and DELETE BUTTON? Do you know on how to enable them?... hehe..
* And the images of the Add and Delete Button are not displaying.

Im trying to look at the scripts but no luck where and how can I solve them.

Thanks so much again.

[eluser]paulopmx[/eluser]
[quote author="wish_bear" date="1207230651"]@@Kevin Kietel

Thanks Dude! Problem Solve..

* What about the ADD and DELETE BUTTON? Do you know on how to enable them?... hehe..
* And the images of the Add and Delete Button are not displaying.

Im trying to look at the scripts but no luck where and how can I solve them.

Thanks so much again.[/quote]

There actually is no default add and delete function, the add and delete button in Example 3, only shows you how you can add buttons to the Toolbar. You can add any number of buttons you like, and assign a javascript function that you want to call, when the user clicks the button.

for Example 3 the config code for the buttons look like these:

Code:

buttons : [
                {name: 'Add', bclass: 'add', onpress : test},
                {name: 'Delete', bclass: 'delete', onpress : test},
                {separator: true}
                ],

name - tells what the user can see on the buttons
bclass - adds a CSS class to the button, so you can add an image.
onpress - is the API where you can assign a javascript function that will be called when the user clicks the button

so on Example 3, I assigned test as a function, if you viewed the source of the HTML, you will see there is a function there that looks like this:

Code:

function test(com,grid)
            {
                if (com=='Delete')
                    {
                        confirm('Delete ' + $('.trSelected',grid).length + ' items?')
                    }
                else if (com=='Add')
                    {
                        alert('Add New Item');
                    }            
            }

as you can see, then the user clicks a button, Flexigrid calls the function test, and passes two parameters

com - this is actually the name variable you assign to the button
grid - this is a pointer to the Flexigrid grid object itself

If you are familiar with jQuery, you will understand that when I use this code

Code:

$('.trSelected',grid).length

I was actually trying to get, the rows with the class 'trSelected', but only within the 'grid' object.

Also I added an image to the buttons by adding these on my <style> tag

Code:

.flexigrid div.fbutton .add
        {
            background: url(css/images/add.png) no-repeat center left;
        }    

    .flexigrid div.fbutton .delete
        {
            background: url(css/images/close.png) no-repeat center left;
        }

Hope this helps :-)