Custom Add, Update, Delete functionality for Grid Rows

[Malcolm van Staden]

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]

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); 

        } 

 

Sample: http://www.syncfusion.com/downloads/support/forum/129173/ze/Sample145862808210132 

 

Refer to the Help document for the remoteSave adaptor.  

 

https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#remotesave-adaptor 

 

Regards, 

Prasanna Kumar N.S.V 

[Malcolm van Staden]

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]

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> 

 

Sample: http://www.syncfusion.com/downloads/support/forum/129173/ze/Sample1458621566576221 

Refer to the Help document for the custom adaptor. 

https://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor 

Regards, 

Prasanna Kumar N.S.V 

 

[JP]

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]

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 

 

https://help.syncfusion.com/api/js/ejdatepicker#methods:getvalue  

 

Regards, 

Vignesh Natarajan