Flexigrid - Lightweight but rich data grid | Libraries & Helpers

#286 / May 07, 2008 8:00am

Kevin Kietel
22 posts

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 !

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?
#287 / May 07, 2008 10:04am

mjhan300
5 posts

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.

#288 / May 07, 2008 11:06am

tayson

3 posts

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.

I did this:

data.php

<? 
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>";
$xml .= "<total>$total</total>";

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

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

index.php

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

#289 / May 07, 2008 11:53am

mjhan300
5 posts

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><![CDATA[xxx]]></cell> tags for all the data. I used matching pairs like:

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

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

Is there a way to use data formatted as such?

Thanks for the help!!
#290 / May 07, 2008 4:37pm

gius
4 posts

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!
#291 / May 07, 2008 9:10pm

adwin
77 posts

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 !

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?

I tried the example and it works well .. but when I tried to copy an paste into my own ci .. everything works fine, just the quick search doesnt want to intercept keydown for return[enter] key. I tried to add new button on the table and call doSearch(), and it work well…

may be it doesn’t work because I use jquery 1.5b4 (taken from latest jquery ui).

anyway ... I want to know how to call doSearch() from a button that is not embed in the flexigrid.

Thanks
#292 / May 08, 2008 4:23am

gtia
2 posts

Hi, i’ve been trying to find a way to reference the flexigrid object, after it has been created but to no avail.

For example what i’m trying to do is to establish a custom filtering frontend like the image at http://freelancer-x.com/flexigrid_filtering.png. So when a user starts typing values in each of the filter boxes, the onkeydown event is activated instructing the flexigrid to be automatically populated. For the time being i’ve added the following code(starting from line 763, colmodel properties) and placed relative comments to show what the new code is. The new code just adds an input box after each column, and each textbox contains an onkeydown handler.

//create model if any
if (p.colModel)
{

thead = document.createElement('thead');
tr = document.createElement('tr');

for (i in p.colModel)
{
var cm = p.colModel;
var th = document.createElement('th');

th[removed] = cm.display;

// NEW CODE STARTS HERE ------------------------------------------------------
if (cm.sortable)
{
th[removed]=th[removed] +
"<br>
<input id='" + cm.name + "_filter'
style='width:" + cm.width + "px'
onkeydown=''/>"; // how should the flexigrid table be referenced??
}
// NEW CODE ENDS HERE————————————————————————————

if (cm.name) $(th).attr(‘abbr’,cm.name);

//th.idx = i;
$(th).attr(‘axis’,‘col’+i);

if (cm.align)
th.align = cm.align;

if (cm.width)
$(th).attr(‘width’,cm.width);

if (cm.hide)
{
th.hide = true;
}

if (cm.process)
{
th.process = cm.process;
}

$(tr).append(th);
}
$(thead).append(tr);
$(t).prepend(thead);
} // end if p.colmodel

Any ideas?

Thanks

#293 / May 08, 2008 6:18am

adwin
77 posts

Hi, i’ve been trying to find a way to reference the flexigrid object, after it has been created but to no avail.

Thanks

here I did a “modification” on flexigrid ... adding a function for calling doSearch from outside ...

