Svelte App with Syncfusion grid etc

[Martin Wong]

Hi, am trying to integrate Syncfusion components with a Svelte app. I hope this is the correct forum to post this. I'm a newbie and trying to figure out.

I've installed the components via npm install and all went well.

I've managed to get the grid going like this... but I want to know the best practice that you can suggest. The following code is working. 

The API is just axios wrapped in a service. Only thing was that I need to put the Grid.Inject after I get the AllCustomers from service or it will be saying that it's not initialized first. I want to know if I can do a async await somehow there and wait outside of the API call.

Stylesheets are linked via CDN in the index.html

Thank you for your information.

<script>
    import API from '../services/api';
    import { Grid, Sort } from '@syncfusion/ej2-grids';
    import {onMount} from "svelte";


    let AllCustomers;


    onMount( () => {
        API.get("/customers/get", null).then((res) => {
            AllCustomers = res;
            console.log(AllCustomers);

            Grid.Inject(Sort);

            let grid = new Grid({
                dataSource: AllCustomers,
                allowSorting: true,
                columns: [
                    { field: 'id', headerText: 'Customer ID', textAlign: 'Right', width: 120 },
                    { field: 'company_name', headerText: 'Name', width: 150 },
                ]
            });
            grid.appendTo('#Grid');

        })
    });


script>
<div class="container is-fluid">
    <div id="Grid">div>
div>

[Sujith Kumar Rajkumar]

Hi Martin, 

Greetings from Syncfusion support. 

Based on your query we could understand that your requirement is to bind Grid data using an async API call. For this case, we suggest you to use the Grid’s custom data-binding approach which allows you to bind data from API call and handle all the Grid actions with your API. The Grid’s custom binding approach is explained below, 

For using custom binding, you need to bind the response object(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties. 

API links: https://ej2.syncfusion.com/documentation/api/grid/#datastatechange 

                  https://ej2.syncfusion.com/documentation/api/grid/#datasourcechanged 

                  https://ej2.syncfusion.com/documentation/api/grid/#datasource 

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 

Please get back to us if you require any further assistance. 

Regards, 

Sujith R 

[Martin Wong]

Hi thanks for the reply, I was trying to see the info on the following but could not find it. Do you have example code or directions to which part of the code.

" as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property"

[Sujith Kumar Rajkumar]

Hi Martin, 

 

We have explained on how to perform custom binding in the Grid with code examples below, 

 

Initially define a custom method for processing the Grid queries and sending your API call. On receiving the response you need to bind it to the Grid’s dataSource property as and object of ‘result’ and ‘count’ properties. This is demonstrated in the below code snippet, 

 

function getData(gridquery: any) { 

    // Grid action queries 

    let state = gridquery; 

    // Request URL 

    let BASE_URL = "https://services.odata.org/V4/Northwind/Northwind.svc/Orders"; 

 

    let sortQuery = ""; 

    const skipquery = state.skip ? `$skip=${state.skip}` : null; 

    let pageQuery = ""; 

    const takeQuery = state.take ? `$top=${state.take}` : null; 

    if (skipquery) { 

        pageQuery = `${skipquery}&`; 

    } 

    if (takeQuery) { 

        pageQuery = `${pageQuery}${takeQuery}`; 

    } 

    // Generate query with your request URL for API call 

    var ajax = new Ajax( 

        `${BASE_URL}?${pageQuery}${sortQuery}&$count=true` 

    ); 

    ajax.send(); 

    ajax.onSuccess = (data: any) => { 

        // Response data is parsed and set as Grid’s data source 

        let final: any = JSON.parse(data); 

        grid.dataSource = { result: final.value, count: final["@odata.count"] }; 

    }; 

} 

 

Then call this method in the Grid’s created event(for sending initial request) and dataStateChange event with the generated Grid queries. This is demonstrated in the below code snippet, 

 

// Grid’s created event handler 

function created() { 

    // Initial state is created and method defined for making API call is involed 

    var state = { skip: 0, take: 10 }; 

    getData(state); 

} 

 

// Grid’s dataStateChange event handler 

function dataStateChange(state: any) { 

    // Here the query for the performed Grid action will be returned as event arguments 

    // You can pass this to the method defined for making the API call 

    getData(state); 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/imgghl?file=index.ts  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R