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

Syntax for calling Controller's CRUD Operations from Grid

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>

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 14, 2016 08:35 AM UTC

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. 


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. 


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


Regards, 
Seeni Sakthi Kumar S. 



LJ Llewelyn Jones September 15, 2016 03:11 AM UTC

Thanks. It worked for me.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 15, 2016 05:10 AM UTC

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. 


Loader.
Up arrow icon