$.fn.flexDoSearch = function(keywords) { // function to doSearch grid $('input.qsbox').val(keywords); return this.each( function() { if (this.grid&&this;.p.url) this.grid.doSearch(); }); }; //end flexDoSearch

put those codes on flexigrid.js around line 1400 (after flexReload function)

this will do manual filltering ..

you don’t need to add filter inside this grid object ... you can access it by calling
$('#flex1').flexDoSearch('yourkeywords'); or this "tricky" one $('#flex1').flexDoSearch('field1:keyword1,field2:keyword2'); // or use json type? and on ajax you just need to capture keywords in $_POST['query'];

Hope this solve your problem ... this is solve my question above (prev page) and solve your problems as well ...

let me know if this is what you need 😊
Good luck ! :D

in case you need the completes file, use this ... I did a modification ... adding “search” button on quick search and add function for doing search like one above

http://wysmedia.com/vod/modified_flexigrid.zip

😊

#294 / May 08, 2008 10:42am

gtia
2 posts

Hi adwin, this was helpful indeed, and even better i got to understand how to create new custom functions in case i need to(not too JQuery savvy as you may tell).

I did come across a new problem however, as the contents of
$_POST['query']
insist on returning an ‘undefined’ value on the receiving ajax page. After further investigating it became obvious why this occured, as i have deactivated the ‘default’ search box, and i am using multiple search boxes (as in the image link i’ve posted in my previous message), so for the moment i’m fine by just using the flexReload function, and i just have to find a way to fill
$_POST
with the values from the custom search boxes(again, if you have any clues about this, it will be greatly appreciated.

Thanks again.

#295 / May 08, 2008 12:25pm

mjhan300
5 posts

I’m trying to understand flexigrid and I have a question. Why are my columns not sorting?

Code is:

<html>
<head>
<meta content=“text/html; charset=iso-8859-1” http-equiv=“Content-Type”>
<title>Flex Text</title>
<link rel=“stylesheet” href=“css/flexigrid.css” type=“text/css” />

$(document).ready(function() {

$(’.flexme’).flexigrid();

}); //close $(

</head>
<body>
Flex Test

<table class=“flexme”>
<thead>
<tr>
<th width=“100”>Time</th>
<th width=“100”>Class Name</th>
<th width=“100”>Instructor</th>
<th width=“100”>Day Offered</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:30 am</td>
<td>Aerobics</td>
<td>John</td>
<td>Tuesday</td>
</tr>
<tr>
<td>9:00 am</td>
<td>Fit over 50</td>
<td>Karin</td>
<td>Monday</td>
</tr>
<tr>
<td>8:00 am</td>
<td>Weights</td>
<td>Jim</td>
<td>Monday</td>
</tr>
<tr>
<td>11:00 am</td>
<td>Weights</td>
<td>Jim</td>
<td>Thursday</td>
</tr>
<tr>
<td>5:00 pm</td>
<td>Aerobics</td>
<td>Karin</td>
<td>Monday</td>
</tr>
</tbody>
</table>

</body>
</html>

#296 / May 08, 2008 9:08pm

adwin
77 posts

I’m trying to understand flexigrid and I have a question. Why are my columns not sorting?

Code is:

<html>
<head>
<meta content=“text/html; charset=iso-8859-1” http-equiv=“Content-Type”>
<title>Flex Text</title>
<link rel=“stylesheet” href=“css/flexigrid.css” type=“text/css” />

you forgot to include jquery.js and flexigrid.js

#297 / May 08, 2008 9:15pm

adwin
77 posts

Hi adwin, this was helpful indeed, and even better i got to understand how to create new custom functions in case i need to(not too JQuery savvy as you may tell).

I did come across a new problem however, as the contents of
$_POST['query']
insist on returning an ‘undefined’ value on the receiving ajax page. After further investigating it became obvious why this occured, as i have deactivated the ‘default’ search box, and i am using multiple search boxes (as in the image link i’ve posted in my previous message), so for the moment i’m fine by just using the flexReload function, and i just have to find a way to fill
$_POST
with the values from the custom search boxes(again, if you have any clues about this, it will be greatly appreciated.

Thanks again.

take a look on doSearch function
doSearch: function () { p.query = $('input[name=q]',g.sDiv).val(); p.qtype = $('select[name=qtype]',g.sDiv).val(); p.newp = 1; this.populate(); }

you can adding your hidden field on the grid or outside, after that you can assign the value of your hidden field in doSearch. Those variables will be sent into $_POST.
for example:
// not tested // if nothing written in quick search box take it from hiddent fields if(p.query == ''){ p.query = $('#your_hidden_field_id').val(); }

#298 / May 10, 2008 4:29am

volomike
1 posts

I’d like to see a checkbox feature so that I can select multiple items choose an option from a separate popdown listbox, and then use jQuery to do something with those items, such as mark them completed or change a property on them in a unified way (such as move them to another category).

#299 / May 11, 2008 2:14am

swhitlow
22 posts

Hello. First I have to say - what an incredible control! This is absolutely great!

Second, what would be the easiest way for me to call an onclick event to show the current id of the row?

I am basically just needing a quick alert box displaying the current row that has been clicked.

Thanks!

#300 / May 11, 2008 4:18am

paulopmx
164 posts

Hello. First I have to say - what an incredible control! This is absolutely great!

Second, what would be the easiest way for me to call an onclick event to show the current id of the row?

I am basically just needing a quick alert box displaying the current row that has been clicked.

Thanks!

Browse the posts, you’ll see samples i’ve made before regarding the ‘process API’ in the colModel.

Thread

Flexigrid - Lightweight but rich data grid

Kevin Kietel

mjhan300

tayson

mjhan300

gius

adwin

gtia

adwin

gtia

mjhan300

adwin

adwin

volomike

swhitlow

paulopmx

Username

Password

Thread

Flexigrid - Lightweight but rich data grid

ExpressionEngine News!

Username

Password

Email Address

Display Name

Password