Error on Load Grid

[derek]

Hi, I'm using pqgrid and then sometimes it show an error in browser console like this below to load the same data. Not always, just sometimes.

Uncaught Error: cannot call methods on pqScrollBar prior to initialization; attempted to call method 'option'

Can anybody help me?

Thanks

[paramvir]

How do you load data in the grid. Do you call pqgrid methods in create / load / beforeTableView events.

Is it possible for you to share the code of your grid or create a test case in jsfiddle.

[derek]

Hi, Sorry but I don't speak english very well!!

Follows my code below.

I'm using asp.net MVC and when my web page is loading
the script calls my javascrpit function that loads the pqGrid.

<script>

    $(document).ready(function () {

        var itemsFilter = ["Desricao", "NomeAdministrador"];
        var itemsCombo = ['Descrição', 'Administrador'];
        var colModel = [ { title: "ID", dataType: "integer", dataIndx: "IdInstrumento" },
                         { title: "Classe", width: 150, dataType: "string", dataIndx: "Classe" },
                         { title: "Descrição", width: 250, dataType: "string", dataIndx: "Descricao" },
                         { title: "Taxa Adm.", width: 80, dataType: "double", dataIndx: "TaxaAdm" },
        ];

        LoadData('Instrumento', itemsFilter, itemsCombo, colModel, 950);
    });
   
</script>

*---------------------------------------------------------------------------------------------------------------*

function LoadData(rota, itemsFilter, itemsCombo, colModel, width) {

    var url =  "User/LoadData";

        var pqFilter = {

            search: function () {

                var txt = $("input.gcfiltertxt").val().toUpperCase(),
                colIndx = $("select#pq-filter-select-column").val(),

                DM = $grid.pqGrid("option", "dataModel");
                DM.filterIndx = colIndx;
                DM.filterValue = txt;
                $grid.pqGrid("refreshDataAndView");
            },

            render: function (ui) {
                var DM = ui.dataModel,
                rowData = ui.rowData,
                dataIndx = ui.dataIndx,
                val = rowData[dataIndx],
                txt = DM.filterValue;
                txtUpper = txt.toUpperCase();
                valUpper = val.toUpperCase();

                if (dataIndx == DM.filterIndx) {
                    var indx = valUpper.indexOf(txtUpper);
                    if (indx >= 0) {
                        var txt1 = val.substring(0, indx);
                        var txt2 = val.substring(indx, indx + txt.length);
                        var txt3 = val.substring(indx + txt.length);
                        return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
                    }
                }
                return val;
            }
        }

        var dataModel = {
            location: "remote",
            sorting: "remote",
            paging: "remote",
            dataType: "JSON",
            method: "GET",
            curPage: 1,
            rPP: 20,

            sortDir: "up",
            rPPOptions: [5, 10, 20, 30, 40, 50, 100, 500],
            filterIndx: "",
            filterValue: "",
            fields: itemsFilter,
            getUrl: function () {
                var sortDir = (this.sortDir == "up") ? "asc" : "desc";
                if (this.sortIndx == null) {
                    this.sortIndx = "";
                }
                var queryString = "cur_page=" + this.curPage + "&records_per_page=" +
                    this.rPP + "&sortBy=" + this.sortIndx + "&dir=" + sortDir;
                if (this.filterIndx != null && this.fields[this.filterIndx]) {
                    queryString += "&filterBy=" + this.fields[this.filterIndx] + "&filterValue=" + this.filterValue;
                }
                var obj = { url: url, data: queryString };
                return obj;
            },
            getData: function (dataJSON) {
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus);
            }
        }

        var obj = {
            width: width, height: 400,
            dataModel: dataModel,
            colModel: colModel,
            editable: false,
            title: "Itens",
            topVisible: true,
            resizable: true,
            columnBorders: true,
            scrollModel: { horizontal: false }
        };

        obj.render = function (evt, obj) {
            var $toolbar = $("<div class='pq-grid-toolbar' style='background-color:#ebebbf; height:26px; padding-top:6px;'></div>").appendTo($(".pq-grid-top", this));
            var rodape = $(".pq-grid-footer").css("background-color", '#ebebbf');

            $(".pq-grid-footer").css("height", '26px');
            $(".pq-grid-footer").css("padding-top", '5px');

            $("<span style='margin-right:5px;'>Novo</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-circle-plus" } }).click(function (evt) {
                OnClickMenu('Create', rota);
            });

            $("<span style='margin-right:5px;'>Editar</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-pencil" } }).click(function (evt) {

                var arr = $grid.pqGrid("selection", { type: 'row', method: 'getSelection' });
                if (arr && arr.length > 0) {
                    var rowIndx = arr[0].rowIndx;
                    var $cell = $("#grid_array").pqGrid("getCell", { rowIndx: rowIndx, colIndx: 0 })
                    RedirectPage('Edit', rota, $cell.text());
                }
            });

            $("<span style='margin-right:15px;'>Deletar</span>").appendTo($toolbar).button({ icons: { primary: "ui-icon-circle-minus" } }).click(function (evt) {
                var arr = $grid.pqGrid("selection", { type: 'row', method: 'getSelection' });
                if (arr && arr.length > 0) {
                    var rowIndx = arr[0].rowIndx;
                    var $cell = $("#grid_array").pqGrid("getCell", { rowIndx: rowIndx, colIndx: 0 })
                    RedirectPage('Delete', rota, $cell.text());
                }
            });

            $("<span class='gcseparator'></span>").appendTo($toolbar);

            $("<span style='margin-left:15px; margin-right:5px;'>Localizar</span>").appendTo($toolbar);

            $("<input type='text' class='gcfiltertxt' style='margin-right:10px;'/>").appendTo($toolbar).keyup(function (evt) {
                if (evt.keyCode == 13) {
                    pqFilter.search();
                }
            });


            var $combo = $("<select class='gccombofiltro' id='pq-filter-select-column'></select>").appendTo($toolbar);

            for (i = 0; i < itemsCombo.length; i++) {
                $("<option value='" + i + "'>" + itemsCombo + "</option>").appendTo($combo);
            }

            $("pq-filter-select-column").change(function () {
                pqFilter.search();
            });

        };

        var $grid = $("#grid_array").pqGrid(obj);

        $grid.pqGrid("option", "numberCell", true);
        $grid.pqGrid({ draggable: false });
        $grid.pqGrid({ wrap: false });
   
}

[paramvir]

These 3 lines of code after initialization of grid may cause problem in your case.

$grid.pqGrid("option", "numberCell", true);
$grid.pqGrid({ draggable: false });
$grid.pqGrid({ wrap: false });

mention these options in the grid initialization object i.e., obj before initialization of the grid.

[derek]

Hi, I removed the 3 lines and the grid not works fine yet.

I call the function to load pq grid when user click on Menu.
If the user clicks on menu and wait it to load the error don't happens.
But, if click on menu and to click again while grid not loaded yet the web browser shows the message below.

Uncaught Error: cannot call methods on pqScrollBar prior to initialization; attempted to call method 'option'

I don't know what to do!

[paramvir]

you should separate the code for initialization and update options of the grid.

It can be checked whether grid has already been initialized by

 $("#grid_array").hasClass( 'pq-grid')

[derek]

Hi, My issue was not solved yet.   

I already remove all of properties that you said.

If the user clicks on menu and wait it to load, the error don't happens.
But, if click on menu and to click again before loaded completely the web browser shows the message below.

Uncaught Error: cannot call methods on pqScrollBar prior to initialization; attempted to call method 'option'

Code Sample

function LoadData(rota) {

    var url = rota + "/LoadData";

    var dataModel = {
        location: "remote",
        sorting: "remote",
        paging: "remote",
        dataType: "JSON",
        method: "GET",
        curPage: 1,
        rPP: 20,

        sortDir: "up",
        rPPOptions: [5, 10, 20, 30, 40, 50, 100, 500],
        filterIndx: "",
        filterValue: "",
        fields: itemsFilter,
        getUrl: function () {
            var sortDir = (this.sortDir == "up") ? "asc" : "desc";
            if (this.sortIndx == null) {
                this.sortIndx = "";
            }
            var queryString = "cur_page=" + this.curPage + "&records_per_page=" +
                this.rPP + "&sortBy=" + this.sortIndx + "&dir=" + sortDir;
            if (this.filterIndx != null && this.fields[this.filterIndx]) {
                queryString += "&filterBy=" + this.fields[this.filterIndx] + "&filterValue=" + this.filterValue;
            }
            var obj = { url: url, data: queryString };
            return obj;
        },
        getData: function (dataJSON) {
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        }
    }

    var obj = {
        width: width, height: 400,
        dataModel: dataModel,
        colModel: colModel,
        editable: false,
        title: "Itens",
        topVisible: true,
        resizable: true,
        columnBorders: true,
        scrollModel: { horizontal: false }
    };

    var $grid = $("#grid_array").pqGrid(obj);
}