jQuery UI Widgets › Forums › Dialogs and Notifications › Window › All the dropdowns disabled in window when isModal:true
Tagged: DropDownList, isModal, jqxDropDownList, jqxwindow, window
This topic contains 6 replies, has 2 voices, and was last updated by SJ 10 years, 2 months ago.
-
Author
-
Hi
When I use this statement “isModal: true” all the dropdowns have became disabled/not expanding otherwise its working fine/enabled/expandable.
how to make the dropdown enabled in case of “isModal: true” ?$(“#teamPermwindow”).jqxWindow({ maxHeight: 350, maxWidth: 600, minHeight: 30, minWidth: 250,height: 250, width: 500, theme: ‘summer’, resizable:false, isModal: false, autoOpen: false });
addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#userIDText”).val(selectedUserID);var permissionlist = [“Read”, “Write”, “No Access”];
$(“#permissionDropDown”).jqxDropDownList({ source: permissionlist, selectedIndex: 0, autoDropDownHeight: true});var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl,
async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});$(“#teamPermwindow”).jqxWindow(‘open’);
}
});<div id=’teamPermwindow’ style=”font-size: 13px; font-family: Verdana;”>
<div>Add Team Permission</div>
<div style=”overflow: hidden;”>
<table>
<tr>
<td>User Id: <input type=”text” id=”userIDText” readonly=”true” disabled=”disabled”/> </td>
</tr>
<tr>
<td>Section: <div id=’sectionDropDown’> </div></td>
<td>Permission: <div id=’permissionDropDown’> </div></td>
</tr><tr><td> <input type=”button” value=”Save” id=”saveTeamPermBtn” />
<input type=”button” value=”Cancel” id=”cancelTeamPermBtn” /></td></tr>
</table>
</div>
</div>Thank you in advance.
SJ
Hello SJ,
Here is an example which shows how to set isModal property and initialize the jqxWindow’s content.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = [ "Affogato", "Americano", "Bicerin", "Breve", "Café Bombón", "Café au lait", "Caffé Corretto", "Café Crema", "Caffé Latte", ]; $("#teamPermwindow").jqxWindow({ maxHeight: 350, maxWidth: 600, minHeight: 30, minWidth: 250, height: 250, width: 500, theme: "summer", resizable: false, isModal: true, autoOpen: false, initContent: function () { // Create a jqxDropDownList $("#sectionDropDown").jqxDropDownList({ source: source, selectedIndex: 0, width: '200px', height: '25px' }); } }); $('#teamPermwindow').jqxWindow('open'); }); </script> </head> <body> <div id='teamPermwindow'> <div>Header</div> <div> <div id='sectionDropDown'></div> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thank you. its working now.
Hi,
Looks like it solved my modal problem but generate another issue. Now my dynamic dropDown content is not executing. First time the sectionDropDown is getting the data from the backend or populating correctly but next time is not calling to the server. ie. getSectionName() is not executing or not getting the data it shows the old information.
I can see initContent() initialize first time, is there any way to refresh the dropdown list or call again and get the fresh records from the backend.Thank you in advance.
$(“#teamPermwindow”).jqxWindow({ maxHeight: 350, maxWidth: 600, minHeight: 30, minWidth: 250,height: 250, width: 500, theme: ‘summer’, resizable:false, isModal: true, autoOpen: false,
initContent: function () {
var permissionlist = [“Read”, “Write”, “No Access”];
$(“#permissionDropDown”).jqxDropDownList({ source: permissionlist, selectedIndex: 0, autoDropDownHeight: true});var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});}
});Thanks,
SJHi SJ,
You can use ‘open’ event to achieve refreshing the jqxDropDownList data.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Thanks for replying. I added the coded in “open” event as you suggested, its calling the database everytime when the dropdown expanded or open (as event suggested).I don’t want to call the database every time , it makes the event slow and not able to select the value from the dropdown or may be I am doing something wrong in the below code. Could you please have a look and help me to get the correct value in dropdown list from the database, not to call everytime the database.
addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#userIDText”).val(selectedUserID);
$(‘#sectionDropDown’).on(‘open’, function (event) {var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});
});$(“#teamPermwindow”).jqxWindow(‘open’);
}
});Thanks,
SJHi
I have added a boolean variable to check if the dropdownlisted is loaded or not. So this way I have achieved the thing I want, but not sure is that a correct way. Please let me know, if there is any other way. Thank you for your help.
ThanksaddButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#userIDText”).val(selectedUserID);
var isDropdownLoaded=false;
$(‘#sectionDropDown’).on(‘open’, function (event) {
if(!isDropdownLoaded){
var sectionDropdownUrl=”getSectionName?userId=”+selectedUserID;
var source =
{
datatype: “json”,
cache:false,
datafields: [
{ name: ‘reportNumber’, map : ‘reportPK>reportNumber’,type: ‘string’ }
],
url: sectionDropdownUrl//,
//async: false
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#sectionDropDown”).jqxDropDownList({ source: dataAdapter, selectedIndex: 0, autoDropDownHeight: true, displayMember: “reportNumber”, valueMember: “reportNumber”});
isDropdownLoaded=true;
}
});$(“#teamPermwindow”).jqxWindow(‘open’);
}
}); -
AuthorPosts
You must be logged in to reply to this topic.