1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. EJ2 Grid ASP.NET MVC: how to perform CRUD operations in offline mode with UrlAdaptor or with List Binding?

EJ2 Grid ASP.NET MVC: how to perform CRUD operations in offline mode with UrlAdaptor or with List Binding?

Hello,

I'd like to use offline mode for Grid data source - I don't want to read data from server each time user sorts or filters grid.
However, when I set dataManager's 'Offline' property to true, controller's methods ('Insert', 'Update', 'Delete') are not triggered any more. When I remove '.Offline(true)', everything works. Please advise how to achieve editing in offline mode with UrlAdaptor. Alternatively, I can use list binding. If it's easier, please advise how to edit data in the grid in list binding mode - I wasn't able to find any documentation about it.

Thank you!

@(Html.EJS().Grid("ProductsGrid")
                .DataSource(dataManager => {
                    dataManager.Url("/Products/UrlDatasource")
                    .InsertUrl("/Products/Insert")
                    .UpdateUrl("/Products/Update")
                    .RemoveUrl("/Products/Delete")
                    .Adaptor("UrlAdaptor")
                    .Offline(true); })

5 Replies
RS Renjith Singh Rajendran Syncfusion Team July 2, 2018 10:18 AM UTC

Hi Vasyl, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement. We suggest you to use the “RemoteSaveAdaptor” instead of UrlAdaptor to achieve your requirement. By using the RemoteSaveAdaptor you can achieve list binding to Grid and edit data at server side. We have prepared a sample to perform CRUD operation at server side by using RemoteSaveAdaptor in Essential JS2. Please refer the code example below, 

[Index.cshtml] 
 
@Html.EJS().Grid("Grid").DataSource(dataManager =>{dataManager.Json(ViewBag.dataSource) 
      .InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor");}) 
      .EditSettings(e => { e.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }) 
      .Columns(col =>  { 
           col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("30%").Add(); 
           ... 
      }).Render() 
 
[HomeController.cs] 
 
        //update the record 
        public ActionResult Update(OrdersDetails value) 
        { 
            ... 
           return Json(value); 
        } 
        //insert the record 
        public ActionResult Insert(OrdersDetails value) 
        { 
 
            ... 
            return Json(new { data = value }); 
        } 
        //Delete the record 
        public ActionResult Delete(int key) 
        { 
            ... 
           return Json(data); 
        } 

Please download the sample from the link below, 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


VS Vasyl Shepelyov July 4, 2018 11:48 AM UTC

Hi Renjith, 

Thank you for your advise, this approach works fine. I have one more question about it. If, let's say, insert method was not successful on server side (i.e. user provided new record with the same key that already existing record had), how should I modify 'Insert' controller's action and the grid? Ideally I'd like to give user some friendly error message and either to show him grid with invalid record in edit mode or just to show him grid in it's initial state (without this invalid record).

Thank you,
Vasyl

LR Logesh Rajappa Syncfusion Team July 5, 2018 11:40 AM UTC

Hi Vasyl, 

Thanks for contacting Syncfusion support. 

Query: “I'd like to give user some friendly error message” 

We have analyzed your query and we have made a sample on “error message when added new record with already existing key” in the datasource. To achieve your requirement, we have used actionBegin event. In this event Insert operation is prevented initially as args.cancel set to true, then getStatus method is called through the ajax request to check if the record already exist in the datasoucre. Based on the ajax response, error or endEdit operation is done. Please refer to the below sample for your reference. 

Code Example: 

[index.cshtml] 
@{ 
    ViewBag.Title = "Grid"; 
} 
<div> 
    @Html.EJS().Grid("Grid").DataSource(dataManager =>{dataManager.Json(ViewBag.dataSource).InsertUrl("/Home/Insert").RemoveUrl("/Home/Delete").UpdateUrl("/Home/Update").Adaptor("RemoteSaveAdaptor"); 
}).EditSettings(e => { e.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Columns(col => 
{ 
... 
    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("30%").Add(); 
... 
}).ActionBegin("actionBegin").Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 
 
</div> 
<script> 
    flag = true; 
    function actionBegin(args) { 
        if (args.requestType == 'save' && args.action == "add") {  //checking the CRUD operation 
           
            if (flag) { 
                args.cancel = flag; //it was canceled the default add operation 
                var ajax = new ej.base.Ajax("/Home/getStatus", "POST", true); 
                ajax.send(JSON.stringify(args.data)).then( 
                    function (value) { 
                        if (value.split(',')[0] == "true") { 
 
                            flag = false; 
                            var gridObj = document.getElementById('Grid').ej2_instances[0]; 
                            gridObj.endEdit();   //perform the Save operation 
                            alert(value.split(',')[1]); 
                        } 
                        else { 
                            alert(value.split(',')[1]);  //error message 
                        } 
 
                    } 
                ) 
            } 
            flag = true; 
        } 
    } 
</script> 

[HomeController.cs] 
public ActionResult getStatus(OrdersDetails value) { 
 
            var ord = value; 
            var add = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); //Check for duplicate records 
            if (add == null) 
            { 
                return Content("true,Suceessfully inserted"); 
            } 
            else 
            { 
                return Content("false,Duplicate value can't be inserted"); 
            } 
 
        } 


Please get back to us for further assistance. 

Regards, 
Logesh Rajappa 


VS Vasyl Shepelyov July 10, 2018 04:14 PM UTC

Hi Logesh, thank you for the advise, it works fine.

RS Renjith Singh Rajendran Syncfusion Team July 11, 2018 04:00 AM UTC

Hi Vasyl, 
 
Thanks for the update. 
 
We are happy to hear that your requirement has been achieved. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith Singh Rajendran. 


Loader.
Up arrow icon