jQuery UI Widgets Forums Dialogs and Notifications Window All the dropdowns disabled in window when isModal:true

This topic contains 6 replies, has 2 voices, and was last updated by  SJ 9 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • SJ
    Participant

    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


    Nadezhda
    Participant

    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,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    SJ
    Participant

    Thank you. its working now.


    SJ
    Participant

    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,
    SJ


    Nadezhda
    Participant

    Hi SJ,

    You can use ‘open’ event to achieve refreshing the jqxDropDownList data.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    SJ
    Participant

    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,
    SJ


    SJ
    Participant

    Hi
    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.
    Thanks

    addButton.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’);
    }
    });

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.