Develop Reference

Add and find Dropdownlist at Runtime inside GridView

In my asp.net application, I have used Gridview control, In which i have to add Dropdownlist at runtime for each cell.Which i am able to bind successfully.
Below is my code which inside row databound event,
foreach (GridViewRow row in gdvLocation.Rows) {
if (row.RowType == DataControlRowType.DataRow) {
for (int i = 1; i < row.Cells.Count; i++) {
var dlRouteType = new DropDownList();
dlRouteType.ID = "ddlRouteType";
dlRouteType.DataSource = GetRouteTypeList();
dlRouteType.DataTextField = "RouteType";
dlRouteType.DataValueField = "Id";
dlRouteType.DataBind();
row.Cells[i].Controls.Add(dlRouteType);
}
}
}
I have a button in my page, which has functionality to save data to database . While saving data i have to pass the value from Dropdownlist which i have added at runtime. On button click i am writing following code to get data from dropdownlist,
var ddlDropDown = (DropDownList)row.Cells[i].FindControl("ddlRouteType");
But i am getting null in ddlDropDown object. I have even added Update panel inside aspx page. Any suggessions most welcome.
Thanks in advance
Sangeetha

You have these errors in your code
RowDataBound already iterates through each rows and so all you need not write that foreach on top
You are iterating from index 1, index are zero-based. So start from zero.
The DropDownList ID must be unique, so better write something like,dlRouteType.ID = "ddlRouteType_" + i;
The code should be,
protected void gdvLocation_RowDataBound(object sender, GridViewRowEventArgs e)
{
//removed the foreach loop
var row = e.Row;
if (row.RowType == DataControlRowType.DataRow)
{
for (int i = 0; i < row.Cells.Count; i++) //changed index
{
var dlRouteType = new DropDownList();
dlRouteType.ID = "ddlRouteType_" + i; //gave unique id
dlRouteType.DataSource = GetRouteTypeList();
dlRouteType.DataTextField = "RouteType";
dlRouteType.DataValueField = "Id";
dlRouteType.DataBind();
row.Cells[i].Controls.Add(dlRouteType);
}
}
}

Handling LinkButton event of dynamicaly generated table?

I want to handle click event of link button which is dynamically created.
But i am not getting btn.click for it.
I have following code:
Public Sub test()
Dim row As New HtmlTableRow()
Dim cell As New HtmlTableCell()
For i = 0 To 10
row = New HtmlTableRow()
For j = 0 To 3
cell = New HtmlTableCell()
cell.InnerText = "m"
Dim btn1 As New LinkButton
btn1.ID = i
cell.Controls.Add(btn1)
row.Cells.Add(cell)
Next
tableContent.Rows.Add(row)
Next
End Sub
C# Code:
public void test()
{
HtmlTableRow row = new HtmlTableRow();
HtmlTableCell cell = new HtmlTableCell();
for (i = 0; i <= 10; i++) {
row = new HtmlTableRow();
for (j = 0; j <= 3; j++) {
cell = new HtmlTableCell();
cell.InnerText = "m";
LinkButton btn1 = new LinkButton();
btn1.ID = i;
cell.Controls.Add(btn1);
row.Cells.Add(cell);
}
tableContent.Rows.Add(row);
}
}
Not getting intellisence on btn1.click:
EDIT:
Answer in c# can also help me.

For VB.NET, type AddHandler btn1. and then you should see the Click event in the Intellisense, like this:
AddHandler btn1.Click, AddressOf Me.LinkButton_OnClick
Since you have dynamic content (table), you will need to rebuild the table on every page load, not just the first. The reason for this is that the Page_Load happens before the link button click event, so by the time the click event happens the table needs to have been recreated; otherwise your click event handler will try to interact with content that is not there.
Read ASP.NET Page Life Cycle Overview for more information about the page life cycle and all the events and their order.

In C# you can do:
1. Declare the handler
protected void btn1_Click(object sender, EventArgs e)
{
}
2. Assign the handler:
LinkButton btn1 = new LinkButton();
btn1.Click += new EventHandler(btn1_Click);

You have to add an event handler and an ID on the botton to be able to identify it:
public void test()
{
HtmlTableRow row = new HtmlTableRow();
HtmlTableCell cell = new HtmlTableCell();
for (i = 0; i <= 10; i++) {
row = new HtmlTableRow();
for (j = 0; j <= 3; j++) {
cell = new HtmlTableCell();
cell.InnerText = "m";
LinkButton btn1 = new LinkButton();
btn1.ID = i;
// Add EventHandler for click events
btn1.Click += new EventHandler(LinkButton_OnClick);
cell.Controls.Add(btn1);
row.Cells.Add(cell);
}
tableContent.Rows.Add(row);
}
}
Then add the following method to your code which catches the click events:
protected LinkButton_OnClick(object sender, EventArgs e)
{
var button = (LinkButton)sender;
// You can now access the id of the clicked link-button using button.ID
}

