This thread is for discussions of Building a Full-Featured Custom DataGrid Control.

Hey folks,

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:

Code:

if (elemType == ListItemType.Header ) {

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

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/CustDG_DualPaging_DragDrop_Sort.zip

And feel free to send me an email and tell me what you think -- dmarko1@aol.com

-Jimmy Markatos

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.CreateProfilePage4_aspx.Page_Load(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

I wrote my own custom datagrid a short time ago, and included code that automatically handled the pageindexchanged and itemdatabound events. The upshot was that I could not get the code to run unless I re-bound the control on every page load.

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.

In order for those events to fire, you have to re-create the same controls when the page is reloaded. The DataGrid does this by using it's ViewState to restore the data it was originally bound to, and hence recreating all the rows in the table. You'd therefore have to do a similar trick of storing the data in the ViewState, and rebinding to that if DataBind() isn't called.

Will take another look.

Many thanks for your reply.

Sean.

Cool, thanks. Glad to see it's helped you out.

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!

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!

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?  

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:

Code:

<style>
.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

Code:

OnItemCreated="Item_Created"

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:
Code:

if (elemType == ListItemType.Pager) {

   e.Item.Cells[0].Attributes.Add("class","DGPager");

}

and for you in VB:

Code:

If (e.Item.ItemType = ListItemType.Pager) Then

   e.Item.Cells(0).Attributes.Add("class","DGPager")

End If

That’s it.

-Jimmy Markatos

Excellent!

Glad to help!

I am dynamically creating/adding template columns to my datagrid. (implementing ITemplate interface).

However, I am unable to set the width of this dynamically added column.

any ideas?

Many thanks,
anabhra