jQWidgets Forums

jQuery UI Widgets Forums Lists ComboBox Wait for incoming data

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  bl4ckdr4g00n 10 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Wait for incoming data #70030

    bl4ckdr4g00n
    Participant

    Hi,
    I have a jqxGrid, and there is a column where each cell of the column is a combobox.
    The data of those combo boxes is fetched from a web service. The fetch command happens at the time when the combobox is clicked.

    Is there anyway that when we click a combo box, a dropdown messeage “Loading…” appears in the dropdown list… and when the data from the web service arrives, the dropdown list content finally will be populated with the new data?

    Thank you very much 🙂

    Wait for incoming data #70031

    bl4ckdr4g00n
    Participant

    Or just simple like this
    When I click a combo box, it will fully open when the data arrives.

    PS: the data source of each combobox is from an array. The content of the array will be available (not null or empty) when the data from the webservice arrives.

    Wait for incoming data #70064

    ivailo
    Participant

    Right now we don’t have that kind of feauture, but we can give you acceptable solution.

    You can try this work around:
    Set a hiddein div (display:none) with loading gif for image.
    When you select some ComboBox, the div goes visible, also with absolute position in top of the loading ComboBox (higher zIndex). It hides when the data is loaded. Then stays not visible and waits until next changes.

    Here is an example.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The ComboBox editor associated to the column is populated from the foreign data source.</title>
        <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var countries = [
                     { value: "AF", label: "Afghanistan" },
                     { value: "AL", label: "Albania" },
                     { value: "DZ", label: "Algeria" },
                     { value: "AR", label: "Argentina" },
                     { value: "AM", label: "Armenia" },
                     { value: "AU", label: "Australia" },
                     { value: "AT", label: "Austria" },
                     { value: "AZ", label: "Azerbaijan" },
                     { value: "BS", label: "Bahamas" },
                     { value: "BH", label: "Bahrain" },
                     { value: "BD", label: "Bangladesh" },
                     { value: "BB", label: "Barbados" },
                     { value: "BY", label: "Belarus" },
                     { value: "BE", label: "Belgium" },
                     { value: "BZ", label: "Belize" },
                     { value: "BJ", label: "Benin" },
                     { value: "BM", label: "Bermuda" },
                     { value: "BR", label: "Brazil" },
                     { value: "BN", label: "Brunei" },
                     { value: "BG", label: "Bulgaria" },
                     { value: "CM", label: "Cameroon" },
                     { value: "CA", label: "Canada" },
                     { value: "CL", label: "Chile" },
                     { value: "CN", label: "China" },
                     { value: "CO", label: "Columbia" },
                     { value: "CR", label: "Costa Rica" },
                     { value: "HR", label: "Croatia (Hrvatska)" },
                     { value: "CU", label: "Cuba" },
                     { value: "CY", label: "Cyprus" },
                     { value: "CZ", label: "Czech Republic" },
                     { value: "DK", label: "Denmark" },
                     { value: "TP", label: "East Timor" },
                     { value: "EC", label: "Ecuador" },
                     { value: "EG", label: "Egypt" },
                     { value: "ER", label: "Eritrea" },
                     { value: "EE", label: "Estonia" },
                     { value: "ET", label: "Ethiopia" },
                     { value: "FI", label: "Finland" },
                     { value: "FR", label: "France" },
                     { value: "DE", label: "Germany" },
                     { value: "GR", label: "Greece" },
                     { value: "HK", label: "Hong Kong" },
                     { value: "HU", label: "Hungary" },
                     { value: "IS", label: "Iceland" },
                     { value: "IN", label: "India" },
                     { value: "ID", label: "Indonesia" },
                     { value: "IR", label: "Iran" },
                     { value: "IQ", label: "Iraq" },
                     { value: "IE", label: "Ireland" },
                     { value: "IL", label: "Israel" },
                     { value: "IT", label: "Italy" },
                     { value: "JM", label: "Jamaica" },
                     { value: "JP", label: "Japan" },
                     { value: "MX", label: "Mexico" },
                     { value: "MC", label: "Monaco" },
                     { value: "MA", label: "Morocco" },
                     { value: "NL", label: "Netherlands" },
                     { value: "NZ", label: "New Zealand" },
                     { value: "NE", label: "Niger" },
                     { value: "NG", label: "Nigeria" },
                     { value: "KP", label: "North Korea" },
                     { value: "NO", label: "Norway" },
                     { value: "PA", label: "Panama" },
                     { value: "PE", label: "Peru" },
                     { value: "PH", label: "Philippines" },
                     { value: "PL", label: "Poland" },
                     { value: "PT", label: "Portugal" },
                     { value: "RO", label: "Romania" },
                     { value: "RU", label: "Russia" },
                     { value: "SA", label: "Saudi Arabia" },
                     { value: "SK", label: "Slovak Republic" },
                     { value: "SI", label: "Slovenia" },
                     { value: "ZA", label: "South Africa" },
                     { value: "KR", label: "South Korea" },
                     { value: "ES", label: "Spain" },
                     { value: "SE", label: "Sweden" },
                     { value: "CH", label: "Switzerland" },
                     { value: "TN", label: "Tunisia" },
                     { value: "TR", label: "Turkey" },
                     { value: "UA", label: "Ukraine" },
                     { value: "AE", label: "United Arab Emirates" },
                     { value: "UK", label: "United Kingdom" },
                     { value: "US", label: "United States" }
                ];
                var countriesSource =
                {
                    datatype: "array",
                    datafields: [
                        { name: 'label', type: 'string' },
                        { name: 'value', type: 'string' }
                    ],
                    localdata: countries
                };
                var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                    autoBind: true
                });
                // prepare the data
                var gridSource =
                {
                    datatype: "array",
                    localdata:
                    [
                        { countryCode: "UK" },
                        { countryCode: "US" },
                        { countryCode: "DE" },
                        { countryCode: "FR" },
                        { countryCode: "IN" },
                        { countryCode: "HK" }
                    ],
                    datafields: [
                        // name - determines the field's name.
                        // value - the field's value in the data source.
                        // values - specifies the field's values.
                        // values.source - specifies the foreign source. The expected value is an array.
                        // values.value - specifies the field's value in the foreign source.
                        // values.name - specifies the field's name in the foreign source.
                        // When the adapter is loaded, each record will have a field called "Country". The "Country" for each record comes from the countriesAdapter where the record's "countryCode" from gridAdapter matches to the "value" from countriesAdapter.
                        { name: 'Country', value: 'countryCode', values: { source: countriesAdapter.records, value: 'value', name: 'label' } },
                        { name: 'countryCode', type: 'string' }
                    ]
                };
                var gridAdapter = new $.jqx.dataAdapter(gridSource);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 600,
                    source: gridAdapter,
                    selectionmode: 'singlecell',
                    autoheight: true,
                    editable: true,
                    columns: [
                        {
                            text: 'Country', datafield: 'countryCode', displayfield: 'Country', columntype: 'combobox', 
                            createeditor: function (row, value, editor) {
    
                              var offset = $(editor).offset();
                              $("#ajaxLoader").show();
                              $('#ajaxLoader').css({
                                  position: 'absolute',
                                  zIndex: 8888888,
                                  top: offset.top+'px',
                                  left: offset.left+'px'
                              });
    
                              
    
                              editor.jqxComboBox({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' });
    
                              $(editor).on('bindingComplete', function (event) {
                                  $('#ajaxLoader').css({
                                      zIndex: -8888888
                                  });
                              });
                            }
                        }
                    ]
                });
    
                $("#jqxgrid").on('cellselect', function (event) {
       
    
                    var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                    var value = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                    var displayValue = $("#jqxgrid").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);
    
                    $("#eventLog").html("<div>Selected Cell<br/>Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue + "</div>");
                });
                $("#jqxgrid").on('cellendedit', function (event) {
                    var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
                    if (column.displayfield != column.datafield) {
                        $("#eventLog").html("<div>Cell Edited:<br/>Index: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value.value + ", Label: " + event.args.value.label
                            + "<br/>Old Value: " + event.args.oldvalue.value + ", Old Label: " + event.args.oldvalue.label + "</div>"
                            );
                    }
                    else {
                        $("#eventLog").html("<div>Cell Edited:<br/>Row: " + event.args.rowindex + ", Column: " + column.text + "<br/>Value: " + event.args.value
                            + "<br/>Old Value: " + event.args.oldvalue + "</div>"
                            );
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
            <div style="font-size: 13px; margin-top: 20px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;" id="eventLog"></div>
    
            <div id="ajaxLoader" style="display: none; z-index:'8888888'; background-color: white; width:200px; margin-top:3px; margin-left: 3px;">
                <img height="15" width="15" src="http://images.all-digitall.com/pages/General/loading.gif" />
            </div>
    
          </div>
    </body>
    </html>

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    Wait for incoming data #70079

    bl4ckdr4g00n
    Participant

    Excellent. Thank you very much ivailo 🙂

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

You must be logged in to reply to this topic.