Update data following control event in GridView

June 11, 2011

This week, the request for an additional administration screen one of the web based LOB applications I manage/develop gave me the opportunity to build an elegant, user friendly interface. The functionality required was the ability to update one property of a very simple object, with a very low chance of needing to make updates to other properties in future. It is also worth bearing in mind that the collection of objects concerned is minimal and fixed in quantity (Less than 30 objects).

I decided the best way to achieve this would be to present the objects in a GridView, with no paging, on the basis that it would be easiest for the user if they could see all objects on one screen, and that loading 30 or so objects in one hit would actually be less of a performance hit that the process of querying and displaying paged data. I also wanted all functionality to be provided from within the GridView – Again due to simplicity of the objects concerned – Of which we only need to update one property.

So we have a GridView with three columns:

  1. Bound Column: Object Reference
  2. Bound Column: Object Name
  3. Template Column: Containing a DropDownList, set to AutoPostBack

It is worth mentioning at this stage that all pages main content area are contained within AJAX partial update panels. I dislike AutoPostBack in general, it can make the application seem clunky and slow, although with efficient coding and correct use of AJAX can of course achieve quite the opposite effect/result.

So, the user visits the page, locates the record they wish to update (listed in alphabetical order) and changes the value of the DropDownList, which should then update the associated record/object.

There are two potentially challenging aspects to this setup:

1) How to fill the DropDownList with appropriate values, and select the correct value for each row
(To show the current value, before and after DropDownList change event).

To achieve this, we need to:

  • Get a reference to the DropDownList associated with each record/object
  • Add appropriate ListItems
  • Ensure that the current value is selected
protected void GridViewFoo_RowDataBound(object sender, GridViewRowEventArgs e)
{
    DropDownList dropDownListFoo = null;
    // We are only interested in DataRows (Not headers/footers)
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get a reference to the DropDownList
        dropDownListLeague = (DropDownList)e.Row.Cells[1].Controls[1];

        // Retrieve the value of the property that will determine the value to set the DropDownList to
        Boolean fooMyObjValue = Boolean.Parse(DataBinder.Eval(e.Row.DataItem, "PropertyName").ToString());

        // Define the values for the DropDownList
        ListItem liYes = new ListItem("Yes", "Y");
        ListItem liNo = new ListItem("No", "N");

        // Depending on the value of the Object proeprty, set the appropriate ListItems selected property
        if (fooMyObjValue == true)
        {
            liYes.Selected = true;
        }
        else
        {
            liNo.Selected = true;
        }

        // Add the items to the DropDownList
        dropDownListLeague.Items.Add(liYes);
        dropDownListLeague.Items.Add(liNo);
    }
}

2) How to update the Object when the user changes the value, via the DropDownList

For this, I made use of the DataKeyNames property of the GridView – Our objects have an ID property – This is the unique identifier for each one, so its simply a case of telling the GridView what property of its Data Bound collection is the key:

<asp:GridView ID="GridViewFoo" runat="server" onrowdatabound="GridViewFoo_RowDataBound" DataKeyNames="ID"...

The DropDownList’s SelectedIndexChanged event is wired up, and runs the following code:

protected void DropDownListFoo_SelectedIndexChanged(object sender, EventArgs e)
    {
        // Get the calling DropDownList
        DropDownList dropDownListFoo = (DropDownList)sender as DropDownList;

        // Get the GridViewRow the DropDownList was called from
        GridViewRow row = (GridViewRow)dropDownListLeague.NamingContainer as GridViewRow;

        // Get the DataKey of the row - Which is our objects 'ID' property
        // because we set the GridViews DataKeyNames property to 'ID'
        int id = (int)GridViewFoo.DataKeys[row.RowIndex].Value;

        // Now we have the ID, we can of course call a method in our BLL (Or run a SQL query if your architecture is not quite ideal!) to update our object property to the new value, derived from dropDownListFoo.SelectedValue
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: