Kerry D. Wong &#187; ASP.Net

Code Download: ExtendingTheGridView.zip

Extending the GridView — Part III

kwong — Sun, 17 Aug 2008 00:04:44 +0000

In Part II, I showed you how to extend the GridView control so that we can bind a generic list to it. Because GridViewEx inherits from GridView, it has all the functionalities GridView has (i.e. paging). Sometimes, it is desirable to change the number of items displayed on a page dynamically, to accommodate this, we will create a GridViewPager control (ascx).

3. GridViewPager

Here is the code for GridViewPager:

    public partial class GridViewPager : System.Web.UI.UserControl
    {
        public delegate void SelectedIndexChangedHandler(object sender, int pageSize);
        public event SelectedIndexChangedHandler SelectedIndexChanged;
 
        private bool _visible = false;
        private int _pageSize = 10;
 
        public override bool Visible
        {
            get
            {
                if (ViewState[UniqueID] == null)
                    _visible = true;
                else
                    bool.TryParse(ViewState[this.UniqueID].ToString(), out _visible);
 
                return _visible;
            }
            set
            {
                _visible = value;
                ViewState[UniqueID] = _visible;
 
                if (_visible)
                    MainPanel.Visible = true;
                else
                    MainPanel.Visible = false;
            }
        }
 
        public int PageSize
        {
            get
            {
                if (ViewState[string.Concat(UniqueID, "PageSize")] == null)
                    _pageSize = int.Parse(DropDownItemsPerPage.SelectedValue);
                else
                    _pageSize = int.Parse(ViewState[string.Concat(UniqueID, "PageSize")].ToString());
 
                return _pageSize;
            }
            set
            {
                _pageSize = value;
                ViewState[String.Concat(UniqueID, "PageSize")] = value;
            }
        }
 
        protected override void OnInit(EventArgs e)
        {
            DropDownItemsPerPage.SelectedIndexChanged += new EventHandler(DropDownItemsPerPage_SelectedIndexChanged);
            base.OnInit(e);
        }
 
        protected void DropDownItemsPerPage_SelectedIndexChanged(object sender, EventArgs e)
        {
            PageSize = int.Parse(DropDownItemsPerPage.SelectedValue);
 
            if (SelectedIndexChanged != null)
                SelectedIndexChanged(sender, PageSize);
        }
 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                DropDownItemsPerPage.DataBind();
        }
 
        /// 
        /// This method links to the DataSourceChangedEvent defined in GridViewEx so that
        /// we can decide whether or not to show the pager depending on whether the list
        /// to be bound is empty.
        /// 
        /// sender object
        /// whether the list to be bound is empty
        public void GridViewDataSourceChanged(object sender, bool isEmpty)
        {
            if (isEmpty)
                Visible = false;
            else
                Visible = true;
        }
    }

As you can see, the pager control is quite simple. It communicates with GridViewEx control by the SelectedIndexChanged event. Depending on whether the state of number of items per page needs to persist between post backs, either ViewState or SessionState can be used.

See also

Code Download: ExtendingTheGridView.zip

Extending the GridView — Part II

kwong — Sat, 16 Aug 2008 00:10:53 +0000

In Part I, I talked about why we needed to extend the GridView and some of the benefit in doing that. In this post, I will discuss how to extend the standard GridView control to take advantage of binding to the type safe value objects mentioned previously.

2. GridViewEx
To make the binding as generic as possible, there are pretty much two ways. One way is to bind to an object collection of typed value objects. Since all value objects can be cast into objects, we could manipulate them generically. And because value objects are typically consisted of simple types, we could encapsulate all the operations needed for the GridView within the extended GridView itself.

Another solution is to utilize generics in .Net 2.0 and above. One obvious advantage is that the type information is not lost at any point of the object manipulation and thus a lot of small mistakes can be caught at compile time. This approach does have its draw backs. As you will see, because the purpose of generic types are to eliminate casting introduced by object containers, we have to change the extended GridView to accommodate the type of objects we are binding to the list whenever a new generic type is introduced. This of course requires the changing of the extended GridView control itself whenever we add a new generic type and thus might not be as convenient as the pure object oriented approach mentioned previously. However, weighing both the advantages and disadvantages I personally think this approach is more attractive.

So here, I will show you how to extend the GridView to handle generic lists.

