How to enable the Grid data CRUD function.

Hello,

As the title suggests, i am curious about how to solve it.


First, I bring the data to be imported into Grid to Ajax based on the data selected from the Dropdown list.

At this time, the imported data is received only as a DataSource From Grid.

So, if you modify the data and use Toolbar, it does not go to the controller to update to the DB.


i Want to use CRUD function in the same situation as above.

Please give me a solution on How to use it?


Below is the code i wrote. Please keep in mind

//////////HTML///////////////////

ProjectData/CrudUpdate" adaptor="UrlAdaptor">


//////////////////////////


//////////Dropdownlist Change (Script)////////////

function ProjectChange(args) {


var ProjectGrid = document.getElementById("ProjectGrid").ej2_instances[0];

var RoomGrid = document.getElementById("RoomGrid").ej2_instances[0];


//ExportBtn to be Able

document.getElementById("exportBtn").disabled = false;


$.ajax({

url: "/ProjectData/ViewUpdate",

data: { "sProjectNo": args.itemData.value },

type: "POST",

success: function (data) {


ProjectGrid.dataSource = ej.data.DataUtil.parse.parseJson(data[0]);

RoomGrid.dataSource = ej.data.DataUtil.parse.parseJson(data[1]);



},

error: function () {

alert("Error")

}

});

}


//////////////////////


///////Controller//////////////

public IActionResult UrlRoom([FromBody] DataManagerRequest dm)

{

List listRoom = RoomLoad(ProjectNo);

//ViewBag.Room = listRoom;

IEnumerable roomDatas = listRoom;


DataOperations operation = new DataOperations();

if (dm.Search != null && dm.Search.Count > 0)

{

roomDatas = operation.PerformSearching(roomDatas, dm.Search); //Search

}

if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

{

roomDatas = operation.PerformSorting(roomDatas, dm.Sorted);

}

if (dm.Where != null && dm.Where.Count > 0) //Filtering

{

roomDatas = operation.PerformFiltering(roomDatas, dm.Where, dm.Where[0].Operator);

}

int count = listRoom.Cast().Count();

if (dm.Skip != 0)

{

roomDatas = operation.PerformSkip(roomDatas, dm.Skip); //Paging

}

if (dm.Take != 0)

{

roomDatas = operation.PerformTake(roomDatas, dm.Take);

}

return dm.RequiresCounts ? Json(new { result = listRoom, count = count }) : Json(listRoom);

//return Content("");

}


public ActionResult CrudUpdate([FromBody] CRUDModel batchmodel, string action)

{

string d = action;

foreach (RoomData changeData in batchmodel.Changed)

{

RoomData After = changeData;

RoomData Before = RoomData.GetList().Where(or => or.Key == After.Key).FirstOrDefault();


RoomData.Update(Before, After);

}

foreach (RoomData deleteData in batchmodel.Deleted)

{

RoomData.Delete(deleteData);

}

foreach (RoomData InsertData in batchmodel.Added)

{

RoomData.Insert(InsertData);

}


var data = RoomData.GetList().ToList();


return Json(data);

}

////////////////////////////////////////////////////


7 Replies

SK Sujith Kumar Rajkumar Syncfusion Team November 15, 2021 10:20 AM UTC

Hi TaeWook, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to set remote data(URL adaptor) with CRUD action to the Grid dynamically. You can achieve this by setting the Grid’s dataSource as an instance of EJ2 Data Manager with URL adaptor as demonstrated in the below code snippet, 
 
// Button click event function 
document.getElementById('load').addEventListener('click', function (args) { 
    var gridObj = document.getElementById('Grid').ej2_instances[0]; 
    // Setting remote data(URL adaptor) dynamically as Grid’s dataSource 
    gridObj.dataSource = new ej.data.DataManager({ 
        url: "Home/UrlDataSource", 
        crudUrl: "Home/CrudUpdate", 
        adaptor: new ej.data.UrlAdaptor() 
    }); 
}) 
 
With this approach you will be able to perform CRUD actions and save the changes in the server side. 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 



TK TaeWook Kang September 14, 2022 02:00 AM UTC

Hi.


I thought the return value of crudUrl was the DataSource of the new grid to which crud operation was applied, but I don't think so. What role is the return value of CrudUpdate on the home controller, which is the path to CrudUrl?



JC Joseph Christ Nithin Issack Syncfusion Team September 15, 2022 06:54 PM UTC

Hi TaeWook,


  Currently we are validating your query, we will update further details on or before September 19th, 2022. We appreciate your patience until then.


Regards,

Joseph I.



JC Joseph Christ Nithin Issack Syncfusion Team September 20, 2022 06:59 PM UTC

Hi TaeWook,


  With the URL adaptor, the server side url to fetch data and perform Grid actions can be specified using the url property of DataManager and the CRUD operation in grid can be mapped to server-side Controller actions using the properties InsertUrl, RemoveUrl, UpdateUrl, CrudUrl and BatchUrl.


More details on this can be checked in the below documentation link,


URL Adaptor: https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/persisting-data-in-server


CRUDURL:

Using the CrudUrl property, the controller action mapping URL can be specified to perform all the CRUD operation at server-side using a single method instead of specifying separate controller action method for CRUD (insert, update and delete) operations.



Documentation:
https://ej2.syncfusion.com/aspnetcore/documentation/grid/editing/persisting-data-in-server#crud-url


Please get back to us for further details.


Regards,

Joseph I.



TK TaeWook Kang September 21, 2022 10:17 AM UTC

Thank you for your answer. Unfortunately, however, it did not help.


 What I'm curious about is how to use the parameters handed over when the method of the controller designated crudUrl is 'return' to json form after completing all crud operations (cshtml file). I thought the data in the grid would be updated automatically if I put the data source in the parameter, but it didn't work, so I left an inquiry.

To add an explanation, I would like to know how to use 'return Json(value.value);' in 'Crudurl.cs' of 'CrudURL Documentation' that you told me.


Can highlighted 'value.value' be used through javascript in view?



JC Joseph Christ Nithin Issack Syncfusion Team September 22, 2022 04:14 PM UTC

Hi TaeWook,


  Thanks for your update.


  Currently we are validating your requirement. We will provide further details on or before 27th September 2022, we appreciate your patience until then.


Regards,

Joseph I



JC Joseph Christ Nithin Issack Syncfusion Team November 23, 2022 12:56 AM UTC

TaeWook,


  By default, when you perform any crud actions in the grid, the controller action mapped to the CrudUrl will be triggered, and the edited data will be saved to the datasource and then the edited data will be returned as ‘Value.value’ from the controller action as 'return Json(value.value);', the returned data will be directly used in the source side to refresh the grid, this cannot be used in the client side. Share the below details.


  • Explain why would you like to use this in the client side.
  • Do you want to get the edited data in the client side.
  • Explain your requirement in detail.
  • Share a video demonstrating your requirement in detail.

Loader.
Up arrow icon