Click here to Skip to main content
12,508,972 members (47,036 online)
Click here to Skip to main content
Add your own
alternative version

Stats

14.3K views
806 downloads
17 bookmarked
Posted

Callback GridView (v2)

, 14 Sep 2016 CPOL
Rate this:
Please Sign up or sign in to vote.
An all-in-one callback gridview

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

UberGeoff
Web Developer MyMarket
South Africa South Africa
Been developing for about 7 years now. Love solving new and interesting problems. Especially enjoy web GUI projects.

Worked as a web developer for K2 SourceCode. Projects worked on: K2 WorkSpace, BlackPoint, BlackPearl and K2 for SharePoint.

Currently working at BidTravel and helping them out with their Procurement systems.

Living in sunny South Africa.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
PraiseGood Pin
MayurDighe15-Sep-16 0:03
professionalMayurDighe15-Sep-16 0:03 
GeneralMy vote of 5 Pin
Volynsky Alex4-Apr-14 11:34
professionalVolynsky Alex4-Apr-14 11:34 
AnswerMy vote of 5 Pin
Christian Amado1-Apr-14 9:20
professionalChristian Amado1-Apr-14 9:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160927.1 | Last Updated 14 Sep 2016
Article Copyright 2014 by UberGeoff
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid