Building an Ajax Master/Detail Page with the WebDataGrid

NetAdvantage 2008 Volume 3 ushered in the release of the new WebDataGrid. In order to help you get familiar with this all-new control build on the Infragistics Akido framework, I will take you step-by-step through building an AJAX master/detail page.

Activation Behavior

At the root of enabling the interaction found in this approach is the Activation behavior. When enabled activation will fire client-side and server-side events giving you hooks into controlling what happens before and after active cells are changed on the grid.

Data Source

This sample uses the BookRepository as a data source. BookRepository is a light-weight and portable way for creating data for demonstrations. Read more about the BookRepository here.

Setup the Grid

To begin you will start by setting up the WebDataGrid and adding the necessary support controls to enable interaction with the data.

1. Add a ScriptManager to the page
2. Next, drag a WebDataGrid from the toolbox to the page
3. Change the ID to "dg"
4. Set the AutoGenerateColumns to false

Next you will explicitly define the markup for the Title column. Switch to the Source view and enter the following markup inside the WebDataGrid tag:

<Columns>
    <ig:TemplateDataField Key="Title">
        <ItemTemplate>
            <asp:Placeholder ID="Placeholder1" runat="server">
                <%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Title") %>
                <span id="b<%# this.index++.ToString() %>" class="none"><%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "ID")%></span>
            </asp:Placeholder>
        </ItemTemplate>
        <Header Text="Name" />
    </ig:TemplateDataField>
</Columns>

This block of code creates a template column with some special elements to help power the Ajax requests.

A placeholder control is declared as a databound container so the DataBinder.Eval expressions will execute. Inside the placeholder the Title of the book is rendered to the row. The title is what is shown to the user.

Next to the Title, a span is populated with the book ID – which is hidden from the user. The purpose of the span is to contain the primary key of the record rendered to the grid. The span’s contents will be hidden from the user using a style sheet rule and will use JavaScript to read the span’s contents to get the ID value.

Getting to the container span is possible using the WebDataGrid’s client API. The current index is exposed as a method from the active cell. Therefore when a cell is activated, you can interrogate the activation data to find the current index to locate the selected item’s primary key value. You will see how this is done explicitly during the Ajax implementation below.

On line 6 of Listing 1 you will notice the following code: id="b<%# this.index++.ToString() %>". What is happening here is that the ID for each span is being assigned a unique value. The index variable is assigned in the code behind as a protected field initialized with a 0 value. This approach is a quick way to generate index values while letting the WebDataGrid’s databinding to provide the looping behavior. See Listing 2 to see this variable declared in context.

Note: Developers often like to use hidden columns to maintain state of data needed for client-site operations. Attempting to use a hidden column to hold the ID value will not work in this instance as you are using the Activation Behavior of the WebDataGrid. When Activation is enabled the user may use the tab key to advance from one active cell to the next. When a cell is active the JavaScript focus function is called in order to bring focus to the active cell. If you try to bring focus to a cell that is hidden with a stylesheet a JavaScript error is encountered as you cannot bring focus to hidden elements.

In order to hide the primary key value from the user, you must add the following style sheet entry to the header of your page:

<style type="text/css">
.none {display:none;}
</style>

Finally update the code behind to declare the index field and provide the grid with data:

public partial class AJAXMasterDetail : System.Web.UI.Page
{
    protected int index = 0;
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.Page.IsPostBack)
        {
            this.dg.DataSource = BookRepository.Instance.GetBooks(5);
            this.dg.DataBind();
        }
    }
}

When you run the page and you should have a page that looks like this:

Figure 1

Enable Activation

The next step is to enable the grid’s activation behavior. Using activation will give you client-side access to events that fire when a cell or row is activated. To enable activation, open the smart tag on the grid and select Edit Behaviors.

Figure 2

When the behaviors window opens, check the box next to Activation and enter cellChanged as the function name for ActiveCellChanged under ActivationClientEvents. The cellChanged function will run when a new cell is made active.

Add Ajax Interaction

The next step is to add the client template and the JavaScript that will handle the Ajax interaction. While looking at the selected cell the routine will locate the primary key value then send request the detailed information on the selected item.

Client Template

When data is received from the Ajax call you will use a client template to display the data to the user.

Switch to the Source view and enter the following markup directly after the close tag for the WebDataGrid:

<div id="details" class="none">
    <h2><a id="ttl"></a></h2>
    <table cellpadding="3" cellspacing="3" 
        border="1" style="border-collapse:collapse;">
        <tr>
            <td>Author</td>
            <td id="author"></td>
        </tr>
        <tr>
            <td>Publish Date</td>
            <td id="pubDate"></td>
        </tr>
        <tr>
            <td>Price</td>
            <td id="price"></td>
        </tr>
    </table>
</div>

With the application of the class of "none" the template is initially hidden from the user. When the Ajax callback is successful the template is shown to the user filled with the appropriate data in JavaScript.

JavaScript

