Rails spinoffs - Apr 2008 - spreadsheet like support recommendations??? (i.e. ajax based table editing, in-place-editing)

Hi,

Any recommendations re a component/plugin/javascript library to give
me an in-line editable table (spreadsheet like support), like google
spreadsheets?

Tks

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

since you don''t like tableKit

I''ll offer
http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html as my
last suggestion

try not to be daunted by all of the code, once you start using some of the
YUI stuff the code gets easier to manage



On Wed, Apr 16, 2008 at 9:22 AM, greghauptmann
<greg.hauptmann-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> Hi,
>
> Any recommendations re a component/plugin/javascript library to give
> me an in-line editable table (spreadsheet like support), like google
> spreadsheets?
>
> Tks
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

thanks Brian - this one still pops up a sub-window to edit.   I''m
really after one along the lines of the Google Spreadsheet experience,
or the ExtJS demo, where you edit directly in the cell area with no
other dialog or OK/Cancel buttons coming up.  Perhaps the YUI example
is configurable though so I should have a look (and also try to find
out if YUI is open source/free, etc)

I was actually thinking of some code that gives the most basic example
of how to do this and then I could adapt myself.  Most other ajax
support I would need in the RoR environment would be covered by
Prototype/Scriptaculus.

Any more suggestions for the most basic implementation of support for
in-line editing of a table of data are welcome.

Regards
Greg


On Apr 16, 11:26 pm, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> since you don''t like tableKit
>
> I''ll
offerhttp://developer.yahoo.com/yui/examples/datatable/dt_cellediting.htmlas my
> last suggestion
>
> try not to be daunted by all of the code, once you start using some of the
> YUI stuff the code gets easier to manage
>
> On Wed, Apr 16, 2008 at 9:22 AM, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> wrote:
>
>
>
> > Hi,
>
> > Any recommendations re a component/plugin/javascript library to give
> > me an in-line editable table (spreadsheet like support), like google
> > spreadsheets?
>
> > Tks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

those are the only ones i know about.

if you don''t want the buttons to show up then you should probably do
something along the lines of creating the table with the editable fields and
then looping through all of the inputs and adding an event watcher of onblur
that will check the field to see if it has changed and if it has submit the
changes -- which might actually be optional if you provide a save button and
rely on the ''jesus saves and so can you'' methodology of
relying on the user
to save their work.

thats about the last bit i can offer, and actually, thinking about it, is
probably the simplest if you give the input fields a common class name, and
it wouldn''t require any additional libraries etc



On Wed, Apr 16, 2008 at 9:47 AM, greghauptmann
<greg.hauptmann-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> thanks Brian - this one still pops up a sub-window to edit.   I''m
> really after one along the lines of the Google Spreadsheet experience,
> or the ExtJS demo, where you edit directly in the cell area with no
> other dialog or OK/Cancel buttons coming up.  Perhaps the YUI example
> is configurable though so I should have a look (and also try to find
> out if YUI is open source/free, etc)
>
> I was actually thinking of some code that gives the most basic example
> of how to do this and then I could adapt myself.  Most other ajax
> support I would need in the RoR environment would be covered by
> Prototype/Scriptaculus.
>
> Any more suggestions for the most basic implementation of support for
> in-line editing of a table of data are welcome.
>
> Regards
> Greg
>
>
> On Apr 16, 11:26 pm, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > since you don''t like tableKit
> >
> > I''ll offerhttp://
> developer.yahoo.com/yui/examples/datatable/dt_cellediting.htmlas my
> > last suggestion
> >
> > try not to be daunted by all of the code, once you start using some of
> the
> > YUI stuff the code gets easier to manage
> >
> > On Wed, Apr 16, 2008 at 9:22 AM, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
> >
> > wrote:
> >
> >
> >
> > > Hi,
> >
> > > Any recommendations re a component/plugin/javascript library to
give
> > > me an in-line editable table (spreadsheet like support), like
google
> > > spreadsheets?
> >
> > > Tks
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

I think you might be right Brian.  I probably have to brush up more on
java-script.  Are there any examples of what your suggesting in
prototype/rails somewhere I could look at?  Do you know what event
handlers I should be looking to for:
- monitoring when a use clicks in a cell (i.e. to trigger going into
editable mode) &
- leaves a cell (i.e. clicks somewhere else outside the cell)

Can class name be used somehow can it?  e.g. can you say:  Listen for
All Mouse Down events that occur in elements with class name XYZ?  Not
sure what you were getting at here exactly.

thanks again
Greg

On Apr 17, 12:16 am, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> those are the only ones i know about.
>
> if you don''t want the buttons to show up then you should probably
do
> something along the lines of creating the table with the editable fields
and
> then looping through all of the inputs and adding an event watcher of
onblur
> that will check the field to see if it has changed and if it has submit the
> changes -- which might actually be optional if you provide a save button
and
> rely on the ''jesus saves and so can you'' methodology of
relying on the user
> to save their work.
>
> thats about the last bit i can offer, and actually, thinking about it, is
> probably the simplest if you give the input fields a common class name, and
> it wouldn''t require any additional libraries etc
>
> On Wed, Apr 16, 2008 at 9:47 AM, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> wrote:
>
>
>
> > thanks Brian - this one still pops up a sub-window to edit.  
I''m
> > really after one along the lines of the Google Spreadsheet experience,
> > or the ExtJS demo, where you edit directly in the cell area with no
> > other dialog or OK/Cancel buttons coming up.  Perhaps the YUI example
> > is configurable though so I should have a look (and also try to find
> > out if YUI is open source/free, etc)
>
> > I was actually thinking of some code that gives the most basic example
> > of how to do this and then I could adapt myself.  Most other ajax
> > support I would need in the RoR environment would be covered by
> > Prototype/Scriptaculus.
>
> > Any more suggestions for the most basic implementation of support for
> > in-line editing of a table of data are welcome.
>
> > Regards
> > Greg
>
> > On Apr 16, 11:26 pm, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > since you don''t like tableKit
>
> > > I''ll offerhttp://
> > developer.yahoo.com/yui/examples/datatable/dt_cellediting.htmlas my
> > > last suggestion
>
> > > try not to be daunted by all of the code, once you start using
some of
> > the
> > > YUI stuff the code gets easier to manage
>
> > > On Wed, Apr 16, 2008 at 9:22 AM, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
>
> > > wrote:
>
> > > > Hi,
>
> > > > Any recommendations re a component/plugin/javascript library
to give
> > > > me an in-line editable table (spreadsheet like support),
like google
> > > > spreadsheets?
>
> > > > Tks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

i''m not familiar with 1.6.1.1 enough to give you any solid advice on
code,
but some search through the mailing list should turn something up.  Kangax
posted a code snippet earlier today that should get you started.

myForm.getInputs(''checkbox'').findAll(function(el)
{
>  return /selectedLine\[\d+\]\[\d+\]/.test(el.name);
> })
>


On Wed, Apr 16, 2008 at 4:23 PM, greghauptmann
<greg.hauptmann-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
>
> I think you might be right Brian.  I probably have to brush up more on
> java-script.  Are there any examples of what your suggesting in
> prototype/rails somewhere I could look at?  Do you know what event
> handlers I should be looking to for:
> - monitoring when a use clicks in a cell (i.e. to trigger going into
> editable mode) &
> - leaves a cell (i.e. clicks somewhere else outside the cell)
>
> Can class name be used somehow can it?  e.g. can you say:  Listen for
> All Mouse Down events that occur in elements with class name XYZ?  Not
> sure what you were getting at here exactly.
>
> thanks again
> Greg
>
> On Apr 17, 12:16 am, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > those are the only ones i know about.
> >
> > if you don''t want the buttons to show up then you should
probably do
> > something along the lines of creating the table with the editable
fields
> and
> > then looping through all of the inputs and adding an event watcher of
> onblur
> > that will check the field to see if it has changed and if it has
submit
> the
> > changes -- which might actually be optional if you provide a save
button
> and
> > rely on the ''jesus saves and so can you'' methodology
of relying on the
> user
> > to save their work.
> >
> > thats about the last bit i can offer, and actually, thinking about it,
> is
> > probably the simplest if you give the input fields a common class
name,
> and
> > it wouldn''t require any additional libraries etc
> >
> > On Wed, Apr 16, 2008 at 9:47 AM, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
> >
> > wrote:
> >
> >
> >
> > > thanks Brian - this one still pops up a sub-window to edit.  
I''m
> > > really after one along the lines of the Google Spreadsheet
experience,
> > > or the ExtJS demo, where you edit directly in the cell area with
no
> > > other dialog or OK/Cancel buttons coming up.  Perhaps the YUI
example
> > > is configurable though so I should have a look (and also try to
find
> > > out if YUI is open source/free, etc)
> >
> > > I was actually thinking of some code that gives the most basic
example
> > > of how to do this and then I could adapt myself.  Most other ajax
> > > support I would need in the RoR environment would be covered by
> > > Prototype/Scriptaculus.
> >
> > > Any more suggestions for the most basic implementation of support
for
> > > in-line editing of a table of data are welcome.
> >
> > > Regards
> > > Greg
> >
> > > On Apr 16, 11:26 pm, "Brian Williams"
<brianw1...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > > > since you don''t like tableKit
> >
> > > > I''ll offerhttp://
> > > developer.yahoo.com/yui/examples/datatable/dt_cellediting.htmlas
my
> > > > last suggestion
> >
> > > > try not to be daunted by all of the code, once you start
using some
> of
> > > the
> > > > YUI stuff the code gets easier to manage
> >
> > > > On Wed, Apr 16, 2008 at 9:22 AM, greghauptmann <
> greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
> >
> > > > wrote:
> >
> > > > > Hi,
> >
> > > > > Any recommendations re a component/plugin/javascript
library to
> give
> > > > > me an in-line editable table (spreadsheet like
support), like
> google
> > > > > spreadsheets?
> >
> > > > > Tks
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Apr 16, 2008, at 4:23 PM, greghauptmann wrote:
> - monitoring when a use clicks in a cell (i.e. to trigger going into
> editable mode) &
> - leaves a cell (i.e. clicks somewhere else outside the cell)
I would try listening to click to start the replacement process, and  
blur on the resulting text input, that won''t keep firing every time  
there is a change inside the field.

Give your cells unique IDs, probably following the Excel A1 - ZZZ999  
or whatever format, then listen to the entire table:

$(''your_table_id'').observe(''click'',function(evt){
	var elm = Event.element(evt);
	//now you know the precise element that was clicked
	elm.update(''your form element here'');
	//focus the form field
	elm.down(''input'').activate();
	elm.down(''input'').observe(''blur'',function(){
		new Ajax.Updater ... etc ...
	});
});
>
> Can class name be used somehow can it?  e.g. can you say:  Listen for
> All Mouse Down events that occur in elements with class name XYZ?  Not
> sure what you were getting at here exactly.
That would be another way to approach this, using a class="edit" or  
something like that on a collection of things. Then you could use the  
double-dollar function to get them all as an array, and add the  
editable features to them. My money is on the former approach, as it  
scales much better than Observing. Every. Little. Thing.

Walter


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

If you are dealing with a table you wont even need to give the cells
unique ids''s you can use the tables cellIndex and rowIndex props.
Also HTML tables can be read by excel, bonus!

-JDD
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On Apr 16, 8:22 am, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hi,
>
> Any recommendations re a component/plugin/javascript library to give
> me an in-line editable table (spreadsheet like support), like google
> spreadsheets?
>
> Tks
TableKit (http://www.millstream.com.au/upload/code/tablekit/) might be
a good starting point.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Greg,

It wouldn''t be hard to roll-your-own but the technique I would use
would
depend on the database schema that was going to be storing the data.
I don''t know if you want to have all the cells editable by default, but
if
you do, you''d need a lot of observers. You might be able to avoid this
by
attaching and detaching observers dynamically - i don''t think bubbling
works
on blur/focus though?
I would personally do a periodical executor which serialized the table and
saved it if it''s changed rather than relying on onBlur events to save
individual cells - this way you don''t have too many ajax requests
hitting
your server.
You could have the onblur events keeping an internal class up to date which
was then sync''d with the server and use a big cookie to provide instant
saving.
Just some random musings...

Gareth

On Fri, Apr 18, 2008 at 10:26 AM, nlloyds
<nlloyds-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> On Apr 16, 8:22 am, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Hi,
> >
> > Any recommendations re a component/plugin/javascript library to give
> > me an in-line editable table (spreadsheet like support), like google
> > spreadsheets?
> >
> > Tks
>
> TableKit (http://www.millstream.com.au/upload/code/tablekit/) might be
> a good starting point.
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

On 18.4.2008, at 1.51, Gareth Evans wrote:
> Greg,
>
> It wouldn''t be hard to roll-your-own but the technique I would use
> would depend on the database schema that was going to be storing the  
> data.
> I don''t know if you want to have all the cells editable by
default,
> but if you do, you''d need a lot of observers. You might be able to
> avoid this by attaching and detaching observers dynamically - i  
> don''t think bubbling works on blur/focus though?
No, but you can use event capturing for that:
http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

//jarkko

--
Jarkko Laine
http://jlaine.net
http://dotherightthing.com
http://www.railsecommerce.com
http://odesign.fi

This works pretty simply:

document.observe(''dom:loaded'',function(){
	var editr = function(evt){
		var elm = Event.element(evt);
		Event.stopObserving(''data'',''click'',editr);
		elm.update(''<input type="text" id="ed_'' +
elm.id + ''" name="edit[''
+ elm.id + '']" value="'' + elm.innerHTML +
''" />'');
		$(''ed_'' +
elm.id).activate().observe(''blur'',function(evt){
			elm.update($F(''ed_'' + elm.id));
			//send your ajax update here
			$(''data'').observe(''click'',editr);
		})
	}
	$(''data'').observe(''click'',editr);
});

I am sure it could be written more simply, and someone said that  
there was a better way to get the x/y than using a unique id for each  
editable td. My table is thus:

<table cellspacing="0" id="data">
	<tr><th>&nbsp;</th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</
th></tr>
	<tr><th>1</th><td
id="A1">Data</td><td
id="B1">Data</td><td
id="C1">Data</td><td
id="D1">Data</td><td
id="E1">Data</td></tr>
	<tr><th>2</th><td
id="A2">Data</td><td
id="B2">Data</td><td
id="C2">Data</td><td
id="D2">Data</td><td
id="E2">Data</td></tr>
	<tr><th>3</th><td
id="A3">Data</td><td
id="B3">Data</td><td
id="C3">Data</td><td
id="D3">Data</td><td
id="E3">Data</td></tr>
	<tr><th>4</th><td
id="A4">Data</td><td
id="B4">Data</td><td
id="C4">Data</td><td
id="D4">Data</td><td
id="E4">Data</td></tr>
</table>

Walter

On Apr 17, 2008, at 6:51 PM, Gareth Evans wrote:
> Greg,
>
> It wouldn''t be hard to roll-your-own but the technique I would use
> would depend on the database schema that was going to be storing  
> the data.
> I don''t know if you want to have all the cells editable by
default,
> but if you do, you''d need a lot of observers. You might be able to
> avoid this by attaching and detaching observers dynamically - i  
> don''t think bubbling works on blur/focus though?
> I would personally do a periodical executor which serialized the  
> table and saved it if it''s changed rather than relying on onBlur  
> events to save individual cells - this way you don''t have too many
> ajax requests hitting your server.
> You could have the onblur events keeping an internal class up to  
> date which was then sync''d with the server and use a big cookie to
> provide instant saving.
> Just some random musings...
>
> Gareth
>
> On Fri, Apr 18, 2008 at 10:26 AM, nlloyds
<nlloyds-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> On Apr 16, 8:22 am, greghauptmann
<greg.hauptm...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> > Hi,
> >
> > Any recommendations re a component/plugin/javascript library to give
> > me an in-line editable table (spreadsheet like support), like google
> > spreadsheets?
> >
> > Tks
>
> TableKit (http://www.millstream.com.au/upload/code/tablekit/) might be
> a good starting point.
>
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---