Create protoUI of datatable

Webix JS
1

Hi Webix !

I create an ui extend of datatable. I want it config columns from my services ( my services return columns config and ui config with it ).

$init: function (config) {
        var me = this;
        var dataConfig = config.dataConfig;
        var mapid = dataConfig.Mapid;
        var layerid = dataConfig.LayerID;
        var url = URLSERVICEVECTORMAP + "/map/" + mapid;

        webix.ajax().get(URLSERVICEVECTORMAP + "/map/" + mapid, {}, function (t, xml, xhr) {
            var mapconfig = JSON.parse(t);
            var layers = mapconfig.cacLopBanDo;
            var l = $.grep(layers, function (v, i) {
                return v.maLopBanDo = layerid;
            })[0];
            if (l != undefined || l != null) {
                me.configLayer = l;
                var cauhinhhienthi = l.cauHinhHienThi;
                var lstCol = [];
                $.each(cauhinhhienthi, function (j, ch) {
                    if (ch.showcollapse != '0') {
                        me._columnsString.push(ch.name.toLowerCase());
                        me._columns.push({
                            id: ch.name.toLowerCase(),
                            header: ch.alias,
                            width: 50
                        });
                    }
                });

            }
            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.configLayer.maDichVu + '/' + me.configLayer.lopDuLieu, { fields: strCol, page: 1, start: 0, limit: 1000 },
                function (text, xml, xhr) {
                    var data = JSON.parse(text);
                    me.parse(data.searchResult);
                });
            }
        });
        me.$ready.push(me.render);
        me.attachEvent('onBeforeLoad', function () {
            me.define('columns', me._columns);
            me.refreshColumns();
            me.refresh();
        });
    }

I’m create a layout and i’m add a define of the ui in it. But the define not show


var datatable = webix.ui({
        view: "ggridview",
        height: 400,
        width: '100%',
        dataConfig:
        {
            Mapid: '15',
            LayerID: '157'
        },
        autoheight: true,
        autowidth: true
    })


    

    var layout = webix.ui({
        container: "rightPanel",
        height: '100%',
        width: '100%',
        css: 'scrollY',
        rows: []
    });

    layout.addView(datatable, 0);

Sorry, i’m poor English !
Thanks !

2

@Helga, @maksim

3

a) Please try to use a custom ggridview without custom config loading code, just to be sure that new UI creations goes fine

b) you are using next code

        me.$ready.push(me.render);
        me.attachEvent('onBeforeLoad', function () {
            me.define('columns', me._columns);
            me.refreshColumns();
            me.refresh();
        });

Most probably it will not work. onBeforeLoad will be called on using .load api. And as you are not using API and not using “url” in components config - it will not be called at all.

You can move refreshColumns code directly to the callback of related ajax call

         var columns = [];
         $.each(cauhinhhienthi, function (j, ch) {
                    if (ch.showcollapse != '0') {
                        columns.push({
                            id: ch.name.toLowerCase(),
                            header: ch.alias,
                            width: 50
                        });
                    }
                });
        me.refreshColumns(columns);
4

I’ll try it ! thank !