Page 1 of 1

Creating a Custom GridView control with its own Custom Paging control

#1 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 444
  • View blog
  • Posts: 1,492
  • Joined: 28-April 09

Posted 05 February 2011 - 11:37 AM

I still consider myself fairly new to ASP.net overall, but one thing I've noticed is that the default server controls do not always provide the best in functionality or appearance. The control that annoys me most though is the GridView control. It works well when you are only dealing with a handful of pages, but I've had projects with over a thousand pages and the page controls that come with the GridView just aren't designed to deal with that much data, at least not in a user friendly manner. After a few times of implementing custom paging on the GridView I decided it was time to just go ahead and create my own control with the custom paging built in to save myself the headache of having to do it again. Now, I didn't want to create a completely new type of grid control from the ground up so decided to just inherit from the GridView control and go from there.

A few notes before I get into the code, I created this using C# in Visual Studio 2010(.Net 4.0), but it should work fine in Visual Studio 2008(.Net 3.5) as well. Start out by creating a new Class Library Project. Now you can add a new item to your project, I chose ASP.Net Server Control as that loads the basic shell of a server control for you, but you can also just add a normal class and go from there as well. You probably want to name the class file something meaningful, like CustomGridView.cs, or MyGrid.cs, or AGridViewWithACustomPagerBuiltIntoIt.cs, or whatever else makes sense to you. You may, or may not, need to add a reference to System.Design to your project, I did. Here is where you can find some information on adding and removing references to your project as that is not in the scope of this tutorial.

To get started here are the usings that were necessary to build the project.
Spoiler


Now if you chose ASP.Net Server Control as the new item then go ahead and delete the Text Property and the Render Method that were created as we will not be dealing with those. Ok, so the next thing we want to do is name our class and tell it that we want to inherit from the GridView control. We also need to add a couple of attributes to the class. We will add a designer attribute so Visual Studio will know how to render the control during design time. As this control inherits from GridView we can just use the GridViewDesigner class instead of creating our own. We will also add a ToolBoxData attribute, this attribute tells visual studio how to create the tag for the control when it's moved from the toolbox onto your .aspx page.

Spoiler


Now we can get on to the actual creation of the new pager control. For this we're going to use four controls: 3 Button controls, and a TextBox control.

Spoiler


I added a property to allow the user the option of enabling the custom pager or to use the default pager control. To persist the value of this property we need to make sure its value is stored to ViewState. This property is not necessary to the operation of the control, but if you choose to not include it you will need to be sure to remove the references to it in other parts of the code.

Spoiler


Since we are creating a pager control we will make use of the GridView's InitializePager method. We do this by overriding the method and adding our custom logic to it. In this case we just want to see if the user has chosen to use the custom pager and if so to load our custom pager controls.

Spoiler


Now we can go ahead and initialize our pager controls and add them to the Pager Row. This step includes setting all of the properties for out controls, such as the test, events and any other properties you would like to set.

Spoiler


Simple enough so far huh, well if you're expecting it to get more difficult then I'm sorry to say you're going to be disappointed. All that's left is to handle our pager control events and this control will be ready for use. I'm not going to go into a lot of detail on each individual event as the logic is fairly straightforward, but I will put in some comments to kind of walk through it.

Spoiler


And that's the final step. You should now be able to build the control. To use it in another project now just add a reference to the .dll that was created and you can then add the control to your toolbox.

Adding Items To The ToolBox

Attached Image

Is This A Good Question/Topic? 1
  • +

Replies To: Creating a Custom GridView control with its own Custom Paging control

#2 spanjam  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 05-April 13

Posted 05 April 2013 - 10:08 AM

Excelent article, has served as a base to start enhancing a control. Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1