jQWidgets Forums

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.

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

Author

Input Source not working for remote JSON data Posts

January 26, 2015 at 10:40 pm Input Source not working for remote JSON data #66029

James Lavery

Participant

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?

January 27, 2015 at 11:41 am Input Source not working for remote JSON data #66071

Nadezhda

Participant

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

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

January 27, 2015 at 2:01 pm Input Source not working for remote JSON data #66082

James Lavery

Participant

Hi Nadezhda,
Thanks – I’ve got it working now, thanks to your input.

Author

Posts

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

You must be logged in to reply to this topic.