Custom build DataGridColumn event problem

Girish · Jul 19, 2005

OK.. phew. Playing with data grids for the past few days has been fun and a
huge learning experience..

My problem. I have a requirement to display a gird with a gird. Within the
embedded grid, theres a requirement to show a drop down menu list (this is a
control I downloaded online) in one of the columns. For the purposes of this
question, Ive implemented the drop down menu as a drop down list instead.
Ive got all this working at this point. Heres my problem:

1) When a person selects an item in the drop down list, I need the server to
autopost back and fire an event which I can handle on the sever side.
2) On the server side, I need to be able to figure out which drop down list
the event was fired for and what the selected value is.

Ive implemented the display of the column showing the drop down list in a
custom built DataGridColumn. All the code is below.

My Question:

1) How do I setup ONE postback event handler for ALL the drop downlist
controls being rendered dynamically in the embedded grid?
2) The event handler must be in the code-behind code that uses the custom
built DataGridColumn and should not be in the DataGridColumn code itself.
2) How do I figure out in that one event handler method, the drop down list
that threw the event, and the value of the selected item.

If you look towards the end of the method
CustomerDataGrid_OnItemDataBound(object sender, DataGridItemEventArgs e),
you'll find the code where I programmatically attach the new column. The
custom col code itself is the last snippet of code in this email.

Appreciate anyones help.

Girish

----------------
ASPX CODE
---------------

<%@ Page language="c#" Inherits="MasterDetail.CustomerOrderDataGrid"
EnableViewState="False" CodeBehind="CustomerOrderDataGrid.aspx.cs"
AutoEventWireup="false" %>
<HTML>
<LINK REL=StyleSheet HREF="menu.css" TYPE="text/css" />

<body style="FONT: x-small Verdana, Arial, sans-serif">

<form id="CustomerOrderDataGrid" method="post" runat="server">
<a href="/DayOfDotNet/">Parent Directory</a>

<asp

ataGrid id="CustomerDataGrid" runat="server"
AutoGenerateColumns="False" CellPadding="2"
CellSpacing="0" Font-Names="Verdana, Arial, sans-serif"
BorderColor="Black" BorderWidth="1"
GridLines="Horizontal"
OnItemDataBound="CustomerDataGrid_OnItemDataBound" EnableViewState="False">
<AlternatingItemStyle BackColor="Tan"></AlternatingItemStyle>
<ItemStyle Font-Size="X-Small"></ItemStyle>
<HeaderStyle Font-Size="Small" Font-Names="Arial" Font-Bold="True"
ForeColor="White" BackColor="Maroon"></HeaderStyle>
<Columns>
<asp:BoundColumn Visible="False"
DataField="CustomerID"></asp:BoundColumn>
<asp:HyperLinkColumn
DataTextField="CustomerID"
DataNavigateUrlField="CustomerID"
DataNavigateUrlFormatString="OrderDetailDataGrid.aspx?customerid={0}"
HeaderText="ID"
ItemStyle-VerticalAlign="Top" />

<asp:TemplateColumn HeaderText="Customer">
<ItemStyle VerticalAlign="Top"></ItemStyle>
<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "CompanyName") %>

 
<%# DataBinder.Eval(Container.DataItem, "Address" ) %>
 
<%# DataBinder.Eval(Container.DataItem, "City" ) %>
,
<%# DataBinder.Eval(Container.DataItem, "Region") %>
<%# DataBinder.Eval(Container.DataItem, "PostalCode" ) %>
 
 
<%# DataBinder.Eval(Container.DataItem, "ContactName" ) %>
 
<%# DataBinder.Eval(Container.DataItem, "ContactTitle" ) %>
 
<%# DataBinder.Eval(Container.DataItem, "Phone" ) %>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn ItemStyle-VerticalAlign="Top"
HeaderText="Orders">
<%-- Embedded DataGrid will go here --%>
</asp:TemplateColumn>
</Columns>
</asp

ataGrid>

</form>

</body>
</HTML>

-------------------
CODE BEHIND
------------------
using System;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Configuration;

