Problem with grid and remote async databinds

[rpcostaParticipant]

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>

[HristoParticipant]

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

[Author]

Posts