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.
Unfortunately, activation email could not send to your email. Please try again.

Custom Add, Update, Delete functionality for Grid Rows

Thread ID:

Created:

Updated:

Platform:

Replies:

129173 Mar 2,2017 02:32 AM Oct 6,2017 01:15 PM ASP.NET MVC 5
loading
Tags: Grid
Malcolm van Staden
Asked On March 2, 2017 04:02 AM

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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 3, 2017 10:28 PM

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 


Malcolm van Staden
Replied On March 13, 2017 03:59 AM

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

Prasanna Kumar Viswanathan [Syncfusion]
Replied On March 14, 2017 07:57 AM

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
Replied On October 5, 2017 07:23 AM

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


Vignesh Natarajan [Syncfusion]
Replied On October 6, 2017 01:15 PM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;