The ColdFusion 8 cfgrid offers us an excellent interface to allow our application users to perform administrative tasks on table data. Two fundamental functions on table data include the ability to Add a Record and the ability to Delete a Record. So, I modified the cfgrid that has been built till now (blogged previously) to include Add/Delete functionality.



Demo Unavailable

For the Add function, we "pop-up" a window asking for information. When the user is done entering that, we call a CFC to add the information to the database and refresh the grid. The Add User button calls the saveUser() JS function that does this.

view plain print about
1function saveUser()
2        {
3            var objForm = document.addUserForm
4            var stcForm = {};
5            stcForm.FirstName = objForm.FirstName.value;
6            stcForm.LastName = objForm.LastName.value;
7            stcForm.DisplayName = objForm.DisplayName.value;
8            stcForm.UserName = objForm.UserName.value;
9            stcForm.UserAccountingCode = objForm.UserAccountingCode.value;
10            stcForm.Phone = objForm.Phone.value;
11            stcForm.Password = objForm.Password.value;
12            objUser.addUser(stcForm);
13            ColdFusion.Window.hide('addUser');            
14        }

The Delete link simply calls a function called delLink() that pops up a JS confirmation dialog, and if the user clicks Ok, deletes the record.

view plain print about
1function delLink()
2        {
3            var selectedRecord = grid.getSelections();
4            var delID = selectedRecord[0].data.ID;            
5            if(confirm('Delete User : ' + selectedRecord[0].data.FIRSTNAME))
6            {
7                objUser.delUser(delID);
8            };
9        }

In order to make the calls to the ColdFusion CFC, we use CFAjaxProxy tag. This was a powerful inclusion in ColdFusion 8 allowing us to call CFCs easily in JS. Read more about it at Livedocs. In the demo, we use it to refer to the Users CFC. Then, in the javascript, we also specify the callback and error handlers.

view plain print about
1<cfajaxproxy cfc="UsersD" jsclassname="Users">
2
3<script>
4var objUser = new Users();
5objUser.setErrorHandler(showError);
6objUser.setCallbackHandler(handleResult);
7</script>

Now, we can use the objUser JS variable to call CFCs specified in the UsersD CFC.

In the handleResult callback, we refresh the grid. This will refresh our grid data after the CFC functions to add or delete record has been called.

view plain print about
1function handleResult(res)
2{            
3ColdFusion.Grid.refresh('usersgrid',false);    
4}