Flexigrid - Lightweight but rich data grid

[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