Is it possible to implement the dhtmlxeditor into the cells of the grid so that people can edit the words they wrote (i.e. underline a word or make it bold)? If yes, what do i have to do to make this possible?
I’ve wrote the following custom excell but it didn’t work:
function eXcell_celleditor(cell){
if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
eXcell_ed.call(this);
}
this.setValue=function(val){
this.setCValue("<div id='editorObj'></div>");
var editor;
function doOnLoad() {
editor = new dhtmlXEditor("editorObj");
}
}
this.getValue=function(){
if (this.cell._clearCell)
return "";
return this.cell.innerHTML.toString()._dhx_trim();
}
}
What do i have to change?
You should redefine this.edit function of cell object. Please find more information here docs.dhtmlx.com/doku.php?id=dhtm … le_excells
I have redefined the editor function but it still doesn’t work. The editor is not shown in grid. Here is my code:
[code] function eXcell_celleditor(cell){
if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
eXcell_ed.call(this);
}
this.setValue=function(val){
this.setCValue(val);
}
this.edit=function() {
this.val = this.getValue();
this.cell.innerHTML="
dhtmlx.image_path = “/editorimgs/”;
var editor;
var editorObject ={
parent:“editorObj”,
content:val
}
editor = new dhtmlXEditor(editorObject);
editor.init();
}
this.getValue=function(){
if (this.cell._clearCell)
return “”;
return this.cell.innerHTML.toString()._dhx_trim();
}
}[/code]
I don’t know what do i have to change either. Please help.
Could someone please help?
Well, i’ve tried a little bit with custom excell but it still doesn’t work.
Here is the code that i redefined so far:
[code] function eXcell_celleditor(cell){
if (cell){
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.setValue=function(val){
this.setCValue(val);
}
this.getValue=function(){
return this.cell.innerHTML;
}
this.edit=function() {
this.val = this.getValue();
this.cell.innerHTML="
dhtmlx.image_path = “editorimgs/”;
var editor;
editor = new dhtmlXEditor(“editorObject”);
editor.init();
}
this.detach=function(){
this.setCValue(this.cell.innerHTML);
}
}[/code]
One problem is that the images from the editor (mark bold/underline i.e.) are not being loaded. I used dhtmlx.image_path = “editorimgs/” (thats the folder where i placed the images) but the images are not being loaded?!
How can i get the value from the cell thats already in the cell into the editor to edit it?
How can i get back the edited value (i.e. an underlined word) into the cell of the grid?
PLEASE HELP!
I’m working in the same situation, here’s my code:
It isn’t finished yet but you can continue from here
I’ll update when i finish it
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script src="../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="../dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_grid.js"></script>
<link rel="stylesheet" type="text/css" href="../dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<script src="../dhtmlxLayout/codebase/dhtmlxcommon.js"></script>
<script src="../dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<link rel="stylesheet" type="text/css" href="../dhtmlxEditor/codebase/skins/dhtmlxeditor_dhx_skyblue.css">
<script src="../dhtmlxEditor/codebase/dhtmlxeditor.js"></script>
<link rel="stylesheet" type="text/css" href="../dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">
<script src="../dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
<script src="../dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script>
dhtmlx.skin = "dhx_skyblue";
</script>
</head>
<body>
<form>
<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
<div id="gridbox_sub" style="width:300px; height:150px; background-color:white;"></div>
<div><button onclick="(arguments[0]||window.event).cancelBubble=true; selectAndEdit(2,2)">Edit cell</button></div>
<!-- <div id="parentId" style="position: relative; top: 20px; left: 20px; width: 400px; height: 200px; aborder: #B5CDE4 1px solid;"></div> -->
</form>
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../dhtmlxGrid/codebase/imgs/");
mygrid.setHeader("Sales, Book Title, Author,Price,In Store,Shipping,Bestseller,Date of Publication,mytime");
mygrid.setInitWidths("50,150,200,80,80,80,80,200,200");
mygrid.setColAlign("right,left,left,right,center,left,center,center,center");
mygrid.setColTypes("dyn,ed,txt,price,ch,co,ra,ro,mytime");
mygrid.init();
mygrid.loadXML("grid_authors.xml");
mygrid.attachEvent("onRowSelect", unClick);
mygrid.attachEvent("onEditCell", function(stage,rId,cInd,nValue,oValue){
if(stage==2 && cInd==2) {
alert('Doy de alta')
}
});
function unClick(idRow, idCell){
switch (idCell) {
case 7:
selectAndEdit(idRow, 2);
break;
}
}
function selectAndEdit(row,col){
mygrid.selectCell(row-1,col);
mygrid.editCell();
}
function eXcell_mytime(cell){ //excell name is defined here
if (cell){ //default pattern, just copy it
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}
this.setValue=function(val){
this.setCValue(val);
}
this.getValue=function(){
return this.cell.innerHTML; // get value
}
this.edit=function(){
this.val = this.getValue(); //save current value
/*this.cell.innerHTML="<div style='top:200px;left:150px;position:fixed;border:1px black solid;width:350px;height:150px;'><textarea name='comments' cols='35' rows='5' style='background-color:#F7E177;'>Ingrese su mensaje aqui....</textarea><br></div>"; // editor's html*/
this.cell.innerHTML="<div id='parentId' style='position: fixed; top: 20px; left: 20px; width: 400px; height: 200px; aborder: #B5CDE4 1px solid;'></div>"; // editor's html
editor();
this.cell.firstChild.value=parseInt(val); //set the first part of data
if (val.indexOf("PM")!=-1) this.cell.childNodes[1].value="PM";
this.cell.childNodes[0].onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
this.cell.childNodes[1].onclick=function(e){ (e||event).cancelBubble=true; } //block onclick event
}
this.detach=function(){
this.setValue(this.cell.childNodes[0].value+" "+this.cell.childNodes[1].value); //set the new value
return this.val!=this.getValue(); // compare the new and the old values
}
}
eXcell_mytime.prototype = new eXcell; // nest all other methods from base class
var dhxLayout,
dhxEditor;
function editor() {
dhxLayout = new dhtmlXLayoutObject("parentId", "1C");
dhtmlx.image_path = "../dhtmlxEditor/codebase/imgs/";
dhxEditor = dhxLayout.cells("a").attachEditor();
dhxLayout.cells("a").setText("Enviar Post It");
}
</script>
<!--<script>var dhxLayout,dhxEditor;dhxLayout = new dhtmlXLayoutObject("parentId", "1C");dhxLayout.cells("a").setText("Enviar Post It");dhtmlx.image_path = "../dhtmlxEditor/codebase/imgs/";dhxEditor = dhxLayout.cells("a").attachEditor();</script> -->
</body>
</html>
the folder where i placed the images) but the images are not being loaded?!
Unfortunately the issue cannot be reconstructed.
You may try to place a folder with images inside codebase directory.
If issue still occurs for you - please provide a complete demo to reconstruct the issue
How can i get the value from the cell thats already in the cell into the editor to edit it?
You may try to use getValue() method to get the value from a cell
And setContent method to set needed string inside the editor
How can i get back the edited value (i.e. an underlined word) into the cell of the grid?
You may try to use getContent method to get the content of an editor
And setValue() method to set the value to a cell
getContent:
docs.dhtmlx.com/doku.php?id=dhtm … getcontent
setContent:
docs.dhtmlx.com/doku.php?id=dhtm … setcontent