Vue Data Grid Data Sources Documentation

Grid Data Sources

JqxGrid can be bound to multiple types of data collections including arrays, xml, json, tsv, csv or remote data. To data bind the Grid to a data source you need to set its source property to point to an instance of jqxDataAdapter.
The source object represents a set of key/value pairs.

url: A string containing the URL to which the request is sent.
data: Data to be sent to the server.
localdata: data array or data string pointing to a local data source.
datatype: the data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', 'observablearray'.
type: The type of request to make ("POST" or "GET"), default is "GET".
id: A string containing the Id data field.
root: A string describing where the data begins and all other loops begin from this element.
record: A string describing the information for a particular record.
datafields: An array describing the fields in a particular record. Each datafield must define the following members:
- name - A string containing the data field's name.
- type - A string containing the data field's type. Possible values: 'string', 'date', 'number', 'float', 'int', 'bool'.
- format(optional) - Sets the data formatting. By setting the format, the jqxDataAdapter plug-in will try to format the data before loading it.
  Example: { name: 'SubmitDate', type: 'date', format: "yyyy-MM-ddTHH:mm:ss-HH:mm" }
- map(optional) - A mapping to the data field.
- values - determines the foreign collection associated to the data field.
pagenum - determines the initial page number when paging is enabled.
pagesize - determines the page size when paging is enabled.
pager - callback function called when the current page or page size is changed.
```
pager: function (pagenum, pagesize, oldpagenum) {
}
```
sortcolumn - determines the initial sort column. The expected value is a data field name.
sortdirection - determines the sort order. The expected value is 'asc' for (A to Z) sorting or 'desc' for (Z to A) sorting.
sort - callback function called when the sort column or sort order is changed.
```
sort: function (column, direction) {
}
```
filter - callback function called when a filter is applied or removed.
```
filter: function (filters, recordsArray) {
}
```

addrow - callback function, called when a new row is/are added. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows.

addrow: function (rowid, rowdata, position, commit) {
    // synchronize with the server - send insert command
    // call commit with parameter true if the synchronization with the server is successful 
    //and with parameter false if the synchronization failed.
    commit(true);
}

deleterow - callback function, called when a row is deleted. If multiple rows are deleted, the rowid parameter is an array of row ids.

 
deleterow: function (rowid, commit) {
    // synchronize with the server - send delete command
    // call commit with parameter true if the synchronization with the server is successful 
    //and with parameter false if the synchronization failed.
    commit(true);
}

updaterow - callback function, called when a row is updated. If multiple rows are added, the rowid and rowdata parameters are arrays of row ids and rows.

updaterow: function (rowid, newdata, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful 
    // and with parameter false if the synchronization failed.
    commit(true);
}

processdata - extend the default data object sent to the server.

let source = {
    datatype: "jsonp",
    datafields: [
        { name: 'countryName' },
        { name: 'name' },
        { name: 'population', type: 'float' },
        { name: 'continentCode' }
    ],
    url: "http://ws.geonames.org/searchJSON",
    processdata: function (data) {
        data.featureClass = "P";
        data.style = "full";
        data.maxRows = 50;
    }
};

formatdata - Before the data is sent to the server, you can fully override it by using the 'formatdata' function of the source object. The result that the 'formatdata' function returns is actually what will be sent to the server.

let source = {
    datatype: "jsonp",
    datafields: [
        { name: 'countryName' },
        { name: 'name' },
        { name: 'population', type: 'float' },
        { name: 'continentCode' }
    ],
    url: "http://ws.geonames.org/searchJSON",
    data: {
        featureClass: "P",
        style: "full",
        maxRows: 50
    },
    formatdata: function (data) {
        return "my data";
    }
};

contenttype: Use this option, If you want to explicitly pass in a content-type. Default is "application/x-www-form-urlencoded".

The example code below illustrates how to create jqxDataAdapter from a source object:

dataAdapter: new jqx.dataAdapter(this.source, {
    loadComplete: function (data) {
        // data is loaded.
    },
    loadError: function (xhr, status, error) {
        // data is not loaded.
    }
})

If you bind the Grid to remote data source using asynchronous requests( that is by default when you specify url in the source object and you didn't set the async field to false), then make sure that you call any method or set a property once the data is loaded. To ensure that you call your code when the Grid is loaded with data, use the Grid's ready callback function or bind to the 'bindingcomplete' event before the Grid's initialization and call your code inside the event handler.

Bind the Grid to an array.

The data member is array. The datatype member is set to "array".

<template>
    <JqxGrid :theme="'material'" :width="width" :source="dataAdapter"
             :columns="columns">
    </JqxGrid>
</template>
<script>
    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                width: '99%',
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Name', datafield: 'firstname', width: 120 },
                    { text: 'Last Name', datafield: 'lastname', width: 120 },
                    { text: 'Product', datafield: 'productname', width: 180 },
                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                localdata: generatedata(50),
                datatype: 'array',
                datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ]
            };
        }
    }
</script>

Bind the Grid to XML data.

In the source initialization, you need to set the following:

url of a xml file
id field
root data record
record - this is the data record which will be displayed as a row in the Grid.
datatype - 'xml'
datafields - the record's member names. You can also specify the mapping to the member's data

<template>
    <JqxGrid :theme="'material'" :width="width" :source="dataAdapter"
             :columns="columns">
    </JqxGrid>
</template>
<script>
    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                width: '99%',
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                    { text: 'City', datafield: 'City', width: 120 },
                    { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
                    { text: 'Country', datafield: 'Country', width: 100 }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                datatype: 'xml',
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: 'entry',
                record: 'content',
                id: 'm\\:properties>d\\:CustomerID',
                url: '/sampledata/customers.xml'
            };
        }
    }
</script>

Bind the Grid to JSON data.

When you bind the Grid to JSON data, you need to set the source object's datatype to 'json'.
If you want to bind the Grid to JSONP data, then you need to set the source object's datatype to 'jsonp'.

<template>
    <JqxGrid :theme="'material'" :width="width" :source="dataAdapter"
             :columns="columns">
    </JqxGrid>
</template>
<script>
    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                width: '99%',
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Name', datafield: 'name', width: 250 },
                    { text: 'Beverage Type', datafield: 'type', width: 250 },
                    { text: 'Calories', datafield: 'calories', width: 180 },
                    { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                    { text: 'Protein', datafield: 'protein', minwidth: 120 }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                datatype: 'json',
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                id: 'id',
                url: '/sampledata/beverages.txt'
            };
        }
    }
</script>

Bind the Grid to tab-separated values (TSV).

When you bind the Grid to TSV data, you need to set the source object's datatype to 'tab'.

<template>
    <JqxGrid :theme="'material'" :width="width" :source="dataAdapter"
             :columns="columns">
    </JqxGrid>
</template>
<script>
    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                width: '99%',
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Year', datafield: 'Year' },
                    { text: 'HPI', datafield: 'HPI', cellsformat: 'f2' },
                    { text: 'Build Cost', datafield: 'BuildCost', cellsformat: 'f2' },
                    { text: 'Population', datafield: 'Population', cellsformat: 'f2' },
                    { text: 'Rate', datafield: 'Rate', cellsformat: 'f5', minwidth: 100 }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                datatype: 'tab',
                datafields: [
                    { name: 'Year', type: 'int' },
                    { name: 'HPI', type: 'float' },
                    { name: 'BuildCost', type: 'float' },
                    { name: 'Population', type: 'float' },
                    { name: 'Rate', type: 'float' }
                ],
                url: '/sampledata/homeprices.txt'
            };
        }
    }
</script>

Bind the Grid to comma-separated values (CSV).

When you bind the Grid to CSV data, you need to set the source object's datatype to 'csv'.

<template>
    <JqxGrid :theme="'material'" :width="width" :source="dataAdapter"
             :columns="columns">
    </JqxGrid>
</template>
<script>
    import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                width: '99%',
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250 },
                    { text: 'S&P 500', datafield: 'S&P 500', width: 300, cellsformat: 'f' },
                    { text: 'NASDAQ', datafield: 'NASDAQ', cellsformat: 'f' }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                datatype: "csv",
                datafields: [
                    { name: 'Date', type: 'date' },
                    { name: 'S&P 500', type: 'float' },
                    { name: 'NASDAQ', type: 'float' }
                ],
                url: '/sampledata/nasdaq_vs_sp500.txt'
            };
        }
    }
</script>

What happens when the data source is changed? How to refresh the Grid?

To refresh the Grid, you need to simply set its 'source' property again.