namespace MasterDetail
{
public class CustomerOrderDataGrid : System.Web.UI.Page
{
protected DataGrid CustomerDataGrid;
private DataSet ds = new DataSet();

private void Page_Load(object sender, System.EventArgs e)
{
string sqlStmt = "SELECT top 2 * FROM Customers; SELECT * FROM Orders";
string conString =
"server=localhost;database=Northwind;uid=sa;pwd=tietronix;";

SqlDataAdapter sda = new SqlDataAdapter(sqlStmt, conString);

sda.Fill(ds);
ds.Tables[0].TableName = "Customers";
ds.Tables[1].TableName = "Orders";

CustomerDataGrid.DataSource = ds.Tables["Customers"];
CustomerDataGrid.DataBind();
}

//Use the OnItemDataBound event handler to dynamically add an embedded
DataGrid
protected void CustomerDataGrid_OnItemDataBound(object sender,
DataGridItemEventArgs e)
{
//When each row is created in the DataGrid, eval the ItemType
if(e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
//If the ItemType is Item or AlternatingItem,
//Create a new DataGrid object named OrdersDataGrid
DataGrid OrdersDataGrid = new DataGrid();

//Format the DataGrid to look cool.
OrdersDataGrid.BorderWidth = (Unit)1;
OrdersDataGrid.CellPadding = 4;
OrdersDataGrid.CellSpacing = 0;
OrdersDataGrid.GridLines = GridLines.Horizontal;
OrdersDataGrid.BorderColor = Color.FromName("Black");

OrdersDataGrid.ItemStyle.Font.Name = "Verdana";
OrdersDataGrid.ItemStyle.Font.Size = FontUnit.XSmall;

OrdersDataGrid.AlternatingItemStyle.BackColor =
Color.FromName("LightGray");

OrdersDataGrid.ShowHeader = true;
OrdersDataGrid.HeaderStyle.BackColor = Color.FromName("Black");
OrdersDataGrid.HeaderStyle.ForeColor = Color.FromName("White");
OrdersDataGrid.HeaderStyle.Font.Bold = true;
OrdersDataGrid.HeaderStyle.Font.Size = FontUnit.XSmall;

//Do not autogenerate columns.
OrdersDataGrid.AutoGenerateColumns = false;

//Add a series of BoundColumns
//Order ID
BoundColumn bc = new BoundColumn();
//Set the BoundColumn Values
bc.HeaderText = "Order ID";
bc.DataField = "OrderID";
bc.ItemStyle.Wrap = false;
//Add the BoundColumn to the OrdersDataGrid.
OrdersDataGrid.Columns.Add(bc);

//Order Date
bc = new BoundColumn();
bc.HeaderText = "Order Date";
bc.DataField = "OrderDate";
bc.DataFormatString="{0:d}";
bc.ItemStyle.Wrap = false;
OrdersDataGrid.Columns.Add(bc);

//Required Date
bc = new BoundColumn();
bc.HeaderText = "Required Date";
bc.DataField = "RequiredDate";
bc.DataFormatString="{0:d}";
bc.ItemStyle.Wrap = false;
OrdersDataGrid.Columns.Add(bc);

//Shipped Date
bc = new BoundColumn();
bc.HeaderText = "Shipped Date";
bc.DataField = "ShippedDate";
bc.DataFormatString="{0:d}";
bc.ItemStyle.Wrap = false;
OrdersDataGrid.Columns.Add(bc);

// ADD THE CUSTOM BUILT COL HERE
DropDownListColumn DDLC = new DropDownListColumn();
DDLC.HeaderText = "My DDL";
OrdersDataGrid.Columns.Add(DDLC);

//End BoundColumns

//Get the Authors DataView and filter it for the current ISBN
DataView _orders = ds.Tables["Orders"].DefaultView;
_orders.RowFilter = "CustomerID='" + e.Item.Cells[0].Text + "'";

//Bind the DataGrid.
OrdersDataGrid.DataSource = _orders;
OrdersDataGrid.DataBind();

e.Item.Cells[3].Controls.Add(OrdersDataGrid);
}
}

override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
}
}

----------------------------------
Custom built data Grid col code
-----------------------------------
using System;
using System.Web.UI.WebControls;

namespace MasterDetail
{

public class DropDownListColumn : DataGridColumn
{
public DropDownListColumn() : base()
{
}

public override void InitializeCell(TableCell cell, int columnIndex,
ListItemType itemType)
{
base.InitializeCell(cell, columnIndex, itemType);

switch (itemType)
{
case ListItemType.EditItem:
case ListItemType.Item:
case ListItemType.AlternatingItem:
case ListItemType.SelectedItem:
cell.DataBinding += new EventHandler(this.ItemDataBinding);
DropDownList DLL = new DropDownList();
cell.Controls.Add( DLL );
break;
case ListItemType.Header:
break;
}

}

private void ItemDataBinding(object sender, EventArgs e)
{
TableCell cell = (TableCell)sender;
DropDownList DDL1 = (DropDownList)cell.Controls[0];
DDL1.Items.Add(new ListItem("one","1"));
DDL1.Items.Add(new ListItem("two","2"));
DDL1.Items.Add(new ListItem("three","3"));
}
}
}

Guest · Jul 19, 2005

Girish said:
My Question:

1) How do I setup ONE postback event handler for ALL the drop downlist
controls being rendered dynamically in the embedded grid?
2) The event handler must be in the code-behind code that uses the custom
built DataGridColumn and should not be in the DataGridColumn code itself.
2) How do I figure out in that one event handler method, the drop down list
that threw the event, and the value of the selected item.

You can have the dropdownlist raise the SelectedIndexChanged event and then
trap the event (in the codebehind of the Page class, as you wanted) using
Event Bubbling. Lookup for samples on Event Bubbling on the MSDN library.

Consider though the size of the downloaded page. If every row of your
DataGrid were to repeat the same data for the dropdownlist then your page can
easily run over 1 megabyte in size (when handling real data). I would either:

1. Add an EditCommandButton in the DataGrid and leave the DropDownList in
the EditItemTemplate of one column. The DropDownList will only be displayed
in one row at a time when you bind it to its DataSource (this happens during
your handling the EditItem event). In this scenario the Update button would
raise the ItemCommand event. In processing the ItemCommand event you can get
both:

a. The ItemIndex of the grid where the postback occurred:
e.Item.ItemIndex, and
b. A reference to the dropdown list:
(DropDownList)e.Item.Cells[x].Controls[0]
(where x = the column no).

2. Replace the DropDownList by a TextBox and use client-side Javascript
to transform an xml data document using xslt to display a list of matching
results as demonstrated on this page:
http://www.societopia.net/samples/textbox.htm

Girish · Jul 19, 2005

Appreciate the insight into page load size. I dont think this will be an
issue since we will be working with barely 10 rows per page.

I looked at Event Bubbling, but it requires that my DropDownListColumn
inherit from class Control. My DropDownListColumn already inherits from
DataGridColumn so i cant multiple inherit... im sure im missing something
simple here. pse advice.

thanks,
Girish

Phillip Williams said:
Girish said:

My Question:

1) How do I setup ONE postback event handler for ALL the drop downlist
controls being rendered dynamically in the embedded grid?
2) The event handler must be in the code-behind code that uses the custom
built DataGridColumn and should not be in the DataGridColumn code itself.
2) How do I figure out in that one event handler method, the drop down
list
that threw the event, and the value of the selected item.

Click to expand...

You can have the dropdownlist raise the SelectedIndexChanged event and
then
trap the event (in the codebehind of the Page class, as you wanted) using
Event Bubbling. Lookup for samples on Event Bubbling on the MSDN library.

Consider though the size of the downloaded page. If every row of your
DataGrid were to repeat the same data for the dropdownlist then your page
can
easily run over 1 megabyte in size (when handling real data). I would
either:

1. Add an EditCommandButton in the DataGrid and leave the DropDownList
in
the EditItemTemplate of one column. The DropDownList will only be
displayed
in one row at a time when you bind it to its DataSource (this happens
during
your handling the EditItem event). In this scenario the Update button
would
raise the ItemCommand event. In processing the ItemCommand event you can
get
both:

a. The ItemIndex of the grid where the postback occurred:
e.Item.ItemIndex, and
b. A reference to the dropdown list:
(DropDownList)e.Item.Cells[x].Controls[0]
(where x = the column no).

2. Replace the DropDownList by a TextBox and use client-side
Javascript
to transform an xml data document using xslt to display a list of matching
results as demonstrated on this page:
http://www.societopia.net/samples/textbox.htm

Guest · Jul 20, 2005

This is a quick modification of your code to make the Event Bubbling works
http://www.societopia.net/samples/webform6.aspx

If I had more time I could have probably created a more elaborate custom
event.

I would still prefer the EditItem Template strategy as I mentioned in the
previous email. It is much cleaner.

Phillip
--
http://www.webswapp.com

Girish said:
Appreciate the insight into page load size. I dont think this will be an
issue since we will be working with barely 10 rows per page.

I looked at Event Bubbling, but it requires that my DropDownListColumn
inherit from class Control. My DropDownListColumn already inherits from
DataGridColumn so i cant multiple inherit... im sure im missing something
simple here. pse advice.

thanks,
Girish

Phillip Williams said:

Girish said:

My Question:

1) How do I setup ONE postback event handler for ALL the drop downlist
controls being rendered dynamically in the embedded grid?
2) The event handler must be in the code-behind code that uses the custom
built DataGridColumn and should not be in the DataGridColumn code itself.
2) How do I figure out in that one event handler method, the drop down
list
that threw the event, and the value of the selected item.

Click to expand...

You can have the dropdownlist raise the SelectedIndexChanged event and
then
trap the event (in the codebehind of the Page class, as you wanted) using
Event Bubbling. Lookup for samples on Event Bubbling on the MSDN library.

Consider though the size of the downloaded page. If every row of your
DataGrid were to repeat the same data for the dropdownlist then your page
can
easily run over 1 megabyte in size (when handling real data). I would
either:

1. Add an EditCommandButton in the DataGrid and leave the DropDownList
in
the EditItemTemplate of one column. The DropDownList will only be
displayed
in one row at a time when you bind it to its DataSource (this happens
during
your handling the EditItem event). In this scenario the Update button
would
raise the ItemCommand event. In processing the ItemCommand event you can
get
both:

a. The ItemIndex of the grid where the postback occurred:
e.Item.ItemIndex, and
b. A reference to the dropdown list:
(DropDownList)e.Item.Cells[x].Controls[0]
(where x = the column no).

2. Replace the DropDownList by a TextBox and use client-side
Javascript
to transform an xml data document using xslt to display a list of matching
results as demonstrated on this page:
http://www.societopia.net/samples/textbox.htm

Click to expand...

girish · Jul 20, 2005

Thanks for your help again Phillip. I tend to be very inquisitive by
nature... my apologies in advance..

1) What do you mean by "create a more elaborate custom event?"

2) To bubble events in user created controls, you have to inherit from
control and override RaiseBubbleEvent . Why is this? Why cant you get away
with what you did in your example?

If you could point me to articles, that would also be helpful rather than
typing out huge replies.

Thanks a mill again,
Girish

Phillip Williams said:
This is a quick modification of your code to make the Event Bubbling works
http://www.societopia.net/samples/webform6.aspx

If I had more time I could have probably created a more elaborate custom
event.

I would still prefer the EditItem Template strategy as I mentioned in the
previous email. It is much cleaner.

Phillip
--
http://www.webswapp.com

Girish said:

Appreciate the insight into page load size. I dont think this will be an
issue since we will be working with barely 10 rows per page.

I looked at Event Bubbling, but it requires that my DropDownListColumn
inherit from class Control. My DropDownListColumn already inherits from
DataGridColumn so i cant multiple inherit... im sure im missing something
simple here. pse advice.

thanks,
Girish

Phillip Williams said:

:

My Question:

1) How do I setup ONE postback event handler for ALL the drop downlist
controls being rendered dynamically in the embedded grid?
2) The event handler must be in the code-behind code that uses the
custom
built DataGridColumn and should not be in the DataGridColumn code
itself.
2) How do I figure out in that one event handler method, the drop down
list
that threw the event, and the value of the selected item.