The next step is to implement the JavaScript required to make the asynchronous calls to the server.

Return to the Source view of your ASPX page and enter the following code in the header:

<script type="text/javascript">
var lastRow = null;
 
function cellChanged() {
    var grid = $find("dg");
    var behav = grid.get_behaviors();
    var activation = behav.get_activation();
    var activeCell = activation.get_activeCell();
    var row = activeCell.get_row();
 
    if (row != lastRow) {
        var id = $get("b" + row.get_index()).innerHTML;
        lastRow = row;
 
        PageMethods.GetDetails(id, onSuccess, onFail);
    }
}
 
function onSuccess(response) {
    $get("details").style.display = "block";
    var ttl = $get("ttl");
    ttl.innerHTML = response.Title;
    ttl.href = response.Url;
    $get("author").innerHTML = response.Author;
    $get("pubDate").innerHTML = response.PublishDateShort;
    $get("price").innerHTML = response.PriceFormatted;
}
 
function onFail() {
    alert("Many bad things happened here.");
}
</script>

Starting at line 4 in Listing 5 notice the declaration of the cellChanged function. This is the function that is associated with the ActiveCellChanged event in the WebDataGrid Activation behavior.

When a cell is activated, the script traverses the grid’s object model by first finding the grid and then gaining access to the grid’s behavior. Once an instance of the behavior object is found then the script sets a reference to the activation behavior. The activation behavior exposes the active cell, which in turn exposes the row for the active cell.

Figure 3

Note that this relationship equates to the way you add behaviors to the grid in the markup.

Once the row of the active cell is located, the function continues in an attempt to find the selected item’s primary key value found in the hidden span tag. Line 11 checks to see if the current row is not equal to the lastRow variable. This check is necessary so unneeded Ajax calls are avoided if the user has not changed rows since the last time this function ran.

Line 12 locates the primary key value in the hidden span and sets the value aside in the id variable. In preparation for the Ajax call, the current row is set aside in the lastRow variable for later evaluation.

Finally the function calls the GetDetails function which is exposed via the ASP.NET AJAX PageMethods. The arguments to the GetDetails function include the ID as well as the names of function to run if the request is successful or if it fails.

When Things Go Right

When all goes as expected, the data is returned back to the page in the form of a serialized JSON object. With this object now in scope the function will display the client template to the user and then fill the HTML elements with the appropriate data. The following is an excerpt from Listing 5:

function onSuccess(response) {
    $get("details").style.display = "block";
    var ttl = $get("ttl");
    ttl.innerHTML = response.Title;
    ttl.href = response.Url;
    $get("author").innerHTML = response.Author;
    $get("pubDate").innerHTML = response.PublishDateShort;
    $get("price").innerHTML = response.PriceFormatted;
}

When Things Go Wrong

If an error is encountered during the trip back to the server, the onFail function will run. Below is the code used in this demo:

function onFail() {
    alert("Many bad things happened here.");
}

Under normal, production grade circumstances you would want to provide a graceful way to notify the user of something going wrong. Perhaps in case of a failure in this case you may want to suggest they try the request again. For now the function simply alerts the user to the fact that something went terribly wrong in the universe.

In order for the JavaScript you’ve implemented to work properly you must also enable page methods on the ScriptManager.

Update the ScriptManager

Update the ScriptManager markup to match the following markup:

<asp:ScriptManager EnablePageMethods="true" ID="sm" runat="server" />

WebMethod

ASP.NET page methods make it easy for you to add Ajax behavior to your page. To support the function that the JavaScript is calling when the active cell is clicked, you must add a method to the page named GetDetails that takes a book ID as an argument.

Add the following code to your codebehind:

using System.Web.Services;
...

[WebMethod]
public static Book GetDetails(int id)
{
    return BookRepository.Instance.GetByID(id);
}

Be sure to add the using statement found in line 1 to the top of your page and then add the method inside the class definition of the page.

This method simply makes a call to our test data repository and returns an instance of a book object.

Give it a Try

Run the page and click on one of the items. You should see the grid and an item’s details presented to you:

Figure 4

Conclusion

The WebDataGrid has a host of behaviors that are easy to enable and gain access programmatically. In this tutorial you’ve learned to add the Activation behavior to a WebDataGrid. You used the client-side events to find resources within the grid to make an Ajax call return a JSON instance of item details. Finally, you learned to use a client template for a maintainable way of presenting asynchronous data to users.

Full Code Listing

Below are links to full code listings of this demo:

• ASPX Markup
• C# Codebehind

Rather Watch?

Watch the following videos to see this solution being built step-by-step.

Part 1

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/Ezb5z_LTZfA" /> <embed src="http://www.youtube.com/v/Ezb5z_LTZfA" type="application/x-shockwave-flash" width="425" height="350"></embed> </object>

Part 2

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/VbLiSxQlFrs" /> <embed src="http://www.youtube.com/v/VbLiSxQlFrs" type="application/x-shockwave-flash" width="425" height="350"></embed> </object>