The first thing to do in order to show the grid on the page
is create the grid client control and bind data to it as shown in the code
below.
Listing 22
var app = Sys.Application;
app.add_load(applicationLoadHandler);
function applicationLoadHandler(sender, args)
{
var Contacts = $create(Bhaidar.AJAXControls.ContactControl, // Type
null, // Properties
{
editRecord: EditRecord, deleteRecord: DeleteRecord
}
, // Events
null, // References
$get("ContactControl")); // Element
// Wire up the add new context button click event handler
$addHandler($get('btnNewContact'), 'click', Function.createDelegate(this,
AddNewContact));
// Bind the Contact Control data
GetContactList();
}The code handles the pageLoad function that is part of the
Application object and creates the ContactControl by using the $create method.
Using the $create method we can pass in the Type of the control we are creating
in this case Bhaidar.AJAXControls.ContactControl, define properties in this
case no properties are defined, attach event handler to events, in this case
the code attaches two events editRecord and DeleteRecord to two event handlers
respectively, and finally set the DOM element that this control is bound to. In
this case the ContactControl is bound to a div element on the page.
Listing 23
<div id="ContactControl" style="width:100%"></div>
Next, a handler is added to the button that creates a new
contact record. The event handler is included which is AddNewContact function.
Finally, a call to the GetContactList function is done. This
function is responsible of retrieving data from the AJAX service and binding it
to the grid client controls.
Listing 24
function GetContactList()
{
var startIndex = currentPage;
var endIndex = pageSize
Bhaidar.Services.ContactsService.GetContactList
(startIndex, endIndex, OnDataReady);
}The success callback function that will be executed when the
response is back from the server is as follows:
Listing 25
function OnDataReady(result, userContext, methodName)
{
var comp = $find("ContactControl");
comp.set_dataSource(result);
comp.dataBind();
}The function gets a reference to the grid client control
already created on the page using the $find function, then sets the data source
property to the data returned from the AJAX service, in this case a
List<Contact>. Finally, a call to the dataBind() function is issued to
render the grid client control and display all the records returned from the
server.
If we go back to the renderControl function inside the
ContactControl, you will notice something.
Listing 26
this._dataSource[i].FirstName
After setting the data source property to the data returned
from the server, the data source now contains all the data on the client side.
To access a contact record, simply use an indexer. Every item returned by an
indexer represents an object of type Contact. That is why you see in the above
code how easy it is to access any property inside the Contact class.
Once the New Contact button is clicked, the AddNewContact
function will be fired according to the binding shown above.
Listing 27
function AddNewContact() {
var newContact= $create(
Bhaidar.AJAXControls.ContactRecordControl, // Type
null, // Properties
{click: HandleGridUpdate}, // Events
null, // References
$get("ContactRecordControl")); // Element
return false;
}What the method does is simply create a new ContactRecordControl
and add it to the page. There is nothing new in defining this control; the code
simply attaches the HandleGridUpdate function to the click event defined on the
control.
The HandleGridUpdate is defined as follows:
Listing 28
function HandleGridUpdate(sender, args)
{
// Get the fields from the page
var errorMsg = '';
var txtFirstName = $get("txtFirstName");
if ((txtFirstName.value == null) || (txtFirstName.value == ''))
errorMsg += "First Name is required.\r\n";
var txtLastName = $get("txtLastName");
if ((txtLastName.value == null) || (txtLastName.value == ''))
errorMsg += "Last Name is required.\r\n";
var txtEmail = $get("txtEmail");
if ((txtEmail.value == null) || (txtEmail.value == ''))
errorMsg += "Email is required.\r\n";
if (errorMsg != '')
alert(errorMsg);
else
{
ShowUpdateProgress();
if (null == args.get_data())
{
// Add new record
Bhaidar.Services.ContactsService.AddNewContact(txtFirstName.value,
txtLastName.value, txtEmail.value, // Parameters
OnAddNewContactCompleted); // Success Callback
}
else
{
// Update old record
Bhaidar.Services.ContactsService.UpdateContact(parseInt(args.get_data()
.ContactID), txtEmail.value, // Parameters
OnUpdateContactCompleted); // Success Callback
}
}
}The function starts by doing some validation on the fields.
It then decides whether we are adding a new record or editing an existing
record. The args parameter is null in the case of adding a new row and in case
of editing a row, it contains the row that is being edited.
The EditRecord function is fired when the edit button is clicked
on the grid client control.
Listing 29
function EditRecord(sender, args)
{
if (args)
{
var newContact = $create(Bhaidar.AJAXControls.ContactRecordControl, // Type
{
dataSource: args.get_data()
}
, // Properties
{
click: HandleGridUpdate
}
, // Events
null, // References
$get("ContactRecordControl")); // Element
}
}The function simply creates a new instance of the
ContactRecordControl passing in the value of the dataSource property to be
args.get_data(). In this case the dataSource is bound to the contact record
representing the row to be edited on the grid control. The function to handle
the click event is the HandleGridUpdate, which is defined and explained above.
That method handles both edit and new actions. Figure 3 shows the page when a
record is in the edit mode.
Figure 3
The DeleteRecord event handler handles the delete event on
the grid client control.
Listing 30
function DeleteRecord(sender, args)
{
Bhaidar.Services.ContactsService.DeleteContact(args.get_data(), // Parameters
OnDeleteContactCompleted);
// Success Callback
}
}It simply calls the AJAX service to delete a record passing
in the contact ID, which is stored inside the args parameter get_data()
property.
There are still other methods that represent the success
callbacks of the AJAX service method calls that you can simply read and
understand from the downloadable code of this article.
