Sample about Grid and performing CRUDperations on it MVC (non-Classic)

[RAJEEV KUMAR SHARMA]

Please provide an example by which I can perform CRUD operation on a Model data from SQL Server and SQL LocalDb with save, update, delete button in Each Row and also actual data is updated in database.

Thanks & Regards

[Rohith]

Hi Rajeev,

I have used ClientSideEvent ActionComplete to catch the event of adding /editing rows in Grid.

You can check the request type as (add/edit)  and call an MVC action which saves the data to DB.

Help link which I used: http://mvc.syncfusion.com/demos/web/Grid/ExternalFormEditing

 

[Alan Sangeeth S]

Hi Rajeev,

 

Thanks for using Syncfusion Products.

 

We would like to let you know that using “Commands” property of Columns we can add Save, Edit, Update and Cancel buttons to each row. Please refer the following code snippets.

}

@(Html.EJ().Grid<EJGrid.Models.Order>("Editing")
…
.Columns(col =>

        {

col.HeaderText("Manage Records").Commands(command =>

            {

                command.Type(UnboundType.Edit)

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "Edit"

                       }).Add();

…

                command.Type(UnboundType.Cancel)

                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()

                       {

                           Text = "Cancel"

                       }).Add();

            }).IsUnbound(true).Width(130).Add();

        })

)

 

Then using “RemoteSaveAdaptor”, we have Performed CRUD operations in Grid. The insert, update, delete action in Grid will be mapped to the controller action spectified in the CRUD urls (InsertUrl, UpdateUrl, RemoveUrl). Please refer the following code snippets.

 

@(Html.EJ().Grid<EJGrid.Models.Order>("Editing")

        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("Home/Update")

            .InsertURL("Home/Insert").RemoveURL("Home/Remove").Adaptor("remoteSaveAdaptor"))

.AllowFiltering()

.AllowSorting()
…
)

[Controller]

/Edited Record values will get binded to this action

public ActionResult Update(EditableOrder value) {

            OrderRepository.Update(value);

            var data = OrderRepository.GetAllRecords();

            return Json(data, JsonRequestBehavior.AllowGet);

}

 

For your convenience we have created a sample and the same can be downloaded from below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/127595/EJGrid-1292646861.zip

 

We also would like to let you know that in the above we have an issue that “On Record Delete Grid Pager TotalRecord Count not updated until page refresh”. We have logged defect report for this and the fix for this issue will be included in 2014 Volume 2 Service Pack 2 release.

 

Please let us know if you have any queries.

 

Regards.
Alan Sangeeth S

[Ragavee U S]

Hi Rajeev,

 

We are glad to announce that our  Essential Studio service pack-2 for Volume 2, 2014 is rolled out and is available for download under the following link.

 

http://www.syncfusion.com/forums/117190/essential-studio-2014-volume-2-service-pack-2-release-v12-2-0-42-available-for-download

 

The fix for the issue “On Record Delete Grid Pager TotalRecord Count not updated until page refresh” is included in the above provided link.

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

 

Regards,

Ragavee U S

[James]

Do you have an example using WebApi for CRUD operations? and do you have to add the commands to each row or can you just use inline editing and the toolbar?