Flexigrid - Lightweight but rich data grid

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

Hi kolanos,

1. Maybe version 1.1
2. Sure. I store it as a 'abbr' attribute in the th header.

[eluser]kolanos[/eluser]
[quote author="paulopmx" date="1207552000"]Hi kolanos,

1. Maybe version 1.1
2. Sure. I store it as a 'abbr' attribute in the th header.[/quote]
Hi paulo,

I added the following to flexigrid.js:

Code:

//add cell

$('thead tr:first th',g.hDiv).each
(
function ()
{

var td = document.createElement('td');

var idx = $(this).attr('axis').substr(3);

td.align = this.align;

td[removed] = row.cell[idx];
td.className = 'editcell'; //I added this
$(tr).append(td);

td = null;
}

);

Which I checked, and it does indeed add class="editcell" to all the cells. However, when I attempt to attach an event to this cell:

Code:

$(document).ready(function (){
$(".editcell").click(function(){
alert("HIT!");    
});

I get nothing. What am I doing wrong here?

Thanks!

[eluser]paulopmx[/eluser]
[quote author="kolanos" date="1207562714"][quote author="paulopmx" date="1207552000"]Hi kolanos,

1. Maybe version 1.1
2. Sure. I store it as a 'abbr' attribute in the th header.[/quote]
Hi paulo,

I added the following to flexigrid.js:

Code:

//add cell

$('thead tr:first th',g.hDiv).each
(
function ()
{

var td = document.createElement('td');

var idx = $(this).attr('axis').substr(3);

td.align = this.align;

td[removed] = row.cell[idx];
td.className = 'editcell'; //I added this
$(tr).append(td);

td = null;
}

);

Which I checked, and it does indeed add class="editcell" to all the cells. However, when I attempt to attach an event to this cell:

Code:

$(document).ready(function (){
$(".editcell").click(function(){
alert("HIT!");    
});

I get nothing. What am I doing wrong here?

Thanks![/quote]

You are basically attaching an event to an element that doesn't exists yet, remember, data is dynamically loaded, so td elements are created after the ajax process has completed.

What you can do is instead of adding your function on the 'ready' event of the document, which fires after a page is loaded, assign a function to this flexigrid API

Code:

onSuccess : yourfunction

and you can add a yourfunction function

Code:

function yourfunction()
{
$(".editcell").click(function(){
alert("HIT!");    
});
}

also you don't have to modify the flexigrid code to add your class, there is an API in the colModel to update your elements individually example:

Code:

{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center', process : addCellClassfunction},

then create a function like so:

Code:

function addCellClassfunction(cellDiv)
{
   $(cellDiv).addClass('editcell');
}

much better right?

[eluser]Armorfist[/eluser]
[quote author="ecarsted" date="1207547412"]Wow your fingers must be burning! How long did it take you to code that? Kudos![/quote]

Thanks! I took me all Sunday to code this, however I'm still perfecting it. Any ideas please share.
Btw, can you provide me a link to that REST library you're using? I never used something like that and would like to take a look.

Paulo, can you take a look at my earlier post?
Thanks!

[eluser]Synergiq[/eluser]
I've taken my asp code down while I work on a tutorial for doing this with asp.

Just out of intrest, how far off are the new features like inline editing?

[eluser]Armorfist[/eluser]
[quote author="Synergiq" date="1207576383"]I've taken my asp code down while I work on a tutorial for doing this with asp.

Just out of intrest, how far off are the new features like inline editing?[/quote]

Take a look here

[eluser]paulopmx[/eluser]
[quote author="Armorfist" date="1207461217"]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:

Code:

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:

Code:

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?[/quote]

What you did is perfectly fine.

Or do you want to make it like a toggle button? if so:

Code:

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

[eluser]Armorfist[/eluser]
Thanks.
I initially tried the toggle, but if you make some selections before you click "Select All", the toggle un-selects those selections, and selects the others. So it doesn't work for me.

[eluser]ecarsted[/eluser]
[quote author="Armorfist" date="1207574489"][quote author="ecarsted" date="1207547412"]Wow your fingers must be burning! How long did it take you to code that? Kudos![/quote]

Thanks! I took me all Sunday to code this, however I'm still perfecting it. Any ideas please share.
Btw, can you provide me a link to that REST library you're using? I never used something like that and would like to take a look.

Paulo, can you take a look at my earlier post?
Thanks![/quote]

You can find it here.

http://ellislab.com/forums/viewthread/73080/

Eric

[eluser]paulopmx[/eluser]
[quote author="Armorfist" date="1207576959"]Thanks.
I initially tried the toggle, but if you make some selections before you click "Select All", the toggle un-selects those selections, and selects the others. So it doesn't work for me.[/quote]

You just need to add conditions if you want it to act that way.

Code:

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