jQuery UI Widgets Forums Grid Problem with grid and remote async databinds

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 8 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • rpcosta
    Participant

    Hello everyone.
    I’m trying to edit the custom combobox example (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customcomboboxcolumn.htm) to work with json remote data.
    This is my problem: if I use the async: false option it works fine. If I don’t then the value on the column is blank until I edit it. The combobox itself once I’m editing works well. I would like to use an asynchronous request for this as what I’m building will have large amounts of data and a synchronous request might affect user experience.

    Can anyone help me out? I’ll leave the code below.
    Thanks in advance!

    <script type="text/javascript">
        $(document).ready(function () {
            var countriesSource =
            {
                 datatype: "json",
                 cache: false,
                 datafields: [
                     { name: 'label', type: 'string' },
                     { name: 'value', type: 'int' }
                 ],
                 //localdata: teste,
                 url: 'getcountries.php',
                 async : false,
            };
    
            var countriesAdapter = new $.jqx.dataAdapter(countriesSource, {
                autoBind: true,
                beforeLoadComplete: function (records) {
                    var data = new Array();
                    // update the loaded records. Dynamically add EmployeeName and EmployeeID fields. 
                    for (var i = 0; i < records.length; i++) {
                        var employee = records[i];
                        employee.EmployeeName = employee.FirstName + " " + employee.LastName;
                        employee.EmployeeID = employee.uid;
                        data.push(employee);
                    }
                    return data;
                }
            });
    
            // prepare the data
            var gridSource =
            {
                datatype: "json",
                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: 'int'}
                ],
                url: 'infoacustica.php?acustica=1',
            };
            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) {
                            editor.jqxComboBox({ 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);
                console.log(column.displayfield + " - " + column.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>
    • This topic was modified 8 years, 3 months ago by  rpcosta.

    Hristo
    Participant

    Hello rpcosta,

    If you would like load bigger data you could use virtualmode: true property of the Grid.
    There you could load huge amount of data (1000k records).
    Please take a look those demos:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/virtualdata.htm?arctic
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/virtualscrolling.htm?arctic

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.