jQuery UI Widgets › Forums › Grid › jqxGrid, knockout and dropDown
Tagged: DropDownList, grid, jqxDropDownList, jqxgrid, Knockout, KO
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
Hi,
I have a problem with editing and reading values in jqxGrid on submit button. In second row I select new value and then I press submit button an value in alert is not value that was selected. If columns (properties of array) in grid are not observable is OK (commented code).
Thank you for your help.
<!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 DropDownList editor associated to the column is populated from the foreign data source.</title> <link rel="stylesheet" href="./3.2.2/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="./jQuery-1.9.1.min.js"></script> <script type="text/javascript" src="./3.2.2/jqxcore.js"></script> <script type="text/javascript" src="./3.2.2/jqxdata.js"></script> <script type="text/javascript" src="./3.2.2/jqxbuttons.js"></script> <script type="text/javascript" src="./3.2.2/jqxscrollbar.js"></script> <script type="text/javascript" src="./3.2.2/jqxmenu.js"></script> <script type="text/javascript" src="./3.2.2/jqxgrid.js"></script> <script type="text/javascript" src="./3.2.2/jqxgrid.selection.js"></script> <script type="text/javascript" src="./3.2.2/jqxgrid.edit.js"></script> <script type="text/javascript" src="./3.2.2/jqxlistbox.js"></script> <script type="text/javascript" src="./3.2.2/jqxgrid.edit.js"></script> <script type="text/javascript" src="./3.2.2/jqxdropdownlist.js"></script> <script type="text/javascript" src="./3.2.2/jqxcombobox.js"></script> <script type="text/javascript" src="./3.2.2/jqxbuttons.js"></script> <script type="text/javascript" src="./3.2.2/jqxpanel.js"></script> <script type="text/javascript" src="./knockout-2.2.1.js"></script> <script type="text/javascript" src="./knockout.mapping-2.4.1.js"></script> <script type="text/javascript"> $(document).ready(function () { var viewModel = new Model(); ko.applyBindings(viewModel); }); var Model = function() { var self = this; 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 countriesTable = [ { countryCode: "UK" }, { countryCode: "US" }, { countryCode: "DE" }, { countryCode: "FR" }, { countryCode: "IN" }, { countryCode: "HK" } ]; self.dropValues = ko.mapping.fromJS(countries); self.tableValues = ko.mapping.fromJS(countriesTable); //self.dropValues = ko.observableArray.fromJS(countries); //self.tableValues = ko.observableArray.fromJS(countriesTable); var countriesSource = { datatype: "observablearray", datafields: [ { name: 'label', type: 'string' }, { name: 'value', type: 'string' } ], localdata: self.dropValues }; var countriesAdapter = new $.jqx.dataAdapter(countriesSource, { autoBind: true }); // prepare the data var gridSource = { datatype: "observablearray", localdata: self.tableValues, 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: 'dropdownlist', createeditor: function (row, value, editor) { editor.jqxDropDownList({ source: countriesAdapter, displayMember: 'label', valueMember: 'value' }); } } ] }); $("#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>" ); } }); $("#jqxSubmitButton").on('click', function () { alert(self.tableValues()[1].countryCode()); }); } </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> <div> <input style='margin-top: 20px;' type="submit" value="Submit" id='jqxSubmitButton' /> </div> </body> </html>Hello damc,
Please check out the Knockout demo Grid with DropDownList for an example similar to your scenario.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.