[aniolekxParticipant]

just to excel, I do not use others

[aniolekxParticipant]

but do you have example for that method with over 1 million rows?

[aniolekxParticipant]

ok I have managed to make it work, few imports were missing, anyway this exportview do not work for over 300k rows (file was over 200mb) I was able to download file, but content was incorrect.

Do you have better solution or demo for grids with over million rows where export works?

[aniolekxParticipant]

anyway when I am trying to use export view method I am getting such error:

error TypeError: n.jqx.dataAdapter.DataExporter is not a constructor
    _exportData http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:64
    exportview http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:64
    invoke http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:365
    jqxWidgetProxy http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:365
    yK+z/</</e.jqx.jqxWidget/e.fn[r]/< http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:365
    each http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:124
    each http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:124
    r http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:365
    exportGrid http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:139
    exportGrid http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:358
    click http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:358
    Ve http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:328
    i http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:328
    _wrapper http://127.0.0.1:8000/build/vue_components.8b81c7b6.js:328
vue_components.8b81c7b6.js:139:9310

I am using latest version of jqx widgets

[aniolekxParticipant]

Thanks Hristo,

Could you tell me where in documentation is this method described?

I have checked: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm
and there is nothing about it

Should I switch from jquery grid to smart element grid, which one is “better” ?

[aniolekxParticipant]

I am using jQuery grid, not smart html elements, so how I can export grid data without sending it back from grid to server?

[aniolekxParticipant]

Should I ask this question through premium support?

[aniolekxParticipant]

Hi,

We have downloaded our version from client section but that link to jqxwidgets is still visible in charts.

How we can removed it?

[aniolekxParticipant]

thanks, and how i can delay that request and trigger it manually? (json data from server)

[aniolekxParticipant]

It will be to difficult to recreate it, mainly I am using Vue version of your grid, and seems that all these issues is have when async is set to true, if async is set to false it these are no issues, but there is no spinner (loading msg) displayed.

Another annoying thing is that grid by default has width set to 600px and it has that lag when it is resized from 600px to full width.

[aniolekxParticipant]

I tried several things for filter but at the end I got:

“Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.”

[aniolekxParticipant]

Hi, did you make any progress on this?

[aniolekxParticipant]

To archive above I have created such component:

<template>
    <div :id="id">
        <JqxGrid ref="grid" :width="width" :columns="source.columns" :source="source.data"
                 :selectionmode="selectionmode"
                 :altrows="altrows" :sortable="sortable" :editable="editable" :pageable="pageable"
                 :pagesize="pagesize" :pagesizeoptions="pagesizeoptions"
                 :filtermode="filtermode" :showfilterrow="showfilterrow" :filterable="filterable">
        </JqxGrid>
        <slot></slot>
    </div>
</template>
<script>
    import JqxGrid from './../vendor/jqwidgets-ver7.1.0/jqwidgets-vue/vue_jqxgrid';

    export default {
        components: {
            JqxGrid,
        },
        props: {
            id: {},
            filters: {
                default: 'enabled',
            },

        },
        data: function() {
            return {
                width: '100%',
                source: this.loadSource(),
                selectionmode: 'singleRow',
                altrows: true,
                sortable: true,
                editable: false,
                pageable: true,

                pagesize: 10,
                pagesizeoptions: [10, 20, 50, 100],

                filtermode: 'excel',
                showfilterrow: true,
                filterable: true,

            };
        },
        watch: {
            filters: {
                immediate: true,
                handler(value)
                {
                    if (value == 'diabled') {
                        this.filterMode = 'default';
                        this.showFilterRow = false;
                        this.filterable = false;
                    }
                },
            },
        },

        methods: {

            clearFilters() {
                this.$refs.grid.clearfilters();
            },
            exportGrid() {
                this.$refs.grid.exportdata('xls', this.id+'-data-export', true, null, true);
            },
            loadSource()
            {
                let columnsData = [];

                let columnsDefinition = [];
                let data = [];

                let columns = $(this.$slots.default[0].data.domProps.innerHTML).find('th');
                let rows = $(this.$slots.default[0].data.domProps.innerHTML).find('tr');

                for (let j = 0; j < columns.length; j++) {
                    let columnName = $.trim($(columns[j]).text());
                    let type = columns[j].attributes.type ? columns[j].attributes.type.nodeValue : 'string';
                    let columnDefinition = {name: columnName, type: type};

                    let width = columns[j].width ? columns[j].width : null;
                    let cellsalign = columns[j].attributes.cellsalign ? columns[j].attributes.cellsalign.nodeValue : 'left';
                    let filter = columns[j].attributes.filtertype ? columns[j].attributes.filtertype.nodeValue : false;
                    let icon = columns[j].attributes.icon ? columns[j].attributes.icon.nodeValue : false;
                    let columnDetails = {
                        text: columnName,
                        dataField: columnName,
                        cellsalign: cellsalign,
                        filtertype: filter,
                    };

                    if (icon) {
                        columnDetails.cellsrenderer = function(row, columnfield, value) {
                            if (value) {
                                return '<span class="fa '+icon+' text-center" title="' + value + '" style="vertical-align: middle; color: green; width: 100%; line-height: 25px; font-size: 25px; padding-top: 3px;"></span>';
                            } else {
                                return '<span class="fa '+icon+' text-center" title="' + value + '" style="vertical-align: middle; color: red; width: 100%; line-height: 25px; font-size: 25px; padding-top: 3px;"></span>';
                            }
                        };
                    }

                    if (width) {
                        columnDetails.width = width;
                    }

                    if (type == 'date') {
                        columnDetails.cellsformat = 'dd/MM/yyyy';
                    }

                    if (type == 'datetime') {
                        columnDefinition.type = 'date';
                        columnDetails.cellsformat = 'dd/MM/yyyy H:mm:ss';
                    }

                    if (filter) {
                        columnDetails.filtertype = filter;
                    } else {
                        columnDetails.filterable = filter;
                    }

                    columnsData.push(columnDetails);
                    columnsDefinition.push(columnDefinition);
                }

                for (let i = 1; i < rows.length; i++) {
                    let row = rows[i];
                    let datarow = {};
                    for (let j = 0; j < columns.length; j++) {
                        // get column's title.
                        let columnName = $.trim($(columns[j]).text());
                        let cell = $(row).find('td:eq(' + j + ')');
                        datarow[columnName] = $.trim(cell.html());
                    }
                    data[data.length] = datarow;
                }

                this.$slots.default = [];

                return {
                    data: new $.jqx.dataAdapter({
                        localdata: data,
                        datatype: 'array',
                        datafields: columnsDefinition,
                    }),
                    columns: columnsData,
                };
            },
        },
    };
</script>
<style>
</style>

[aniolekxParticipant]

Thanks but I see that you do not use Babel.I think my issue is related to Babel

[aniolekxParticipant]

Can someone look at this and confirm that issue?

[Author]

Posts