Does anyone familiar with Scand's htmlXGrid comtrols?

[xnpeng]

there is a powerful grid control in this site for free download (open source?):
http://www.scbr.com/docs/products/dh...id/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]

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]

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.