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. ASP.NET MVC
  4. Custom Add, Update, Delete functionality for Grid Rows

Custom Add, Update, Delete functionality for Grid Rows

Hi,

We are using the grid to display data on our website. However, a row is made up of a combination of tables on our database. This means a single row maps to multiple primary keys for one of the tables. We are having trouble trying to add, delete and modify the grid data and make sure it is in sync with the server side data.

How is it possible to override the current add, update and delete functionality such that we can have better control over what happens on the server side? Modifying one row (checking 3 separate checkboxes each in their own column for example) implies adding 3 new entries to the DB table. Unchecking those boxes implies removing multiple records from the DB. Deleting a single row requires multiple deletes on the DB. We have tried making use of the ActionBegin and ActionComplete client side events but struggle to perform a manual override on actions like deleting (we check if the requestType is delete but that is fired when we try to remove the row using the grid deleteRow method).

Any input on this would be greatly appreciated. 

Kind Regards,
-Malcolm

5 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team March 4, 2017 03:28 AM UTC

Hi Malcom, 
 
Thanks for contacting Syncfusion support. 
 
In this when you perform CRUD opeations like add, edit and delete it should be interacted with server-side to persist data. It can be achieved in Grid using remoteSave adaptor. In remoteSave adaptor CRUD operations can be mapped to server-side using UpdateUrl, InsertUrl and RemoveUrl.  

Find the code example and sample:  

 
@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
    .AllowPaging() 
    ----------------------------- 
   .Columns(col => 
     { 
         ----------------------- 
    }) 
     
-------------------------------------------- 
 
public ActionResult NormalUpdate(EditableOrder value) 
        { 
            OrderRepository.Update(value); 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 
        public ActionResult NormalInsert(EditableOrder value) 
        { 
            OrderRepository.Add(value); 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 
        public ActionResult NormalDelete(int key) 
        { 
            OrderRepository.Delete(key); 
            return Json(key, JsonRequestBehavior.AllowGet); 
        } 
 
 
Refer to the Help document for the remoteSave adaptor.  
 
 
Regards, 
Prasanna Kumar N.S.V 


MV Malcolm van Staden March 13, 2017 07:59 AM UTC

Hi,

Thank you for the feedback. This doesn't quite answer my question though.

I need
public ActionResult NormalDelete(int key) 
To be
public ActionResult NormalDelete(EditableOrder value)
As there are multiple values tied to the one row that I need to inspect on the server side.

Is there any way to do this? 

Kind Regards,
-Malcolm

PK Prasanna Kumar Viswanathan Syncfusion Team March 14, 2017 11:57 AM UTC

Hi Malcom, 

Thanks for contacting Syncfusion support. 

Query : “As there are multiple values tied to the one row that I need to inspect on the server side. Is there any way to do this?” 

Yes, we can achieve using custom adaptor. In the custom adaptor, the Remove method has to be overridden. We have extended remove method of ej.RemoteSaveAdaptor and in the extended method we changed the value.  
 
Find the code example and sample:  
 
 
@(Html.EJ().Grid<object>("FlatGrid") 
    .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
    .AllowPaging() 
    .ToolbarSettings(toolbar => 
     { 
         toolbar.ShowToolbar().ToolbarItems(items => 
         { 
             items.AddTool(ToolBarItems.Add); 
             items.AddTool(ToolBarItems.Edit); 
             items.AddTool(ToolBarItems.Delete); 
             items.AddTool(ToolBarItems.Update); 
             items.AddTool(ToolBarItems.Cancel); 
         }); 
     }) 
    .Columns(col => 
     { 
         ----------------------------------------- 
    }) 
     .ClientSideEvents(eve => eve.Load("load")) 
    ) 
 
<script type="text/javascript"> 
    function load(args) { 
        this.model.dataSource.adaptor = new customAdaptor(); 
    } 
 
    var customAdaptor = new ej.remoteSaveAdaptor().extend({ 
        remove: function (dm, keyField, value, tableName, query) { 
            var grid = $("#FlatGrid").ejGrid("instance"); 
            var record = grid.getSelectedRecords()[0]; 
            return { 
                url: dm.dataSource.removeUrl, 
                type: "POST", 
                contentType: "application/json; charset=utf-8", 
                dataType: "json", 
                data: JSON.stringify({ "value": (record) }) 
            }; 
        } 
        
    }); 
 
</script> 
 

Refer to the Help document for the custom adaptor. 


Regards, 
Prasanna Kumar N.S.V 
 


JP JP October 5, 2017 11:23 AM UTC

How to get value from datepicker placed in grid for insert and update?

I am getting the selected date value as "2017-07-10T18:30:00.000Z" when i choose 11/07/2017(dd/MM/yyyy)

I have used inline template


VN Vignesh Natarajan Syncfusion Team October 6, 2017 05:15 PM UTC

Hi JP, 
 
Thanks for using Syncfusion products. 
 
We have analyzed your query by rendering a datePicker inside the inline Template form. we are unclear that where you get the datePicker value as “2017-07-10T18:30:00.000Z”.  In Inline template, when you save the record after selecting the date value, Grid events like (actionComplete,endEdit) will be called. We suspect that you have got the value from that event or else on the Grid you have datePicker and when you try to get value it returned as mentioned.  
We suggest you to take the datepicker instance and use getValue method to get the value as “11/07/2017” instead of  “2017-07-10T18:30:00.000Z”. 
 
Please refer the below code snippet 
 
<script>  $("#datepicker").ejDatePicker(); // Create DatePicker instance    var dateObj = $("#datepicker").data("ejDatePicker");   dateObj.getValue(); // returns the date value </script>
 
 
Please refer the our online documentation for your reference 
 
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon