What is needed on EJGRID to persist data on database server (CRUD)?

Hi all,
I have a MVC Core WebApp and i'd like to know what i need to make the crud via EJGrid?

@{Html.EJ().Grid<object>("Grid")
        .Locale("pt-BR")
        .Datasource(((IEnumerable<object>)ViewBag.datasource))
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom).EditMode(EditMode.Batch).ShowConfirmDialog(false); })
        .ToolbarSettings(toolbar =>
        {
            toolbar.ShowToolbar()
                .ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Search);
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Delete);
                    items.AddTool(ToolBarItems.Update);
                    items.AddTool(ToolBarItems.Cancel);
                });
        })
        .Columns(col =>
        {
               ....
        })
        .Render();
}



6 Replies

SE Sathyanarayanamoorthy Eswararao Syncfusion Team May 28, 2018 12:34 PM UTC

Hi Danilo, 

Thanks for contacting Syncfusion support. 

Query: What is needed on EJGRID to persist data on database server (CRUD)? 

According to your query we suspect that you want to persist the edited data in database in server side. We have explained about this requirement in the below documentation. 


For your convenience, we have achieved the same in the below code example. In the below code example, we have used RemoteSaveAdaptor and the BatchURL to perform CRUD operations on the server side. 
[index.cshtml] 
@{Html.EJ().Grid<object>("Grid") 
                            .Locale("pt-BR") 
                            .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).BatchURL("/Home/BatchUpdate").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom). 
EditMode(EditMode.Batch).ShowConfirmDialog(false); }) 
 
                                             …... 
 
                            .Columns(col => 
                            { 
                                col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true); 
                                      
                                 …... 
 
                           }) 
                            .Render(); 
} 
[controller.cs] 
 
public ActionResult BatchUpdate([FromBody]CRUDModel<Order> myObject) 
        { 
            if (myObject.Changed != null && myObject.Changed.Count > 0) 
            { 
                foreach (var temp in myObject.Changed) 
                { 
                    var ord = temp; 
                    Order val = orddata.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; 
                } 
            } 
            if (myObject.Added != null && myObject.Added.Count > 0) 
            { 
                foreach (var temp in myObject.Added) 
                { 
                    orddata.Insert(0, temp); 
                } 
            } 
            if (myObject.Deleted != null && myObject.Deleted.Count > 0) 
            { 
                foreach (var temp in myObject.Deleted) 
                { 
                    orddata.Remove(orddata.Where(or => or.OrderID == temp.OrderID).FirstOrDefault()); 
                } 
            } 
 
            return Json(new { added = myObject.Added, changed = myObject.Changed, deleted = myObject.Deleted }); 
        } 
    } 
         

Please refer the below documentation for details of RemoteSaveAdaptor. 


If you need any further assistance please get back to us. 

Regards,
Sathyanarayanamoorthy 




DA Danilo May 28, 2018 06:00 PM UTC

Hi Sathyanarayanamoorthy,
Great! thank you very much! It works fine!


Now another question is how do i set the OrderID primary key on Add operation: 

.Columns(col => 
{ 
     col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Visible(false); 
                                     
      ... 
 }) 





PS: if i make de ID column visible and enter some value, everything is OK. But we can "hide" de PK column on the grid.



SE Sathyanarayanamoorthy Eswararao Syncfusion Team May 29, 2018 12:37 PM UTC

Hi Danilo, 

According to your query you need to set the value for the PrimaryKey column on the server side when a new record is added to the grid. 

In attached screenshot we found that you are getting null value in the parameter of BatchUpdate method. The root cause is in your code example we found that you have missed .Add()  in the column definition. So, that column will not be added to the Grid Model. Since there is no Primarykey column in Grid we are getting null value in the parameter.  

In the previous update by mistake we have also missed .Add() method for the column definition. We are sorry for the inconvenience caused. 

Please refer the below code example. 

In the below code example we have generated a random number and assigned that value to the PrimaryKey Column (OrderID) in server side during the insert operation.  

[index.cshtml] 
@{Html.EJ().Grid<object>("Grid") 
                            .Locale("pt-BR") 
                            .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).BatchURL("/Home/BatchUpdate").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom). 
EditMode(EditMode.Batch).ShowConfirmDialog(false); }) 
 
                                             …... 
 
                            .Columns(col => 
                            { 
                                col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Visible(false).Add(); 
                                      
                                 …... 
 
                           }) 
                            .Render(); 
} 
[controller.cs] 
 
public IActionResult BatchUpdate([FromBody]List<Order> changed, [FromBody]List<Order> added, [FromBody]List<Order> deleted) 
        { 
            if (changed != null && changed.Count > 0) 
            { 
                foreach (var temp in myObject.Changed) 
                { 
                                       
                    var ord = temp; 
                    Orders val = orddata.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
                    val.OrderID = ord.OrderID; 
                    val.EmployeeID = ord.EmployeeID; 
                    val.CustomerID = ord.CustomerID; 
                    val.OrderDate = ord.OrderDate; 
                    val.ShipCity = ord.ShipCity; 
                } 
            } 
            if (myObject.Added != null && myObject.Added.Count > 0) 
            { 
                Random ran = new Random(); 
                foreach (var temp in myObject.Added) 
                { 
                    temp.OrderID = ran.Next(); 
                    orddata.Insert(0, temp); 
                } 
            }            if (deleted != null && deleted.Count > 0) 
            { 
                foreach (var temp in deleted) 
                { 
                    orddata.Remove(orddata.Where(or => or.OrderID == temp.OrderID).FirstOrDefault()); 
 
                } 
 
            } 
                var data = orddata; 
            return Json(new { added = added, changed = changed, deleted = deleted }); 
 
        } 

Refer the below screenshot. 

 


For your convenience we have prepared a sample which can be downloaded from the below location. 


If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 



DA Danilo May 29, 2018 01:03 PM UTC

Hi Sathyanarayanamoorthy,
Great! I was looking for a way to do that at the view. But this way, work fine!

Another question is why the myObject.Changed is null when i change just one column? 
but when i change more than one column, it works great!

Thank you 


DA Danilo May 29, 2018 03:04 PM UTC

Hi
I'm still unable to make CRUD totally.

If i add PrimaryKey column, the "change" works fine but the "add"operation not.

How to assign a value to this property?

What am i forgeting to config?

Thank you


SE Sathyanarayanamoorthy Eswararao Syncfusion Team May 30, 2018 01:11 PM UTC

Hi Danilo, 

Query: Another question is why the myObject.Changed is null when i change just one column?but when i change more than one column, it works great! 

This issue occurs only when the PrimaryKey Column is not specified. But in the next update you have mentioned that the change operation works fine so we suspect that you have resolved the above mentioned query. 

Also from the screenshot provided in the latest update we suspect that you need to update the Id column in the Client side. We have achieved this requirement using the beforeBatchSave event in the below code example. 

If you want to update the Id column in the server side then we suggest you to follow the solution provided in our previous update.  

 
@{Html.EJ().Grid<object>("Grid") 
                                .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).BatchURL("/Home/BatchUpdate").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
 
                                  …...                                 
                                 
                                .ClientSideEvents(eve => eve.BeforeBatchSave("Save")) 
                                .Columns(col=> { 
                                                                    col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Visible(false).Add(); 
                                    col.Field("EmployeeID").HeaderText("EmployeeID").Add(); 
                                    col.Field("CustomerID").HeaderText("CustomerID").Add(); 
                                    col.Field("ShipCity").HeaderText("ShipCity").Add(); 
 
                                }) 
                                .Render(); 
} 
 
 
<script type="text/javascript"> 
    function Save(args) { 
        args.batchChanges.added[0].OrderID = 12345; 
    } 
</script> 

Refer the below screenshot. 

 

Please refer the below documentation for details of beforeBatchSave event. 


We have prepared a sample for your reference which can be downloaded from the below location. 


If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 
 


Loader.
Up arrow icon