jQWidgets Forums
jQuery UI Widgets › Forums › Editors › Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader › Input Source not working for remote JSON data
Tagged: datatable, Input, jqxdatatable, jqxinput, remote JSON data
This topic contains 2 replies, has 2 voices, and was last updated by James Lavery 10 years, 1 month ago.
-
Author
-
I want to have an Input in a DataTable, the input bound to data from a remote service.
Basing my code on the Binding to JSON Data example, I’ve got the following definitions for my soure and data adapter:
var DescriptionSource = { type: "POST", datatype: "json", datafields: [ { name: 'Item', type: 'string' }, ], id: 'Id', url: Dialog_strAppRoot + 'Services/Web/Settings.asmx/GetWorkDescriptionList', cache: false, root: 'data', }; var DescriptionDataAdapter = new $.jqx.dataAdapter(DescriptionSource, { contentType: 'application/json; charset=utf-8', });
and the column for my ‘Description’ is defined as follows:
{ text: 'Description', editable: true, dataField: 'Description', width: 290, columnType: 'custom', createEditor: function (row, cellValue, editor, width, height) { // create jqxInput editor. var textBox = $("<input style='padding-left: 4px; box-sizing: border-box; -moz-box-sizing: border-box; border: none;'/>").appendTo(editor); textBox.jqxInput({ source: DescriptionDataAdapter, displayMember: "Item", valueMember: "Item", width: '100%', height: '100%' }); textBox.val(cellValue); }, initEditor: function (row, cellValue, editor) { // set jqxInput editor's initial value. editor.find('input').val(cellValue); }, getEditorValue: function (index, value, editor) { // get jqxInput editor's value. return editor.find('input').val(); } },
However, the input is not displaying any values from the remote data when I edit. If I put a downloadComplete function in the DataAdapter, I can see the data is being returned in the data.d parameter.
Any suggestions please?
Hello James Lavery,
Here is an example which shows how to display value from remote data after editing in jqxInput. I hope it would be helpful.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.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/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script> <script type="text/javascript"> $(document).ready(function () { var url = "../sampledata/beverages.txt"; // prepare the data var source = { dataType: "json", dataFields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); var getEditorDataAdapter = function (datafield) { var sourceInput = { dataType: "jsonp", dataFields: [ { name: 'countryName', type: 'string' }, { name: 'name', type: 'string' }, { name: 'population', type: 'float' }, { name: 'continentCode', type: 'string' } ], url: "http://api.geonames.org/searchJSON" }; var dataAdapterInput= new $.jqx.dataAdapter(sourceInput, { formatData: function (data) { $.extend(data, { featureClass: "P", style: "full", username: "jqwidgets", maxRows: 50 }); return data; } }, { uniqueDataFields: [datafield] } ); return dataAdapterInput; } $("#dataTable").jqxDataTable( { width: 850, pageable: true, editable: true, pagerButtonsCount: 10, source: dataAdapter, columnsResize: true, columns: [ { text: 'Name', dataField: 'name', width: 300, createEditor: function (row, cellvalue, editor, cellText, width, height) { // construct the editor. editor.jqxInput({ source: getEditorDataAdapter('countryName'), displayMember: 'countryName', valueMember: 'countryName', width: width, height: height }); }, initEditor: function (row, cellvalue, editor, celltext, width, height) { // set the editor's current value. The callback is called each time the editor is displayed. editor.jqxInput({ width: width, height: height }); editor.val(cellvalue); }, getEditorValue: function (row, cellvalue, editor) { // return the editor's value. return editor.val(); } }, { text: 'Beverage Type', dataField: 'type', width: 300 }, { text: 'Calories', dataField: 'calories', width: 180 }, { text: 'Total Fat', dataField: 'totalfat', width: 120 }, { text: 'Protein', dataField: 'protein' } ] }); }); </script> </head> <body class='default'> <div id="dataTable"></div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Nadezhda,
Thanks – I’ve got it working now, thanks to your input. -
AuthorPosts
You must be logged in to reply to this topic.