PDA

View Full Version : Does anyone familiar with Scand's htmlXGrid comtrols?



xnpeng
02-28-2006, 07:43 AM
there is a powerful grid control in this site for free download (open source?):
http://www.scbr.com/docs/products/dhtmlxGrid/index.shtml

I am interesting in it's eXcell control, but don't know to fullfil a multiple select option requirement. I need a cell to handle a multiselect option like:


<select name="myselect" multiple size=3>
<option value="0">NONE
<option value="1">AND
<option value="2">OR
<option value="3">XOR
</select>


the data grid is set as :


NodeGrid = new dhtmlXGridObject('NodeGridDIV');
NodeGrid.setImagePath("imgs/");
NodeGrid.setHeader("NodeId,NodeName,NodeType");
NodeGrid.setInitWidths("100,100,100");
NodeGrid.setColAlign("left,left,center");
NodeGrid.setColTypes("ed,ed,coro");
NodeGrid.setColSorting("str,str,str");
NodeGrid.setColumnColor("white,#d5f1ff,#d5f1ff");
var combobox = NodeGrid.getCombo(2);
combobox.put("0", "NONE")
combobox.put("1", "AND")
combobox.put("2", "OR")
combobox.put("3", "XOR")

NodeGrid.init();
NodeGrid.loadXML("NodeData.xml");


my idea is when I edit the 3rd column(Combo box) of the grid,it pulldown an area for multi select and return the values.

seems it can not do this?

thanks for any help.

xnpeng
02-28-2006, 08:48 AM
This problem can be state with another consideration:

How to define a "select" edit type? xGrid control provide a set of predefined edit types such as "ed"--common text edit area, "ch"--checkbox,"ro"--readonly area,"ra"--radiobutton,and "co"--combobox area. the "co" type is like a single select tag, what I need is a multiple select tag. That is common sense I think.
So ,can anyone know how to define a new edit type--eXcell_select?

xnpeng
03-02-2006, 01:31 AM
add the following code to dhtmlXGridCell.js:


function eXcell_xco(cell) {
try {
this.cell = cell;
this.grid = this.cell.parentNode.grid;
this.xcombo = this.grid.getXCombo(this.cell.cellIndex);
this.editable = true
} catch(er) {
}
this.edit = function() {
this.val = this.getValue();
this.text = this.getText();
var arPos = this.grid.getPosition(this.cell)

this.obj = document.createElement("TEXTAREA");
this.obj.readOnly = false;
var objCssText = "width:100%;height:" + (this.cell.offsetHeight - 4) + ";border:0px;padding:0px;margin:0px;font:12px arial;overflow:hidden";
(this.obj.runtimeStyle || this.obj.style).cssText = objCssText;
this.obj.wrap = "soft";
this.obj.style.textAlign = this.cell.align;
this.obj.onclick = function(e) {
(e || event).cancelBubble = true
}
this.obj.value = this.text

this.listBox = document.createElement("SPAN");
var listCssText = "width:" + this.cell.offsetWidth + ";height:100;overflow-y:scroll;position:absolute;border:1px solid;border-color:black silver silver black;background-color:white;";
(this.listBox.runtimeStyle || this.listBox.style).cssText = listCssText
this.listBox.style.left = arPos[0] - this.grid.objBox.scrollLeft;
this.listBox.style.top = arPos[1] + this.cell.offsetHeight - this.grid.objBox.scrollTop;

this.list = document.createElement("TABLE");
this.list.editor_obj = this;
this.list.cellSpacing = "0px";
this.list.cellPadding = "1px";
(this.list.runtimeStyle || this.list.style).cssText = "font-family:arial;font-size:12px;width:100%;table-layout:fixed;cursor:default;";

this.list.onclick = function(e) {
var ev = e || window.event;
var cell = ev.target || ev.srcElement
var tbl = cell.parentNode.parentNode.parentNode;
var oVal = tbl.editor_obj.getValue();
if (oVal == null) oVal = "";
var arrOld = oVal.split(",");
if (cell.xcombo_val == null)cell.xcombo_val = "";
var arrNew = cell.innerHTML.split(",");
for (var j = 0; j < arrNew.length; j++) {
var exist = false;
for (var i = 0; i < arrOld.length; i++) {
if (arrNew[j] == arrOld[i]) {
exist = true;
break;
}
}
if (!exist) {
if (oVal == "") oVal = arrNew[j];
else oVal += "," + arrNew[j];
}
}
tbl.editor_obj.setValue(oVal);
tbl.editor_obj.detach();
}
var xcomboKeys = this.xcombo.getKeys();
var fl = false
for (var i = 0; i < xcomboKeys.length; i++) {
var row = this.list.insertRow(i);
var cell = row.insertCell(0);
cell.style.borderBottom = "1px solid silver"
var val = this.xcombo.get(xcomboKeys[i])
cell.xcombo_val = xcomboKeys[i];
cell.innerHTML = val;

if (xcomboKeys[i] == this.val) {
(cell.runtimeStyle || cell.style).cssText = "color:white;background-color:navy";
fl = true;
}
}
if (fl == false) {
var cell = this.list.insertRow(0).insertCell(0);
cell.xcombo_val = this.val;
cell.innerHTML = this.text;
(cell.runtimeStyle || cell.style).cssText = "color:white;background-color:navy";
}

document.body.appendChild(this.listBox)
this.listBox.appendChild(this.list);

if (this.editable) {
this.cell.innerHTML = "";
this.cell.appendChild(this.obj);
this.obj.focus()
}
}
this.setValue = function(val) {
if (val.toString().trim() == "")
val = null
var text = this.grid.getXCombo(this.cell.cellIndex).get(val) || val;
this.cell.innerHTML = text;
this.cell.xcombo_value = val;
}
this.getValue = function() {
return this.cell.xcombo_value;
}
this.getText = function() {
return this.cell.innerHTML;
}
this.detach = function() {
if (this.obj.parentNode != null) {
if (this.obj.value.trim() != this.text) {
this.setValue(this.obj.value)
} else {
this.setValue(this.val)
}
}

if (typeof(this.grid.onEditCell) == "string")
eval(this.grid.onEditCell + "(2,'" + this.cell.parentNode.idd + "'," + this.cell.cellIndex + ");")
else
this.grid.onEditCell(2, this.cell.parentNode.idd, this.cell.cellIndex)

if (this.listBox.offsetParent != null)
this.listBox.removeNode(true)
return this.val != this.getValue();
}
}
eXcell_xco.prototype = new eXcell;


and set column type: mygrid.setColTypes("xco") to the cell, you will get a pulldown box, when click on one item,the value will be appended to the cell,seperated by comas, each click one item.