ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Flexigrid - Lightweight but rich data grid

March 28, 2008 10:13am

Subscribe [82]
  • #46 / Apr 02, 2008 11:41pm

    paulopmx

    164 posts

    Ok try this

    
    									
  • #47 / Apr 02, 2008 11:49pm

    millercj

    11 posts

    That did it! thank you!

    the only thing is that the search command doesn’t work…i changed it to

            searchitems : [
              {display: 'fname', name : 'fname'},
              {display: 'lname', name : 'lname', isdefault: true}
              ],

  • #48 / Apr 02, 2008 11:54pm

    paulopmx

    164 posts

    Insert this in your post.php, just look at it carefully where you should insert it:

    $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");
  • #49 / Apr 03, 2008 12:10am

    slith

    5 posts

    awesome job with this script paulo! just wondering…is there a way to hide /toggle the grid by default when the page loads?

  • #50 / Apr 03, 2008 12:15am

    millercj

    11 posts

    you are the man, many many thanks!

  • #51 / Apr 03, 2008 12:23am

    paulopmx

    164 posts

    awesome job with this script paulo! just wondering…is there a way to hide /toggle the grid by default when the page loads?

    just place the table in a div then hide that div

  • #52 / Apr 03, 2008 12:35am

    jcgrubbs

    1 posts

    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

  • #53 / Apr 03, 2008 12:43am

    slith

    5 posts

    awesome job with this script paulo! just wondering…is there a way to hide /toggle the grid by default when the page loads?

    just place the table in a div then hide that div

    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.

  • #54 / Apr 03, 2008 2:08am

    lucap

    2 posts

    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.

    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!

  • #55 / Apr 03, 2008 3:30am

    dark_lord

    103 posts

    How come I am having error like this is my browser when I run it.

    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.

  • #56 / Apr 03, 2008 3:53am

    dark_lord

    103 posts

    Problem Solve…

    Question here…

    * Does the Add and Delete Button Working?

    thanks again!

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

  • #57 / Apr 03, 2008 5:33am

    dark_lord

    103 posts

    Question again:

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

    Thanks again.

  • #58 / Apr 03, 2008 5:37am

    Kevin Kietel

    22 posts

    @whishbear:

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

    Insert this in your post.php, just look at it carefully where you should insert it:

    $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");
  • #59 / Apr 03, 2008 5:50am

    dark_lord

    103 posts

    @@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.

  • #60 / Apr 03, 2008 7:19am

    paulopmx

    164 posts

    @@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.

    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:

    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:

    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

    $('.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

    .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 😊

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases