Callback GridView (v2)

• Download sample V1 - 806.5 KB
• Download sample V2 - 679.5 KB

Introduction

This is an all-in-one callback gridview. All gridview actions: sorting, paging or searching are performed using ASP callbacks.

This grid includes 5 helpful features:

1. Page size updating
2. Column sorting
3. Quick search/ filtering
4. Paging
5. LinkField (item selection - new)

Background

I really needed an ASP.NET based gridview to execute all its commands using callbacks. After a couple of attempts, I have finally created a RTM :) version of the code. All actions from paging through to filtering can callback commands (so there is no need for any nasty page postbacks).

Using the Code

HTML

Let's start off with the main gridview HTML:

<HPS:HPClientGridView OnGridLoadData="grdView_GridLoadData"
   OnGridViewPaging="grdView_GridViewPaging"
   OnGridViewSorting="grdView_GridViewSorting"
           OnGridViewFiltering="grdView_GridViewFiltering"
           OnGridViewPageSizing="grdView_GridViewPageSizing"
           TableCSS="table table-bordered"
           PageSize="15" AllowPaging="true"
           AllowSorting="true" AllowFiltering="true"
           ID="grdView"
               AutoGenerateColumns="false"
               EnableSortingAndPagingCallbacks="true" runat="server">

       </HPS:HPClientGridView>

The grid consists of 5 major events. These events are used to call and manipulate your datasource. The events being:

• OnGridLoadData: Is the first event that is called when the GridView requires a datasource, i.e., when your gridview is required to display data for the first time
• OnGridViewPaging: Allows for the paging of multiple rows of your datasource
• OnGridViewSorting: Allows for the ordering of your datasource
• OnGridViewFiltering: Allows for the "quick filtering" of your datasource
• OnGridViewPageSizing: Allows for the updating of this visible page size (i.e., number of rows per page)

Next, you will want to have data columns within your GridView:

<columns>       
                <HPS:HPCheckBoxField HeaderText="" 
                TokenNameAndValueFields="Id=Id" 
                IsSelectionColumn="true"></HPS:HPCheckBoxField>      
                <HPS:HPLabelField HeaderText="Name" DataField="Name" 
                AllowQuickSearch="true" FilterExpression="Name" 
                SortExpression="Name"></HPS:HPLabelField>                
                <HPS:HPLabelField HeaderText="Vote Count" 
                DataField="VoteCount" AllowQuickSearch="true" 
                FilterExpression="VoteCount" 
                SortExpression="VoteCount"></HPS:HPLabelField>   
                <HPS:HPLabelField HeaderText="Date added" 
                DataField="DateAdded" AllowQuickSearch="true" 
                FilterExpression="DateAdded" 
                SortExpression="DateAdded"></HPS:HPLabelField>   
            </columns> 

There are a few different column templates at your disposal in the gridview, but you will use the HPLabelField most of the time to display your data. There are a few properties to keep in mind:

• DataField - This will define what this column will bind to in relation to your datasource.
• HeaderText - This will define what text will be displayed at the top of your column.
• AllowQuickSearch - This will define whether or not you want this column to be included within the "quick search" feature. More on this later.
• FilterExpression- This will define what your column will filter (search) by in relation to your datasource.
• SortExpression- This will define what your column will order by in relation to your datasource.

The Code

All callback events require that the developer assigns a datasource to the gridview. This first example shows how we can simply assign a List of objects to the gridview. NOTE: Your columns DataField MUST be correctly assigned to a property within your binding object source. Example: If you set your column's datafield to "Name", then this column must correspond to a property called "Name" within your datasource's object.

On Load

Here, we simply bind the datasource to our GridView.

protected void grdView_GridLoadData
 (object sender, HollowPoint.UI.WebControls.GridViewPageLoadEventArgs e)
{
    var data = GetData();
    grdView.DataSource = data;
    grdView.DataBind();

}

Loads a List of objects and assigns the LIST to the DataSource property of the GridView.

On Filtering

Here, you are able to filter on the existing datasource that you have set up within "GetData()", i.e., you can append a query onto the existing data collection to only return results that match the "quick search" criteria.

protected void grdView_GridViewFiltering
  (object sender, HollowPoint.UI.WebControls.GridViewFilterEventArgs e)
{
    List<<funclass>data>;
    int counter = 0;

    //add the Search to the UI
    grdView.Search(e.FilterExpression);

    //do the actual search logic to the datasource
    if (int.TryParse(e.FilterExpression, out counter))
    {
        data = GetData().Where(t => t.VoteCount == counter ||
            t.Name.ToLower().Contains(e.FilterExpression.ToLower())).ToList();
    }
    else
    {
        data = GetData().Where(t => t.Name.ToLower().Contains(e.FilterExpression.ToLower())).ToList();
    }
        
    grdView.DataSource = data;
    grdView.DataBind();
}

As per above - we will pass the "filter text" on to the "Search" method. This will inform the gridview UI that a search is being performed and that it will need to highlight the required text within the GridVew. Now it is up to the developer to define how the filtering will be executed. As you see above, I retrieve the required datasource and then I perform a "Where" LINQ operation on the LIST based on the filter text that I want to search by. This "filtered" datasource that is returned to the gridview will now only contain items that passed the LINQ expressions requirements.

History

14/09/2016

1. Added new GridView fields:

   1. LinkField - Allows you create a link that can be bound to a datasource or ID. In this example - if you click on one of the faces in the GridView - it will fire off a client side event.
   2. DropDownField - Allows you to add dropdown controls into your gridview
2. Fixed a few minor bugs in the source code