Add rows to a table dynamically - asp.net

At the moment I am trying to create a table whose content is supposed to be created by a subclass (result of querying a RESTful web service). I have been working for quite some time on that now and I just cannot seem to get it to work. I have tried so many different solutions.
creating the table in the subclass and add it to Page.Controls. That gets me "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)." which does not make sense at all.
I have tried to create an empty table on the page and passed its handle to the subclass which was responsible for adding rows. Noting happened.
I have tried to return a TableRowCollection and assigned it to the previously created (empty) table. Nothing happened.
Now I just want to add one row and one cell to the table (baby steps towards what I need). Not even that works. Please find the code for that attached:
TableRow row = new TableRow();
table.Rows.Add(row);
TableCell cell = new TableCell();
row.Cells.Add(cell);
cell.Controls.Add(new TextBox());
The table is simple and empty:
<asp:Table ID="table" runat="server" />
The source code that is displayed by my browser looks like that:
<table id="table">
</table>
I have been looking at countless examples on the web and all look like this. I guess it is only a tiny problem somewhere but I have not been able to figure it out. Now I am willing to offer life-long gratitude to everybody who can provide the hint for solving this mess.

It is working, I have tested it:
In my page load, I have:
protected void Page_Load(object sender, EventArgs e)
{
TableRow row = new TableRow();
TableCell cell = new TableCell();
cell.Controls.Add(new TextBox());
row.Cells.Add(cell);
table.Rows.Add(row);
}
On my aspx page, I have:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Table ID="table" runat="server" />
</asp:Content>
The html rendered by this code:
<table id="MainContent_table">
<tbody><tr>
<td><input name="ctl00$MainContent$ctl00" type="text"></td>
</tr>
</tbody></table>

I would use either an asp:GridView or an asp:Repeater
eg with Repeater
<table>
<asp:Repeater id="repeater1" runat="server">
<ItemTemplate>
<tr>
<td><asp:Literal id="literal1" runat="server" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
then in your code behind
repeater1.DataSource = myDatasource;
repeater1.DataBind();
or you could use a GridView
using table.Rows.Add() will tend to cause you problems, particularly with disappearing content on postback, or problems with event handlers not firing should you need to add any LinkButtons or anything like that to your table cells

The question is where are you adding these rows in the table, I mean in which event of page?
As I feel that post back is clearing all the added rows.
Kindly tell the execution sequence and also try to put your code in page_init event for adding rows.

Might solve your problem.
Make table runat="server" in your aspx code
<table id="tbl" runat="server">
</table>
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
TableRow tr = new TableRow();
TableCell tc = new TableCell();
TextBox txtBox = new TextBox();
// Add the control to the TableCell
tc.Controls.Add(txtBox);
// Add the TableCell to the TableRow
tr.Cells.Add(tc);
// Add the TableRow to the Table
tbl.Rows.Add(tr);
}
}

Related

Converting ASP classic table to ASP.NET Repeater

I am trying to modernize this site. I have a report table being generated in the old style like:
Dim sTable = "<table class=""stat"">"
sTable = sTable & "<thead><tr><th colspan=20><Status Report: " & Session("ProcessYear") & "</th></tr>"
I am converting this into a Repeater, but I am at a loss as to how to include session data in the <HeaderTemplate>. I have:
<asp:Repeater id="Dashboard" runat="server">
<HeaderTemplate>
<table class="stat">
<thead>
<tr><th colspan="20">Appeal Status Report: ???? </th></tr>
...
Some candidates are asp:PlaceHolder, and something like <%# ((RepeaterItem)Container.Parent.Parent).DataItem %> (see Accessing parent data in nested repeater, in the HeaderTemplate), but I'm at a loss as to what that is referencing.
Not in a position to refactor out the Session dependencies, unfortunately. Any thoughts? I'm fairly new to ASP.NET. My CodeFile for this page is in VB.NET.
You need to look into On Item Data Bound event, so you can do some code-behind work during binding.
You'll want to check the item object, determine if its a header row, then access your session object.
Rough adaptation might look like:
ASPX
<asp:Repeater id="Dashboard" runat="server" OnItemDataBound="ItemDataBound">
<HeaderTemplate>
<table class="stat">
<thead>
<tr>
<th colspan="20">
Appeal Status Report: <asp:Label ID="YourLabel"/>
</th>
</tr>
...
...
...
Code Behind
void ItemDataBound(Object Sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
((Label)e.Item.FindControl("YourLabel")).Text = Session["YourSession"];
}
}
You can also do things with the footer, item and alternating items here as well.

