How to show a dojo dgrid select in another dgrid cell

Question

I have a Dgrid that shows some data, say DataDgrid. I'd like to add a select control based on another Dgrid, say SelectDgrid, inside one of the cells in the main DataDgrid.

To add the select I am following this example: http://dojofoundation.org/packages/dgrid/tutorials/drop_down/

I have prepared a JSFiddle that shows that it works: http://jsfiddle.net/amiramix/qqezJ/

Now, when I try to add the select it shows inside the table cell instead of floating over the main DataGrid. Please check this JSFiddle (click Edit to add the select to the main DataGrid): http://jsfiddle.net/amiramix/qqezJ/5/

I guess its down to some CSS not being set properly. I tried to fiddle with z-index but without any results. Any help would be greatly appreciated.

Adding the code below to dismiss stackoverflow's warnings:

HTML:

<button id="editButton" type="button">Edit</button>
<div id="grid"></div>

CSS:

#grid {
    line-height: 30px;
}

.mySelect {
    border: 1px solid #b5bcc7;
    background-color: #ffffff;

    height: 17px;

    /* Make this position: relative so our arrow is positioned within */
    position: relative;
    padding: 0;
}
.mySelect .label {
    line-height: 17px;
    vertical-align: middle;
}
.mySelect .arrow {
    /* Position the arrow on the right-hand side */
    position: absolute;
    top: 0;
    right: 0;

    /* Use claro's arrow image */
    background-image: url("https://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dijit/themes/claro/form/images/commonFormArrows.png");
    background-position: -35px 70%;
    background-repeat: no-repeat;

    /* 16x16 with a white border and a gray background */
    width: 16px;
    height: 16px;
    border: 1px solid #ffffff;
    border-top: none;
    background-color: #efefef;
}

.mySelect .dgrid {
    position: absolute;
    top: 17px;
    left: -1px;
    width: 100%;
    display: none;
}
.mySelect .opened {
    display: block;
}

JavaScript:

require([
    "dojo/_base/declare",
    "dojo/on",
    "dgrid/OnDemandList",
    "dgrid/OnDemandGrid",
    "dgrid/Selection",
    "dgrid/Keyboard",
    "dojo/store/Memory",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/dom-class",
    "put-selector/put",
    "dojo/domReady!"
    ], function(declare, on, List, OnDemandGrid, Selection, Keyboard, Memory, dom, domConstruct, domClass, put) {

    var store = new Memory({
        identifier: "id",
        data: [
            {
            id: 0,
            name: "One",
            color: "blue",
            value: 1},
        {
            id: 1,
            name: "Two",
            color: "red",
            value: 2},
        {
            id: 2,
            name: "Three",
            color: "green",
            value: 3},
        {
            id: 3,
            name: "Four",
            color: "orange",
            value: 4}
        ]
    });

    var dataStore = new Memory({
        identifier: "id",
        data: [
            {
            id: 0,
            name: "OneOne",
            value: "OneTwo"},
        {
            id: 1,
            name: "TwoOne",
            value: "TwoTwo"}
        ]
    });

    var DropDown = declare([List, Selection, Keyboard]);
    var Grid = declare([OnDemandGrid, Keyboard]);

    var newGrid = new Grid({
        store: dataStore,
        columns: {
            name: {
                label: "Name"
            },
            value: {
                label: "Value",
                renderCell: function(object, value, td, options) {
                    put(td, "div#id-" + object.id, object.name);
                }
            }
        }
    }, "grid");

    on(dom.byId("editButton"), "click", function(e) {

        var ref = dom.byId("id-0");
        ref.innerHTML = "";
        put(ref, "#select.mySelect");
        put(ref, "div.label.button", "choose...");
        put(ref, "div.arrow.button");

        var dropDown = new DropDown({
            selectionMode: "single",
            store: store,
            renderRow: function(item) {
                return domConstruct.create("div", {
                    innerHTML: item.name,
                    style: {
                        color: item.color
                    }
                });
            }
        });

        domConstruct.place(dropDown.domNode, "select");
        dropDown.startup();

        var open = false;
        on(dom.byId("select"), ".button:click", function(e) {
            open = !open;
            domClass[open ? "add" : "remove"](dropDown.domNode, "opened");
        });
    });

});

score 0 · Answer 1 · answered Nov 14 '13 at 08:42

0

You could use the editor plugin with a FilteringSelect. See: https://github.com/SitePen/dgrid/wiki/editor

answered Nov 14 '13 at 08:42

ps202

95
2
11

How would that suppose to help with solving the problem I outlined in the question? – Greg Nov 14 '13 at 10:06
@Amiramix: I would test it with firebug to see the css applied to your grid. Do you have `body class="claro"` in your `html`? – ps202 Nov 14 '13 at 15:01
Sly, if you read my question, I've actually included a link to a working example. I believe all information you may need if you wanted to investigate and answer the question should be already there. Thanks. – Greg Nov 15 '13 at 11:24

How to show a dojo dgrid select in another dgrid cell

1 Answers1