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
  1. Home
  2. Forum
  3. Angular
  4. Manual CRUD operations in ejGrid

Manual CRUD operations in ejGrid

My project requires CRUD operations to be performed manually. Rather than the grid automatically sending request to the server, I would prefer to get data from the event (endEdit in my case), do some data transformations client side, and only then do my own http request to server. Is it possible in the Syncfusion ejGrid?

2 Replies
RA Rykunov Alex February 13, 2017 12:54 PM UTC

I researched the theme a bit.

What I've meant, that using the standard grid editing tools like editSettings.rowPosition, and grid editing methods like updateRecord is very nice. However, it denies the developer the ability to precisely configure the CRUD operations. My own problem is that all http requests are being made in one place in my project, so I'd want to make that kind of requests manually there, instead of making a few in every grid all over the project. It would be good feature, if in addition to url, dataManager allowed to point to a function, that 'adds', 'updates', and 'deletes' the data. So that all the features that are availiable to url CRUD would also be availiable to manual CRUD.

Implementation of my current variant is really simple: editing still works if you set allowEditing: false, but save events wont trigger. Unfortunately, that doesnt seem to work with allowAdding. So, the solution here is set allowEditing false, and then set a bunch of events like (cellSave) that lead to a function, that saves the data. You can add records into the grid by inserting them into your dataManager, and then refreshing the grid.

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 14, 2017 12:53 PM UTC

Hi Rykunov, 


Thanks for your interest in syncfusion support. 


It is possible to perform CRUD operations  manually in syncfusion ejGrid. At first, you can get the modified data  while on insert, update, delete operations  by using events such as “endAdd”, “endEdit”, and “endDelete”. Then you can modify the data according to your requirement and send request to the server side using Ajax post. And on the Ajax success event, you can retrieve the data from server side and refresh the datasource on the client side. 


Please refer to the code example:- 

@(Html.EJ().Grid<object>("FlatGrid") 
          .Datasource((IEnumerable<object>)ViewBag.datasource) 
          .AllowSorting()    /*Sorting Enabled*/ 
          .AllowPaging()    /*Paging Enabled*/ 
          .EditSettings(edit => edit.AllowAdding().AllowEditing().AllowDeleting()) 
          .ClientSideEvents(eve => 
             { 
                 eve.EndAdd("endAdd"); 
                 eve.EndEdit("endEdit"); 
                 eve.EndDelete("endDelete"); 
             }) 
          .ToolbarSettings(tool => tool.ShowToolbar().ToolbarItems(items => 
                        { 
                            items.AddTool(ToolBarItems.Add); 
                            items.AddTool(ToolBarItems.Edit); 
                            items.AddTool(ToolBarItems.Cancel); 
                            items.AddTool(ToolBarItems.Update); 
                            items.AddTool(ToolBarItems.Delete); 
                            items.AddTool(ToolBarItems.Search); 
                        })) 
        .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
            col.Field("EmployeeID").HeaderText("Employee  
 
        }) 
) 
 




Please refer to the code example using “endAdd”, “endDelete”, “endEdit” events on crud operations:- 

<script type="text/javascript"> 
    function endEdit(args) { 
         $.ajax({ 
            url: "/Grid/Update", 
            type: "POST", 
            contentType: "application/json", 
            data: JSON.stringify({ value: args.data }), 
             success: function (value) { 
                $("#Grid").ejGrid("dataSource", value); 
                alert("Save Complete") 
            }, 
            error: function (xhr) { 
                alert('error'); 
            } 
        }); 
 
    } 
    function endAdd(args) { 
        $.ajax({ 
            url: "/Grid/Insert", 
            type: "POST", 
            contentType: "application/json", 
            data: JSON.stringify({ value: args.data }), 
            success: function (value) { 
                $("#Grid").ejGrid("dataSource", value); 
                alert("Add Complete") 
            }, 
            error: function (xhr) { 
                alert('error'); 
            } 
        }); 
 
    } 
    function endDelete(args) { 
         $.ajax({ 
            url: "/Grid/Delete", 
            type: "POST", 
            contentType: "application/json", 
            data: JSON.stringify({ key: args.data.OrderID }), 
            success: function (value) { 
                $("#Grid").ejGrid("dataSource", value); 
                alert("Delete Complete") 
            }, 
            error: function (xhr) { 
                alert('error'); 
            } 
         }) 
    } 
     
</script> 




Refer code example on server side:- 

public ActionResult Update(EditableOrder value) 
   { 
      OrderRepository.Update(value); 
      var data = OrderRepository.GetAllRecords(); 
      return Json(value, JsonRequestBehavior.AllowGet); 
    } 
public ActionResult Insert(EditableOrder value) 
    { 
       OrderRepository.Add(value); 
       var data = OrderRepository.GetAllRecords(); 
       return Json(value, JsonRequestBehavior.AllowGet); 
    } 
public ActionResult Delete(int key) 
     { 
        OrderRepository.Delete(key); 
        var data = OrderRepository.GetAllRecords(); 
        return Json(data, JsonRequestBehavior.AllowGet); 
    } 
                
  


Please refer to the attached sample according to your requirement:- 




Please refer the API reference link for endEdit, endAdd, endDelete events:- 









Regards, 


Farveen sulthana T 


Loader.
Live Chat Icon For mobile
Up arrow icon