How to show a dojo dgrid select in another dgrid cell

[jordy-jk]

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:\[code\]<button id="editButton" type="button">Edit</button><div id="grid"></div>\[/code\]CSS:\[code\]#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;}\[/code\]JavaScript:\[code\]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"); }); });});\[/code\]