Flexigrid - Lightweight but rich data grid

[eluser]adwin[/eluser]
[quote author="Kevin Kietel" date="1210176003"][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?[/quote]

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

[eluser]gtia[/eluser]
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[i];
var th = document.createElement('th');

th[removed] = cm.display;

// NEW CODE STARTS HERE ------------------------------------------------------
if (cm.sortable)
{
th[removed]=th[removed] +
"<br/>
&lt;input id='" + cm.name + "_filter'
style='width:" + cm.width + "px'
onkeydown=''/&gt;"; // 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

[eluser]adwin[/eluser]
[quote author="gtia" date="1210249404"]Hi, i've been trying to find a way to reference the flexigrid object, after it has been created but to no avail.

Thanks[/quote]

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

Code:

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

Code:

$('#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 !

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

[eluser]gtia[/eluser]
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

Code:

$_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

Code:

$_POST

with the values from the custom search boxes(again, if you have any clues about this, it will be greatly appreciated.

Thanks again.

[eluser]mjhan300[/eluser]
I’m trying to understand flexigrid and I have a question. Why are my columns not sorting?

Code is:

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

$(document).ready(function() {

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

}); //close $(

&lt;/head&gt;
&lt;body&gt;
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>

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

[eluser]adwin[/eluser]
[quote author="mjhan300" date="1210278309"]I’m trying to understand flexigrid and I have a question. Why are my columns not sorting?

Code is:

&lt;html&gt;
&lt;head&gt;
&lt;meta content="text/html; charset=iso-8859-1” http-equiv="Content-Type"&gt;
&lt;title&gt;Flex Text&lt;/title&gt;
&lt;link rel="stylesheet" href="css/flexigrid.css" type="text/css" /&gt;
[/quote]

you forgot to include jquery.js and flexigrid.js

[eluser]adwin[/eluser]
[quote author="gtia" date="1210272120"]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

Code:

$_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

Code:

$_POST

with the values from the custom search boxes(again, if you have any clues about this, it will be greatly appreciated.

Thanks again.[/quote]

take a look on doSearch function

Code:

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:

Code:

// not tested
// if nothing written in quick search box take it from hiddent fields
if(p.query == ''){
p.query = $('#your_hidden_field_id').val();
}

[eluser]Unknown[/eluser]
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).

[eluser]swhitlow[/eluser]
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!

[eluser]paulopmx[/eluser]
[quote author="swhitlow" date="1210500885"]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![/quote]

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