Doubt with Exception

[jpereraParticipant]

Hello,
Could help me to identify what this exception is fired:
Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

In that case I have the grid already created and when you press a button i’m doing the following:

var dataAdapter = LoadSourceContactPhoneSchedule();
$("#gvContactPhoneSchedule").jqxGrid({ source: dataAdapter });

In many times in the application i have this exception, please help me with this, i think it is the cause that some times when i want to delete a row or update a row the grid don’t do it anything…

Thank you all for your support!!
Jose

[DimitarParticipant]

Hello Jose,

Is the error thrown when you click the button? Please provide us with your grid initialization code and the code of the LoadSourceContactPhoneSchedule function so that we may determine what is wrong.

Best Regards,
Dimitar

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

[jpereraParticipant]

Thanks Dimitar, i’m going to give the code, but It’s important that you check this because I found a solution and it was not putting the filterable property in the grid, in that case was a solution for me but maybe someone need the grid to be filterable and this could cause a problem:
this is the function

 function LoadSourceContactPhoneSchedule() {
            var rowPhoneindex = $('#gvContactPhones').jqxGrid('getselectedrowindex');
            var selectedPhone = $('#gvContactPhones').jqxGrid('getrowdata', rowPhoneindex);
            var DayTimeNum = null;
            if (selectedPhone.DayTimeNum != undefined)
                DayTimeNum = selectedPhone.DayTimeNum;
            var rowindexContact = $('#gvContacts').jqxGrid('getselectedrowindex');
            var contactSelected = $('#gvContacts').jqxGrid('getrowdata', rowindexContact);

            var sourcePhoneSchedule =
                {
                    type: "POST",
                    url: '@Url.Action("LoadAccountPhoneSchedule", "Account")',
                    data: { DayTimeNum: DayTimeNum },
                    dataType: "json",
                    datafields: [
                                 { name: 'CloseDow', type: 'string' },
                                 { name: 'CloseTime', type: 'string' },
                                 { name: 'DayTimeNum', type: 'int' },
                                 { name: 'OpenDate', type: 'date', format: "M/d/yyyy" },
                                 { name: 'OpenDow', type: 'string' },
                                 { name: 'OpenTime', type: 'string' },
                    ],
                    beforeLoadComplete: function (records) {
                        for (var i = 0; i < records.length; i++) {
                            if (records[i].OpenDate != null) {
                                var date = new Date(records[i].OpenDate);
                                var mil = date.getTime();
                                var time = parseInt(mil);
                                records[i].OpenDate = new Date(parseInt(time) + new Date(time).getTimezoneOffset() * 60000);
                            }
                        }
                        return records;
                    },
                    addrow: function (rowid, rowdata, position, commit) {
                        var params = "{" + "'ContactNum':" + contactSelected.ContactNum + "," + "'SeqNum':" + selectedPhone.SeqNum + "," + "'DayTimeNum':" + DayTimeNum + "," + "'DayCode':'" + rowdata.DayCode + "'," + "'AddReplace':'" + rowdata.AddReplace + "'," + "'OpenTime':'" + rowdata.OpenTime + "'," + "'CloseDay':'" + rowdata.CloseDay + "'," + "'CloseTime':'" + rowdata.CloseTime + "'}";
                        alert(params);
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("SaveContactPhoneSchedule", "Contact")',
                            data: params,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.Success == true) {
                                    $("#lbNotificationSuccess").text("Phone Saved Successfully");
                                    $("#jqxNotificationSuccess").jqxNotification("open");
                                    commit(true);
                                }
                                else {
                                    $("#lbNotification").text("An error occured. " + data.Message);
                                    $("#jqxNotification").jqxNotification("open");
                                    commit(false);
                                }
                            }
                        });
                    },
                    updaterow: function (rowid, rowdata, commit) {
                        var rowOldData = $('#gvContactPhoneSchedule').jqxGrid('getrowdata', rowid);
                        var params = "{" + "'CloseDowOld':'" + rowOldData.CloseDow + "'," + "'CloseTimeOld':'" + rowOldData.CloseTime + "'," + "'OpenDowOld':'" + rowOldData.OpenDow + "'," + "'OpenTimeOld':'" + rowOldData.OpenTime + "'," + "'CloseDow':'" + rowdata.CloseDow + "'," + "'CloseTime':'" + rowdata.CloseTime + "'," + "'DayTimeNum':" + DayTimeNum + "," + "'OpenDow':'" + rowdata.OpenDow + "'," + "'OpenTime':'" + rowdata.OpenTime + "'}";
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("UpdateContactPhoneSchedule", "Contact")',
                            data: params,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.Success == true) {
                                    $("#lbNotificationSuccess").text("Phone Updated Successfully");
                                    $("#jqxNotificationSuccess").jqxNotification("open");
                                    commit(true);
                                }
                                else {
                                    $("#lbNotification").text("An error occured. " + data.Message);
                                    $("#jqxNotification").jqxNotification("open");
                                    commit(false);
                                }
                            }
                        });
                    },
                    deleterow: function (rowid, commit) {
                        var data = $('#gvContactPhoneSchedule').jqxGrid('getrowdata', rowid);
                        var params = "{" + "'CloseDow':'" + data.CloseDow + "'," + "'CloseTime':'" + data.CloseTime + "'," + "'DayTimeNum':" + data.DayTimeNum + "," + "'OpenDow':'" + data.OpenDow + "'," + "'OpenTime':'" + data.OpenTime + "'}";
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("DeleteContactPhoneSchedule", "Contact")',
                            data: params,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.Success == true) {
                                    $("#lbNotificationSuccess").text("Day Time Remove Successfully");
                                    $("#jqxNotificationSuccess").jqxNotification("open");
                                    commit(true);
                                }
                                else {
                                    $("#lbNotification").text("An error occured. " + data.Message);
                                    $("#jqxNotification").jqxNotification("open");
                                    commit(false);
                                }
                            }
                        });
                    }
                }
            var dataAdapterPhoneSchedule = new $.jqx.dataAdapter(sourcePhoneSchedule);
            return dataAdapterPhoneSchedule;
        }

And this is the Initialization of the grid:

function InitializeContactPhoneSchedule() {
            var editrow = -1;
            var tooltiprenderer = function (element) { $(element).jqxTooltip({ position: 'mouse', content: $(element).text(), theme: 'bootstrap' }); }
            $("#gvContactPhoneSchedule").jqxGrid({
                width: "100%",
                theme: 'bootstrap',
                altrows: true,
                sortable: true,
                selectionmode: 'singlerow',
                pageable: true,
                pagesize: 20,
                enableellipsis: true,
                columnsresize: true,
                showtoolbar: true,
                updatedelay: 50,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addContactPhoneSchedule" type="button" value="Add New" />&nbsp;&nbsp;');
                    container.append('<input id="deleteContactPhoneSchedule" type="button" value="Delete Row" />&nbsp;&nbsp;');
                    container.append('<input id="refreshContactPhoneSchedule" type="button" value="Refresh" />&nbsp;&nbsp;');
                    $("#addContactPhoneSchedule").jqxButton({ theme: 'bootstrap', template: "primary" });
                    $("#deleteContactPhoneSchedule").jqxButton({ theme: 'bootstrap', template: "warning" });
                    $("#refreshContactPhoneSchedule").jqxButton({ theme: 'bootstrap', template: "success" });
                    $("#addContactPhoneSchedule").on('click', function () {
                        $("#cbContactPhoneCreateDayCode").jqxComboBox('clearSelection');
                        $("#cbContactPhoneCreateAddReplace").jqxComboBox('clearSelection');
                        $("#cbContactPhoneCreateScheduleCloseDay").jqxComboBox('clearSelection');
                        $("#tbContactPhoneCreateScheduleOpenHHMM").val('');
                        $("#tbContactPhoneCreateScheduleCloseHHMM").val('');
                        var offset = $("#gvContactPhoneSchedule").offset();
                        $("#popupWindowCreateContactPhoneDetailSchedule").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                        $("#popupWindowCreateContactPhoneDetailSchedule").jqxWindow('open');
                    });
                    $("#deleteContactPhoneSchedule").on('click', function () {
                        if (confirm("Are you sure do you want delete?") == false)
                            return;
                        var selectedrowindex = $("#gvContactPhoneSchedule").jqxGrid('getselectedrowindex');
                        var rowscount = $("#gvContactPhoneSchedule").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#gvContactPhoneSchedule").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#gvContactPhoneSchedule").jqxGrid('deleterow', id);
                        }
                    });
                    $("#refreshContactPhoneSchedule").on('click', function () {
                        var dataAdapter = LoadSourceContactPhoneSchedule();
                        $("#gvContactPhoneSchedule").jqxGrid({ source: dataAdapter });
                    });
                },
                columns: [
                                { text: 'Open', datafield: 'OpenDow', sortable: true, rendered: tooltiprenderer },
                                { text: 'HH:MM', datafield: 'OpenTime', sortable: true, rendered: tooltiprenderer },
                                { text: 'Close', datafield: 'CloseDow', sortable: true, rendered: tooltiprenderer },
                                { text: 'HH:MM', datafield: 'CloseTime', sortable: true, rendered: tooltiprenderer },
                                {
                                    text: 'Edit', datafield: 'Edit', width: 40, columntype: 'button', cellsrenderer: function () {
                                        return 'Edit';
                                    }, buttonclick: function (row) {
                                        editrow = row;
                                        var offset = $("#gvContactPhoneSchedule").offset();
                                        $("#popupWindowEditContactPhoneDetailSchedule").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                        var dataRecord = $("#gvContactPhoneSchedule").jqxGrid('getrowdata', editrow);
                                        $("#tbContactPhoneEditScheduleCloseHHMM").jqxDateTimeInput('val', ConvertTimeStringToDate(dataRecord.CloseTime));
                                        $("#tbContactPhoneEditScheduleOpenHHMM").jqxDateTimeInput('val', ConvertTimeStringToDate(dataRecord.OpenTime));
                                        var item = $("#cbContactPhoneEditScheduleOpen").jqxComboBox('getItemByValue', dataRecord.OpenDow);
                                        $("#cbContactPhoneEditScheduleOpen").jqxComboBox('selectItem', item);
                                        var item = $("#cbContactPhoneEditScheduleClose").jqxComboBox('getItemByValue', dataRecord.CloseDow);
                                        $("#cbContactPhoneEditScheduleClose").jqxComboBox('selectItem', item);

                                        $("#popupWindowEditContactPhoneDetailSchedule").jqxWindow('open');
                                    }
                                }
                ]

            });
            $("#btSaveCreateContactPhoneSchedule").click(function () {
                var daycodevalue = $("#cbContactPhoneCreateDayCode").jqxComboBox('val');
                var addReplace = $("#cbContactPhoneCreateAddReplace").jqxComboBox('val');
                var closeDayvalue = $("#cbContactPhoneCreateScheduleCloseDay").jqxComboBox('val');
                var openHHMM = $("#tbContactPhoneCreateScheduleOpenHHMM").val();
                var closeHHMM = $("#tbContactPhoneCreateScheduleCloseHHMM").val();
                var row = { DayCode: daycodevalue, AddReplace: addReplace, OpenTime: openHHMM, CloseDay: closeDayvalue, CloseTime: closeHHMM };
                var commit = $('#gvContactPhoneSchedule').jqxGrid('addrow', null, row);
                $("#popupWindowCreateContactPhoneDetailSchedule").jqxWindow('hide');

                var rowindex = $('#gvContactPhones').jqxGrid('getselectedrowindex');
                var dataRecord = $("#gvContactPhones").jqxGrid('getrowdata', rowindex);
                var dataAdapterSchedule = LoadSourceContactPhoneSchedule(dataRecord.DayTimeNum);
                $("#gvContactPhoneSchedule").jqxGrid({ source: dataAdapterSchedule });

                var selectedrowindex = $("#gvContacts").jqxGrid('getselectedrowindex');
                var dataRecord = $("#gvContacts").jqxGrid('getrowdata', selectedrowindex);
                var dataAdapterPhone = LoadSourceContactPhone(dataRecord.ContactNum);
                $("#gvContactPhones").jqxGrid({ source: dataAdapterPhone });
            });
            $("#popupWindowEditContactPhoneDetailSchedule").on('open', function () {
                $("#cbContactPhoneEditScheduleOpen").jqxComboBox('focus');
            });
            $("#btSaveEditContactPhoneSchedule").click(function () {
                if (editrow >= 0) {
                    var closeDow = $("#cbContactPhoneEditScheduleClose").jqxComboBox('val');
                    var openDow = $("#cbContactPhoneEditScheduleOpen").jqxComboBox('val');
                    var closeHHMM = $("#tbContactPhoneEditScheduleCloseHHMM").val();
                    var openHHMM = $("#tbContactPhoneEditScheduleOpenHHMM").val();
                    var row = { CloseDow: closeDow, CloseTime: closeHHMM, OpenDate: null, OpenDow: openDow, OpenTime: openHHMM };
                    var rowID = $('#gvContactPhoneSchedule').jqxGrid('getrowid', editrow);
                    var commit = $('#gvContactPhoneSchedule').jqxGrid('updaterow', rowID, row);
                    $("#popupWindowEditContactPhoneDetailSchedule").jqxWindow('hide');
                    var rowindex = $('#gvContactPhones').jqxGrid('getselectedrowindex');
                    var dataRecordl = $("#gvContactPhones").jqxGrid('getrowdata', rowindex);
                    var dataAdapter = LoadSourceContactPhoneSchedule(dataRecordl.DayTimeNum);
                    $("#gvContactPhoneSchedule").jqxGrid({ source: dataAdapter });
                }
            });
        }

Thanks again, and have a good day!!
Jose

[DimitarParticipant]

Hi Jose,

Just setting the filterable property to true cannot cause the error to be thrown. It will be thrown if you are trying to call a grid method while it is still loading, hence the suggestion of calling methods in the bindingcomplete event handler. In your case I am not sure what causes the issue, but it may occur when calling the LoadSourceContactPhoneSchedule function two or more times consecutively. Generally, such issues can be resolved by using a flag variable which is used to check if the grid has finished loading or not.

Best Regards,
Dimitar

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

[Author]

Posts