We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

RemoteSaveAdaptor not making request to server to save new record or displaying data

I've got a .NET Core server with a Vue UI. I have a grid that is using RemoteSaveAdaptor to allow CRUD ops to take place on the server. The grid is not showing data, and when I try and insert or edit a record, no HTTP request is made when I hit enter or click Update. Inspecting the component and vuex store shows an array of data in this.clientUrls. If I set the :dataSource attribute directly to this.clientUrls, the grid will show data but no requests are made to the server when adding/editing a record. The route/method on the server for inserting a record is standard HttpPost that returns the newly created record. This is what my component looks like:

<template>
<v-layout>
<v-flex>
<div xs-12>
<ejs-grid :dataSource="dataSource" :toolbar="toolbar" :editSettings="editSettings" height="auto" width="540">
<e-columns>
<e-column :isPrimaryKey="true" field="clientId" headerText="Client ID" textAlign="center" width="70"></e-column>
<e-column field="clientUrl" headerText="Url" textAlign="center" width="140"></e-column>
</e-columns>
</ejs-grid>
</div>
</v-flex>
</v-layout>
</template>

<script>
import { mapGetters } from "vuex";
import { Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DataManager, RemoteSaveAdaptor } from "@syncfusion/ej2-data";

export default {
computed: {
...mapGetters("clientStore", {
clientUrls: "get_selectedClientUrls",
selectedClientId: "get_selectedClientId"
})
},
data() {
return {
dataSource: new DataManager({
json: this.clientUrls,
adaptor: new RemoteSaveAdaptor(),
insertUrl: "/AdminApp/ManageClients/Urls/AddUrl",
updateUrl: "/AdminApp/ManageClients/Urls/EditUrl"
}),
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"],
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true
}
};
},
provide: {
grid: [Toolbar, Edit]
}
};
</script>

3 Replies

HJ Hariharan J V Syncfusion Team May 13, 2019 10:06 AM UTC

Hi David, 
  
 
 
We are sorry for the delay. As per your query, we have validated the Essential Studio 2 Grid with RemoteSaveAdaptor in the Vue platform. We are unable to reproduced the reported defect “CRUD operations are not working on the EJ2 Grid using RemoteSaveAdaptor” and we are created a sample with RemoteSaveAdaptor in EJ2 Grid in Vue platform. 
  
We have modified the provided code example and could you please refer the following code example to know about the RemoteSaveAdaptor in Vue platform. 
[fetchdata.vue.html] 
  
<template> 
    <div> 
        <ejs-grid ref='grid' :dataSource="data" allowPaging="true" :toolbar="toolbar" :editSettings="editSettings" > 
            <e-columns> 
                .    .     .     . 
           </e-columns> 
        </ejs-grid> 
   </div> 
</template> 
<script src="./fetchdata.ts"></script> 
<style> 
    @import "https://cdn.syncfusion.com/ej2/material.css"; 
</style> 
  
[fetchdata.ts] 
  
import Vue from "vue"; 
import axios from 'axios'; 
import VueAxios from 'vue-axios'; 
  
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids"; 
import { DataManager, RemoteSaveAdaptor } from "@syncfusion/ej2-vue-grids/node_modules/@syncfusion/ej2-data" // Refer this path of EJ2 Grid dependencies 
import Component from "vue-class-component"; 
.    .    .    . 
  
Vue.use(GridPlugin); 
  
export default Vue.extend({ 
    data: () => { 
 
        return { 
            toolbar: ['Add', 'Edit','Delete','Update','Cancel'], 
            editSettings: { allowAdding: true, allowEditing:true, allowDeleting:true },        
           
            data: new DataManager({ 
                json: localData, 
                insertUrl: "Home/Insert", 
                updateUrl: "Home/Update", 
                removeUrl: "Home/Delete", 
                adaptor: new RemoteSaveAdaptor(), 
            }),            
        }; 
    }, 
    provide: { 
        grid: [Page, Toolbar,Edit // You need to provided a required module here 
    } 
}); 
  
For your reference we have shared the screenshot with Server POST process while edit a grid record. 
 
  
  
  
Please get back to us, if you need further assistance. 
  
Regards, 
Hariharan 



DB David Barless May 13, 2019 01:02 PM UTC

Why do you say this is the path of the dependencies: "@syncfusion/ej2-vue-grids/node_modules/@syncfusion/ej2-data"
Your documentation says differently:



HJ Hariharan J V Syncfusion Team May 14, 2019 01:34 PM UTC

Hi David, 
  
You can use both suggestions of previous update and Documentation sample itself which suggestions are working the same functionality in the EJ2 Grid in the Vue platform. 
  
Regards, 
Hariharan 


Loader.
Live Chat Icon For mobile
Up arrow icon