jQWidgets Forums

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

  • 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?


    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/


    James Lavery
    Participant

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

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

You must be logged in to reply to this topic.