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

[David Barless]

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]

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. 

 

  

  

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RemoteSaveAdaptor-Vue1192748654.zip 

  

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

  

Regards, 

Hariharan 

[David Barless]

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]

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