Pager for my grid !

Webix JS
1

Hi all !

I define a grid:

webix.protoUI({
    name: "ggrid",
    $init: function (config) {
        this.$ready.push(this._gInit);
    },
    configLayer: [],
    _columns: [],
    _columnsString: [],
    layerConfig: [],
    defaults: {
        resizeColumn: true,
        scroll: 'xy',
        autoheight: false,
        autowidth: false,
        select: 'row'
    },
    _gInit: function () {
        var me = this;

        me.layerConfig = me.config.layerConfig;
        if (me.layerConfig != undefined || me.layerConfig != null)
            me.renderGrid();
        else if (me.config.dataConfig != undefined || me.config.dataConfig != null) {
            var config = me.config.dataConfig;
            fnGetMapConfig(config.mapId, function (mapconfig) {
                var layers = mapconfig.cacLopBanDo;
                var l = $.grep(layers, function (v, i) {
                    return v.maLopBanDo == config.layerId;
                })[0];
                if (l != undefined || l != null) {
                    me.layerConfig = l;
                    me.renderGrid();
                }
            });
        }
    },
    renderGrid: function () {
        var me = this;
        var cauhinhhienthi = me.layerConfig.cauHinhHienThi;
        var lstCol = [];
        me._columnsString = [];
        $.each(cauhinhhienthi, function (j, ch) {
            if (ch.showcollapse != '0') {
                me._columnsString.push(ch.name.toLowerCase());
                switch (ch.datatype) {
                    case 'nvarchar':
                        if (!isNaN(length)) {
                            if (length < 50)
                                w = 100;
                            else if (length < 100)
                                w = 120;
                            else if (length < 200)
                                w = 150;
                            else
                                w = 200;
                        }
                        else
                            w = 200;
                    case 'int':
                        w = 70;
                    case 'bigint':
                        w = 100;
                    case 'float':
                        w = 150;
                    default:
                        w = 150;
                }
                lstCol.push({
                    id: ch.name.toLowerCase(),
                    header: ch.alias,
                    width: w
                });
            }
            if (ch.name.toLowerCase() == 'xdaidien' || ch.name.toLowerCase() == 'ydaidien') {
                me._columnsString.push(ch.name.toLowerCase());
                lstCol.push({
                    id: ch.name.toLowerCase(),
                    header: ch.alias,
                    hidden: true
                });
            }
        });
        me.refreshColumns(lstCol);
        me.renderEvents();
    },
    renderEvents: function () {
        var me = this;
        me.callEvent('onGridAfterRender',[me]);
        me.attachEvent('onItemClick', function (id) {
            var record = me.getItem(id);
            webix.callEvent('onGridItemClick', [record, me]);
        });
    },
    loadData: function () {
        var me = this;
        if (me._columnsString.length > 0) {
            var strCol = '';
            $.each(me._columnsString, function (i, v) {
                strCol += v;
                if (i != me._columnsString.length - 1)
                    strCol += ',';
            });
            webix.ajax().get(URLGEODATA + '/' + me.layerConfig.maDichVu + '/' + me.layerConfig.lopDuLieu, { fields: strCol, page: 1, start: 0, limit: 1000 },
            function (text, xml, xhr) {
                var data = JSON.parse(text);
                //me.parse(data.searchResult);
                me.parse({
                    data: data.searchResult,
                    pos: me.count()
                });
            });
        }
    }
}, webix.ui.datatable, webix.EventSystem);

Columns of gird is config by my Restful services.

I define a view:

webix.protoUI({
    name: 'ggridview',
    defaults: {
        autoheight: false,
        autowidth: false,
        type: 'line',
        rows: []
    },
    $init: function () {
        this.$ready.push(this.gInit);
    },
    gInit: function () {
        var me = this;
        var config = me.config.dataConfig;
        var idrandom = Date.now();
        me.addView({
            rows: [
                { view: 'gtemplate', dataConfig: { name: config.name, color: config.color } },
                {
                    view: 'ggrid',
                    gravity: 1,
                    dataConfig: config,
                    layerConfig: me.config.layerConfig,
                    pager: idrandom,
                    on: {
                        onGridAfterRender: function (grid) {
                            me.addView({
                                view: "pager",
                                id: idrandom,
                                template: "{common.first()} {common.prev()} {common.pages()} {common.next()} {common.last()}",
                                animate: true,
                                size: 10,
                                group: 5
                            }, 2);
                            grid.loadData();
                        }
                    }
                }
            ]
        });
    }
}, webix.ui.layout, webix.EventSystem);

I have an issue: after call function loadData of grid, my firebugs show error: “paper.refresh not is function”.

Can you help me, @maksim ?

2

Grid checks for pager during a UI creation. If pager not exists yet, grid will wait for the end of current js process and will check once more. If pager still not found it will result in error similar to the one in your case.

The second possible reasons is non-unique ids in your app. Try to use webix.uid() instead of Date.now(), uid method guarantees that value is unique.

3

@maksim:
Thanks !

After render pager, i’m using code:

 $$(grid.id).define('pager', $$(pager.id));
$$(grid.id).refresh();

It’s work for me !