Best approach - local or remote data in Data Grid

[Copleston]

Hi, I am starting a new project that will use the Data Grid and I am not sure if I should use local data or remote data.

It will need to support CRUD operations.

How much data becomes impractical for local data?

If I use remote data with paging, are there features the data grid will not support (e.g. selections across pages, grouping, exporting, offline, etc)?

Many thanks for helping me decide on the best approach.

[Thiyagu Subramani]

Hi Copleston, 

Thanks for contacting Syncfusion support. 

From your shared information we suggest you to bind remote or local data binding based on your Grid architecture and data Source size. By default if we bind Grid data as local, Grid all actions will perform locally likewise if we bind Grid data as remote, Grid actions will perform remotely. By default all grid actions are performed in both local and remote data.  

For more information about local and remote data , please refer to the below documentation. 

Local data: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#local-data 

Remote data : https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#remote-data 

If you want bind your own API services to the Grid, we suggest you to bind Grid data like custom binding. 

 

In-build Adaptors: https://ej2.syncfusion.com/documentation/data/adaptors/ 

Custom Binding: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#custom-binding 

If you binding large number data to the Grid we suggest you to paging , virtualization and infinite scrolling support to the Grid.  

Paging : https://ej2.syncfusion.com/vue/documentation/grid/paging/ 

Virtualization: https://ej2.syncfusion.com/vue/documentation/grid/virtual/ 

Limitation of virtualization: https://ej2.syncfusion.com/vue/documentation/grid/virtual/#limitations-for-virtualization 

Infinite scrolling : https://ej2.syncfusion.com/vue/documentation/grid/infinite-scroll/ 

Limitation of infinite scrolling : https://ej2.syncfusion.com/vue/documentation/grid/infinite-scroll/#limitations-for-infinite-scrolling 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[William Morgenweck]

Hi-- This may be a very dumb question but I have always used remote data and now I'm trying to attach to a local data source and am having trouble with the syntax for some reason.  Can you provide a link to your actual

import { data } from './datasource.js';

so I can validate the structure on the datasource.js page?  For some reason I can't bind correctly and I want to

eliminate all steps. 

[William Morgenweck]

It's aways after I ask a question-- I found what I needed.

https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#local-data

Thanks

[Rajapandi Ravi]

Hi Copleston, 

Thanks for the update 

Based on the shared details currently we are preparing a sample at our end and facing some complexities. So, we need some more time to validate. We will update the further details on or before Aug20, 2021. Until then we appreciate your patience. 

Regards,
Rajapandi R 

[Thiyagu Subramani]

Hi William, 

Based on your shared information we have prepared a sample using local data and data loaded from external file (import { data } from "./datasource.js"; ) . Please refer to the below code and sample link. 

<template> 

  <div id="app"> 

    <ejs-grid :dataSource="data" height="315px"> 

. . . . . . . . .  

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

Vue.use(GridPlugin); 

export default { 

  data() { 

    return { 

      data: data, 

    }; 

  }, 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

[datasoucre.js] 

exports.data = [ 

  { 

    OrderID: 10248, 

    CustomerID: "VINET", 

    EmployeeID: 5, 

    OrderDate: new Date(8364186e5), 

    ShipName: "Vins et alcools Chevalier", 

    ShipCity: "Reims", 

    ShipAddress: "59 rue de l Abbaye", 

    ShipRegion: "CJ", 

    ShipPostalCode: "51100", 

    ShipCountry: "France", 

    Freight: 32.38, 

    Verified: !0 

  }, 

  . . . . . . . . . . . . . 

  { 

    OrderID: 10262, 

    CustomerID: "RATTC", 

    EmployeeID: 8, 

    OrderDate: new Date(8379738e5), 

    ShipName: "Rattlesnake Canyon Grocery", 

    ShipCity: "Albuquerque", 

    ShipAddress: "2817 Milton Dr.", 

    ShipRegion: "NM", 

    ShipPostalCode: "87110", 

    ShipCountry: "USA", 

    Freight: 48.29, 

    Verified: !0 

  }]; 

 

Sample link:  https://codesandbox.io/s/vue-template-forked-p9wki?file=/src/App.vue 

UG: https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#local-data 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S