Thread

Synergiq, a simple change will fix it. assign the page variable to the json page variable.

%>
{
page: <%=page%>,
total: <%=cstr(total)%>,
rows: [
<%
RecordsetXML.Move start
do until RecordsetXML.eof
%>
{id:'<%=(RecordsetXML.Fields.Item("contact_id").Value)%>', cell:['<%=(RecordsetXML.Fields.Item("contact_id").Value)%>', '<%=(RecordsetXML.Fields.Item("contact_firstname").Value)%>','<%=(RecordsetXML.Fields.Item("contact_secondname").Value)%>','<%=(RecordsetXML.Fields.Item("contact_street").Value)%>']},
<%    
RecordsetXML.movenext
loop

%>
]}

<%
RecordsetXML.Close()
Set RecordsetXML = Nothing
%>

Thanks, I cant believe I missed that!

and thanks for pointing me to this site, I’ll definatley be using CodeIgniter on my next PHP application :D

Hi,

For anyone who wants to use Flexigrid with Ruby on Rails 2.0, I just posted a tutorial on how to put Flexigrid on Rails.

Nick J. Fessel
nfessel (at) gmail (dot) com

Is there a way to make a button that selects/deselects all items on the screen?

I just started to work with jquery so this may not be the best solution. To select/deselect all items on screen i used the following method:

I added 2 buttons to the grid, ‘Select All’ and ‘DeSelect All’ that call the ‘test’ function:

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

Then added the following code to the ‘test’ function:

if (com=='Select All')
{
$('.bDiv tbody tr',grid).addClass('trSelected');
}
    
if (com=='DeSelect All')
{
$('.bDiv tbody tr',grid).removeClass('trSelected');
}

Is there a better way to do this?

Great Job to

Kevin Kietel and Nick J. Fessel for creating more detailed tutorials and examples than me 😊.

I’m still ways off from completing documentation, so hope these guys example help other people out.

Maybe someone would make a CodeIgniter example as well.

Great work, Paulo! Thank you!

A suggestion to improve flexibility of db-queries:

Please add a variable “filter” to p and send it to the remote data script (like sortname or query). In the remote script you can use this filter as a “half static” WHERE-condition in the db-query. This could by useful if you work with more complex tables and dynamic php-pages to show parts of these tables (= define query-filter in php-script containing the flexigrid-table).

Example:

Front-PHP

$("#flex1").flexigrid({
  url: 'get_data_from_db.php',
  sortname: "name",
  sortorder: "asc",
  filter: "numcode > 100"  // more interesting when populated by php

In flexigrid.js:

var param = {page:p.newp, rp: p.rp, sortname: p.sortname, sortorder: p.sortorder, query: p.query, qtype: p.qtype, filter: p.filter};

And in remote php:

$filter = $_POST['filter'];
$filter = (empty($filter) ? '1=1' : $filter);

$sql = "SELECT * FROM yourTable WHERE $filter AND $search $sort $limit";

For some reason, when the record set is empty (for example in a search) and the “height” property is set to “auto”, when it finalizes loading it blocks the footer, including search box, pagination, etc. then you cant do nothing.
Also, is the “sortable: false” property working? I change it to “false” but I can still sort.
Another question i have is if in the colModel is possible to define the width in percentage.

I’m preparing a CI library to work with flexigrid, going to post it here as soon as it is finished.

Thanks

Just to announce that my integration of Flexigrid with CodeIgniter is ready.

You can see/download it here:

http://flexigrid.eyeviewdesign.com/

Any suggestions / bugs / whatever mail me.

NOTE: I just started to work with Ajax/Jquery so bare with me.

Hope you like it.

For some reason, when the record set is empty (for example in a search) and the “height” property is set to “auto”, when it finalizes loading it blocks the footer, including search box, pagination, etc. then you cant do nothing.
Also, is the “sortable: false” property working? I change it to “false” but I can still sort.
Another question i have is if in the colModel is possible to define the width in percentage.

I’m preparing a CI library to work with flexigrid, going to post it here as soon as it is finished.

Thanks

Armorfist,

for the ‘height:auto’ problem, height:auto is really not meant to be used for dynamic data because it bases its height on the loaded elements.

for the sorting problem. Example 3 is actually not updated, for a column not to be sortable, just don’t put any a ‘name’ property in the colModel.

Just to announce that my integration of Flexigrid with CodeIgniter is ready.

You can see/download it here:

http://flexigrid.eyeviewdesign.com/

Any suggestions / bugs / whatever mail me.

NOTE: I just started to work with Ajax/Jquery so bare with me.

Hope you like it.

Great job. where’s my credit though? 😊

Great work, Paulo! Thank you!

A suggestion to improve flexibility of db-queries:

Please add a variable “filter” to p and send it to the remote data script (like sortname or query). In the remote script you can use this filter as a “half static” WHERE-condition in the db-query. This could by useful if you work with more complex tables and dynamic php-pages to show parts of these tables (= define query-filter in php-script containing the flexigrid-table).

Example:

Front-PHP

$("#flex1").flexigrid({
  url: 'get_data_from_db.php',
  sortname: "name",
  sortorder: "asc",
  filter: "numcode > 100"  // more interesting when populated by php

In flexigrid.js:

var param = {page:p.newp, rp: p.rp, sortname: p.sortname, sortorder: p.sortorder, query: p.query, qtype: p.qtype, filter: p.filter};

And in remote php:

$filter = $_POST['filter'];
$filter = (empty($filter) ? '1=1' : $filter);

$sql = "SELECT * FROM yourTable WHERE $filter AND $search $sort $limit";

Hi somplan,

You can actually do this already in the setting like so

url: 'get_data_from_db.php',
  sortname: "name",
  sortorder: "asc",
  param: "numcode > 100"  // more interesting when populated by php

Going to move the “Thanks” to the top so its more noticeable 😊

Edit: your contact page isn’t working http://www.webplicity.net/contact

Just to announce that my integration of Flexigrid with CodeIgniter is ready.

You can see/download it here:

http://flexigrid.eyeviewdesign.com/

Any suggestions / bugs / whatever mail me.

NOTE: I just started to work with Ajax/Jquery so bare with me.

Hope you like it.

Wow your fingers must be burning!  How long did it take you to code that? Kudos!

I admit my implementation is a hack. I don’t have all the error checking. But if someone wants to see it, it is a little shorter and uses Lovable ReST.

View file ajax_results.php;

ps. add the <  > on the ends of the src file lines (they get stripped out if I don’t mess em up.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/css/flexigrid/flexigrid.css"/>
    script type="text/javascript" src="/javascript/jquery.js"> script
    script type="text/javascript" src="/javascript/jquery.js"> script
</table>

    $('.emp_table').flexigrid
      (
      {
       url: 'http://www.someurl.com/CI/index.php/ajax_emp/jason/function/test',
       dataType: 'json',
       sortname: "Last_Name",
       sortorder: "asc",
       colModel : [
       {display: 'Id', name : 'Emp_Id', width : 40, sortable : true, align: 'center'},
    {display: 'Frist Name', name : 'First_Name', width : 75, sortable : true, align: 'left'},
    {display: 'Last Name',  name : 'Last_Name', width : 80, sortable : true, align: 'left'},
    {display: 'Phone Number', name : 'Phone_Number', width : 80, sortable : false, align: 'left'},
    {display: 'Cell Number',  name : 'Cell_Phone', width : 80, sortable : false, align: 'left'},
    {display: 'Email',  name : 'Email', width : 200, sortable : false, align: 'left'}
                    ],
       title: 'Employee Search Results',
       usepager: true,
       useRp: true,
    rp: 10,
    width: 700,
    height: 200
   }
 );

</body>
</html>

Controller Ajax_emp;

<?php
class Ajax_emp extends Controller {
    function Ajax_emp()
    {
        parent::Controller();
        $this->load->library('rest'); 
        
    }
    function _search($data)
    {
        $rp=(int)$data->rp;
        $page=(int)$data->page;
        $start = (($page-1) * $rp);
        $limit = "LIMIT $start, $rp";
        $sortname=$data->sortname;
        $sortorder=$data->sortorder;
        $q="SELECT SQL_CALC_FOUND_ROWS id, Emp_Id, First_Name, Last_Name, Phone_Number, Cell_Phone, Email FROM emp_table ORDER BY $sortname $sortorder  $limit";
        $emprows = $this->db->query($q);
        $totalrows = $this->db->query('SELECT FOUND_ROWS();');
        $totalrows = $totalrows->row_array();
        $totalrows = array_shift($totalrows);

        $outresult  = "";
        $outresult .= "{\n";
        $outresult .= "page:$page,\n";
        $outresult .= "total:$totalrows,\n";
        $outresult .= "rows:[";
        $rc=false;
        foreach ($emprows->result() as $row )
        {
            if($rc) $outresult .=",";
            $id=$row->id;
            $outresult .="\n";
            $outresult .="{id:'$row->id"."',cell:['".$row->Emp_Id."','".addslashes($row->First_Name)."','".addslashes($row->Last_Name)."'";
            $outresult .=",'".$row->Phone_Number."','".$row->Cell_Phone."','".$row->Email."'";
            $outresult .="]}";
            $rc = true;
        }
        $outresult .="]\n";
        $outresult .="}";
        echo $outresult;
    }
    
    function jason()
    {
        $this->load->library('rest');
        $this->rest->addFunction('test', '_search', 'post');           
        $this->rest->serve($this); 
    }
    
    function ajax()
    {
        $data['heading'] = "Search";
        $this->load->view('ajax_results',$data);
    }
}
?>

PS. Paulo, Great Work 😊

paulo,

this is truly awesome, Flexigrid really gives the other Jquery grids a run for their money!

A couple quick questions for you:

1) How far away is Flexigrid from having inline editing / edit-in-place?

2) If I were to implement inline editing myself in the meantime (using say, jEditable), what selector(s) could I use for individual table cells? I know I can find the row id using the parent().attr(‘id’) of the <td>, but how do I determine the column? Do I need to use an index? And if so, how?

Thanks for this awesome plugin!