This topic contains 1 reply, has 2 voices, and was last updated by Avatar Dimitar 1 year, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100640
    Avatar
    ctstrist
    Participant

    Hey there,

    Would someone be able to give me a working example that uses an ajax call to an aspx.cs page to get data on demand?
    I have not been able to figure out how to implement a data adapter that uses ajax or how to do it without the use of the data adapter. Any help would be greatly appreciated.

     

    thanks.

    #100642
    Avatar
    Dimitar
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.