GridViewEx inherits from GridView. We override the DataSource property so that we get a chance to inspect it before the databinding actually taking place. This gives us an opportunity to test whether the data source to be bound is empty. We use this information to decide whether to show the pager or not as you will see in a later post.

The initialization routine (OnInit) is overridden to setup some property values and hook up some events so that we provide row editing functionalities.

The RowEditing, PageSelectedIndexChanged and some of the other overridden functions are handled in a pretty standard way. To demonstrate how easy it is to add new functionality to the GridView, I added an event handler for RowDataBound. The purpose of the code for this RowDataBound event is to check if the CheckBox on a particular row is checked and if so, the background color of that row is changed. This behavior is particularly helpful for giving a visual cue to the end user which row of data he/she is currently dealing with.

When each row is created, OnRowCreated method is called, here we determine whether the row being created is the header or not and if so, we add an arrow to indicate the current sorting option depending on how the grid is currently sorted. If the row being created is a data row, we add some nice touch so that the data row becomes highlighted when mouse moves pass it.

We also have to override the OnSorting function to handle our generic lists. This is where we need to add the supported list types (see comments in code). For additional generic list types, we simply need to add three lines for each type of the list. While this might not be as convenient as using generic objects, all the changes are kept in a central place so that adding/removing types should not be an issue.

namespace ExtendedGridView
{
    /// 
    /// Extended GridView
    /// Supports paging/sorting using a customized object data source.
    /// http://www.kerrywong.com/
    /// 
    public class GridViewEx : GridView
    {
        public delegate void DataSourceChangedEventHandler(object sender, bool isEmpty);
        public event DataSourceChangedEventHandler DataSourceChanged;
 
        /// 
        /// A readonly unique ID for the current view.
        /// 
        public string CurrentViewID
        {
            get { return string.Concat("CurrentView_", UniqueID); }
        }
 
        /// 
        /// Current page id when paging is used.
        /// To remember the page index user selected, a session variable is used.
        /// 
        public int CurrentPageID
        {
            get
            {
                if (HttpContext.Current != null && HttpContext.Current.Session != null)
                {
                    if (HttpContext.Current.Session[string.Concat("CurrentPageID_", UniqueID)] == null)
                        return -1;
                    else
                        return int.Parse(HttpContext.Current.Session[string.Concat("CurrentPageID_", UniqueID)].ToString());
                }
                else
                    return -1;
            }
            set
            {
                if (HttpContext.Current != null && HttpContext.Current.Session != null)
                    HttpContext.Current.Session[string.Concat("CurrentPageID_", UniqueID)] = value;
            }
        }
 
        /// 
        /// Overrides the data source property, so that we get a chance to test whether the source 
        /// being bound contains data or not.
        /// 
        /// This is used to communicate with the pager so that for an empty list no pager is shown.
        /// 
        public override object DataSource
        {
            get
            {
                if (ViewState[CurrentViewID] != null)
                    return ViewState[CurrentViewID];
                else
                    return base.DataSource;
            }
            set
            {
                base.DataSource = value;
                ViewState[CurrentViewID] = value;
 
                if (value == null)
                {
                    if (DataSourceChanged != null)
                        DataSourceChanged(this, true);
                }
                else
                {
                    if (DataSourceChanged != null)
                        DataSourceChanged(this, false);
                }
            }
        }
 
        /// 
        /// Set up event handlers.
        /// 
        protected override void OnInit(System.EventArgs e)
        {
            AllowPaging = true;
            AllowSorting = true;
            this.AutoGenerateColumns = false;
            PageSize = 10;
 
            RowCancelingEdit += new GridViewCancelEditEventHandler(GridViewEx_RowCancelingEdit);
            RowDataBound += new GridViewRowEventHandler(GridViewEx_RowDataBound);
            RowEditing += new GridViewEditEventHandler(GridViewEx_RowEditing);
 
            base.OnInit(e);
        }
 
        protected override void OnPageIndexChanging(GridViewPageEventArgs e)
        {
            PageIndex = e.NewPageIndex;
            CurrentPageID = PageIndex;
 
            if (ViewState[CurrentViewID] != null)
                DataSource = ViewState[CurrentViewID];
 
            DataBind();
        }
 