Designing notification sections in asp.net

I am trying to design a notification section for my ASP.NET website.
My requirement is similar to this image layout.
I was able to implement this with the asp repeater control and binding it with database.
I have table in my DB that has image, name and comments as its columns.
So according to the no. of rows in the DB table, the repeater control will get me the contents in the defined layout.
But i also wanted to implement the close button ("X" - top right corner). this close button will just remove the particular comment (but it will not delete data in DB).
Could you please help me in achieving this ??
Also thanks to suggest any other possible option to acheive this.
PFB the code i have done so far
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<table>
<tr>
<td style="height:64px;width:64px">
<asp:Image ID="imgEmployee" CssClass="imgClass" ImageUrl='<%# Eval("ImagePath")%>'runat="server" />
</td>
<td>
<asp:Label runat="server" Text='<%# Eval("Name")%>'></asp:Label>
<p> <%# Eval("Comments")%></p>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
and code behind
protected void Page_Load(object sender, EventArgs e)
{
DataSet ds = GetData();
Repeater1.DataSource = ds;
Repeater1.DataBind();
}
private DataSet GetData()
{
string CS = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlDataAdapter da = new SqlDataAdapter("Select * from tblNotification", con);
DataSet ds = new DataSet();
da.Fill(ds);
return ds;
}
}
And my table (tblNotification) has 3 columns - "ImagePath", "Name" and "Comments"

How to add textbox to each and every cell in a table row and let user add multiple rows?

Following is my markup code:
<asp:Table ID="tbldata" runat="server" BorderWidth="2">
<asp:TableHeaderRow ID="tableheaderrow1" runat="server">
<asp:TableHeaderCell Width="80" runat="server">SNO</asp:TableHeaderCell>
<asp:TableHeaderCell Width="200" runat="server">Particulars</asp:TableHeaderCell>
<asp:TableHeaderCell Width="80" runat="server">Amount</asp:TableHeaderCell>
<asp:TableHeaderCell Width="120" runat="server">Tax</asp:TableHeaderCell>
<asp:TableHeaderCell Width="300" runat="server">OtherExpenditures</asp:TableHeaderCell>
<asp:TableHeaderCell Width="80" runat="server">NetAmount</asp:TableHeaderCell>
</asp:TableHeaderRow>
</asp:Table>
and following is my CS code
protected void txtCalendar_TextChanged(object sender, EventArgs e)
{
TextBox t = new TextBox();
TableRow rowNew = new TableRow(); // Creating a new table row
for (int i = 0; i < 6; i++)
{
TableCell tcell = new TableCell();
tcell.Controls.Add(t); // add the textbox control at cell zero
// or you can add it as
rowNew.Controls.Add(tcell);
}
tbldata.Controls.Add(rowNew);
}
I want to add textbox to every cell in a table row so that the user may enter data there, but with the above code, textbox is only added to the last cell. What should I do to add textbox to each and every cell? There are 5 header columns as indicated by markup above. I want to add textbox to each and every column.How can I do it? Also I want to include a button named Add Row which when clicked lets user add rows. How can I do this as well?
That is not a very easy requirement to satisfy.
Luckily Matt Dotson made a BulkEditGridView many years back.
You can download the latest code of this custom control from codeplex.

UpdatePanel, Repeater, DataBinding Problem

