PDA

View Full Version : Can I use contenteditable in a grid cell?


hflipman
14 Jun 2012, 2:32 PM
Hi,

I'm trying to use the 'contenteditable' attribute inside a grid cell and it is not working. Using 'contenteditable' in a window works fine.

Here is my test page:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Edit</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.1.0-gpl/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window({
title : 'Edit in Window',
width : 350,
height : 350,
html : '<div contenteditable="true"><div>well?</div><div>can i edit this?</div></div>'
});


win.show();


function render(val) {
return '<div contenteditable="true">' + val + '</div>';
}


// create the Grid
var grid = new Ext.grid.GridPanel({
store : {
fields: ['id', 'name', 'email'],
data: [
{ 'id': '1', "name": 'Lisa', "email": "lisa@simpsons.com" },
{ 'id': '2', "name": 'Bart', "email": "bart@simpsons.com" },
{ 'id': '3', "name": 'Homer', "email": "home@simpsons.com" },
{ 'id': '4', "name": 'Marge', "email": "marge@simpsons.com" }
]
},
columns: [
{
id :'id',
header : 'ID',
dataIndex: 'id'
},
{
header : 'Name',
dataIndex: 'name'
},
{
{
header : 'Email',
renderer : render,
dataIndex: 'email'
}
],
height: 200,
width: 400
});


var gridwin = new Ext.Window({
title : 'Grid',
width : 400,
height : 200,
layout : 'fit',
items : [
grid
]
});


gridwin.show();
});
</script>
</head>
<body>
</body>
</html>



Clicking on the window allows me to edit the text. But clicking on the cell grid does not. Any ideas why?

As a background on why I'm looking at this. In my app, inside a grid cell will be a complex layer of divs with different markup based on the content coming from the store (this is all generated in the renderer).

And the user needs to be able to change the text inside of it while leaving the markup untouched. I've tried using the ExtJS HTML editor but it's kinda awkward and it behaves differently on different browsers.

Thanks.

Henk
hflipman
14 Jun 2012, 2:44 PM
Quick update.

The above was on Safari. On Firefox, I am able to edit. But only at the beginning of the div (i.e. the start of the email address).
scottmartin
15 Jun 2012, 7:23 PM
I see several reports of contenteditable having problems with webkit browsers.
I must say, I am curious as to what you are trying to achieve here?

Does the cellediting not provide what you need?
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.html

Regards,
Scott.
hflipman
17 Jun 2012, 7:19 AM
Thanks for your reply Scott.

To give you some background. Inside the cell grid I need to display to result of automatic speech recognition. And it is something like(simplified):



<div class="sentence">
<div class="word confidence_high">This</div>
<div class="word confidence_high">is</div>
<div class="word confidence_high">a</div>
<div class="word confidence_low">sentence</div>
</div>


The confidence level CSS class gets set by the columns renderer based some other data in the 'word' model. And it basically says how confidant we are the word was correctly recognized.

And then in CSS I have:



.confidence_low {
color: red;
}


So low-confidence words are marked as red, etc.

I want to allow the user to click on the cell and edit the words in place. So they can change the text but the div structure needs to remain after editing. So it should not turn into 1 blob of text.

I've tried using the ExtJS HTML editor but it behaves differently on different browsers. For instance, on FF/OSX it shows each word on a different line during editing).

Any suggestions on how to do this?

Thanks.

Henk
scottmartin
18 Jun 2012, 4:53 AM
Is there any chance of opening the cell into a window/form for editing instead of trying to manage the grid cells themselves? I believe this grid will not permit this to work as expected out of the box.

Scott.
hflipman
18 Jun 2012, 6:37 AM
I may indeed have to do that.

Do you have a code snippet that shows how to open a window with an html editor and the text from the grid cell?

Thanks.

Henk
scottmartin
18 Jun 2012, 7:06 AM
Have a look at:
http://www.djengineer.com/ExtJSExamples/PluginExamples/FormPanelEditor/FormPanelEditor.html

Scott.
hflipman
18 Jun 2012, 7:34 AM
Thanks for your help, Scott!