jQWidgets Forums
jQuery UI Widgets › Forums › Lists › ComboBox › Wait for incoming data
This topic contains 3 replies, has 2 voices, and was last updated by bl4ckdr4g00n 10 years, 2 months ago.
-
AuthorWait for incoming data Posts
-
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
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.
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 IvanovjQWidgets Team
http://www.jqwidgets.comExcellent. Thank you very much ivailo
-
AuthorPosts
You must be logged in to reply to this topic.