Combing link and combo column types

[ThomasDK]

Is there an easy way to combine the functionality of link and combo column types in a grid?

Ideally, the column should always be clickable (open link), with the drop down arrow always showing. Right now it only shows the drop down arrow after the combo field is clicked and the field goes into “edit mode” (not sure what the correct term is).

If this is not easily possible, is there a way to set properties on the grid field outside of “edit” mode and manually implement this?

I.e. currently I have code like:

myGrid.getColumnCombo(1).getInput().onclick = function () { … }
myGrid.getColumnCombo(1).getInput().className += " hyperlinkcombo";

But these only apply after clicking on the field first, which triggers the drop down too. So if user has another field active, it takes 2 clicks on the text in this column to actualy navigate to the link.

Ideally it should instead show as a link that the user can directly click on, and only if the user clicks on the drop down arrow should the combo box open for selection.

[sematik]

Unfortunately the only solution in your case is to create a custom column type combinying the select and a link.
Here you can find a tutorial about creating a custom column type:
docs.dhtmlx.com/grid__columns_ty … olumntypes

[eiwai]

Hi,

I am also trying to combine link and combo column type. Anywhere I can refer to? I tried to use custom excell but got error.

    function eXcell_jobDesc(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 (e) {
            if ((typeof (e) != "number") && (!e || e.toString()._dhx_trim() == "")) {
                this.setCValue(" ", c); return (this.cell._clearCell = true)
            }
            var c = e.split("^");
            if (c.length == 1) {
                c[1] = ""
            }
            else {
                if (c.length > 1) {
                    c[1] = "href='" + c[1] + "'";
                    if (c.length == 3)
                    { c[1] += " target='" + c[2] + "'" }
                    else { c[1] += " target='_blank'" }
                }
            }
            this.setCValue("<a " + c[1] + " onclick='(_isIE?event:arguments[0]).cancelBubble = true;'>" + c[0] + "</a>", c)
        }

        this.getValue = function () {
            if (this.cell.firstChild.getAttribute) {
                var c = this.cell.firstChild.getAttribute("target");
                return this.cell.firstChild.innerHTML + "^" + this.cell.firstChild.getAttribute("href") + (c ? ("^" + c) : "")
            } else {
                return ""
            }
        }

        this.edit = function () {

            if (!window.dhx_globalImgPath) {
                window.dhx_globalImgPath = this.grid.imgURL
            }

            this.val = this.getValue();

            var c = this.getText();
            if (this.cell._clearCell) { c = "" }
            this.cell.innerHTML = "";
            if (!this.cell._brval) {
                this.combo = (this.grid._realfake ? this.grid._fake : this.grid)._col_combos[this.cell._cellIndex]
            } else {
                this.combo = this.cell._brval
            }

            this.cell.appendChild(this.combo.DOMParent);
            this.combo.DOMParent.style.margin = "0";
            this.combo.DOMelem_input.focus();
            this.combo.setSize(this.cell.offsetWidth - 2);

            if (!this.combo._xml) {
                if (this.combo.getIndexByValue(this.cell.combo_value) != -1) {
                    this.combo.selectOption(this.combo.getIndexByValue(this.cell.combo_value))
                } else {
                    if (this.combo.getOptionByLabel(c)) {
                        this.combo.selectOption(this.combo.getIndexByValue(this.combo.getOptionByLabel(c).value))
                    }
                    else {
                        this.combo.setComboText(c)
                    }
                }
            }
            else {
                this.combo.setComboText(c)
            }
            this.combo.openSelect()
        };

        this.selectComboOption = function (e, c) {
            c.selectOption(c.getIndexByValue(c.getOptionByLabel(e).value))
        };

        this.detach = function () {
            var c = this.combo.getParent();
            if (c.parentNode == this.cell) { this.cell.removeChild(c) } else { return false } var e = this.cell.combo_value; this.combo._confirmSelect("blur");
            if (!this.combo.getComboText() || this.combo.getComboText().toString()._dhx_trim() == "") {
                this.setComboCValue("&nbsp;"); this.cell._clearCell = true
            } else {
                this.setComboCValue(this.combo.getComboText().replace(/\&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), this.combo.getActualValue());
                this.cell._clearCell = false
            } this.cell.combo_value = this.combo.getActualValue();
            this.combo.closeAll();
            this.grid._still_active = true;
            this.grid.setActive(1);
            return e != this.cell.combo_value
        }
    }

    eXcell_jobDesc.prototype = new eXcell;    // nests all other methods from base class