Messages

1

Help for ParamQuery Grid (free version) / Re: Error on Load Grid

« 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);
}

2

Help for ParamQuery Grid (free version) / Re: Error on Load Grid

« 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!

3

Help for ParamQuery Grid (free version) / Re: Error on Load Grid

« 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 });
   
}

4

Help for ParamQuery Grid (free version) / 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

5

Help for ParamQuery Grid (free version) / Re: Empty rows on grid

« on: June 24, 2014, 10:25:44 pm »

Hi,

That's it!!! I forgot to set dataIndx property in my colModel!

Thank you so much

6

Help for ParamQuery Grid (free version) / Empty rows on grid

« on: June 24, 2014, 07:59:25 pm »

Hi,

I'm using the grid to display remote records like this example  http://paramquery.com/demos/filter

The records returned 5 rows for example, and the grid display them, but the grid display these all empty.
Can someone help me?

My .net code returns looks like    String response = "{\"data\":" + json + "}";
                                                    return this.Content(response, "text/text");

and my Js datamodel

var dataModel = {
        location: "remote",
        sorting: "remote",
        paging: "remote",
        dataType: "JSON",
        method: "GET",
        curPage: 1,
        rPP: 5,
        sortIndx: 2,
        sortDir: "up",
        rPPOptions: [1, 5, 20, 30, 40, 50, 100, 500, 1000],
        filterIndx: "",
        filterValue: "",
        fields: ['IdClasseInstrumento', 'Classe', 'Descricao', 'TipoPessoa', 'RPPS'],
        getUrl: function () {
            var sortDir = (this.sortDir == "up") ? "asc" : "desc";
            var queryString = "cur_page=" + this.curPage + "&records_per_page=" +
                this.rPP + "&sortBy=" + this.fields[this.sortIndx] + "&dir=" + sortDir;
            if (this.filterIndx != null && this.fields[this.filterIndx]) {
                queryString += "&filterBy=" + this.fields[this.filterIndx] + "&filterValue=" + this.filterValue;
            }
            var obj = { url: "/ClasseInstrumento/Load", data: queryString };
            return obj;
        },
        getData: function (dataJSON) {
            return { data: dataJSON.data };
           // return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(textStatus);
        }
    }