Thread

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!

Hi kolanos,

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

Hi kolanos,

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

Hi paulo,

I added the following to flexigrid.js:

//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:

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

I get nothing. What am I doing wrong here?

Thanks!

Hi kolanos,

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

Hi paulo,

I added the following to flexigrid.js:

//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:

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

I get nothing. What am I doing wrong here?

Thanks!

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

onSuccess : yourfunction

and you can add a yourfunction function

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:

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

then create a function like so:

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

much better right?

Wow your fingers must be burning!  How long did it take you to code that? Kudos!

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!

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?

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?

Take a look here

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:

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:

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?

What you did is perfectly fine.

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

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

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.

Wow your fingers must be burning!  How long did it take you to code that? Kudos!

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!

You can find it here.

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

Eric

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.

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

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');'
}

Hi Paulo,

Two features that would be really nice to have:

1) Pass the a list of columns and the table name to the service.

2) The table able to process the results of a standard json_encode.

Using the $this->rest->jsonEndode($row); returns

{"id":"18","Emp_Id":"23","First_Name":"Bradley","Last_Name":"","Phone_Number":"","Cell_Phone":"","Email"
:""}

vs me having to code the specifics for each table to return the result

{id:'18',cell:['23','Bradley','','','','']}

Would make the server code much cleaner, and more importantly 😊 Generic.  I would only have to code one service.  Add a request option to read, update, delete, and wow, you got a powerful tool!

Eric

Hi Paulo

I realized a problem in flexigrid.

If i have more columns and i want to show or hide columns and if the height of grid is a little bit small , the last columns don’t appear.
See the following link: http://contaflux.ro/gestiune/module/flexigrid.php

I’ve uploaded my asp version of the script which uses json and an access database.

http://jamesowers.co.uk/asp-tutorials/57/flexigrid-with-asp/

Hi Paulo,

Two features that would be really nice to have:

1) Pass the a list of columns and the table name to the service.

2) The table able to process the results of a standard json_encode.

Using the $this->rest->jsonEndode($row); returns

{"id":"18","Emp_Id":"23","First_Name":"Bradley","Last_Name":"","Phone_Number":"","Cell_Phone":"","Email"
:""}

vs me having to code the specifics for each table to return the result

{id:'18',cell:['23','Bradley','','','','']}

Would make the server code much cleaner, and more importantly 😊 Generic.  I would only have to code one service.  Add a request option to read, update, delete, and wow, you got a powerful tool!

Eric

Hi Eric,

1. You can pass additional parameters to the service using this setting

param : {name:value}

So using this technique you can pass the table and fields that you want.

2. I will consider this, but the point of having my own standard format is to keep Flexigrid lightweight, because for sure a lot of people want to use other standards as well, and that’s probably the strong point of ExtJS in which its so powerful you can adapt it to any backend format, the drawback of course is a heavier javascript and more complicated configuration. This is the opposite of Flexigrid, where the point is to make it lightweight as possible yet flexible enough to serve your needs, the only sticking point is you prepare the data it expects for it. In the future I might be able to open an API where you can create a javascript function that will interpret the data for Flexigrid.

Hi Paulo,

Two features that would be really nice to have:

1) Pass the a list of columns and the table name to the service.

2) The table able to process the results of a standard json_encode.

Hi Eric,

1. You can pass additional parameters to the service using this setting

param : {name:value}

So using this technique you can pass the table and fields that you want.

2. I will consider this, but the point of having my own standard format is to keep Flexigrid lightweight, because for sure a lot of people want to use other standards as well, and that’s probably the strong point of ExtJS in which its so powerful you can adapt it to any backend format, the drawback of course is a heavier javascript and more complicated configuration. This is the opposite of Flexigrid, where the point is to make it lightweight as possible yet flexible enough to serve your needs, the only sticking point is you prepare the data it expects for it. In the future I might be able to open an API where you can create a javascript function that will interpret the data for Flexigrid.

Thanks for the reply Paulo,

1) Duh, lol, already got to use this to pass the where string , I pass three WHERE parms.
2) I understand.  Am making a quick flexgrid formatter.

  $flexigridrow =  fexiEncode(jsonEncode($row));

of course, the id will have to be the first value, and the order of the values will have to be in the correct order.

I will post it tonight.

Eric