Flexigrid - Lightweight but rich data grid

[eluser]Unknown[/eluser]
Since this thread is getting so long, would the flexigrid Google code project at http://code.google.com/p/flexigrid/ be a better place to post bug reports and possibly submit patches. Is that the future home of flexigrid? Hosting the downloads there would probably really help out on bandwidth issues.

Thanks for the great component!

[eluser]SeanRock[/eluser]
[quote author="Holla die Waldfee" date="1211378973"][quote author="SeanRock" date="1211330893"]

wow thanks to Paulo's excellent work - implementing a singleSelect was so easy. if anyone is interested reply and i'll post the code here.

regards
Sean[/quote]

ReplyReply nake:

Indeed the Flexigrid is cool and Paulo did an excelent work. I have a solution for my problems, but it is not sophisticated. I am something like new at Javascript/DOM (usually I work with J2EE or PHP), but it is fascinating and sometimes strange and mindbogglingly :coolsmirk:.
So it would be nice to see an implementation with events!


Holla[/quote]

First let me make it clear i'm not a javascript or jquery expert. i've only been using jquery for a few days and flexigrid even less. So, this may not be 'correct' or the best way but it works for me.

To add a onRowSelected event:

1. open flexigrid.js and go to line (approx 52 - bottom of the options) and add the following (dont forget to add a comma after the previous option). I've included the onSubmit to show you where.

Code:

.
.
.
onSubmit: false, // using a custom populate function
onRowSelected: false

2. go to approx line 710. this is where jquery attaches the click event to the row. look for the line

Code:

$(this).toggleClass('trSelected');

and add the following code below it:

Code:

// get the row id (unique id for the row)
var selId = this.id.substring(3);

// multiselect option here

// if an event handler is defined then call it - only call if selecting, not unselecting
if (p.onRowSelected && $(this).hasClass('trSelected'))
{
    p.onRowSelected(selId,$(this),$(this).parent().parent().parent());
}

3. Add a new option to your flexigrid jquery code that will defined an event handler for the onRowSelected:

Code:

$(document).ready(function()
{
    $('.flexme').flexigird({onRowSelected:RowSelected});
});

and finally add your event handler to your page

Code:

function RowSelected(id, row, grid)
{
    alert("row id is " + id);
}

If you run this as-is the id will be empty. If you use dynamic data this will have a value but for static data (i.e. a table with rows and columns without dynamic data) you will need to add an id attribute to each row. example

Code:

<tr id="row1">
    <td>cell 1</td>
</tr>
<tr id="row2">
    <td>cell 2</td>
</tr>

To allow only one selected row:

1. open flexigrid.js and scroll to the bottom of the options (approx line 53). If you added the onRowSelected event above then below that you can add the following:

Code:

onRowSelected: false;
multiSelect: false // default to false

2. again if you did the onRowSelected part then remember the comment that was added: // multiselect option here. go to this part and added the following code. its a bit long but easy to read.

If you did not add the code for the onRowSelected then you will need to add the following before the next code block.

Code:

// get the row id (unique id for the row)
var selId = this.id.substring(3);

Code:

// if multiSelect:false - loop over all rows and remove the trSelected class from other rows                                
if(!p.multiSelect)
{
    $('tbody tr', g.bDiv).each
    (
        function()
        {
            var thisId = this.id.substring(3);
            if(selId == thisId) // id is the currently selected row
                return;
            else
                $(this).removeClass('trSelected');
        }
    );
}

I borrowed most of this code from the method right above (thanks Paulo). It simply loops over all the rows and if it finds one that has the trSelected class then it removes it.

3. as the default is false, i.e. only single row selection is allowed, if you want to allow multiple rows to be selected you can add the option like so:

Code:

$(document).ready(function()
{
    $('#flexme').flexigrid({multiSelect:true});
});

The same rule about the id attribute of the <tr> applies on single row select. Without the id single select does not work.

Again i'm not an expert but it works.

Regards
Sean