In a user control, I've got a Repeater inside of an UpdatePanel (which id displayed inside of a ModalPopupExtender. The Repeater is databound using an array list of MyDTO objects. There are two buttons for each Item in the list. Upon binding the ImageURL and CommandArgument are set.
This code works fine the first time around but the CommandArgument is wrong thereafter. It seems like the display is updated correctly but the DTO isn't and the CommandArgument sent is the one that has just been removed.
Can anybody spot any problems with the code?
Edit : I've just added a CollapsiblePanelExtender to the code. When I now delete an item and expand the panel, the item that was previously deleted (and gone from the display) has come back. It seems that the Repeater hasn't been rebuilt correctly under the bonnet.
ASCX
<asp:UpdatePanel ID="ViewDataDetail" runat="server" ChildrenAsTriggers="true">
<Triggers>
<asp:PostBackTrigger ControlID="ViewDataCloseButton" />
<asp:AsyncPostBackTrigger ControlID="DataRepeater" />
</Triggers>
<ContentTemplate>
<table width="100%" id="DataResults">
<asp:Repeater ID="DataRepeater" runat="server" OnItemCommand="DataRepeater_ItemCommand" OnItemDataBound="DataRepeater_ItemDataBound">
<HeaderTemplate>
<tr>
<th><b>Name</b></th>
<th><b> </b></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<b><%#((MyDTO)Container.DataItem).Name%></b>
</td>
<td>
<asp:ImageButton CausesValidation="false" ID="DeleteData" CommandName="Delete" runat="server" />
<asp:ImageButton CausesValidation="false" ID="RunData" CommandName="Run" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td>Description : </td>
<td><%#((MyDTO)Container.DataItem).Description%></td>
</tr>
<tr>
<td>Search Text : </td>
<td><%#((MyDTO)Container.DataItem).Text%></td>
</tr>
</table>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Code-Behind
public DeleteData DeleteDataDelegate;
public RetrieveData PopulateDataDelegate;
public delegate ArrayList RetrieveData();
public delegate void DeleteData(String sData);
protected void Page_Load(object sender, EventArgs e)
{
//load the initial data..
if (!Page.IsPostBack)
{
if (PopulateDataDelegate != null)
{
this.DataRepeater.DataSource = this.PopulateDataDelegate();
this.DataRepeater.DataBind();
}
}
}
protected void DataRepeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Delete")
{
if (DeleteDataDelegate != null)
{
DeleteDataDelegate((String)e.CommandArgument);
BindDataToRepeater();
}
}
else if (e.CommandName == "Run")
{
String sRunning = (String)e.CommandArgument;
this.ViewDataModalPopupExtender.Hide();
}
}
protected void DataRepeater_ItemDataBound(object source, RepeaterItemEventArgs e)
{
RepeaterItem item = e.Item;
if (item != null && item.DataItem != null)
{
MyDTO oQuery = (MyDTO)item.DataItem;
ImageButton oDeleteControl = (ImageButton) item.FindControl("DeleteData");
ImageButton oRunControl = (ImageButton)item.FindControl("RunData");
if (oDeleteControl != null && oRunControl !=null)
{
oRunControl.ImageUrl = "button_expand.gif";
oRunControl.CommandArgument = "MyID";
if (oQuery !=null)
{
//do something
}
oDeleteControl.ImageUrl = "btn_remove.gif";
oDeleteControl.CommandArgument = "MyID";
}
}
}
public void BindDataToRepeater()
{
this.DataRepeater.DataSource = this.PopulateDataDelegate();
this.DataRepeater.DataBind();
}
public void ShowModal(object sender, EventArgs e)
{
BindDataToRepeater();
this.ViewDataModalPopupExtender.Show();
}
Thanks for reminding me why I stopped using ASP.NET controls. This is the exact type of nightmare that has made too many projects go way over budget and schedule.
My advise to you is to think of the simplest way to implement this. You can try to bend over backwards in order to get this to work the ASP.NET way or take the shortest route.
All you're doing is generating HTML, it should never be that difficult.
The most likely cause of your problem is that the ViewState is stored in the page which doesn't get updated on a partial postback. So with every change in the update panel you'll postback the initial viewstate of the page.
Try replacing the repeater with a simple for-loop (and ignore the people who start complaining you shouldn't mix markup and code). Replace your databinding statements with <%= %>.
That eliminates the view state all together and should remove any removed row from re-appearing.
After many days of messing around with this I've not found a proper fix for the problem but do have a workable work-around.
The CollapsiblePanelExtender is set to NOT postback automatically which fixes the issue of the deleted data re-appearing when the extender is opened. The other issue, I believe, is related.
It seems that the ViewState for the Repeater is out of sync with the data. e.CommandArgument is not always correct and seems to reference the previous data. I made an attempt to fix it by storing the ArrayList of MyDTO objects in the ViewState when opening the Modal dialog and using the ID retrieved from e.Item.ItemIndex to find the correct element to delete. This didn't work correctly, the ArrayList pulled out of the ViewState was out of sync.
Storing the ArrayList in the session makes it all work which leads me to believe that I'm doing something fundamentally wrong or there is a subtle bug in the version of the toolkit that i'm using (we're still on VS2005 so are stuck with an older version of the toolkit)
Apologies if this makes no sense, contact me if you want clarification on anything.
try using
((IDataItemContainer)Container).DataItem
instead of "Container.DataItem"
It worked for me.

Cannot get inner content of '' because the contents are not literal

I am trying to iterate over the contents of a Repeater containing an html table, and use the contents of each cell. This works fine for standard HTML components, but blows up when I try to use a control. The code below will print the value of the first cell, "Item #1", but will throw an HttpException when trying to access .InnerText of the second cell. The error is as follows:
Cannot get inner content of because the contents are not literal.
I have tried to use RenderControl via this solution found elsewhere, which failed for two reasons; 1) it rendered the entire HTML of the first cell and 2) it still blew up when trying to access the second cell with the following message:
'LinkButton1' of type 'LinkButton' must be placed inside
a form tag with runat=server
Is there an easy way to get the LinkButton text I'm after? Repeater code and C# can be found below.
The repeater code:
<asp:Repeater ID="Rep1" runat="server">
<HeaderTemplate>
<table id="Table1" class="data">
</HeaderTemplate>
<ItemTemplate>
<tr id="Row" runat="server">
<td>Item #1</td>
<td><asp:LinkButton ID="LinkButton1" OnClick="DoSomething"
Text="Item #2" runat="server" /></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
The C#:
foreach (RepeaterItem item in Rep1.Items)
{
HtmlTableRow row = item.Controls[0].FindControl("Row") as HtmlTableRow;
foreach (HtmlTableCell cell in row.Cells)
{
if (cell.InnerText != string.Empty)
{
Console.WriteLine(cell.InnerText);
}
}
}
For anyone else who arrives here:
You cannot get InnerHtml or InnerText on a Control unless its contents are literal, i.e. there are not any server controls or controls with runat="server" inside it that required rendering
Iterate/recurse through any child controls in the Controls collection. When you get to a leaf node (no children), then access that control's InnerText property.
RenderControl C#
StringWriter iSW = new StringWriter();
HtmlTextWriter iHTW = new HtmlTextWriter(iSW);
iDiv.RenderControl(iHTW);
string iS = iSW.GetStringBuilder().ToString();
Include
public override void VerifyRenderingInServerForm(Control control)
{
return;
}
RenderControl VB
Dim iSW As New StringWriter
Dim iHTW As New HtmlTextWriter(iSW)
iDiv.RenderControl(iHTW)
Dim iS As String = iSW.GetStringBuilder().ToString()
Include
Public Overrides Sub VerifyRenderingInServerForm(ByVal control As Control)
Return
End Sub
Also, make sure that you do not have anything such trying to access another view control while another view control is activated in a multi view control.
string value = ((Literal)(cell.Controls[0])).Text

Resources