Syntax for calling Controller's CRUD Operations from Grid

[Llewelyn Jones]

I have the a grid and I am trying to do CRUD operations on it. What is the syntax for calling these operations that are in Controller class?

@using Syncfusion.JavaScript.Models

@model IEnumerable<SomeModel>

@{

    ViewData["Title"] = "My Title";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>@ViewData["Title"]</h2>

<form >

    <div class="container">

        <div class="row">

            <div class="col-md-4 col-md-offset-4">

                <ej-grid id="grid1" datasource="@Model" allow-filtering="true" allow-paging="true" >

                    <e-edit-settings allow-adding="true" allow-editing="true"/>

                    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' />  

                    <e-columns>

                        <e-column header-text="Id" field="Id" is-primary-key="true" visible="false" />

                        <e-column header-text="Name" field="Name" />

                    </e-columns>

                </ej-grid>

            </div>

        </div>

    </div>

</form>

[Seeni Sakthi Kumar Seeni Raj]

Hi Llewelyn, 

We could see you are using a Local datasource and you would like to perform the CRUD operations on Grid. Using the remoteSaveAdaptor of the ej.DataManager, you can bind the local dataSource as well as handle the CRUD operations on server-side. Refer to the following code example which perform CRUD operations on Grid. 

<ej-grid id="Grid" allow-filtering="true" allow-paging="true"> 

    <e-datamanager json="(IEnumerable<object>)ViewBag.data"  

                   update-url="/Home/CellEditUpdate"  

                   insert-url="/Home/CellEditInsert"  

                   remove-url="/Home/CellEditDelete" 

                   adaptor="remoteSaveAdaptor" /> 

         . . . . .  

</ej-grid> 

 

        public IActionResult Index() 

        { 

            BindDataSource(); 

            ViewBag.data = order; 

            return View(); 

        } 

        public ActionResult CellEditUpdate([FromBody]CRUDModel<Orders> value) 

        { 

            var ord = value.Value; 

            Orders val = order.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

            val.EmployeeID = ord.EmployeeID; 

            val.CustomerID = ord.CustomerID; 

             . . . .  

            return Json(value.Value); 

        } 

        public ActionResult CellEditInsert([FromBody]CRUDModel<Orders> value) 

        { 

            value.Value.OrderID =order.LastOrDefault().OrderID + 1; 

            order.Insert(0, value.Value); 

            return Json(value); 

        } 

Likewise, we do have some other adaptors. Please refer to the following Help Document. 

https://help.syncfusion.com/aspnetmvc/grid/data-adaptors 

We could also see your Grid is hiding the primaryKey column. We suspect that you are updating PrimaryKey column at the server-end and prevents the client from updating the PrimaryKey column. To identify these auto-update column, Grid provides the is-identity property in the Columns of the Grid. Refer to the following code example. 

<ej-grid id="Grid" allow-filtering="true" allow-paging="true"> 

    <e-datamanager json="(IEnumerable<object>)ViewBag.data"  

                   update-url="/Home/CellEditUpdate"  

                   insert-url="/Home/CellEditInsert"  

                   remove-url="/Home/CellEditDelete" 

                   adaptor="remoteSaveAdaptor" /> 

                . . .  

    <e-columns> 

        <e-column field="OrderID" is-primary-key="true" is-identity="true" visible="false" /> 

             . . . .  

    </e-columns> 

</ej-grid> 

 

        public ActionResult CellEditInsert([FromBody]CRUDModel<Orders> value) 

        { 

            value.Value.OrderID =order.LastOrDefault().OrderID + 1; 

            order.Insert(0, value.Value); 

            return Json(value); 

        } 

Note: For is-identity columns, you must return the inserted values to the client-side as shown in the above code example. 

Refer to the following Help Documents for isIdentity property. 

https://help.syncfusion.com/aspnetmvc/grid/editing 

https://help.syncfusion.com/js/api/ejgrid#members:columns-isidentity 

We have also prepared a sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/125936/ze/WebApplication81756936960.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Llewelyn Jones]

Thanks. It worked for me.

[Seeni Sakthi Kumar Seeni Raj]

Hi Llewelyn, 

We are happy to hear that your requirement has been achieved. Please get back to us if you require further assistance on this. 

Regards, 

Seeni Sakthi Kumar S.