ASP.NET - Extend gridview to allow filtering, sorting, paging, etc...

Question

I have seen threads on many sites regarding extending the gridview control so obviously this will be a duplicate. But I haven't found any that truly extend the control to the extent that you could have custom sorting (with header images), filtering by putting drop downs or textboxes in header columns (on a column by column basis) and custom paging (one that doesn't return all records but just returns the ones requested for the given page).

Are there any good tutorials that show the inner-workings of the gridview and how to override the proper functions? I've seen several snippets here and there but none seem to really work and explain things well.

Any links would be appreciated. Thanks!

Answer 1

Hi Zach,

Have you look at the following tutorial :

http://msdn.microsoft.com/en-us/magazine/cc163612.aspx

It's a good starting point

Answer 2

I've extended the GridView control myself to allow sorting with images, custom paging (so you can select how many records per page from a drop-down) and a few other things. However, you won't be able to do custom paging that just returns the records for the requested page, as that is something your datasource needs to handle and not the GridView.

All I can really do is give you some code and hope it helps. It's pretty old code (pre C#3.0) but may be of some use:

First of all here's the custom GridView control that extends the standard GridView:

using System;
using System.Collections;
using System.Drawing;
using System.Web.UI.WebControls;
using Diplo.WebControls.DataControls.PagerTemplates;
using Image=System.Web.UI.WebControls.Image;

namespace Diplo.WebControls.DataControls
{
    /// <summary>
    /// Extended <see cref="GridView"/> with some additional cool properties
    /// </summary>
    public class DiploGridView : GridView
    {
        #region Properties

        /// <summary>
        /// Gets or sets a value indicating whether a sort graphic is shown in column headings
        /// </summary>
        /// <value><c>true</c> if sort graphic is displayed; otherwise, <c>false</c>.</value>
        public bool EnableSortGraphic
        {
            get
            {
                object o = ViewState["EnableSortGraphic"];
                if (o != null)
                {
                    return (bool)o;
                }
                return true;
            }
            set
            {
                ViewState["EnableSortGraphic"] = value;
            }
        }

        /// <summary>
        /// Gets or sets the sort ascending image when <see cref="EnableSortGraphic"/> is <c>true</c>
        /// </summary>
        public string SortAscendingImage
        {
            get
            {
                object o = ViewState["SortAscendingImage"];
                if (o != null)
                {
                    return (string)o;
                }
                return Page.ClientScript.GetWebResourceUrl(GetType(), SharedWebResources.ArrowUpImage);
            }
            set
            {
                ViewState["SortAscendingImage"] = value;
            }
        }

        /// <summary>
        /// Gets or sets the sort descending image <see cref="EnableSortGraphic"/> is <c>true</c>
        /// </summary>
        public string SortDescendingImage
        {
            get
            {
                object o = ViewState["SortDescendingImage"];
                if (o != null)
                {
                    return (string)o;
                }
                return Page.ClientScript.GetWebResourceUrl(GetType(), SharedWebResources.ArrowDownImage);
            }
            set
            {
                ViewState["SortDescendingImage"] = value;
            }
        }

        /// <summary>
        /// Gets or sets the custom pager settings mode.
        /// </summary>
        public CustomPagerMode CustomPagerSettingsMode
        {
            get
            {
                object o = ViewState["CustomPagerSettingsMode"];
                if (o != null)
                {
                    return (CustomPagerMode)o;
                }
                return CustomPagerMode.None;
            }
            set
            {
                ViewState["CustomPagerSettingsMode"] = value;
            }
        }

        /// <summary>
        /// Gets or sets a value indicating whether the columns in the grid can be re-sized in the UI
        /// </summary>
        /// <value><c>true</c> if  column resizing is allowed; otherwise, <c>false</c>.</value>
        public bool AllowColumnResizing
        {
            get
            {
                object o = ViewState["AllowColumnResizing"];
                if (o != null)
                {
                    return (bool)o;
                }
                return false;
            }
            set
            {
                ViewState["AllowColumnResizing"] = value;
            }
        }

        /// <summary>
        /// Gets or sets the highlight colour for the row
        /// </summary>
        public Color RowStyleHighlightColour
        {
            get
            {
                object o = ViewState["RowStyleHighlightColour"];
                if (o != null)
                {
                    return (Color)o;
                }
                return Color.Empty;
            }
            set
            {
                ViewState["RowStyleHighlightColour"] = value;
            }
        }

        #endregion Properties

        #region Enums

        /// <summary>
        /// Represents additional custom paging modes
        /// </summary>
        public enum CustomPagerMode
        {
            /// <summary>
            /// No custom paging mode
            /// </summary>
            None,
            /// <summary>
            /// Shows the rows drop-down list <i>and</i> the previous and next buttons
            /// </summary>
            RowsPagePreviousNext,
            /// <summary>
            /// Only shows the previous and next buttons
            /// </summary>
            PagePreviousNext
        }

        #endregion

        #region Overridden Events

        /// <summary>
        /// Initializes the pager row displayed when the paging feature is enabled.
        /// </summary>
        /// <param name="row">A <see cref="T:System.Web.UI.WebControls.GridViewRow"></see> that represents the pager row to initialize.</param>
        /// <param name="columnSpan">The number of columns the pager row should span.</param>
        /// <param name="pagedDataSource">A <see cref="T:System.Web.UI.WebControls.PagedDataSource"></see> that represents the data source.</param>
        protected override void InitializePager(GridViewRow row, int columnSpan, PagedDataSource pagedDataSource)
        {
            switch (CustomPagerSettingsMode)
            {
                case CustomPagerMode.RowsPagePreviousNext:
                    PagerTemplate = new RowsPagePreviousNext(pagedDataSource, this);
                    break;
                case CustomPagerMode.PagePreviousNext:
                    PagerTemplate = new PagePreviousNext(pagedDataSource, this);
                    break;
                case CustomPagerMode.None:
                    break;
                default:
                    break;
            }

            base.InitializePager(row, columnSpan, pagedDataSource);
        }

        /// <summary>
        /// Raises the <see cref="E:System.Web.UI.Control.PreRender"></see> event.
        /// </summary>
        /// <param name="e">An <see cref="T:System.EventArgs"></see> that contains the event data.</param>
        protected override void OnPreRender(EventArgs e)
        {
            if (AllowColumnResizing && Visible)
            {
                string vars = String.Format("var _DiploGridviewId = '{0}';\n", ClientID);

                if (!Page.ClientScript.IsClientScriptBlockRegistered("Diplo_GridViewVars"))
                {
                    Page.ClientScript.RegisterClientScriptBlock(GetType(), "Diplo_GridViewVars", vars, true);
                }

                Page.ClientScript.RegisterClientScriptInclude("Diplo_GridView.js",
                                                              Page.ClientScript.GetWebResourceUrl(GetType(), "Diplo.WebControls.SharedWebResources.Diplo_GridView_Resize.js"));
            }

            base.OnPreRender(e);
        }

        /// <summary>
        /// Raises the <see cref="E:System.Web.UI.WebControls.GridView.RowCreated"></see> event.
        /// </summary>
        /// <param name="e">A <see cref="T:System.Web.UI.WebControls.GridViewRowEventArgs"></see> that contains event data.</param>
        protected override void OnRowCreated(GridViewRowEventArgs e)
        {
            if (EnableSortGraphic)
            {
                if (!((e.Row == null)) && e.Row.RowType == DataControlRowType.Header)
                {
                    foreach (TableCell cell in e.Row.Cells)
                    {
                        if (cell.HasControls())
                        {
                            LinkButton button = ((LinkButton)(cell.Controls[0]));
                            if (!((button == null)))
                            {
                                Image image = new Image();
                                image.ImageUrl = "images/default.gif";
                                image.ImageAlign = ImageAlign.Baseline;
                                if (SortExpression == button.CommandArgument)
                                {
                                    image.ImageUrl = SortDirection == SortDirection.Ascending ? SortAscendingImage : SortDescendingImage;
                                    Literal space = new Literal();
                                    space.Text = "&nbsp;";
                                    cell.Controls.Add(space);
                                    cell.Controls.Add(image);
                                }
                            }
                        }
                    }
                }
            }

            if (RowStyleHighlightColour != Color.Empty)
            {
                if (e.Row != null)
                {
                    if (e.Row.RowType == DataControlRowType.DataRow)
                    {
                        e.Row.Attributes.Add("onmouseover", String.Format("this.style.backgroundColor='{0}'", ColorTranslator.ToHtml(RowStyleHighlightColour)));
                        e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");
                    }
                }
            }

            base.OnRowCreated(e);
        }

        /// <summary>
        /// Creates the control hierarchy that is used to render a composite data-bound control based on the values that are stored in view state.
        /// </summary>
        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            CheckShowPager();
        }

        private void CheckShowPager()
        {
            if (CustomPagerSettingsMode != CustomPagerMode.None && AllowPaging)
            {
                if (TopPagerRow != null)
                {
                    TopPagerRow.Visible = true;
                }

                if (BottomPagerRow != null)
                {
                    BottomPagerRow.Visible = true;
                }
            }
        }

        /// <summary>
        /// Creates the control hierarchy used to render the <see cref="T:System.Web.UI.WebControls.GridView"></see> control using the specified data source.
        /// </summary>
        /// <param name="dataSource">An <see cref="T:System.Collections.IEnumerable"></see> that contains the data source for the <see cref="T:System.Web.UI.WebControls.GridView"></see> control.</param>
        /// <param name="dataBinding">true to indicate that the child controls are bound to data; otherwise, false.</param>
        /// <returns>The number of rows created.</returns>
        protected override int CreateChildControls(IEnumerable dataSource, bool dataBinding)
        {
            int i = base.CreateChildControls(dataSource, dataBinding);

            CheckShowPager();

            return i;
        }

    #endregion Overridden Events
}
}

Then there is a custom paging class that is used as a paging template:

using System;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Web.UI;

namespace Diplo.WebControls.DataControls.PagerTemplates
{
    /// <summary>
    /// Paging template for the <see cref="DiploGridView"/>
    /// </summary>
    public class RowsPagePreviousNext : ITemplate
    {
        readonly PagedDataSource _pagedDataSource;
        readonly DiploGridView DiploGridView;

        /// <summary>
        /// Initializes a new instance of the <see cref="RowsPagePreviousNext"/> class.
        /// </summary>
        /// <param name="pagedDataSource">The <see cref="PagedDataSource"/>.</param>
        /// <param name="DiploGrid">A reference to the <see cref="DiploGridView"/>.</param>
        public RowsPagePreviousNext(PagedDataSource pagedDataSource, DiploGridView DiploGrid)
        {
            _pagedDataSource = pagedDataSource;
            DiploGridView = DiploGrid;
        }

        /// <summary>
        /// When implemented by a class, defines the <see cref="T:System.Web.UI.Control"></see> object that child controls and templates belong to. These child controls are in turn defined within an inline template.
        /// </summary>
        /// <param name="container">The <see cref="T:System.Web.UI.Control"></see> object to contain the instances of controls from the inline template.</param>
        void ITemplate.InstantiateIn(Control container)
        {
            Literal space = new Literal();
            space.Text = "&nbsp;";

            HtmlGenericControl divLeft = new HtmlGenericControl("div");
            divLeft.Style.Add("float", "left");
            divLeft.Style.Add(HtmlTextWriterStyle.Width, "25%");

            Label lb = new Label();
            lb.Text = "Show rows: ";
            divLeft.Controls.Add(lb);

            DropDownList ddlPageSize = new DropDownList();
            ListItem item;
            ddlPageSize.AutoPostBack = true;
            ddlPageSize.ToolTip = "Select number of rows per page";

            int max = (_pagedDataSource.DataSourceCount < 50) ? _pagedDataSource.DataSourceCount : 50;
            int i;
            const int increment = 5;
            bool alreadySelected = false;
            for (i = increment; i <= max; i = i + increment)
            {
                item = new ListItem(i.ToString());
                if (i == _pagedDataSource.PageSize)
                {
                    item.Selected = true;
                    alreadySelected = true;
                }
                ddlPageSize.Items.Add(item);
            }

            item = new ListItem("All", _pagedDataSource.DataSourceCount.ToString());
            if (_pagedDataSource.DataSourceCount == _pagedDataSource.PageSize && alreadySelected == false)
            {
                item.Selected = true;
                alreadySelected = true;
            }

            if (_pagedDataSource.DataSourceCount > (i - increment) && alreadySelected == false)
            {
                item.Selected = true;
            }

            ddlPageSize.Items.Add(item);

            ddlPageSize.SelectedIndexChanged += new EventHandler(ddlPageSize_SelectedIndexChanged);

            divLeft.Controls.Add(ddlPageSize);

            HtmlGenericControl divRight = new HtmlGenericControl("div");
            divRight.Style.Add("float", "right");
            divRight.Style.Add(HtmlTextWriterStyle.Width, "75%");
            divRight.Style.Add(HtmlTextWriterStyle.TextAlign, "right");

            Literal lit = new Literal();
            lit.Text = String.Format("Found {0} record{1}. Page ", 
                _pagedDataSource.DataSourceCount, 
                (_pagedDataSource.DataSourceCount == 1) ? String.Empty : "s" );
            divRight.Controls.Add(lit);

            TextBox tbPage = new TextBox();
            tbPage.ToolTip = "Enter page number";
            tbPage.Columns = 2;
            tbPage.MaxLength = 3;
            tbPage.Text = (_pagedDataSource.CurrentPageIndex + 1).ToString();
            tbPage.CssClass = "pagerTextBox";
            tbPage.AutoPostBack = true;
            tbPage.TextChanged += new EventHandler(tbPage_TextChanged);
            divRight.Controls.Add(tbPage);
            if (_pagedDataSource.PageCount < 2)
                tbPage.Enabled = false;

            lit = new Literal();
            lit.Text = " of " + _pagedDataSource.PageCount;
            divRight.Controls.Add(lit);

            divRight.Controls.Add(space);

            Button btn = new Button();
            btn.Text = "";
            btn.CommandName = "Page";
            btn.CommandArgument = "Prev";
            btn.SkinID = "none";
            btn.Enabled = !_pagedDataSource.IsFirstPage;
            btn.CssClass = (btn.Enabled) ? "buttonPreviousPage" : "buttonPreviousPageDisabled";
            if (btn.Enabled)
                btn.ToolTip = "Previous page";
            divRight.Controls.Add(btn);

            btn = new Button();
            btn.Text = "";
            btn.CommandName = "Page";
            btn.CommandArgument = "Next";
            btn.SkinID = "none";
            btn.CssClass = "buttonNext";
            btn.Enabled = !_pagedDataSource.IsLastPage;
            btn.CssClass = (btn.Enabled) ? "buttonNextPage" : "buttonNextPageDisabled";
            if (btn.Enabled)
                btn.ToolTip = "Next page";
            divRight.Controls.Add(btn);

            container.Controls.Add(divLeft);
            container.Controls.Add(divRight);
        }

        /// <summary>
        /// Handles the TextChanged event of the tbPage control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
        void tbPage_TextChanged(object sender, EventArgs e)
        {
            TextBox tb = sender as TextBox;

            if (tb != null)
            {
                int page;
                if (int.TryParse(tb.Text, out page))
                {
                    if (page <= _pagedDataSource.PageCount && page > 0)
                    {
                        DiploGridView.PageIndex = page - 1;
                    }
                }
            }
        }

        /// <summary>
        /// Handles the SelectedIndexChanged event of the ddlPageSize control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
        void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
        {
            DropDownList list = sender as DropDownList;
            if (list != null) DiploGridView.PageSize = Convert.ToInt32(list.SelectedValue);
        }
    }
}

I can't really talk you through it as server controls are complex, I just hope it gives you some help.