You can have the dropdownlist raise the SelectedIndexChanged event and
then
trap the event (in the codebehind of the Page class, as you wanted)
using
Event Bubbling. Lookup for samples on Event Bubbling on the MSDN
library.

Consider though the size of the downloaded page. If every row of your
DataGrid were to repeat the same data for the dropdownlist then your
page
can
easily run over 1 megabyte in size (when handling real data). I would
either:

1. Add an EditCommandButton in the DataGrid and leave the
DropDownList
in
the EditItemTemplate of one column. The DropDownList will only be
displayed
in one row at a time when you bind it to its DataSource (this happens
during
your handling the EditItem event). In this scenario the Update button
would
raise the ItemCommand event. In processing the ItemCommand event you
can
get
both:

a. The ItemIndex of the grid where the postback occurred:
e.Item.ItemIndex, and
b. A reference to the dropdown list:
(DropDownList)e.Item.Cells[x].Controls[0]
(where x = the column no).

2. Replace the DropDownList by a TextBox and use client-side
Javascript
to transform an xml data document using xslt to display a list of
matching
results as demonstrated on this page:
http://www.societopia.net/samples/textbox.htm

Click to expand...

Click to expand...

Guest · Jul 20, 2005

girish said:
Thanks for your help again Phillip. I tend to be very inquisitive by
nature... my apologies in advance..

You are welcome. I get to learn too.

1) What do you mean by "create a more elaborate custom event?"

In this example I had to pass the primary key of the record as the ID of the
dropdownlist control to discover the GridDataItem.ItemIndex. There might be a
better way of doing that.

2) To bubble events in user created controls, you have to inherit from
control and override RaiseBubbleEvent . Why is this? Why cant you get away
with what you did in your example?

http://msdn.microsoft.com/library/d...us/cpguide/html/cpconbubblingcommandevent.asp

In this sample you had your parent Grid on the webform already and added the
code for the child grid in the same page of the codeBehind. This is a just a
proof of concept. However if you intend to deploy them in production you
might create each as separate control inherited from the datagrid and have to
bubble events from the child grid to the parent and then from the parent to
the page that contain it or any other container that you have customized.

Phillip

Guest · Jul 21, 2005

girish said:
Thanks for your help again Phillip. I tend to be very inquisitive by
nature... my apologies in advance..

1) What do you mean by "create a more elaborate custom event?"

I found a couple of nice and clear samples on the MSDN library to help you
create event delegates and custom event data classes that you might be
interested in:

http://msdn.microsoft.com/library/d...en-us/cpguide/html/cpconeventsmini-sample.asp

http://msdn.microsoft.com/library/d.../cpguide/html/cpconcompositecontrolsample.asp

Hope this helps.

Phillip

Girish · Jul 21, 2005

Thanks Phillip.

Youve been a great help.

g

Phillip Williams said:
I found a couple of nice and clear samples on the MSDN library to help you
create event delegates and custom event data classes that you might be
interested in:

http://msdn.microsoft.com/library/d...en-us/cpguide/html/cpconeventsmini-sample.asp

http://msdn.microsoft.com/library/d.../cpguide/html/cpconcompositecontrolsample.asp

Hope this helps.

Phillip

Grid within a Grid ItemDataBound event problem	4	Jul 18, 2005
Why does my OnItemDataBound get fired twice?	2	Jul 8, 2005
Custom DataGridColumn DataGridItems not saving to ViewState. Not Visible on Postback	2	Jan 28, 2004
Problem with custom DataGridColumn Dynamic ViewState.	0	Feb 14, 2005
ItemTemplate Problem	0	Jul 7, 2012
Problem Soring DataGrid using BoundColumns	0	Mar 31, 2005
Dynamic BoundColumn	2	Mar 16, 2008
Problem with Data Grid	0	Apr 17, 2008

Custom build DataGridColumn event problem

Girish

Guest

Girish

Guest

girish

Guest

Guest

Girish

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads