CRUD operations in Wijmo Grid

Wijmo Grid is the most extensively used widget among all other Wijmo widgets. In most of the cases, it is bound to the database and end users are allowed to perform the basic CRUD i.e. Create Read Update Delete operations. This is the most common requirement for all the developers while creating any application.

This blog demonstrates how you can easily perform CRUD operations in WijGrid widget bound to a webservice.

Create Operation

You can create a new row object with the required fields and push it in the data option of WijGrid. After that, you can pass this object in the WebMethod defined in the Webservice. In this method, you can write an Insert query to add this record in the database. Here is the code :

Read Operation

You can define a WebMethod that access the database and creates a collection containing the records from desired datatable. And in the script, you can make a AJAX call to access this List collection and set it to the data option of WijGrid. You may achieve the same using the below code:

Update Operation

This is one of the most important operation required by all the users i.e. to save the edited data back to the database. You can easily get the editedrow using 'selection' method of WijGrid and then, you can pass this row object to the Webmethod.

In the WebMethod, you can define an Update query to post the changes back to the database. The code will look like:

Delete Operation

Lastly, the 'Delete' operation allows the end users to delete the undesired rows from the WijGrid but you need to make sure that the same are deleted from the database as well to avoid inconsistency. You can use the following code for same: