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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144387 May 3,2019 02:37 PM UTC May 14,2019 01:34 PM UTC Vue 3
loading
Tags: Data Grid
David Barless
Asked On May 3, 2019 02:37 PM UTC

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>

Hariharan J V [Syncfusion]
Replied On 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 


David Barless
Replied On 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:


Hariharan J V [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon