Author Topic: Error on Load Grid  (Read 9764 times)

derek

  • Newbie
  • *
  • Posts: 6
    • View Profile
Error on Load Grid
« on: July 30, 2014, 06:28:28 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: Error on Load Grid
« Reply #1 on: July 30, 2014, 08:37:13 pm »
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

  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: Error on Load Grid
« Reply #2 on: July 30, 2014, 10:08:15 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: Error on Load Grid
« Reply #3 on: July 30, 2014, 10:24:45 pm »
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

  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: Error on Load Grid
« Reply #4 on: July 30, 2014, 10:49:15 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5637
    • View Profile
Re: Error on Load Grid
« Reply #5 on: July 30, 2014, 11:45:14 pm »
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

  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: Error on Load Grid
« Reply #6 on: August 05, 2014, 07:48:35 am »
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);
}