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

CRUD Operation from database

Dear Team,

Can we have simple example to do CRUD operations on EJ2 MVC grid from a sql database table.

The default Datasource to load data in grid should have parameter also.

Tried Documentation but couldn't succeed. Also gets error on IACTIONRESULT as undefined. 

So, please require any example.

Thanks
PREM

5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team January 16, 2019 09:37 AM UTC

Hi Prem, 

Greetings from Syncfusion. 

As per your suggestion we have prepared a sample with CRUD operations enabled in Grid and sample can be downloadable from the below location. 


Regards, 
Thavasianand S. 



PR Prem replied to Thavasianand Sankaranarayanan January 16, 2019 03:56 PM UTC

Hi Prem, 

Greetings from Syncfusion. 

As per your suggestion we have prepared a sample with CRUD operations enabled in Grid and sample can be downloadable from the below location. 


Regards, 
Thavasianand S. 


Hi Thavasianand S,

Thanks for the prompt response.

Your example helped me a lot and i have developed my first CRUD app using MVC EJ2 grid.

Now Here we are getting data on Grid Load like follwoing:-
DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource")


 Now in my page, I have criteria to select date range, click Submit then the data will come from database and load in the Grid then the User will start CRUD operation.

So , here how can we update the datasource again on demand.

Thanks



TS Thavasianand Sankaranarayanan Syncfusion Team January 18, 2019 06:59 AM UTC

Hi Prem, 
 
Query: Now in my page, I have criteria to select date range, click Submit then the data will come from database and load in the Grid then the User will start CRUD operation. So , here how can we update the datasource again on demand. 
 
We have validated your query and created a sample based on your requirement. Here, we have initially bind the grid with data and then you can select particular date range values in daterangepicker. The grid will reload with the particular data between selected dates in daterangepicker. Then you can perform CRUD operations.  Please find the below code example and sample for your reference. 
 
[code example] 
... 
<div> 
     
    @Html.EJS().DateRangePicker("daterangepicker").Width("200").Change("change").Render(); 
 
@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").UpdateUrl("/Home/Update").RemoveUrl("/Home/Delete").InsertUrl("/Home/Insert").Adaptor("UrlAdaptor"); }).AllowPaging(true).Width("auto").Columns(col => 
{ 
    ... 
}).AllowFiltering(true).EditSettings(edit => { edit.AllowAdding(false).AllowEditing(true).AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string> { "Add","Edit","Delete","Update","Cancel"}).Render() 
</div> 
 
<script> 
    ... 
    
    function change(args) { 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        
        if (args.value) { 
        var predicate = new ej.data.Predicate("OrderDate", "greaterthan", args.value[0]); 
        predicate = predicate.and("OrderDate", "lessthan", args.value[1]); 
            var query = new ej.data.Query().where(predicate); 
            grid.query = query; 
            grid.refresh(); 
        } 
    } 
 
</script> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 



SA Saad March 12, 2020 01:33 PM UTC

Hi, this is not working 


RR Rajapandi Ravi Syncfusion Team March 18, 2020 11:44 AM UTC

Hi Saad, 

Based on your update you have mentioned that it is not working at your end. So, please provide the information regarding what operation is does not working at your end. 

In previous update we have attached the sample for “Filter the Grid columns from dateRangerPicker and perform crud operation” was works fine from our end.  

Please refer the below sample for more information. 


Before we start providing solution on your query, Please share the below details that will be helpful for us to provide better solution. 

1. Share the issue replication procedure. 

2. Please confirm your package version. 

3. If you are facing any console error please share the screenshot 

4. Please share your issue scenario in video format. 

Regards, 
Rajapandi R 


Loader.
Live Chat Icon For mobile
Up arrow icon