Dialog editing for Vue Grid using WebAPI adaptor

[Denis Podkopaev]

Hello everybody,

just started using Syncfusion controls for my projects. At least I can say the controls are awesome. The Vue documentation is good by lacks in advanced topics.

Currently im try to figure out how to add the Grid control to my project. Im interested in using the Grid with Custom Editing (Add, Edit) Dialogs in Vue. As I can see I can use the DataManager with the WebApiAdapter to fetch my data from my ASP.NET Core API. 

It looks like I can just fetch data using the DataManager. The CRUD functionality needs to be implemented by myself? Is it right?

Is there any example you can provide me, some kind of best practice how to setup Grid with Dialogs in Vue and how to interact to a REST API? What I can find on Web is only how to fetch data. In your examples your are also using local fake data storage and no real world examples with a API. 

Thanks,

Denis

[Ajith Govarthan]

Hi Denis, 

Greetings from Syncfusion. 

Based on your requirement we have shared the code example for your requirement in that we have handled the dialog editing for the grid in the server side. You can refer the below attached code snippet for more details. 

App.vue 

<template> 

    <div id="app"> 

        <ejs-grid :dataSource="data" :editSettings='editSettings' :toolbar='toolbar'> 

          <e-columns> 

            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 

            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 

            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 

            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' type='date' width=120></e-column> 

          </e-columns> 

        </ejs-grid> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids"; 

import { DataManager, WebApiAdaptor } from "@syncfusion/ej2-data"; 

Vue.use(GridPlugin); 

export default Vue.extend({ 

  data() { 

    return { 

   editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }, 

      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

      data: new DataManager({ 

        url: 'api/Orders', 

        adaptor: new WebApiAdaptor(), 

        crossDomain: true 

      }) 

    }; 

  } 

}); 

</script> 

<style> 

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css"; 

</style> 

[EJ2Grid\Controllers\OrderController.cs] 

 

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Threading.Tasks; 

using EJ2Grid.Models; 

using Microsoft.AspNetCore.Http; 

using Microsoft.AspNetCore.Mvc; 

 

namespace EJ2Grid.Controllers 

{ 

    [Produces("application/json")] 

    [Route("api/Order")] 

    public class OrderController : Controller 

    { 

        // GET: api/Orders 

        [HttpGet] 

 

        public object Get() 

        { 

            var queryString = Request.Query; 

 

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            var data = OrdersDetails.GetAllRecords().ToList(); 

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

 

        } 

 

        // GET: api/Orders/5 

        [HttpGet("{id}", Name = "Get")] 

        public string Get(int id) 

        { 

            return "value"; 

        } 

 

        // POST: api/Orders 

        [HttpPost] 

        public object Post([FromBody]OrdersDetails value) 

        { 

            OrdersDetails.GetAllRecords().Insert(0, value); 

            return value; 

        } 

 

 

 

        // PUT: api/Orders/5 

        [HttpPut] 

        public object Put(int id, [FromBody]OrdersDetails value) 

        { 

            var ord = value; 

            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

            val.OrderID = ord.OrderID; 

            val.EmployeeID = ord.EmployeeID; 

            val.CustomerID = ord.CustomerID; 

            val.Freight = ord.Freight; 

            val.OrderDate = ord.OrderDate; 

            val.ShipCity = ord.ShipCity; 

            return value; 

        } 

 

        // DELETE: api/ApiWithActions/5 

        [HttpDelete("{id:int}")] 

        [Route("Orders/{id:int}")] 

        public object Delete(int id) 

        { 

            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault()); 

            return Json(id); 

        } 

 

        public class Data 

        { 

 

            public bool requiresCounts { get; set; } 

            public int skip { get; set; } 

            public int take { get; set; } 

        } 

    } 

} 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.