How to assign a devextreme widget under another widget

Sometimes we need to add a widget under another widget. In this post, we will cover how to add a dropdown, TextBox, or buttons under the dropdown widget.

See in the below screenshot – here File Size is a drop-down, this is implemented under the onToolbarPreparing in the devextreme datagrid and after clicking this dropdown a popup will open that contains selectBox, TextBox, and Buttons.


Here’s the code to achieve this:
onToolbarPreparing: function (e) {
var dataGrid = e.component;
ElementAttr: { "style", "position:fixed; top: 200; left: 100;" };
e.toolbarOptions.items.unshift(
{
location: "before",
widget: "dxDropDownBox",
options: {
elementAttr: { id: "dropDownFileSizeWrapper", class: "" },
visible: false,
placeholder: "File Size",
selectionMode: "multiple",
position: {
my: 'center',
at: 'center',
of: '.dx-toolbar-after'
},
width: 208,
height: 30,
onOpened: function (e) {
e.component.option('inputAttr', { readonly: true });
$("#fileSizeMainDivBox").parent().parent().addClass('fileSizePopupresize');
},
contentTemplate: function (e) {
var fileSizeDropdownContainer = $("<div id='fileSizeMainDivBox'>File Size</div>");
var lessThenGterThenContainer = $("<div id='compareDivId' class='compareDivclass'></div>");
var lessOrGreaterThen = lessthenGreaterThenSelectBox();
lessThenGterThenContainer.append(lessOrGreaterThen);
var capacityEditorBox = $("<div id='' class='compareDivclass'></div>");
var textBox = fileSizeTextBox();
capacityEditorBox.append(textBox);
var sizeFormatDiv = $("<div id='' class='compareDivclass'></div>");
var sizeFormatBox = selectSizeFormatBox();
sizeFormatDiv.append(sizeFormatBox);
lessThenGterThenContainer.append($('<div>').dxButton({
text: 'Clear',
elementAttr: { id: "fileSizeDateResetButton" },
hoverStateEnabled: false, focusStateEnabled: false,
activeStateEnabled: false,
onClick: function () {
}
}));
fileSizeDropdownContainer.append(lessThenGterThenContainer).append(capacityEditorBox);
fileSizeDropdownContainer.append(capacityEditorBox).append(sizeFormatDiv);
fileSizeDropdownContainer.append($("<div>").dxButton({
text: 'Apply',
elementAttr: { id: "fileSizeApplyButton", class: "fileSizeApplyFooterButton" },
hoverStateEnabled: false, focusStateEnabled: false,
activeStateEnabled: false,
onClick: function () {
}
}));
fileSizeDropdownContainer.append($("<div>").dxButton({
text: 'Cancel',
elementAttr: { id: "fileSizeFooterCancelButton", class: "fileSizeFooterButton" },
hoverStateEnabled: false, focusStateEnabled: false,
activeStateEnabled: false,
onClick: function () {
$("#dropDownFileSizeWrapper").dxDropDownBox('instance').close();
}
}));
return fileSizeDropdownContainer;
}
}
}, ); },
Function
function lessthenGreaterThenSelectBox() {
var compareValue = ["Greater Than", "Less Than"];
return $('<div id="compareSelectBox">').dxSelectBox({
items: compareValue,
height: 30,
value: compareValue[0] });
}
function fileSizeTextBox() {
return $('<div id="sizeEditorBox" style="margin-right:5px;">').dxTextBox({
value: 0,
height: 30,
width: 50,
onKeyDown: function (e) {
var currentValue = e.component.option('text');
var decimalPointIndex = currentValue.toString().indexOf('.');
var event = e.event,
charCode = event.key || String.fromCharCode(event.which);
let isCharDigit = /^[0-9]$/.test(charCode);
if (!isCharDigit) {
if (charCode == ".") {
if (decimalPointIndex !== -1) {
event.preventDefault();
}
}
else if (charCode.toLowerCase() === "backspace" || charCode === "Delete" || charCode == "F12" || charCode == "Tab" || charCode == "Enter" || charCode == "Escape") {
// return true;
}
else {
event.preventDefault();
}
}
}
});
}
function selectSizeFormatBox() {
var fileSizeFormatData = ['KB', 'MB', 'GB'];
return $('<div id="sizeFormatSelectBox">').dxSelectBox({
items: fileSizeFormatData,
value: fileSizeFormatData[0],
height: 30,
width: 70,
});
}