[eluser]Holla die Waldfee[/eluser]
Hey Sean,

thanks for ur reply! I made it in nearly the same way, except the thing with the "event handler". Good way.

To go around the long slope to clear all trSelected I use this 'oneliner':

Code:

$('#'+ t.id +' > tbody > .' + 'trSelected').removeClass('trSelected');

But as far as I can see, I am not a Javascript prof

I try to use Flexigrid in very special project that doesn't cry really for such a advanced application (a lot of database tables depending on each other). But I see it as a "skill enhancement" and I am able to spend some time with this brand new things (javascript, jquery, flexigrid). And I am still impressed, all this enhanced clientworking... The return of the fat-client, cool. I do not expect it in a browser, but it is really fun.

When it is all done I can buy Paulo a Coffee on my company's bill %-P


Holla

[eluser]paky[/eluser]
With [query] and [qtype] parameter ... can send to Json any data for personal search/filter in flexgrid ? Don't exist another parameter for send to Json dynamic data ... ?

Thanks all

[eluser]paky[/eluser]

2. Yes. There is an onSubmit API where you can add a Javascript that you can use to add a data using jQuery's .serializeArray method. you can even return false to the API if you want to verify your user's entered data, and prevent flexigrid from submitting to the server.

ehm ... a small example thanks


In my case I send to page a POST variables(array) ... can manipulate it ?

thanks

[eluser]grantmx[/eluser]
So...is this even possible? :wow:

Is there any way to skip the PHP echo or ASP call which then converts it to XML and instead just pull a hard XML file outputted from an already established db?

[eluser]SeanRock[/eluser]
Hi

i successfully loaded a plain text file that contained some json data. however i had to amended the flexigrid.js file to accomplish this. you could add another option that would indicate if you are loading data from a page such as html, php, aspx or a text file.

if you look in the flexigrid.js file (approx line 599) where the $.ajax... call is made. i replaced this with $.getJSON('test.json',function(data){g.addData(data);

and it worked fine. so this part of the code could be changed to allow for this....

if (loading plain text)
load using getJSON
else
load using ajax


but obviously paging and sortingt (unless done on the client) would not be applicable.

[eluser]paky[/eluser]
[quote author="SeanRock" date="1211485190"]Hi

i successfully loaded a plain text file that contained some json data. however i had to amended the flexigrid.js file to accomplish this. you could add another option that would indicate if you are loading data from a page such as html, php, aspx or a text file.

if you look in the flexigrid.js file (approx line 599) where the $.ajax... call is made. i replaced this with $.getJSON('test.json',function(data){g.addData(data);

and it worked fine. so this part of the code could be changed to allow for this....

if (loading plain text)
load using getJSON
else
load using ajax


but obviously paging and sortingt (unless done on the client) would not be applicable.[/quote]

If I want another parameter ... for example ... query_post_fromfile:'AND user.age=3 AND user.niick=bob' ... how can I do it?
In post.php can I read it with $_POST[] ....
thanks

[eluser]SeanRock[/eluser]
ok well think about it... a text file on your server cannot process data, the server simply serves the page just like it does with html - it simply returns the page/content. if you want to manipulate it in any way or respond to variables sent via post/get then you will need to have a page such as php, cfm, aspx that will be process by the server.

[eluser]paky[/eluser]
[quote author="SeanRock" date="1211487323"]ok well think about it... a text file on your server cannot process data, the server simply serves the page just like it does with html - it simply returns the page/content. if you want to manipulate it in any way or respond to variables sent via post/get then you will need to have a page such as php, cfm, aspx that will be process by the server.[/quote]

I have 3 files post2.php // grid_flex.php // search.php...

* search.php send via POST all data .... to

* grid_flex.php with inside jquery code (JSON) to ...

* post2.php ....


ok ? Then ... in grid_flex.php flexgrid has any parameter .... can I add one mine ? For read it in post2.php with $my_var=$_POST['paramter'] ?
For change the main query ....


thanks all