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

Display data with CRUD with SQL Database


You have some complex samples with mock database use, that's cool for view the potential for you components.
But, it's very harder to adapt you samples for really use, with a SQL Database.

That's my situation:
  • I have a project with ASP.NET Core MVC (Create new project, select Webapp .NET Core, then select MVC based on .NET Core)
  • I use Entity Framework Core for the code generation of controllers based on my models, and for manage migrations on my database
  • And i want implement the Grid for displaying a Model with CRUD operations
My model is a simple model with an Id and a Name.
Why implement you Grid component with CRUD operations?

Thank you for you help.
Best regards,

3 Replies

PS Pavithra Subramaniyam Syncfusion Team August 27, 2019 06:07 AM UTC

Hi Yann, 
Greetings from Syncfusion. 
You can perform the Grid Actions such as paging, filtering , CRUD etc. with SQL database by using the “UrlAdaptor”. We have prepared a simple sample based on your requirement. Please refer to the below code example, documentation link and sample link for more information. 
@(Html.EJS().Grid<mvc_ej2.Models.Order>("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("Home/Remove"); }).Width("auto").Columns(col => 
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 
    .  .  . 
}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()) 
public class HomeController : Controller 
        public NORTHWNDEntities1 db = new NORTHWNDEntities1(); 
        .  .  . 
        public ActionResult UrlDatasource(DataManagerRequest dm) 
            IEnumerable DataSource = OrderRepository.GetAllRecords(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Search != null && dm.Search.Count > 0) 
                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 
            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 
                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 
            if (dm.Where != null && dm.Where.Count > 0) //Filtering 
                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 
            int count = DataSource.Cast<Order>().Count(); 
            if (dm.Skip != 0) 
                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 
            if (dm.Take != 0) 
                DataSource = operation.PerformTake(DataSource, dm.Take); 
            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }, JsonRequestBehavior.AllowGet) : Json(DataSource); 
        public ActionResult Insert(Order value) 
            // here you can do your Insert Action 
            return Json(value); 
        public ActionResult Remove(int key) 
            // here you can do your Delete Action 
            var data = OrderRepository.GetAllRecords(); 
            var count = data.Cast<Order>().Count(); 
            return Json(new { result = data, count = count }); 
        public ActionResult Update(Order value) 
            var ord = value; 
            // here you can do your Update Action 
            Order val = OrderRepository.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.Freight = ord.Freight; 
            val.OrderDate = ord.OrderDate; 
            return Json(value); 
Please get back to us if you need any further assistance on this. 
Pavithra S. 

YJ Yann Jobin August 28, 2019 12:31 PM UTC

That's work yet, but with the ASP.NET Core UI control, my project is a Web app based on ASP.NET Core Framework, but with MVC design pattern.
Thank you for your sample!

Best regards

PS Pavithra Subramaniyam Syncfusion Team August 29, 2019 12:08 PM UTC

Hi Yann, 
Thanks for your update. 
For Essential JavaScript 2 ASP.NET CORE Grid UI, please refer to the below documentation and online demo links. 
Please get back to  us if you need any further assistance on this. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon