Library tutorials & articles
Building a Full-Featured Custom DataGrid Control
Let's Cache
Now onto the piece d' resistance, our data caching. Within our datagrid class, we include our method GetDataGrid() which set's up all we've discussed - our grid's properties, event handlers, etc. Now as I mentioned before, I nevertheless, in this example, assigned my Datagrid's datasource to another method.
As shown, within our method below we create our connections, get our Dataset and return our results so our DataSource may be bound.
using System.Web.SessionState; // For HttpSessionState
// Our main constructor
public void GetDataGrid() {
...
DataSource = GridDataCache(); //Gets bound from DataSet method below
...
}
Now the GridDataCache method once called will return the data to which our DataSource gets assigned, and as we'll now explore can be either standard data or cached data.
private DataSet GridCachedData()
{
// Data Caching - Session API
DataSet dgCache = (DataSet) HttpContext.Current.Session ["dgCache"];
// Data Caching - Web Cache API
//DataSet dgCache = (DataSet) HttpContext.Current.Cache.Get ("dgCache");
//Check first to see if our cache already exists
if (dgCache == null)
{
// Get data from database and create Dataset
// ...
// Insert Dataset into Session Object
HttpContext.Current.Session.Add ("dgCache" ,objDS);
// Alternatively, insert Dataset into Data Cache
//HttpContext.Current.Cache.Insert ("dgCache", objDS, null, DateTime.Now.AddMinutes(10), TimeSpan.Zero);
return objDS;
}
else
{
//Since cache now exists, return cached Dataset
return dgCache;
}
}
OK, let's examine what's taking place here. Aside from commonplace database opening and connecting, we utilize data caching that we've set up accordingly. These techniques are straightforward and I would advise you reading both Drilldown Datagrid Searching with ASP.NET and .NET Data Caching for an exact methodology to what we're doing here. However, since we are implementing caching within our component, the common caching methods when working with the web cache API discussed in my articles won't work in this case. Why? When implementing caching inside of a component, by its very nature, you'll need the find the cache object through the current HTTP request via the HttpContext.Cache Class property. The common System.Web.Caching object cannot accommodate us in this fashion.
Notice how I list two ways of doing the same thing, one is utilizing the Session API and the other the Cache API. Both have their advantages and disadvantages, that were amply discussed in my Drilldown Datagrid article above. Therefore, after reading my prior articles, you'll find the techniques to be the same, save using HttpContext instead of what I demonstrated there, and the case for either caching method.
Moreover, also notice that with each newly created search, we always need to clear any prior cached data. Therefore, within our .NET page you'll notice that our server-side methods do this for us.
HttpContext.Current.Session.Remove ("dgCache");
In this instance, we remove any prior values kept in session state.
Note: Later on, you can test this new caching/paging implementation by commenting out the return dgCache, recompile it and then start paging. Hmm, no page 2. That's because there is no data. Another test is in our page I added a reset button that will remove this cache from memory and reset our Datagrid. Commenting this out, and re-searching will bring you back the previously cached results!
Well, keep this in mind as we'll get to compiling our class and importing it into our page. Before this, we'll touch on the last of our classes methods. This is a nice one, which is responsible for writing to our label control all our statistics, as we briefly noted at the beginning.
Displaying Our Results
Again, on our page we have all our pertinent web server controls, but only one of those is responsible for displaying our data statistics that emanate from within our DLL. So how does this all happen? We accomplish this in our component with a wonderful little method called OnPreRender, that sends to our Stats Label server control (that we use more or less as a placeholder, which it literally can be as well) - "Your search for X found X records / Results No. 16 to 20, Page 4 of 6, etc." But prior to sending our statistics to our page's server control, we 1) check to see it even exists (otherwise no stats will display) and 2) display our results only upon Page.IsPostback. Anyway here it is:
protected override void OnPreRender(EventArgs e)
{
Control StatsCtrl = Page.FindControl ("Stats");
if (StatsCtrl != null)
{
if (Page.IsPostBack)
{
if (RcdCount == 0)
{
StatsCtrl.Controls.Add (new LiteralControl("<font size=2><b>No Records Found</b></font>"));
Visible = false;
}
else
{
StatsCtrl.Controls.Add (new LiteralControl("<font size=2><b>Your search for <font color=red> " +
HttpContext.Current.Request["srchTxt"] +
" </font>found " + RcdCount + " records / " + PageCount +
" pages<BR>Results No. " + StartCnt + " to " + EndCnt +
" / Page " + (CurrentPageIndex+1) + " of " + PageCount +
"</b></font>"));
}
}
}
Now what's this again? Well, this method overrides the Control.OnPreRender method that typically occurs when the server control is about to render to the page, and before any viewstate content is saved. We use this opportunity within our Datagrid class to gather all our stats in one swell foop, and send them to our Stats server control on our main page. How is this done? We declare our Stats control as a Control (StatsCtrl) to which we use the FindControl method to locate it on our page, and add the new LiteralControl object to the located server control's Control.Controls property.
The e EventArgs parameter contains the event data handled by our method. Even still, when the overriding occurs, it writes out the datagrid paging statistics drawn from within the very class this method resides, to our Stats label server control before rendering any content to the user and before view state is enabled, consequentially paralleling our datagrid paging events. Additionally since we need to also know what criteria the user entered, we can obtain this information using HttpContext.Current.Request ["srchTxt"] which is the HttpRequest object for our current HTTP request.
Try this quick test to see the order you render your controls. Add trace="true" to your @Page Directive and in our OnPreRender method add - HttpContext.Current.Trace.Write ("Here I Am") and then recompile; and you'll see that this indeed overrides OnPreRender.
I hope I haven't lost you so far. Moving on, since we pull into our page values from our compiled class as demonstrated earlier, assigning values to your custom Datagrid control works in the same exact way. So to set the pageSz, for instance, to 10, on Page_Load perhaps, you can write - MyDataGrid.pageSz = 10; - and voila, the datagrid will display 10 records per page.
Incidentally, within your page, you would access the datagrid using its ID. However, since your compiled class is a Datagrid control itself, any values assigned internally, all that is needed is the the datagrid property alone.
Dimitrios, or Jimmy as his friends call him, is a .NET developer/architect who specializes in Microsoft Technologies for creating high-performance and scalable data-driven enterprise Web and deskto...
Related articles
- DataGrid/GridView Paging and Sorting Using A DataReader
- Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid/GridView - Part 2: Maintaining CheckBox State Acr
- Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid (i.e. HotMail & Yahoo)
- Custom ASP.NET Datagrid Paging With Exact Count
Related discussion
-
filter dataview on datagrid in datalist
by janetb (0 replies)
-
Export Datagrid to Excel with same formatting
by zues1333 (2 replies)
-
asp.net determine datagrid for binding programmatically
by janetb (0 replies)
-
Datagrid footer
by janetb (0 replies)
-
Problem in update Records when i search Record in datagrid (new)
by asad_black (1 replies)
Related podcasts
-
StackOverflow uses ASP.NET MVC - Jeff Atwood and his technical team
Scott chats with Jeff Atwood of CodingHorror.com and most recently, StackOverflow.com. Jeff and Joel Spolsky and their technical team have created a new class of application using ASP.NET MVC. What works, what doesn't, and how did it all go down?
I build my own custom datagrid control using the code from your site.
I used this control as a reference in another aspx page at you have mentioned in your article.
I have 400 total number of records and my page count is 5. I wrote a stored procedure which will fetch 10 records each time for custom paging.
When I click on ellipse after 5 it shoud page 6 to 10 but they link to first set of pages. So when I click on 6 it takes me to page 1 and so on. I am unable to navigate to more than 5 pages....
Please Let me know...
LiteralControl lc = (LiteralControl) sender;
DataGridItem container = (DataGridItem) lc.NamingContainer;
lc.Text = ((DataRowView) container.DataItem) [columnName].ToString();
I believe that "container" is your problem.
try:
lc.Text = ((DataRowView)e.Item.DataItem)[columnName].ToString();
Now, if someone could just tell me how to cast a DataGridItemCollection as a TableRowCollection so that I don't get this error, that would be helpful.
I have created a Custom control using your article but i am having problem in sorting and update
as i use a class which implements itemplate interface for this and create the function for update and
sorting in same class.when i click on them the changes are made in database and dataset but they does not display on page and display on second click as these function are called in last i.e the getdatagrid() method is not called after them hence no changes are viewed.Please help me to resolve this problem.Can i use ipostbackdatahandler.
Thanks in Advance
There will be some 20 questions and for each question there will be 4 choices.what i want to do is to select multiple answers by clicking the checkbox. i m using asp.net,vb.net
pls help me
we have written the code using radio button for selecting single item.but we want to replace it with checkbox to select multiple items. the code using radio button is given below .pls correct it with checkbox
Imports System.Data
Imports System.Data.SqlClient
Imports ELearning.LAIDBC
Public Class Test
Inherits System.Web.UI.Page
Public ds As New DataSet()
Public ds1 As New DataSet()
Public ds2 As New DataSet()
Public Score, Answered As Integer
Protected WithEvents txtNoOfqns As System.Web.UI.WebControls.TextBox
Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
Protected WithEvents lblCourse As System.Web.UI.WebControls.Label
Protected WithEvents lblCourseName As System.Web.UI.WebControls.Label
Protected WithEvents lblNoOfQuestions As System.Web.UI.WebControls.Label
Protected WithEvents lblDurationInMinutes As System.Web.UI.WebControls.Label
Protected WithEvents txtduration As System.Web.UI.WebControls.TextBox
Protected WithEvents lblTimeLeft As System.Web.UI.WebControls.Label
Protected WithEvents lblAnswered As System.Web.UI.WebControls.Label
Protected WithEvents txtanswered As System.Web.UI.WebControls.TextBox
Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
Protected WithEvents submitbtn As System.Web.UI.WebControls.Button
Protected WithEvents lab2 As System.Web.UI.WebControls.Label
Protected WithEvents Lab4 As System.Web.UI.WebControls.Label
Protected WithEvents Label2 As System.Web.UI.WebControls.Label
Protected WithEvents lab1 As System.Web.UI.WebControls.Label
Protected WithEvents txtans As System.Web.UI.WebControls.TextBox
End Region
Private ConDB As New ELearning.LAIDBC()
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Session("Log") = Nothing Then
Response.Redirect("frmLogin.aspx")
End If
If Not IsPostBack Then
Try
Session("Course") = Session("URL2")
Session("Id") = "reshm-001"
Session("CandId") = "00000001"
'Response.Write(Session("Id"))
'Response.End()
Session("TotScore") = Nothing
Dim count1, str11 As String
ds1 = New DataSet()
ConDB.OpenConnection()
ds1 = ConDB.ExecuteSPReturnDS("ELSExecuteQuery", "select count(fUserId) from tblScore where fUserId='" & (Session("CandId")) & "' and fcourseid='" & Session("Id") & "' ")
ConDB.CloseConnection()
count1 = ds1.Tables(0).Rows(0)(0)
str11 = "select count(fUserId) from tblScore where fUserId='" & (Session("CandId")) & "' and fcourseid='" & Session("Id") & "'"
'Response.Write(str11)
'Response.End()
If count1 < 3 Then
' Response.Write(str11 & "," & count1)
ds2 = New DataSet()
Dim count2 As Integer
ConDB.OpenConnection()
ds2 = ConDB.ExecuteSPReturnDS("ELSExecuteQuery", "select count(fUserId) from tblScore where fUserId='" & (Session("CandId")) & "' and fresult='P'")
count2 = ds2.Tables(0).Rows(0)(0)
Response.Write(count2)
ConDB.CloseConnection()
If count2 > 0 Then
Session("msg") = "You have already passed for the test"
Response.Redirect("frmChance.aspx")
Else
Dim qrstr As String
Dim NoOfQuestionsToDisplay As Integer
Dim Mstring As String
Dim TotalNoOfQuestions As Integer
courseidselect()
Try
NoOfQuestionsToDisplay = txtNoOfqns.Text
Session("NoOfQuestionsToDisplay ") = txtNoOfqns.Text
ds = New DataSet()
ConDB.OpenConnection()
ds = ConDB.ExecuteSPReturnDS("ELSExecuteQuery", "select count(*) from tblQuestion where f_CourseId='" & Session("Id") & "'")
ConDB.CloseConnection()
TotalNoOfQuestions = ds.Tables(0).Rows(0)(0)
Session("TotQns") = TotalNoOfQuestions
Catch ex As Exception
R
I hope i am clear with my problem . please help me in getting event fired for checkbox and also getting count for number of check box clicked .
Thanks in advance,
Rujuta
You can implement one way as found in my other article here on DF - Dynamic Column Sorting and Paging in ASP.NET or you can download the upgraded version of my custom datagrid control with drag and drop columns and sorting.
-Jimmy Markatos
how can i implement sorting for all the column in this sample?
Hi all,
I just re-added the forum post containing the new version of my article code. I just thought it easier to repost it again, since I find people requesting this and since the topics become hidden after a while, it won't show up unless you select all topics.
Anyway, here is the link:
Custom DG Ctrl w/ Dual Paging, Drag&Drop/Sort DL code forum post
-Jimmy Markatos
Right, I misunderstood you, as I was referring to DataSet data and I simply specified if you explicitly disabled view state, as yes, of course, true is the default. Now if you utilize what else I've mentioned then you shouldn’t have any issues.
Also, I don't know what you mean with 2 other grids that maintain state. Are they all the same with dynamic item templates and all? As I can’t see your code I don’t know what you may have overlooked or otherwise.
Therefore, employ the Page_Init method to help with this, but ultimately whenever something doesn't hold state by normal means as you would’ve hope it would then make use of view state.
Hope this helps.
I read this article on msdn:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpref/html/frlrfsystemwebuiwebcontrolsdatagridcolumncollectionclasstopic.asp
It seems to say that derived coumns (from say itemtemplate) that are added at run time are not saved to view state.
They suggest having all needed cols and set visible attribute of those not needed for display to be set to false.
I do have the EnableViewState=true (I think that is the default) on the page and grid. I have 2 other grids that do maintain the state...
-anabhra
Yes, becuase by default all data within a DataSet is typically persisted in ViewState. Have you explcitly disabled Page ViewState? I don't see how your dynamically sized columns would reset themselves.
At any rate, try enabling the DataGrid's DataGrid.EnableViewState property to true to maintains its state across HTTP requests.
Furthermore, you can ideally stored any values you require to be persistant by storing those values in Session State.
This should take care of it.
- Jimmy Markatos
I have one more question:
When using template columns dynamically, are they stored in the view state?
It seems not but I would like to have them as I have editable text boxes in the template columns that user enters data in...
Many thanks,
anabhra
your suggestion will work.
I just solved my problem by setting the header template and itemtemplate widths. I had the grid in a div and that is why I could not see the widths. Once I set the table layout of the grid to fixed, I saw the columns being sized.
again, many thanks for your interest.
Ex. in Pixels:
Private Sub GridCreated (ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles GridCreated
e.Item.Cells(0).Width = New Unit (100, UnitType.Pixel)
e.Item.Cells(1).Width = New Unit (75, UnitType.Pixel)
End Sub
//C#
private void GridCreated (object sender, DataGridItemEventArgs e)
{
e.Item.Cells[0].Width = new Unit (100, UnitType.Pixel);
e.Item.Cells[1].Width = new Unit (75, UnitType.Pixel);
}
Furthermore, you can accomodate other Unit structures such as Percentage.
Ex. in Percentage:
Private Sub GridCreated (ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles GridCreated
e.Item.Cells(0).Width = New Unit (50, UnitType.Percentage)
e.Item.Cells(1).Width = New Unit (25, UnitType.Percentage)
End Sub
//C#
private void GridCreated (object sender, DataGridItemEventArgs e)
{
e.Item.Cells[0].Width = new Unit (50, UnitType.Percentage);
e.Item.Cells[1].Width = new Unit (25, UnitType.Percentage);
}
Hope this helps.
- Jimmy Markatos
However, I am unable to set the width of this dynamically added column.
any ideas?
Many thanks,
anabhra
Glad to help!
Excellent!
Sure. You'll notice in my article's datagrid enhancements section How to customize the Datagrid pager, I show one way of manipulating the pager to which CSS could easily be added.
Furthermore, in the article's forum post I offer an improved version of my custom datagrid control, where I have added onmouseover rowhighlighting which further demonstrates CSS enhancement.
Essentially, in modifying any elements of the datagrid, you’ll need to work with the grid’s OnItemCreated or OnItemDataBound methods to include any grid manipulations.
Example:
Your stylesheet:
.DGPager {font-family: garamond; font-size:16px;}
.DGPager a:link {font-size:16px; color:#0000FF;}
.DGPager a:visited {font-size:16px; color:#C0C0C0;}
.DGPager a:hover {font-size:16px; color:#FF0000;}
</style>
Next, add the event handler to your datagrid to call the method
And in the OnItemCreated method or in my article's GridCreated method, you add the following code in your code-behind or in your main page which determines you want to deal with the datagrid’s pager. The same goes for the header:
e.Item.Cells[0].Attributes.Add("class","DGPager");
}
and for you in VB:
e.Item.Cells(0).Attributes.Add("class","DGPager")
End If
That’s it.
Thanks- this seems to be a different approach. I haven't looked at it in detail, but am interested. It's interesting that the DataGrid with Month Pager Tabs was based on an article Dino wrote in ASP.Net Pro, and he also wrote the other 2 on editing the header, which I got to work, and on freezing the header, which I could not get to work (all of his samples in ASP.Net Pro are in C#, and I am still using VB, so I'm forced to use a translator which doesn't alway work. They have just changed their policy to include both C# and VB, which is the best way to learn either in my opinion).
Thanks for the help. Do you know of any examples where the Pager can be manipulated with CSS?
Thanks stevemets,
What you need is a custom pager control to give you the ability to provide fixed paging. I believe what you're looking for can be found here - Creating a Pager Control for ASP.NET by Dino Esposito.
Hope this helps!
Your Datagrid is very useful. I have built a custom DG with paging set for Months (Jan-Dec) which serves up the sales for the month selected in the Pager Tab. I have also enabled both Header Editing and Freezing Header as you scroll. What I have not been able to do is to allow the Pager control to freeze in a similar manner as you scroll- the goal being to have the Header and Pager Tabs always visible so you don't have to go back to the top to change selection or remember what the data is in which column. In general, I have not been able to apply any formatting using CSS to the pager at all. Any help would be appreciated.
Thanks!
Many thanks for your reply.
Sean.
Is this normal?
Conventional datagrids do not require this. What could I have been doing wrong?
What are the issues with auto handling events with custom controls?
many thanks
Sean.
Doing someting similar to the code in the posting for "Building a Full-Featured Custom DataGrid Control" using datagrids and having a duece of a time getting past one problem.
The error encountered is System.InvalidCastException: Specified cast is not valid. I'm using the same code as up above for setting up the databinding for an item template in a datagrid. If I use a control file I have no problems with binding the data (from my SQL Server database). But for some reason I can't assign the databinding using a code behind file . Here's the code, just like up above as far as I can tell.
LiteralControl lc = (LiteralControl) sender;
DataGridItem container = (DataGridItem) lc.NamingContainer;
lc.Text = ((DataRowView) container.DataItem) [columnName].ToString();
Again, I have no problems binding to my itemtemplate column using other methods, so I'm wrather sure it's not a data issue. I have seen mention on MSDN of this type of problem possibly being related to control tree hierarchy being re-ordered at this address http://support.microsoft.com/default.aspx?scid=kb;en-us;Q327287 but I couldn't see how to fix it from what they gave as a solution. Their solution, to save you the trip, is this:
"Make sure that the control tree is re-created on postback in the same order that it was saved at the end of the previous request." My depth of .net knowledge doesn't go that deep.
Any ideas?
Thanks.
Stack trace is here.
[InvalidCastException: Specified cast is not valid.]
DataGridTemplate.OnDataBinding(Object sender, EventArgs e) +13
System.Web.UI.Control.OnDataBinding(EventArgs e) +66
System.Web.UI.Control.DataBind() +26
System.Web.UI.Control.DataBind() +86
System.Web.UI.Control.DataBind() +86
System.Web.UI.WebControls.DataGrid.CreateItem(Int32 itemIndex, Int32 dataSourceIndex, ListItemType itemType, Boolean dataBind, Object dataItem, DataGridColumn[] columns, TableRowCollection rows, PagedDataSource pagedDataSource) +169
System.Web.UI.WebControls.DataGrid.CreateControlHierarchy(Boolean useDataSource) +1411
System.Web.UI.WebControls.BaseDataList.OnDataBinding(EventArgs e) +49
System.Web.UI.WebControls.BaseDataList.DataBind() +23
Rock.BudgetDataGrid.datagridSetup(DataGrid datagrid) +914
ASP.CreateProfilePage4aspx.PageLoad(Object sender, EventArgs e) in \CreateProfilePage4.aspx:28
System.Web.UI.Control.OnLoad(EventArgs e) +67
System.Web.UI.Control.LoadRecursive() +35
System.Web.UI.Page.ProcessRequestMain() +750
Hi all,
I’ve added a newly enhanced version of my Custom Datagrid that adds some cool features and functionality including drag & drop columns that was incorporated from the wonderful article Extend the ASP.NET Datagrid with Client-side Behaviors by Dino Esposito found in the January 2004 issue of MSDN Magazine.
I merged the code and functionality into the class assembly instead of the two found in the article. So in turn, you now really end with an awesome fully featured custom Datagrid control!
The features are:
1) Custom Paging taken from my article - Custom ASP.NET DataGrid Paging With Exact Count , alongside the conventional Datagrid paging setup.
2) Drag & Drop Columns and Sorting from Dino Esposito's article
3) Adding Background Image to Datagrid Header
4) OnMouseover Datagrid Row Highlighting
The only difference from this and my original article and code from "Building a Full-Featured Custom Datagrid Control" aside from the aforementioned, is in the code-behind setup. In this case, the dll class contains the drag & drop code and the Datagrid class only. My code-behind page inherits this and contains all of the remaining code.
Be also sure to check out this article here on developerfusion.com where I have listed four additional Datagrid enhancements that you could incorporate into this Datagrid.
Download the code here -> http://members.aol.com/dmarko1/dnjcode/CustDGDualPagingDragDrop_Sort.zip
And feel free to send me an email and tell me what you think -- dmarko1@aol.com
-Jimmy Markatos
Here's one quick and easy way to add a background image to your Datagrid header, to give it a more fuller look. The code to do this is:
e.Item.Style["background-image"] = "url(yourimage.jpg)";
}
Simply add this to my article's "myCustDG.cs" source file code in the "GridCreated" method found at the end, recompile the source code to get your "myCustDG.dll" and you're done.
Even easier is my other forum post "Custom DG Control w/ Dual Paging, Drag & Drop/Sort" that has this incorporated into it and a whole lot more and you can download the code with all the enhancements here -> http://members.aol.com/dmarko1/dnjcode/CustDG_DualPaging_DragDrop_Sort.zip
-Jimmy Markatos
This thread is for discussions of Building a Full-Featured Custom DataGrid Control.