jQuery UI Widgets Forums Grid error occurs when load grid again

This topic contains 15 replies, has 2 voices, and was last updated by  neha101288 9 years, 5 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • error occurs when load grid again #71519

    neha101288
    Participant

    Hi Peter,
    I got this <
    JavaScript runtime 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.
    > error when i loaded my grid again,
    actually i need to display grid data on button click event, it works fine with first time but through the error second time(second time click on button.)

    error occurs when load grid again #71525

    Dimitar
    Participant

    Hi neha101288,

    This error is thrown, because, as the message states, the data is still loading and you are trying to load it a second time before the first load has been complete. As a workaround, you can use a flag variable, e.g.:

    var loading = false;
    
    ...
    
    $('#button').click(function() {
        if (loading === false) {
            loading = true;
            // place your code for data loading here
        }
    });
    
    ...
    
    $('#jqxGrid').on('bindingcomplete', function(event) {
        loading = false;
    });

    Best Regards,
    Dimitar

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

    error occurs when load grid again #71610

    neha101288
    Participant

    I still have this error, bindingcomplete event fire correctly and when grid going to bind it through this error message.
    <0x800a139e – JavaScript runtime 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.>
    Used this code in mvc and bind the grid from controller data is in json format.

    error occurs when load grid again #71618

    neha101288
    Participant

    Actually got this in jqxgrid.sort.js file.

    sortby:function(d,g,f,e,b){if(this._loading&&b!==false)
    Column number – 3813

    error occurs when load grid again #71625

    Dimitar
    Participant

    Hi neha101288,

    Did you implement our flag variable solution?

    Best Regards,
    Dimitar

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

    error occurs when load grid again #71627

    neha101288
    Participant

    Hi Dimitar,
    Yes,i implement that solution and its work fine. bindingcomplete event fire correctly but when grid going to bind again(second time on button click) it through this error message.

    Actually got this in jqxgrid.sort.js file.

    sortby:function(d,g,f,e,b){if(this._loading&&b!==false)
    Column number – 3813

    error occurs when load grid again #71628

    Dimitar
    Participant

    Hi neha101288,

    If the grid is still binding, the second button click should not do anything. That is what the flag variable is for. Please share your button click code and we will review if you have implemented the solution correctly.

    Best Regards,
    Dimitar

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

    error occurs when load grid again #71629

    neha101288
    Participant

    Hi Dimitar,

    Thanks for your fast reply,This is my code
    var loading = false;
    $(‘#jqxgrid’).on(‘bindingcomplete’, function (event) {
    loading = false;
    alert(“Binding is completed”);
    });
    $(“#viewReport”).click(function () {
    debugger;

    if (loading === false) {
    loading = true;
    $(‘#ReportTitle’).empty();
    $(‘#ReportTitle’).append(‘<h2><div style=”margin-top: 5px;”>Auditee Report <br/>’ + yearMonthFromVal + ‘-‘ + yearMonthThruVal + ‘<br/>Errors</div><h2>’);
    var AuditeeErrorResult =
    {
    cache: false,
    datatype: “json”,
    datafields: [
    { name: ‘Auditee’ },
    { name: ‘ErrorCount’ },
    { name: ‘FunctionDesc’ },
    { name: ‘FunctionErrorCode’ },
    { name: ‘FunctionErrorDesc’ },
    { name: ‘FunctionGroupDesc’ }
    ],
    url: ‘../Auditee/GetAuditeeErrorJson’,
    data: { yearMonthFrom: yearMonthFromVal, yearMonthThru: yearMonthThruVal, auditeeIdList: checkedItems },
    };
    var dataError = new $.jqx.dataAdapter(AuditeeErrorResult, {
    loadComplete: function () {
    $(“#jqxgrid”).jqxGrid(‘expandallgroups’);
    $(“#jqxgrid”).jqxGrid(‘showgroupsheader’, false);
    $(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
    },
    });

    $(“#jqxgrid”).on(‘pagechanged’, function () {
    $(“#jqxgrid”).jqxGrid(‘expandallgroups’);
    });

    $(“#jqxgrid”).jqxGrid( // error occurs here in second time of button click event.
    {
    width: 1200,
    autoheight: true,
    source: dataError,
    theme: ‘darkblue’,
    altrows: true,
    enabletooltips: true,
    groupable: true,
    pageSize: 10,
    sortable: true,
    filterable: true,
    columnsresize: true,
    ready: function () {
    $(“#jqxgrid”).jqxGrid(‘expandallgroups’);
    },
    pagesizeoptions: [’10’, ’20’, ’30’, ’40’, ’50’],
    pageable: true,
    columns: [
    { text: ‘Auditee’, dataField: ‘Auditee’, width: 200 },
    { text: ‘Error Count’, dataField: ‘ErrorCount’, width: 200 },
    { text: ‘Function Group’, dataField: ‘FunctionGroupDesc’, width: 160 },
    { text: ‘Function’, dataField: ‘FunctionDesc’, width: 220 },
    { text: ‘Error Code’, dataField: ‘FunctionErrorCode’, width: 120 },
    { text: ‘Error Description’, dataField: ‘FunctionErrorDesc’ }

    ],
    groups: [‘Auditee’]
    });
    }

    });

    error occurs when load grid again #71648

    Dimitar
    Participant

    Hi neha101288,

    You should call the grid initialization code only once. On each button click you just need to update the data. Here are the changes I suggest you make:

    var AuditeeErrorResult = {
        cache: false,
        datatype: "json",
        datafields: [{
            name: 'Auditee'
        }, {
            name: 'ErrorCount'
        }, {
            name: 'FunctionDesc'
        }, {
            name: 'FunctionErrorCode'
        }, {
            name: 'FunctionErrorDesc'
        }, {
            name: 'FunctionGroupDesc'
        }],
        url: '../Auditee/GetAuditeeErrorJson',
        data: {
            yearMonthFrom: yearMonthFromVal,
            yearMonthThru: yearMonthThruVal,
            auditeeIdList: checkedItems
        }
    };
    
    var dataError = new $.jqx.dataAdapter(AuditeeErrorResult);
    
    var loading = true;
    
    $('#jqxgrid').on('bindingcomplete', function(event) {
        loading = false;
        alert("Binding is completed");
        $("#jqxgrid").jqxGrid('expandallgroups');
        $("#jqxgrid").jqxGrid('showgroupsheader', false);
        $("#jqxgrid").jqxGrid('autoresizecolumns');
    });
    
    $("#jqxgrid").jqxGrid({
        width: 1200,
        autoheight: true,
        source: dataError,
        theme: 'darkblue',
        altrows: true,
        enabletooltips: true,
        groupable: true,
        pageSize: 10,
        sortable: true,
        filterable: true,
        columnsresize: true,
        pagesizeoptions: ['10', '20', '30', '40', '50'],
        pageable: true,
        columns: [{
                text: 'Auditee',
                dataField: 'Auditee',
                width: 200
            }, {
                text: 'Error Count',
                dataField: 'ErrorCount',
                width: 200
            }, {
                text: 'Function Group',
                dataField: 'FunctionGroupDesc',
                width: 160
            }, {
                text: 'Function',
                dataField: 'FunctionDesc',
                width: 220
            }, {
                text: 'Error Code',
                dataField: 'FunctionErrorCode',
                width: 120
            }, {
                text: 'Error Description',
                dataField: 'FunctionErrorDesc'
            }
    
        ],
        groups: ['Auditee']
    });
    
    $("#jqxgrid").on('pagechanged', function() {
        $("#jqxgrid").jqxGrid('expandallgroups');
    });
    
    $("#viewReport").click(function() {
        if (loading === false) {
            loading = true;
            $('#ReportTitle').empty();
            $('#ReportTitle').append('<h2><div style="margin-top: 5px;">Auditee Report <br/>' + yearMonthFromVal + '-' + yearMonthThruVal + '<br/>Errors</div><h2>');
    
            AuditeeErrorResult = {
                cache: false,
                datatype: "json",
                datafields: [{
                    name: 'Auditee'
                }, {
                    name: 'ErrorCount'
                }, {
                    name: 'FunctionDesc'
                }, {
                    name: 'FunctionErrorCode'
                }, {
                    name: 'FunctionErrorDesc'
                }, {
                    name: 'FunctionGroupDesc'
                }],
                url: '../Auditee/GetAuditeeErrorJson',
                data: {
                    yearMonthFrom: yearMonthFromVal,
                    yearMonthThru: yearMonthThruVal,
                    auditeeIdList: checkedItems
                }
            };
    
            dataError.dataBind();
    
            $("#jqxgrid").jqxGrid('updatebounddata');
        }
    });

    Best Regards,
    Dimitar

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

    error occurs when load grid again #71696

    neha101288
    Participant

    Hi Dimitar,

    Now getting this error “Unable to get property ‘data Bind’ of undefined or null reference jqwidget”.How to solve this.

    error occurs when load grid again #71704

    neha101288
    Participant

    hi Dimitar,

    I made change, but on grid data update grid bind with my previous parameter.i did not resolve this.

    error occurs when load grid again #71712

    Dimitar
    Participant

    Hi neha101288,

    I thought the values of yearMonthFromVal, yearMonthThruVal and checkedItems are updated by the time you click the button (in a portion of your code you did not share). Is that not so?

    Best Regards,
    Dimitar

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

    error occurs when load grid again #71713

    neha101288
    Participant

    Hi Dimitar,

    I am sharing my full code here, please check it

    ///My Code
    @{
    Layout = “~/Views/Shared/_ReportLayout.cshtml”;
    }
    @section scripts {
    <script type=”text/javascript”>
    $(document).ready(function () {
    // prepare the data
    debugger;
    var yearMonthFromVal = 0;
    var yearMonthThruVal = 0;
    var auditeeIdListVal = null;
    var checkedItems = null;

    //Prepare Source
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘YearMonth’ },
    { name: ‘YearMonthDesc’ }
    ],
    url: ‘../Auditee/GetReport’
    };

    //Bind Year Month DropDownList
    var dataAdapter1 = new $.jqx.dataAdapter(source);
    $(“.jqxWidget”).jqxDropDownList({
    selectedIndex: 0, source: dataAdapter1, displayMember: “YearMonthDesc”, valueMember: “YearMonth”, width: 200, height: 20, theme: ‘energyblue’
    });

    //check all
    $(“#CheckAll”).jqxButton({
    theme: ‘energyblue’, width: ’80’, theme: ‘energyblue’
    });
    $(‘#CheckAll’).on(‘click’, function () {
    $(“.jqxWidget1”).jqxDropDownList(‘checkAll’);

    });

    //Print Button
    $(“#print”).jqxButton({ theme: ‘energyblue’});

    $(“#print”).click(function () {
    var gridContent = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’);
    var newWindow = window.open(”, ”, ‘width=800, height=500’),
    document = newWindow.document.open(),
    pageContent =
    ‘<!DOCTYPE html>\n’ +
    ‘<html>\n’ +
    ‘<head>\n’ +
    ‘<meta charset=”utf-8″ />\n’ +
    ‘<title>jQWidgets Grid</title>\n’ +
    ‘</head>\n’ +
    ‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
    document.write(pageContent);
    document.close();
    newWindow.print();
    });

    // Create a Export jqxDropDownList
    var download = [
    “Export”,
    “XML”,
    “CSV”,
    “PDF”,
    “Excel”
    ];
    $(“#ddlExport”).jqxDropDownList({
    source: download, selectedIndex: 0, width: 80, height: 20, theme: ‘darkblue’
    });
    //Code for export page
    $(‘#ddlExport’).on(‘change’, function (event) {
    var args = event.args;
    var index = args.index;
    switch (index) {
    case 1: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘Auditee_Error_Report’);
    break;
    case 2: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘Auditee_Error_Report’);
    break;
    case 3: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘pdf’, ‘Auditee_Error_Report’);
    break;
    case 4: $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘Auditee_Error_Report’);
    break;
    }
    });

    //From Month DropDown Text Change Event
    var dataAdapter1 = new $.jqx.dataAdapter(AuditeeName);
    $(‘#DropDownListFromMonth’).on(‘change’, function (event) {
    var args = event.args;
    yearMonthFromVal = $(‘#DropDownListFromMonth’).jqxDropDownList(‘getItem’, args.index).value;
    GetAuditeeName(yearMonthFromVal, yearMonthThruVal);
    });

    //To Month DropDown Text Change Event
    $(‘#DropDownListToMonths’).on(‘change’, function (event) {
    var args = event.args;
    yearMonthThruVal = $(‘#DropDownListToMonths’).jqxDropDownList(‘getItem’, args.index).value;
    GetAuditeeName(yearMonthFromVal, yearMonthThruVal);
    });

    //Check Change event of Auditee name drop down
    $(“#AuditeeName”).on(‘checkChange’, function (event) {
    if (event.args) {
    var item = event.args.item;
    if (item) {
    var items = $(“#AuditeeName”).jqxDropDownList(‘getCheckedItems’);
    checkedItems = “”;
    $.each(items, function (index) {
    checkedItems += this.value + “, “;
    });
    }
    }
    });
    var AuditeeErrorResult = {
    cache: false,
    datatype: “json”,
    datafields: [{
    name: ‘Auditee’
    }, {
    name: ‘ErrorCount’
    }, {
    name: ‘FunctionDesc’
    }, {
    name: ‘FunctionErrorCode’
    }, {
    name: ‘FunctionErrorDesc’
    }, {
    name: ‘FunctionGroupDesc’
    }],
    url: ‘../Auditee/GetAuditeeErrorJson’,
    data: {
    yearMonthFrom: yearMonthFromVal,
    yearMonthThru: yearMonthThruVal,
    auditeeIdList: checkedItems
    }
    };

    var dataAdapter = new $.jqx.dataAdapter(AuditeeErrorResult);
    //dataError.dataBind();

    $(‘#jqxgrid’).on(‘bindingcomplete’, function (event) {
    loading = false;
    alert(“Binding is completed”);
    $(“#jqxgrid”).jqxGrid(‘expandallgroups’);
    $(“#jqxgrid”).jqxGrid(‘showgroupsheader’, false);
    $(“#jqxgrid”).jqxGrid(‘autoresizecolumns’);
    });

    $(“#jqxgrid”).jqxGrid({
    width: 1200,
    autoheight: true,
    source: dataAdapter,
    theme: ‘darkblue’,
    altrows: true,
    enabletooltips: true,
    groupable: true,
    pageSize: 10,
    sortable: true,
    filterable: true,
    columnsresize: true,
    pagesizeoptions: [’10’, ’20’, ’30’, ’40’, ’50’],
    pageable: true,
    columns: [{
    text: ‘Auditee’,
    dataField: ‘Auditee’,
    width: 200
    }, {
    text: ‘Error Count’,
    dataField: ‘ErrorCount’,
    width: 200
    }, {
    text: ‘Function Group’,
    dataField: ‘FunctionGroupDesc’,
    width: 160
    }, {
    text: ‘Function’,
    dataField: ‘FunctionDesc’,
    width: 220
    }, {
    text: ‘Error Code’,
    dataField: ‘FunctionErrorCode’,
    width: 120
    }, {
    text: ‘Error Description’,
    dataField: ‘FunctionErrorDesc’
    }

    ],
    groups: [‘Auditee’]
    });

    $(“#jqxgrid”).on(‘pagechanged’, function () {
    $(“#jqxgrid”).jqxGrid(‘expandallgroups’);
    });

    //view Report Click event
    loading = false;
    $(“#viewReport”).jqxButton({ width: ’90’, theme: ‘darkblue’ });
    $(“#viewReport”).click(function () {
    debugger;
    if (loading === false) {
    loading = true;
    $(‘#ReportTitle’).empty();
    $(‘#ReportTitle’).append(‘<h2><div style=”margin-top: 5px;”>Auditee Report <br/>’ + yearMonthFromVal + ‘-‘ + yearMonthThruVal + ‘<br/>Errors</div><h2>’);

    AuditeeErrorResult = {
    cache: false,
    datatype: “json”,
    datafields: [{
    name: ‘Auditee’
    }, {
    name: ‘ErrorCount’
    }, {
    name: ‘FunctionDesc’
    }, {
    name: ‘FunctionErrorCode’
    }, {
    name: ‘FunctionErrorDesc’
    }, {
    name: ‘FunctionGroupDesc’
    }],
    url: ‘../Auditee/GetAuditeeErrorJson’,
    data: {
    yearMonthFrom: yearMonthFromVal,
    yearMonthThru: yearMonthThruVal,
    auditeeIdList: checkedItems
    }
    };
    //dataAdapter = new $.jqx.dataAdapter(AuditeeErrorResult);
    dataAdapter.dataBind();
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’);
    }
    });
    });

    //Function to bind Auditee name dropdown
    function GetAuditeeName(yearMonthFromValT, yearMonthThruValT) {
    var AuditeeName =
    {
    datatype: “json”,
    datafields: [
    { name: ‘AuditeeID’ },
    { name: ‘Auditee’ }
    ],
    url: ‘../Auditee/GetAuditeeNameJson’,
    data: { yearMonthFrom: yearMonthFromValT, yearMonthThru: yearMonthThruValT }
    };
    var dataAdapter1 = new $.jqx.dataAdapter(AuditeeName);
    $(“.jqxWidget1”).jqxDropDownList({
    checkboxes: true, source: dataAdapter1, displayMember: “Auditee”, valueMember: “AuditeeID”, width: 200, height: 20, theme: ‘energyblue’
    });
    $(“.jqxWidget1″).jqxDropDownList(‘checkIndex’, 0);
    }

    </script>
    <body class=’default’>
    <div id=’content’ style=”background-color: white; width: 100%; padding: 10px; height: 800px”>
    <table style=”width: 100%”>
    <tr>
    <td>
    <h1>Report</h1>
    </td>
    </tr>
    <tr>
    <td>
    <table style=”border: solid; border-color: darkgrey” width=”90%”>
    <tr>
    <td>
    <br />
    </td>
    <td>
    <br />
    </td><td>
    <br />
    </td><td>
    <br />
    </td>
    </tr>
    <tr>
    <td width=”25%”><b>YearMonth From:</b></td>
    <td width=”25%”>
    <div id=’DropDownListFromMonth’ class=”jqxWidget”>
    </div>
    </td>
    <td width=”25%”>
    <b>YearMonth Thru:</b>
    </td>
    <td width=”25%”>
    <div id=’DropDownListToMonths’ class=”jqxWidget”>
    </div>
    </td>
    </tr>
    <tr>
    <td width=”25%”><b>Auditee Name:</b></td>
    <td width=”25%”>

    <div id=’AuditeeName’ class=”jqxWidget1″>
    </div>

    </td>
    <td width=”25%”>
    <input type=”button” id=’CheckAll’ value=”Check all” />
    <input type=”button” value=”View Report” id=’viewReport’ />
    </td>
    <td width=”25%”></td>
    </tr>
    <tr>
    <td width=”25%”>
    </td>
    <td>
    <div id=”ddlExport”></div>
    </td>
    <td width=”25%”>
    <input type=”button” value=”Print” id=’print’ />
    </td>
    <td width=”25%”>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>
    <br />
    </td>
    </tr>
    <tr>
    <td>
    <br />
    <table style=”border: solid; border-color: darkgrey” width=”90%”>
    <tr>
    <td>
    <b>
    <div id=”ReportTitle”></div>
    </b>

    </td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td>
    <br />
    <div id=”jqxgrid”></div>
    </td>
    </tr>

    </table>
    </td>
    </tr>

    </table>
    </div></body>

    }

    error occurs when load grid again #71723

    neha101288
    Participant

    Hi Dimitar,

    I have checked by using this code(given in my previous reply),my code hits two times server.with initial value. i can not understand why it is happening.

    error occurs when load grid again #71758

    neha101288
    Participant

    Hi dimitar,

    I think this could be solve by using dynamic parameter(pass with datadapter),please tell me how to pass dynamic parameter.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.