Gridview Dynamic formatting according to conditions

I have this code on RowDataBound that alternates the color of the cells and also add an onclick event on the cells. The data comes dynamically from a stored procedure so the gridview has only one control. The ButtonField.
I want to have white color for cells that hasn’t any data inside, how can I achieve this?
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
{
string back1 = "url('Images/GridBack1.jpg')";
string back2 = "url('Images/GridBack2.jpg')";
if (e.Row.RowType != DataControlRowType.DataRow)
return;
for (int i = 0; i < e.Row.Cells.Count; i++)
{
TableCell Cell = e.Row.Cells[i];
// if both row and column are odd, color them black
// if both row and column are even, color them white
if (((e.Row.RowIndex % 2 == 1) && (i % 2 == 1)) ||
((e.Row.RowIndex % 2 == 0) && (i % 2 == 0)))
{
if (string.IsNullOrEmpty(e.Row.Cells[i].Text)) //Edit
{
e.Row.Cells[i].BackColor = Color.Blue;
e.Row.Cells[i].ForeColor = Color.White;
}
else
{
e.Row.Cells[i].Width = Unit.Pixel(450);
e.Row.Cells[i].Height = Unit.Pixel(67);
e.Row.Cells[i].Style.Add("background-image", back1);
//e.Row.Cells[i].Style.Add("width", "150px");
//e.Row.Cells[i].Style.Add("word-wrap","break-word");
e.Row.Cells[i].Attributes.Add("align", "center");
}
}
else
{
if (string.IsNullOrEmpty(e.Row.Cells[i].Text)) //Edit
{
e.Row.Cells[i].BackColor = Color.Blue;
e.Row.Cells[i].ForeColor = Color.White;
}
else
{
e.Row.Cells[i].Width = Unit.Pixel(450);
e.Row.Cells[i].Height = Unit.Pixel(67);
e.Row.Cells[i].Style.Add("background-image", back2);
//e.Row.Cells[i].Style.Add("width", "150px");
//e.Row.Cells[i].Style.Add("word-wrap", "break-word");
e.Row.Cells[i].Attributes.Add("align", "center");
}
}
string color = "#000000";
e.Row.Cells[0].Attributes.Add("Style", "background-color: " + color + ";");
e.Row.Cells[0].Width = Unit.Pixel(150);
e.Row.Cells[0].Height = Unit.Pixel(67);
}
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];
string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");
// Add events to each editable cell
for (int columnIndex = 2; columnIndex < e.Row.Cells.Count; columnIndex++)
{
// Add the column index as the event argument parameter
string js = _jsSingle.Insert(_jsSingle.Length - 2, columnIndex.ToString());
// Add this javascript to the onclick Attribute of the cell
e.Row.Cells[columnIndex].Attributes["onclick"] = js;
// Add a cursor style to the cells
e.Row.Cells[columnIndex].Attributes["style"] += "cursor:pointer;cursor:hand;";
}
}
}
}

Try to assign white color to the every cell and then overwrite according to conditions.

You need to use string.IsNullOrEmpty() like
if(string.IsNullOrEmpty(e.Row.Cells[i].Text))
{
e.Row.Cells[i].BackColor = Color.Blue;
e.Row.Cells[i].ForeColor = Color.White;
}
MSDN
Hope it works.

get dynamic checkbox value on button click

i have a page where i create 2 checkboxes dynamically.
TableRow tr = new TableRow();
for (int i = 0; i < 2; i++)
{
TableCell Tc = new TableCell();
Tc.Attributes["style"] = "line-height: 30px; text-align: left";
Tc.Attributes["width"] = "50%";
Tc.Style.Add("padding-left", "5px");
//Checkboxes on left along with labels
CheckBox checkBoxCtrl = new CheckBox();
checkBoxCtrl.ID = "checkBoxCtrl" + i;
Tc.Controls.Add(checkBoxCtrl);
tr.Cells.Add(Tc);
}
once they are created in the page load event i have a Ok_button click event which requires to check if the checkbox is checked or not.
protected void Update2_Click(object sender, EventArgs e)
{
if(checkBoxCtrl.checked)
//here i wont be able to get the value
// i get the error the name checkBoxCtrl does not exist..
{
response.write("true");
}
}
but how do i do the check in this case.
thanks
Answer:
this is what needs to be done to get the checkbox values
protected void Update1_Click(object sender, EventArgs e)
{
for(int i = 0; i < ControlPropList.Count; i++)
{
CheckBox chkTest = (CheckBox)xxx.FindControl("checkBoxCtrl" + i);
{
if (chkTest.Checked)
{
Global.logger.Info("Checkbox True = " + chkTest.ID);
}
else
{
Global.logger.Info("Checkbox False = " + chkTest.ID);
}
}
}
}

This should work fine as long as you add the checkboxes to your page in the Page_PreInit method. If you add them after that (Page_Load for example), their values will not be maintained.
Read about the asp.net page lifecycle here:
http://msdn.microsoft.com/en-us/library/ms178472.aspx

Consider storing the dynamic checkbox in a local member:
private CheckBox _myCustomCheckbox = new CheckBox();
protected override void OnInit(EventArgs e)
{
TableRow tr = new TableRow();
for (int i = 0; i < 2; i++)
{
TableCell Tc = new TableCell();
if (i == 0)
{
Tc.Attributes["style"] = "line-height: 30px; text-align: left";
Tc.Attributes["width"] = "50%";
Tc.Style.Add("padding-left", "5px");
//Checkboxes on left along with labels
_myCustomCheckbox.ID = "checkBoxCtrl" + j;
Tc.Controls.Add(_myCustomCheckbox);
tr.Cells.Add(Tc);
}
}
// the row needs added to a page control so that the child control states can be loaded
SomeTableOnThePage.Controls.Add(tr);
base.OnInit(e);
}
protected void Update2_Click(object sender, EventArgs e)
{
if(_myCustomCheckbox.Checked)
{
response.write("true");
}
}

May not be quite what you want, but I had a similar issue, I have a dynamically generated table in ASP.NET page, with dynamically generated CheckBoxes in one column. I have created the data for the table from a collection, and then as the dynamic CB's are created I give them an ID and store them in a second collection, such as an array of CB's.
So when I need to find the Checked value I simply iterate through the collection, and I can find the ones that are Checked.
Also as they were created simultaneously with the data in the dynamic table I was able to easily tie the table data row to the Checkbox value.
This obviously assumes that the dynamic table and CB's were created using some kind of looping.
This may not be the best solution but works for my current needs.

ASP.NET GridView second header row to span main header row

I have an ASP.NET GridView which has columns that look like this:
| Foo | Bar | Total1 | Total2 | Total3 |
Is it possible to create a header on two rows that looks like this?
| | Totals |
| Foo | Bar | 1 | 2 | 3 |
The data in each row will remain unchanged as this is just to pretty up the header and decrease the horizontal space that the grid takes up.
The entire GridView is sortable in case that matters. I don't intend for the added "Totals" spanning column to have any sort functionality.
Edit:
Based on one of the articles given below, I created a class which inherits from GridView and adds the second header row in.
namespace CustomControls
{
public class TwoHeadedGridView : GridView
{
protected Table InnerTable
{
get
{
if (this.HasControls())
{
return (Table)this.Controls[0];
}
return null;
}
}
protected override void OnDataBound(EventArgs e)
{
base.OnDataBound(e);
this.CreateSecondHeader();
}
private void CreateSecondHeader()
{
GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
TableCell left = new TableHeaderCell();
left.ColumnSpan = 3;
row.Cells.Add(left);
TableCell totals = new TableHeaderCell();
totals.ColumnSpan = this.Columns.Count - 3;
totals.Text = "Totals";
row.Cells.Add(totals);
this.InnerTable.Rows.AddAt(0, row);
}
}
}
In case you are new to ASP.NET like I am, I should also point out that you need to:
1) Register your class by adding a line like this to your web form:
<%# Register TagPrefix="foo" NameSpace="CustomControls" Assembly="__code"%>
2) Change asp:GridView in your previous markup to foo:TwoHeadedGridView. Don't forget the closing tag.
Another edit:
You can also do this without creating a custom class.
Simply add an event handler for the DataBound event of your grid like this:
protected void gvOrganisms_DataBound(object sender, EventArgs e)
{
GridView grid = sender as GridView;
if (grid != null)
{
GridViewRow row = new GridViewRow(0, -1,
DataControlRowType.Header, DataControlRowState.Normal);
TableCell left = new TableHeaderCell();
left.ColumnSpan = 3;
row.Cells.Add(left);
TableCell totals = new TableHeaderCell();
totals.ColumnSpan = grid.Columns.Count - 3;
totals.Text = "Totals";
row.Cells.Add(totals);
Table t = grid.Controls[0] as Table;
if (t != null)
{
t.Rows.AddAt(0, row);
}
}
}
The advantage of the custom control is that you can see the extra header row on the design view of your web form. The event handler method is a bit simpler, though.

I took the accepted answer approach, but added the header to the existing GridView instead of a custom inherited GridView.
After I bind my GridView, I do the following:
/*Create header row above generated header row*/
//create row
GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
//spanned cell that will span the columns I don't want to give the additional header
TableCell left = new TableHeaderCell();
left.ColumnSpan = 6;
row.Cells.Add(left);
//spanned cell that will span the columns i want to give the additional header
TableCell totals = new TableHeaderCell();
totals.ColumnSpan = myGridView.Columns.Count - 3;
totals.Text = "Additional Header";
row.Cells.Add(totals);
//Add the new row to the gridview as the master header row
//A table is the only Control (index[0]) in a GridView
((Table)myGridView.Controls[0]).Rows.AddAt(0, row);
/*fin*/

This article should point you in the right direction. You can programmatically create the row and add it to the collection at position 0.

Note for those who choose to use RowDataBound Method in VB.NET
If you end up with too many extra header rows popping up, add an If Statement that only proceeds if the gridview's header row is nothing (meaning it is the one currently being bound)
If grid.HeaderRow Is Nothing Then

You will have to create a class which extends gridview then override the CreateRow method.
try this as a starting point

Add t.EnableViewState = false; after you add the row:
Dim t As Table = TryCast(grid.Controls(0), Table)
If t IsNot Nothing Then
t.Rows.AddAt(0, row)
End If
t.EnableViewState = false;

Please refer to https://stackoverflow.com/a/9333714/1060656
i created this solution example
To run in your local system will will need to create 2 files ( one for the control and one aspx) you can either do it one project or 2 projects.
GridViewPlus ==> Control class
GridViewPlusCustomHeaderRows ==> a collection to hold custom header class
CustomHeaderEventArgs ==> Event Args when custom header row is created
aspx file ==> Test program
public class GridViewPlus : GridView
{
public event EventHandler<CustomHeaderEventArgs> CustomHeaderTableCellCreated;
private GridViewPlusCustomHeaderRows _rows;
public GridViewPlus() : base ()
{
_rows = new GridViewPlusCustomHeaderRows();
}
/// <summary>
/// Allow Custom Headers
/// </summary>
public bool ShowCustomHeader { get; set; }
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
[MergableProperty(false)]
public GridViewPlusCustomHeaderRows CustomHeaderRows
{
get {return _rows; }
}
protected virtual void OnCustomHeaderTableCellCreated(CustomHeaderEventArgs e)
{
EventHandler<CustomHeaderEventArgs> handler = CustomHeaderTableCellCreated;
// Event will be null if there are no subscribers
if (handler != null)
{
// Use the () operator to raise the event.
handler(this, e);
}
}
protected override void OnRowCreated(GridViewRowEventArgs e)
{
if (ShowCustomHeader && e.Row.RowType == DataControlRowType.Header) return;
base.OnRowCreated(e);
}
protected override void PrepareControlHierarchy()
{
//Do not show the Gridview header if show custom header is ON
if (ShowCustomHeader) this.ShowHeader = false;
base.PrepareControlHierarchy();
//Safety Check
if (this.Controls.Count == 0)
return;
bool controlStyleCreated = this.ControlStyleCreated;
Table table = (Table)this.Controls[0];
int j = 0;
if (CustomHeaderRows ==null )return ;
foreach (TableRow tr in CustomHeaderRows)
{
OnCustomHeaderTableCellCreated(new CustomHeaderEventArgs(tr,j));
table.Rows.AddAt(j, tr);
tr.ApplyStyle(this.HeaderStyle);
j++;
}
}
}
public class GridViewPlusCustomHeaderRows : System.Collections.CollectionBase
{
public GridViewPlusCustomHeaderRows()
{
}
public void Add(TableRow aGridViewCustomRow)
{
List.Add(aGridViewCustomRow);
}
public void Remove(int index)
{
// Check to see if there is a widget at the supplied index.
if (index > Count - 1 || index < 0)
// If no widget exists, a messagebox is shown and the operation
// is cancelled.
{
throw (new Exception("Index not valid"));
}
else
{
List.RemoveAt(index);
}
}
public TableRow Item(int Index)
{
// The appropriate item is retrieved from the List object and
// explicitly cast to the Widget type, then returned to the
// caller.
return (TableRow)List[Index];
}
}
public class CustomHeaderEventArgs : EventArgs
{
public CustomHeaderEventArgs(TableRow tr ,int RowNumber )
{
tRow = tr;
_rownumber = RowNumber;
}
private TableRow tRow;
private int _rownumber = 0;
public int RowNumber { get { return _rownumber; } }
public TableRow HeaderRow
{
get { return tRow; }
set { tRow = value; }
}
}
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Example1();
GridViewExtension1.CustomHeaderTableCellCreated += new EventHandler<CustomHeaderEventArgs>(GridViewExtension1_CustomHeaderTableCellCreated);
}
void GridViewExtension1_CustomHeaderTableCellCreated(object sender, CustomHeaderEventArgs e)
{
TableRow tc = (TableRow)e.HeaderRow;
tc.BackColor = System.Drawing.Color.AliceBlue;
}
private void Example1()
{
System.Data.DataTable dtSample = new DataTable();
DataColumn dc1 = new DataColumn("Column1",typeof(string));
DataColumn dc2 = new DataColumn("Column2",typeof(string));
DataColumn dc3 = new DataColumn("Column3",typeof(string));
DataColumn dc4 = new DataColumn("Column4",typeof(string));
// DataColumn dc5 = new DataColumn("Column5",typeof(string));
dtSample.Columns.Add(dc1);
dtSample.Columns.Add(dc2);
dtSample.Columns.Add(dc3);
dtSample.Columns.Add(dc4);
// dtSample.Columns.Add(dc5);
dtSample.AcceptChanges();
for (int i = 0; i < 25; i++)
{
DataRow dr = dtSample.NewRow();
for (int j = 0; j < dtSample.Columns.Count; j++)
{
dr[j] = j;
}
dtSample.Rows.Add(dr);
}
dtSample.AcceptChanges();
//GridViewExtension1.ShowHeader = false;
GridViewExtension1.ShowCustomHeader = true;
/*
*=======================================================================
* |Row 1 Cell 1 | Row 1 Col 2 (Span=2) | Row 1 Col 3 |
* | | | |
*=======================================================================
* |Row 2 Cell 1 | | | |
* | | Row 2 Col 2 | Row 2 Col 3 |Row 2 Col 4 |
*=======================================================================
*
*
*
*
* */
// SO we have to make 2 header row as shown above
TableRow TR1 = new TableRow();
TableCell tcR1C1 = new TableCell();
tcR1C1.Text = "Row 1 Cell 1";
tcR1C1.ColumnSpan = 1;
TR1.Cells.Add(tcR1C1);
TableCell tcR1C2 = new TableCell();
tcR1C2.Text = "Row 1 Cell 2";
tcR1C2.ColumnSpan = 2;
TR1.Cells.Add(tcR1C2);
TableCell tcR1C3 = new TableCell();
tcR1C3.Text = "Row 1 Cell 3";
tcR1C3.ColumnSpan = 1;
TR1.Cells.Add(tcR1C3);
GridViewExtension1.CustomHeaderRows.Add(TR1);
TableRow TR2 = new TableRow();
TableCell tcR2C1 = new TableCell();
tcR2C1.Text = "Row 2 Cell 1";
tcR2C1.ColumnSpan = 1;
TR2.Cells.Add(tcR2C1);
TableCell tcR2C2 = new TableCell();
tcR2C2.Text = "Row 2 Cell 2";
tcR2C2.ColumnSpan = 1;
TR2.Cells.Add(tcR2C2);
TableCell tcR2C3 = new TableCell();
tcR2C3.Text = "Row 2 Cell 3";
tcR2C3.ColumnSpan = 1;
TR2.Cells.Add(tcR2C3);
TableCell tcR2C4 = new TableCell();
tcR2C4.Text = "Row 2 Cell 4";
tcR2C4.ColumnSpan = 1;
TR2.Cells.Add(tcR2C4);
GridViewExtension1.CustomHeaderRows.Add(TR2);
GridViewExtension1.DataSource = dtSample;
GridViewExtension1.DataBind();
}
}

I wanted to do a similar task but required clickable buttons inside the header - none of the above worked in that case as the event handlers were not wired up (due to the sequencing of the events). In the end i used the headertemplate tag in the appropriate templatefield of the grid view. The html looks a bit more bloated but the events remain intact with no additional code behind effort. For example
<asp:TemplateField >
<HeaderTemplate>
<div>
<div style="text-align: center;padding-bottom: 5px;">
text
</div>
<div>
<asp:Button ID="Button1" runat="server" Text="Apply to all" ToolTip="Apply to all - Special Bolt On" CssClass="sub_button input_btn_5" OnClick="ApplyButton1_Click" />
</div>
</div>
</HeaderTemplate>
<ItemTemplate>....