        /// 
        /// Handles the sort event.
        /// Since the data source is a generic list, we need to cast the list
        /// back to what ever type it is before we can sort. All the list types
        /// need to be handled here (see comments below)
        /// 
        protected override void OnSorting(GridViewSortEventArgs e)
        {
            ViewState["SortExpression"] = e.SortExpression;
 
            if (ViewState[e.SortExpression] == null)
                ViewState[e.SortExpression] = e.SortDirection;
            else
            {
                ViewState[e.SortExpression] = (SortDirection)(1 - (int)ViewState[e.SortExpression]);
                e.SortDirection = (SortDirection)ViewState[e.SortExpression];
            }
 
            object o = null;
 
            //This is where more list types can be added. 
            if (ViewState[CurrentViewID] is List<ItemVal>)
            {
                List<ItemVal> l = ViewState[CurrentViewID] as List<ItemVal>;
                l.Sort(new GenericComparer<ItemVal>(e.SortDirection, e.SortExpression));
                o = l;
            }
            else
                base.OnSorting(e);
 
            DataSource = o;
            ViewState[CurrentViewID] = o;
            DataBind();
        }
 
        protected override void OnRowCreated(GridViewRowEventArgs e)
        {
            base.OnRowCreated(e);
 
            if (e.Row != null && e.Row.RowType == DataControlRowType.Header)
            {
                foreach (TableCell cell in e.Row.Cells)
                {
                    if (cell.HasControls())
                    {
                        LinkButton button = cell.Controls[0] as LinkButton;
 
                        if (button != null)
                        {
                            Image image = new Image();
 
                            string sortExpression = string.Empty;
                            SortDirection dir = SortDirection.Ascending;
 
                            if (ViewState["SortExpression"] != null)
                            {
                                sortExpression = ViewState["SortExpression"].ToString();
                                dir = (SortDirection)ViewState[sortExpression];
                            }
 
                            if (sortExpression != null && sortExpression == button.CommandArgument)
                            {
                                if (dir == SortDirection.Ascending)
                                    image.ImageUrl = "~/images/sort_asc.gif";
                                else
                                    image.ImageUrl = "~/images/sort_desc.gif";
 
                                cell.Controls.Add(image);
                            }
                        }
                    }
                }
            }
            else if (e.Row.RowType == DataControlRowType.DataRow) //Handles datarow highlighting on mouse move
            {
                e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor=’lightgreen’");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;");
            }
        }
 
        protected override void OnDataBinding(System.EventArgs e)
        {
            if (CurrentPageID != -1)
                PageIndex = CurrentPageID;
 
            base.OnDataBinding(e);
        }
 
        protected void GridViewEx_RowEditing(object sender, GridViewEditEventArgs e)
        {
            EditIndex = e.NewEditIndex;
            DataSource = ViewState[CurrentViewID];
            DataBind();
        }
 
        protected void GridViewEx_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            foreach (TableCell cell in e.Row.Cells)
            {
                foreach (System.Web.UI.Control c in cell.Controls)
                {
                    if (c is CheckBox)
                    {
                        CheckBox chkBox = c as CheckBox;
 
                        if (chkBox.Checked)
                        {
                            if (e.Row.RowState == DataControlRowState.Alternate)
                                e.Row.BackColor = System.Drawing.Color.LightSteelBlue;
                            else
                                e.Row.BackColor = System.Drawing.Color.AliceBlue;
                        }
                    }
                }
            }
        }
 
        protected void GridViewEx_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
        {
            EditIndex = -1;
            DataSource = ViewState[CurrentViewID];
            DataBind();
        }
 
        public void PagerSelectedIndexChanged(object sender, int pageSize)
        {
            this.PageSize = pageSize;
            DataSource = ViewState[CurrentViewID];
            DataBind();
        }
 
        /// 
        /// Calculate the real index since the actual index returned from the 
        /// GridView is the index in relation to the current page. We need the
        /// real index in order to index into the list.
        /// 
        public int Index(int rowIndex)
        {
            return PageIndex * PageSize + rowIndex;
        }
    }
}

