Reply To: Help With Using Ajax To Get Data

[admin]

Hi ctstrist,
Currently, Smart.DataAdapter cannot get data from a file, but we are working on this functionality and hope that it will soon be available.
In the meantime, you can use fetch (or XMLHttpRequest, or jQuery.ajax()) to request the file’s data and then pass it as an array to the Grid, as is done in the code snippet below:

fetch('../../../scripts/beverages.json', { method: 'GET' })
    .then(function (response) {
        if (response.ok) {
            return response.json();
        }
    })
    .then(function (data) {
        Smart('#grid', class {
            get properties() {
                return {
                    appearance: {
                        alternationCount: 2,
                        showRowHeader: true,
                        showRowHeaderSelectIcon: true,
                        showRowHeaderFocusIcon: true
                    },
                    paging: {
                        enabled: true
                    },
                    pager: {
                        visible: true
                    },
                    sorting: {
                        enabled: true
                    },
                    editing: {
                        enabled: true
                    },
                    selection: {
                        enabled: true,
                        allowCellSelection: true,
                        allowRowHeaderSelection: true,
                        allowColumnHeaderSelection: true,
                        mode: 'extended'
                    },
                    behavior: { columnResizeMode: 'growAndShrink' },
                    dataSource: new Smart.DataAdapter(
                        {
                            dataSource: data,
                            dataFields:
                                [
                                    'name: string',
                                    'type: string',
                                    'calories: int',
                                    'totalfat: string',
                                    'protein: string'
                                ]
                        }),
                    columns: [
                        { label: 'Name', dataField: 'name' },
                        { label: 'Beverage Type', dataField: 'type' },
                        { label: 'Calories', dataField: 'calories' },
                        { label: 'Total Fat', dataField: 'totalfat' },
                        { label: 'Protein', dataField: 'protein' }
                    ]
                }
            }
        });
    })
    .catch(function (error) {
    });

Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.com