Is there anyway to close a JQX Multi-column Drop down when opening a JQUI dialogue?

Question

I am using JQ Widgets multicolumn dropdowns and JQ UI Dialogues for new account creation when the user selects new from the dropdown. The problem is that when the dialogue is opened, the dropdown does not close and I have tried .close() methods and all I get from that is an invalid method call error.

Here is a screen shot:

Here is my code:

$("#divNewAccount").dialog({
 autoOpen: false,
 modal: true,
 title: "New Account",
 width: 600,
 buttons: {
  Ok: function () {
   // TODO: Add logic and code to add record to database and autopopulate #jqxAccountDropdown AND select record value just updated
   $(this).dialog("close");
  },
  Cancel: function () {
   $(this).dialog("close");
  }
 }
});

// Start Multicolum for Accounts
// prepare the data
var data = new Array();

var AccountIndex_Default = [""];
var AccountName_Default = ["New"];
var AccountType_Default = [""];

if(@(Html.Raw(JsonConvert.SerializeObject(ViewBag.ServiceID))) !== null){
 var AccountIndex_FromService = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountID)))];
 var AccountName_FromService = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountName)))];
 var AccountType_FromService = [@(Html.Raw(JsonConvert.SerializeObject(ViewBag.AccountType)))];

 var AccountIndex = ServiceIndex_Default.concat(AccountIndex_FromService);
 var AccountName = ServiceName_Default.concat(AccountName_FromService);
 var AccountType = ServiceNotes_Default.concat(AccountType_FromService);
} else {
 var AccountIndex = AccountIndex_Default;
 var AccountName = AccountName_Default;
 var AccountType = AccountType_Default;
}

for (var i = 0; i < AccountIndex.length; i++) {
 var row = {};
 row["accountindex"] = AccountIndex[i];
 row["accountname"] = AccountName[i];
 row["accounttype"] = AccountType[i];
 data[i] = row;
}
var source = { localdata: data, datatype: "array" };
$("#jqxAccountDropdownButton").jqxDropDownButton({ width: 150, height: 25 });
$("#jqxAccountDropdownGrid").jqxGrid({
 width: 350,
 height: 200,
 source: source,
 theme: 'energyblue',
 columns: [
   { text: '', datafield: 'accountindex', width: 0 },
   { text: 'Account Name', datafield: 'accountname', width: 200 },
   { text: 'Account Type', datafield: 'accounttype', width: 100 }
 ]
});

$("#jqxAccountDropdownGrid").bind('rowselect', function (event) {
 var args = event.args;
 var row = $("#jqxAccountDropdownGrid").jqxGrid('getrowdata', args.rowindex);
 var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' +
  row["accountname"] + '</div>';
 $("#jqxAccountDropdownButton").jqxDropDownButton('setContent', dropDownContent);
 if (row["accountname"].toString().toLowerCase() === "new") {
  $("#divNewAccount").dialog("open");
 }
});
// End Multicolume for Accounts

<script src="/Content/themes/jquery-ui-1.11.4/jquery-ui.js"></script>
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet" />
<link href="/Content/themes/jquery-ui-1.11.4/jquery-ui.theme.css" rel="stylesheet" />
<link href="/Content/ScrollingTables.css" rel="stylesheet" />
<link href="/Content/Multiselect.css" rel="stylesheet" />
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="~/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="~/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="~/jqwidgets/jqxdropdownbutton.js"></script>

<div id="jqxAccountDropdownButton">
 <div id='jqxAccountDropdownWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  <div id="jqxAccountDropdownGrid"></div>
 </div>
</div>

So given the above information, is it possible to close this list when the dialogue opens?

Answer 1

Found the answer...

use $("#jqxAccountDropdownButton").jqxDropDownButton('close');