Because we are using customized objects as data bound objects, we also need to provider our own comparer so that the grid knows how to sort each column. This task is fairly easy and I modified the implementation from GridViewGuy. One thing you need to pay special attention is that since the comparison is done using property reflections, the property names are by default case sensitive (e.g. if you have a value property named Item, the binding in ASP.Net must be "Item" as well. "item" will give a run time error). The code for the comparer is as follows:

    public class GenericComparer<T>: IComparer<T>
    {
        private SortDirection _direction = SortDirection.Ascending;
        private string _expression = string.Empty;
 
        public SortDirection Direction
        {
            get { return _direction; }
            set { _direction = value; }
        }
 
        public GenericComparer(SortDirection direction, string expression)
        {
            _direction = direction;
            _expression = expression;
        }
 
        public int Compare(T x, T y)
        {
            PropertyInfo propertyInfo = typeof(T).GetProperty(_expression);
            IComparable obj1 = (IComparable)propertyInfo.GetValue(x, null);
            IComparable obj2 = (IComparable)propertyInfo.GetValue(y, null);
 
            if (_direction == SortDirection.Ascending)
                return obj1.CompareTo(obj2);
            else
                return obj2.CompareTo(obj1);
 
        }
    }

See also

Code Download: ExtendingTheGridView.zip

Extending the GridView — Part I

kwong — Sat, 09 Aug 2008 00:41:55 +0000

Most business applications require presenting result sets to the end users in the form of some kind of grid views. While the default ASP.NET GridView control is sufficient for simple scenarios when doing rapid application development, its drawbacks become clear when building any large scale solutions (discussions here apply to all the current .Net frameworks, 2.0, 3.5 etc.).

For instance, the default data binding is limited to SqlDataSource, ObjectDataSource or a DataSet object (including DataView, DataTable, etc.). When building a large scale business solution, it is generally desirable to complete separate the data manipulation and business logic from the presentation layer and the most common solution is to employee a Model-View-Controller pattern. This requirement makes SqlDataSource and DataSet bindings unsuitable. While ObjectDataSource does provide some level of isolation, the way business objects can be constructed is limited in order for these objects to be used as ObjectDataSource.

Most business objects incorporate the so-called Value Object data structure. Basically, it is a serializable class with the sole purpose of holding values and possibly other functionalities like data validation. Unfortunately, by default, GridView’s support for such value objects is poor (i.e. you can bind a value object to a grid view, but sorting is not supported by default). Over the years, I have seen many ad-hoc implementations to make GridView suitable for binding with customized value objects. Unfortunately, many of the solutions were implemented poorly and the implementation techniques vary from person to person, making it difficult if not impossible to maintain.

In the next few blog posts, I will show you how to extend the stock GridView in ASP.Net to make it suitable for using with value objects. The goal of extending the standard GridView is not only to add sorting capabilities, but to make the new component compatible with the standard GridView. I also intended to hide as much implementation details as possible so that the end users do not need to worry about the syntactical nuances as do with the standard GridView when binding to objects.

I assume that the development environment is Visual Studio 2005 with AJAX extension installed. The samples I show here can run within either Visual Studio 2005 (with AJAX extension) or Visual Studio 2008 without any modifications.

1.Defining the Value Object

As mentioned before, the reason we would like to define our own so-called value objects instead of using a DataSet to hold data is to ensure type safety. Since DataSet can hold any kind of objects, debugging becomes more difficult as error checking happens at run time not compile time. It also makes it easy to make mistakes as columns must be accessed by their names and any changes in column names could result in code broken at runtime somewhere in the UI. Most importantly, binding a dataset directly to the UI violates the layered design principal, making the data and the presentation tightly coupled and difficult to adapt. The solution is to create a level of indirection by utilizing the so called value objects. Value objects are nothing fancy, they are merely a serializable class that provides the properties that represent the data (e.g. a row in a table) we are dealing with. For instance, here is what we might create as a value object for a simple phone book:

    [Serializable()]
    public class ItemVal
    {
        string _name = string.Empty;
        string _address = string.Empty;
        string _zipCode = string.Empty;
        string _phoneNumber = string.Empty;
        bool _selected = false;
 
        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }
 
        public string Address
        {
            get { return _address; }
            set { _address = value; }
        }
 
        public string ZipCode
        {
            get { return _zipCode; }
            set { _zipCode = value; }
        }
 
        public string PhoneNumber
        {
            get { return _phoneNumber; }
            set { _phoneNumber = value; }
        }
 
        public bool Selected
        {
            get { return _selected; }
            set { _selected = value; }
        }
 
        public ItemVal(string name, string address, string zipCode, string phoneNumber)
        {
            _name = name;
            _address = address;
            _zipCode = zipCode;
            _phoneNumber = phoneNumber;
        }
    }

By creating a collection of such value object we just defined, we have a full representation of the result set returned from the database via a query or stored procedure. And via value objects, all the accesses are guaranteed to be type safe.

See also