Click here to Skip to main content
Click here to Skip to main content
Go to top

Callback GridView

, 2 Apr 2014
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 4 helpful features:

  1. Page size updating
  2. Column sorting
  3. Quick search/ filtering
  4. Paging

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 Smile | :) 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

 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

 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();
     

Here, 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. 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

Hoping to get some feedback on this control. If people have any suggestions, I will do my best to try and include them into the project. Watch this space.

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.

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalVolynsky Alex4-Apr-14 11:34 
AnswerMy vote of 5 PinprofessionalChristian Amado1-Apr-14 9:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web04 | 2.8.140916.1 | Last Updated 2 Apr 2014
Article Copyright 2014 by UberGeoff
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid