[Proto-Scripty] Re: adding InPlaceEditor to each table cell
I've done that before.
I cannot post the code here because it is in a complex application/
framework but here are the few points you need to make it work:
- Add a classname like 'NeedIPE' to your TD's, and observe the click
on the table or anything on top of it.
- In you event handler, get the clicked TD with something like
e.findElement('td.NeedIPE');
- if there is a TD found, create the InPlaceEditor, and remove the
NeedIPE class, so next time you click on it, a new IPE won't be
created
- Call enterEditMode() 's method of your InPlaceEditor() so you won't
need to click a second time.
Also you may disable the highlight effect of the InPlaceEditor, so the
cells you already clicked wont have different behavior than the ones
you haven't.
(I did at first try to implement the highlight effect on other td's
but with a big table, it is just very bad looking).
Eric
On Oct 28, 12:34 am, BrentNicholas brentnicho...@gmail.com wrote:
Hi all,
I've been wrestling with this for a little bit now and figure it's
time to ask for help. I can't seem to find anything on the web.
I have a dynamicly generated table, I want to have an InPlaceEditor
instance on each table cell. From what I can tell you need to do a
'new' object on it for every cell so that the hover over highlight
shows, letting you know that the InPlaceEditor is connected to the
table cell.
Table Struct:
(The p tag was what I saw in examples and am using it since that's
what works now)
table id=idProgramsTBL
tr class=mainRow
td id=tdPrgCdp id=idPrgCdP#ProgramUID#
class=clsPrgCdP#ProgramCode#/p/td
I've tried the following, to no avail:
// this works but has the problem described below
$('idProgramsTBL').select('[class=clsPrgCdP]').invoke(observe,
click, function(event){ codeEditInPlace(this.id); });
// this works but is incorrect as it will create a new instance of the
InPlaceEditor on each 'click'
// thus you can get 1 to n editors in the cell for every click
// Also, this connects the editor after the click, so you end up
clicking twice
function codeEditInPlace(id)
{
new Ajax.InPlaceEditor(id ,'act_setProgramCode.cfm?ProgramUID='+id,
{
onFailure: placeError,
onComplete: refreshProgramCode,
rows: 2,
cols: 20
}
);
}
The problem is that the above is based on creating and attaching the
InPlaceEditor when the user clicks, vs after the Ajax.Request
completes. I am calling the .invoke.observe statement above in a
function fired by the onComplete call back of Ajax.Request
So how do I find all the items of this class (class name of table cell
or P tag) and create a new InPlaceEditor on it.
I've got the following to get the classes of the P tags in the table
cells:
$('idResultsTableTBL').select('[class=clsPrgCdP]')
I found this but I don't think it's of help:
var codeCellArray = $A(['clsPrgCd']);
codeCellArray.each(function(aCell) {
alert(aCell);
});
Thoughts?
Thanks for your time,
Brent
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: adding InPlaceEditor to each table cell
Maybe you can try using MyTableGrid :-D
http://pabloaravena.info/mytablegrid
On Fri, Oct 29, 2010 at 6:13 AM, Eric lefauv...@gmail.com wrote:
I've done that before.
I cannot post the code here because it is in a complex application/
framework but here are the few points you need to make it work:
- Add a classname like 'NeedIPE' to your TD's, and observe the click
on the table or anything on top of it.
- In you event handler, get the clicked TD with something like
e.findElement('td.NeedIPE');
- if there is a TD found, create the InPlaceEditor, and remove the
NeedIPE class, so next time you click on it, a new IPE won't be
created
- Call enterEditMode() 's method of your InPlaceEditor() so you won't
need to click a second time.
Also you may disable the highlight effect of the InPlaceEditor, so the
cells you already clicked wont have different behavior than the ones
you haven't.
(I did at first try to implement the highlight effect on other td's
but with a big table, it is just very bad looking).
Eric
On Oct 28, 12:34 am, BrentNicholas brentnicho...@gmail.com wrote:
Hi all,
I've been wrestling with this for a little bit now and figure it's
time to ask for help. I can't seem to find anything on the web.
I have a dynamicly generated table, I want to have an InPlaceEditor
instance on each table cell. From what I can tell you need to do a
'new' object on it for every cell so that the hover over highlight
shows, letting you know that the InPlaceEditor is connected to the
table cell.
Table Struct:
(The p tag was what I saw in examples and am using it since that's
what works now)
table id=idProgramsTBL
tr class=mainRow
td id=tdPrgCdp id=idPrgCdP#ProgramUID#
class=clsPrgCdP#ProgramCode#/p/td
I've tried the following, to no avail:
// this works but has the problem described below
$('idProgramsTBL').select('[class=clsPrgCdP]').invoke(observe,
click, function(event){ codeEditInPlace(this.id); });
// this works but is incorrect as it will create a new instance of the
InPlaceEditor on each 'click'
// thus you can get 1 to n editors in the cell for every click
// Also, this connects the editor after the click, so you end up
clicking twice
function codeEditInPlace(id)
{
new Ajax.InPlaceEditor(id ,'act_setProgramCode.cfm?ProgramUID='+id,
{
onFailure: placeError,
onComplete: refreshProgramCode,
rows: 2,
cols: 20
}
);
}
The problem is that the above is based on creating and attaching the
InPlaceEditor when the user clicks, vs after the Ajax.Request
completes. I am calling the .invoke.observe statement above in a
function fired by the onComplete call back of Ajax.Request
So how do I find all the items of this class (class name of table cell
or P tag) and create a new InPlaceEditor on it.
I've got the following to get the classes of the P tags in the table
cells:
$('idResultsTableTBL').select('[class=clsPrgCdP]')
I found this but I don't think it's of help:
var codeCellArray = $A(['clsPrgCd']);
codeCellArray.each(function(aCell) {
alert(aCell);
});
Thoughts?
Thanks for your time,
Brent
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: adding InPlaceEditor to each table cell
Walter,
Thanks for the idea, I'm looking it over now. I'd still like to know
what the answer is to the above so I can learn from it in general or
if the TableKit doesn't work for me, if you or anyone else knows.
Thanks!
Brent
On Oct 27, 8:08 pm, Walter Lee Davis wa...@wdstudio.com wrote:
Have you looked at TableKit for this? It's remarkably easy to add to a
table, static or dynamic, all you do is ad the classname editable to
your table head above the column you want to edit.
Walter
On Oct 27, 2010, at 6:34 PM, BrentNicholas wrote:
Hi all,
I've been wrestling with this for a little bit now and figure it's
time to ask for help. I can't seem to find anything on the web.
I have a dynamicly generated table, I want to have an InPlaceEditor
instance on each table cell. From what I can tell you need to do a
'new' object on it for every cell so that the hover over highlight
shows, letting you know that the InPlaceEditor is connected to the
table cell.
Table Struct:
(The p tag was what I saw in examples and am using it since that's
what works now)
table id=idProgramsTBL
tr class=mainRow
td id=tdPrgCdp id=idPrgCdP#ProgramUID#
class=clsPrgCdP#ProgramCode#/p/td
I've tried the following, to no avail:
// this works but has the problem described below
$('idProgramsTBL').select('[class=clsPrgCdP]').invoke(observe,
click, function(event){ codeEditInPlace(this.id); });
// this works but is incorrect as it will create a new instance of the
InPlaceEditor on each 'click'
// thus you can get 1 to n editors in the cell for every click
// Also, this connects the editor after the click, so you end up
clicking twice
function codeEditInPlace(id)
{
new Ajax.InPlaceEditor(id ,'act_setProgramCode.cfm?ProgramUID='+id,
{
onFailure: placeError,
onComplete: refreshProgramCode,
rows: 2,
cols: 20
}
);
}
The problem is that the above is based on creating and attaching the
InPlaceEditor when the user clicks, vs after the Ajax.Request
completes. I am calling the .invoke.observe statement above in a
function fired by the onComplete call back of Ajax.Request
So how do I find all the items of this class (class name of table cell
or P tag) and create a new InPlaceEditor on it.
I've got the following to get the classes of the P tags in the table
cells:
$('idResultsTableTBL').select('[class=clsPrgCdP]')
I found this but I don't think it's of help:
var codeCellArray = $A(['clsPrgCd']);
codeCellArray.each(function(aCell) {
alert(aCell);
});
Thoughts?
Thanks for your time,
Brent
--
You received this message because you are subscribed to the Google
Groups Prototype script.aculo.us group.
To post to this group, send email to
prototype-scriptaculous@googlegroups.com
.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
.
For more options, visit this group
athttp://groups.google.com/group/prototype-scriptaculous?hl=en
.- Hide quoted text -
- Show quoted text -
--
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: adding InPlaceEditor to each table cell
Well, if you wanted to have a single IPE instance attached to all
fields in the table, you could probably do that too. The highlight
would be a simple JS/CSS trick like maybe this:
$('yourTableId').observe('mouseover',function(evt){
var elm;
if(elm = evt.findElement('td')){
this.select('td.highlight').invoke('removeClassName','highlight');
elm.addClassName('highlight'');
}
});
There's probably a ton of optimization to be done in there, but you
get the idea.
Then, you'd need to extend the IPE, and I haven't done that in the new
version yet (haven't needed to) so you'll need to hunt elsewhere for
that. All I know is that when Cristophe rewrote it, it was with the
stated objective of making it easier to extend. YMMV.
What you'll pass to your updated IPE is either the column,row of the
click or an explicit ID if that's how you've constructed this, so you
can get the correct data to be edited. Then you would maneuver the
editor over the top of the affected cell with clonePosition() or
something like that. The Ajax stuff would be unchanged, just need to
be sure that you pass back which ID to update and you're done.
Walter
On Oct 28, 2010, at 1:42 PM, BrentNicholas wrote:
Walter,
Thanks for the idea, I'm looking it over now. I'd still like to know
what the answer is to the above so I can learn from it in general or
if the TableKit doesn't work for me, if you or anyone else knows.
Thanks!
Brent
On Oct 27, 8:08 pm, Walter Lee Davis wa...@wdstudio.com wrote:
Have you looked at TableKit for this? It's remarkably easy to add
to a
table, static or dynamic, all you do is ad the classname editable to
your table head above the column you want to edit.
Walter
On Oct 27, 2010, at 6:34 PM, BrentNicholas wrote:
Hi all,
I've been wrestling with this for a little bit now and figure it's
time to ask for help. I can't seem to find anything on the web.
I have a dynamicly generated table, I want to have an InPlaceEditor
instance on each table cell. From what I can tell you need to do a
'new' object on it for every cell so that the hover over highlight
shows, letting you know that the InPlaceEditor is connected to the
table cell.
Table Struct:
(The p tag was what I saw in examples and am using it since that's
what works now)
table id=idProgramsTBL
tr class=mainRow
td id=tdPrgCdp id=idPrgCdP#ProgramUID#
class=clsPrgCdP#ProgramCode#/p/td
I've tried the following, to no avail:
// this works but has the problem described below
$('idProgramsTBL').select('[class=clsPrgCdP]').invoke(observe,
click, function(event){ codeEditInPlace(this.id); });
// this works but is incorrect as it will create a new instance of
the
InPlaceEditor on each 'click'
// thus you can get 1 to n editors in the cell for every click
// Also, this connects the editor after the click, so you end up
clicking twice
function codeEditInPlace(id)
{
new Ajax.InPlaceEditor(id ,'act_setProgramCode.cfm?
ProgramUID='+id,
{
onFailure: placeError,
onComplete: refreshProgramCode,
rows: 2,
cols: 20
}
);
}
The problem is that the above is based on creating and attaching the
InPlaceEditor when the user clicks, vs after the Ajax.Request
completes. I am calling the .invoke.observe statement above in a
function fired by the onComplete call back of Ajax.Request
So how do I find all the items of this class (class name of table
cell
or P tag) and create a new InPlaceEditor on it.
I've got the following to get the classes of the P tags in the table
cells:
$('idResultsTableTBL').select('[class=clsPrgCdP]')
I found this but I don't think it's of help:
var codeCellArray = $A(['clsPrgCd']);
codeCellArray.each(function(aCell) {
alert(aCell);
});
Thoughts?
Thanks for your time,
Brent
--
You received this message because you are subscribed to the Google
Groups Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
.
For more options, visit this group
athttp://groups.google.com/group/prototype-scriptaculous?hl=en
.- Hide quoted text -
- Show quoted text -
--
You received this message because you are subscribed to the Google
Groups Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
.
To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com
.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en
.
--
You received this message because you are subscribed to the Google Groups Prototype
script.aculo.us group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email
