I want to show my data in the format like below:
<table>
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
.
.
.
</table>
I am bit confused about how to represent the data.
I am thinking to use the repeater control for this structure. But will it need a nested repeater control or it can be done using the single repeater control?
Can anybody please suggest me the proper way?
Thanks in advance.
Update :: In my case and are not in static order they are fully dynamic.In some cases may have the single but in some case they me be 10-20 in count.I need to show the score for test in those structure.for example:
<table>
<tr>
<td>10</td>
<td>5</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>34</td>
</tr>
.
.
.
<table>
like wise.In simple word when the score record for one user is completed I need to add new record in the new fresh .
Why are you using repeater? It's rather obsolete component. Use ListView instead. It's much more flexible in configuration and manipulation.
Please use solution suggested here by Merrimack
<asp:ListView ID="myListView" runat="server"
DataSourceID="YOURDATASOURCE" GroupItemCount="3">
<LayoutTemplate>
<table>
<tr>
<td>
<table border="0" cellpadding="5">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<%# Eval("FullName") %>
</td>
</ItemTemplate>
</asp:ListView>
One solution from Old Classic way is nested loop
<table>
<% for(int loop1 = 0; loop1 <= condition1 ; loop1++){
System.Console.WriteLine("<tr>");
for(int loop2 = 0; loop2 <= condition2 ; loop2++){
System.Console.WriteLine("<td>");
System.Console.WriteLine("Your Data");
System.Console.WriteLine("</td>");
}
System.Console.WriteLine("</tr>");
} %>
</table>
You could make a Repeater like this
<asp:Repeater ID="rptMyRepeater" runat="server" >
<HeaderTemplate>
<table>
<th>
<td>
Header 1
</td>
<td>
Header 2
</td>
</th>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:HiddenField runat="server" ID="hfHolderId" Value='<%# DataBinder.Eval(Container.DataItem, "HolderId") %>' />
<asp:TextBox runat="server" ID="tbText1" Text='<%# DataBinder.Eval(Container.DataItem, "Text1") %>' />
</td>
<td>
<asp:TextBox runat="server" ID="tbText2" Text='<%# DataBinder.Eval(Container.DataItem, "Text2") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Then have a class to hold your data
public class MyHolder()
{
public string HolderId {get;set;}
public string Text1 {get;set;}
public string Text2 {get;set;}
}
Then make a list of these and bind them to your Repeater
List<MyHolder> myHolderList = new List<MyHolder>();
myHolderList.Add(new MyHolder {1, "hi", "hello"});
//Add a few of these
rptrptMyRepeater.DataSource = myHolderList;
rptMyRepeater.DataBind();
All this was just outta my head so there my be syntax errors in there
I finally done this with the dynamic table in asp.net.Like RDSAGAR did,but by code behind.Thanks for all your support.
Related
I'm new to web development using .net and am having issues in binding data from business logic to a table. I'm basically trying to populate a table dynamically.
Table in a list view i want to populate
<asp:ListView ID="processList" runat="server"
DataKeyNames="procName" GroupItemCount="1"
ItemType="SerMon.RemoteProcess" SelectMethod="fetchFromQueue">
<EmptyDataTemplate>
<table >
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td/>
</EmptyItemTemplate>
<GroupTemplate>
<tr id="itemPlaceholderContainer" runat="server">
<td id="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td runat="server">
<table id="myTable" class="table table-striped table-hover ">
<thead>
<tr>
<th>#</th>
<th>Process</th>
<th>Status</th>
<th>Machine</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<asp:Label runat="server" ID="lblId"><%#: Item.ProcName%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label1"><%#: Item.Procstatus%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label2"><%#: Item.mcName%></asp:Label></td>
</tr>
<tr>
</tbody>
</table>
</p>
</td>
</ItemTemplate>
</asp:ListView>
Method which is called to populate table
public List<RemoteProcess> fetchFromQueue()
{
List<RemoteProcess> pl = new List<RemoteProcess>();
foreach (CloudQueueMessage message in queue.GetMessages(5, TimeSpan.FromMinutes(1)))
{
Debug.Write(message.AsString);
RemoteProcess m = JsonConvert.DeserializeObject<RemoteProcess>(message.AsString);
pl.Add(m);
//queue.DeleteMessage(message);
}
return pl;
}
The table is generated but theres no data. Also for some odd reason, five tables are generated( This is always equal to the number specified in the getMessage function)
I am not sure if GroupTemplate is required for you in the ListView. The reason you were getting multiple table was that you have defined table header and row both in the item template. The ItemTemplate should have only structure of the item display. The LayoutTemplate should have the structure of the over all layout of how data should look like.
I have changed the ListView as following it make it look like a proper table.
<asp:ListView ID="processList" runat="server"
DataKeyNames="procName"
ItemType="WebApplication1.Models.RemoteProcess" SelectMethod="fetchFromQueue">
<EmptyDataTemplate>
<table>
<tr>
<td>No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td />
</EmptyItemTemplate>
<LayoutTemplate>
<table runat="server" id="table1">
<thead>
<tr runat="server">
<th>#</th>
<th>Process</th>
<th>Status</th>
<th>Machine</th>
</tr>
<tr id="itemPlaceholder" runat="server"></tr>
</thead>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td>1</td>
<td>
<asp:Label runat="server" ID="lblId"><%#: Item.procName%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label1"><%#: Item.Procstatus%></asp:Label></td>
<td>
<asp:Label runat="server" ID="Label2"><%#: Item.mcName%></asp:Label></td>
</tr>
</ItemTemplate>
</asp:ListView>
Please note here that I have removed the GroupTemplate and setting related to it as I wasn't sure how to group the data.
This should help resolving your issue.
I want to bind a listview control with a datatable , whose column names are not fixed. And i want to display these column names in the page ?
How to achieve this ?
I dont know what exactly you want to do but this is the example of listview that you can set header name whatever you want.
<asp:ListView ID="ListView1" GroupPlaceholderID="group" GroupItemCount="1" ItemPlaceholderID="item" runat="server">
<LayoutTemplate>
<table>
<asp:PlaceHolder runat="server" ID="group"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="item"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<table cellpadding="2" cellspacing="0" border="1" style="width: 200px; height: 100px">
<tr>
<td>
<span>
<%# Eval("Id") %>
</span>
</td>
</tr>
<tr>
<td>
Name: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Number: <span><%# Eval("Field_name_of_your_DB") %></span><br />
Date: <span><%# Eval("Field_name_of_your_DB", "{0:MM dd, yyyy}") %></span><br />
Comment: <span><%# Eval("Field_name_of_your_DB") %></span><br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
</asp:ListView>
And, be sure that autogeneratecolumn = false to avoid displaying data twice.
In my ascx file I use a Repeater to create rows for the table. So basically I just repeat one row and populate the data into that:
<asp:Repeater ID="companyRepeater" runat="server">
<ItemTemplate>
<tr class = "DGItemStyle" id="myresultsRow1" runat="server">
<td style="padding:0.5em;" align="center"><%#Eval("compnSN1") %></td>
<td style="padding:0.5em;"><%#Eval("compnAddress1") %></td>
</tr>
</Itemtemplate>
</asp:Repeater>
But I need to change the style of the row every time, from:
CssClass="DGItemStyle"
to
CssClass="DGAlternatingItemStyle"
then again and again.
So what I tried is replace : class = "DGItemStyle" by : <%#Eval("compnStyle1")%> , and I also populate compnStyle1 by the string
CssClass="DGItemStyle" and CssClass="DGAlternatingItemStyle"
alternatively in my codebehind.
But looks like the tag doesn't accept this solution. It shows this error:
Parser Error Message: The server tag is not well formed.
So how could I archive this ?
Use Repeater.AlternatingItemTemplate
<asp:Repeater ID="companyRepeater" runat="server">
<AlternatingItemTemplate>
<tr class = "DGAlternatingItemStyle" id="myresultsRow1" runat="server">
<td style="padding:0.5em;" align="center"><%#Eval("compnSN1") %></td>
<td style="padding:0.5em;"><%#Eval("compnAddress1") %></td>
</tr>
</AlternatingItemTemplate>
<ItemTemplate>
<tr class = "DGItemStyle" id="myresultsRow1" runat="server">
<td style="padding:0.5em;" align="center"><%#Eval("compnSN1") %></td>
<td style="padding:0.5em;"><%#Eval("compnAddress1") %></td>
</tr>
</Itemtemplate>
</asp:Repeater>
Check this link
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater.alternatingitemtemplate%28v=vs.110%29.aspx
From MSDN
<AlternatingItemTemplate>
<tr>
<td style="background-color:Aqua">
<b><%# Container.DataItem %></b>
</td>
</tr>
</AlternatingItemTemplate>
<ItemTemplate>
<tr>
<td style="background-color:Silver">
<%# Container.DataItem %>
</td>
</tr>
</ItemTemplate>
I want to display the values in a gridview in this way(image),how can i perform it,i have no idea,if i have to edit the column or add template fields.,please help.
If we add,a footer,it can be displayed only on the last row,but,how to make it be displayed in the center.
You would be better off using something like a Repeater or DataList control, which give you more control over the output.
<asp:GridView runat="server" ID="gdv" AutoGenerateColumns="false" Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table width="100%">
<tr>
<td>
Exam Date
</td>
<td>
<%#Eval("Exam_Date") %>
</td>
<td>
Section
</td>
<td>
<%#Eval("Section") %>
</td>
</tr>
<tr>
<td>
Total Students
</td>
<td>
<%#Eval("Total_Students") %>
</td>
<td>
No. of students passed
</td>
<td>
<%#Eval("StudentPassed") %>
</td>
</tr>
<tr>
<td colspan="2">
over all pass percentange
</td>
<td colspan="2">
<%#Eval("Overall_Percent") %>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
On cs page:
gdv.DataSource = YourDataSource;
gdv.DataBind();
I guess you need to do a column spanning to have this look. (I am assuming you have all the data needed to bind to the control.)
You can use Gridview Footer for this display .
<asp:TemplateField>
<FooterTemplate>
<table>
<tr>
<td>
<asp:Label ID="lblname" runat="server" Text="NAME"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtbx" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</FooterTemplate>
</asp:TemplateField>
On RowDataBound Event you can set your total to label .
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Footer)
{
Label lbl = (Label)e.Row.FindControl("lblTotal");
lbl.Text = "Total";
}
}
I have built repeaters before but dont have much experience manipulating table layout with them. Presently I have a repeater that is populating the data correctly but doing so in one column. I would like it to be 4 columns. I was told using a Separator Template is the best way to do this.
Here is my repeater:
<asp:Repeater ID="myTestRepeater" runat="server"
onitemdatabound="myTest_ItemDataBound">
<Itemtemplate>
<table cellpadding=0 width="100%" valign="top">
<tr>
<td valign="top" width="100%">
<asp:HyperLink ID="lnkTest1" runat="server">
<asp:Image ID="imgTest" runat="server" /></asp:HyperLink>
<asp:HyperLink ID="lnkTest2" runat="server" />
<asp:Label ID="lblCounter" runat="server />
<asp:HyperLink ID="lnkTest3" runat="server"/>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
The repeater is the most powerful control in the ASP.NET WebForms arsenal; you just need to think sometimes on what is the best way to use it.
For example, you can have a repeater to make multiple rows, and a repeater to make multiple columns. In your situation, if you want your repeater to make multiple columns, you can easily adapt your code:
<asp:Repeater ID="myRepeater" runat="server">
<HeaderTemplate>
<table>
<tr>
</HeaderTemplate>
<ItemTemplate>
<td>
<span>This will be repeated for each element</span>
</td>
</ItemTemplate>
<FooterTemplate>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
It's all in basically how you want to implement your loop.
Seperator Template is used to define the separator between rows. Why can't you use four <td/>s for your four columns?
<Itemtemplate>
<tr>
<td>
...
</td>
<td>
...
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</ItemTemplate>
try this
<asp:Repeater runat="server" ID="myRepeater">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
Col 1
</td>
<td>
Col 2
</td>
<td>
Col 3
</td>
<td>
Col 4
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table></FooterTemplate>
<SeparatorTemplate>
<tr>
<td colspan="4" style="background-color: #E1E1E1">
</td>
</tr>
</SeparatorTemplate>
</asp:Repeater>
I ended up using a literal as a table break. Then populating that literal based off the mod of my counter
<asp:Repeater ID="myTestRepeater" runat="server"
onitemdatabound="myTest_ItemDataBound">
<Itemtemplate>
<table cellpadding=0 width="100%">
<tr>
<td valign="top" width="25%">
<asp:HyperLink ID="lnkTest1" runat="server">
<asp:Image ID="imgTest" runat="server" /></asp:HyperLink>
<asp:HyperLink ID="lnkTest2" runat="server" />
<asp:Label ID="lblCounter" runat="server />
<asp:HyperLink ID="lnkTest3" runat="server"/>
</td>
<asp:literal id="tablebreak" runat="server"></asp:literal>
</ItemTemplate>
</asp:Repeater>
Then code behind
Literal tableBreak = (Literal)e.Item.FindControl("tablebreak");
if (e.Item.ItemIndex % 4 == 3)
tableBreak.Text = "</tr><tr>";
Here is the way this may be accomplished following the repeater control conventions.
<asp:Repeater id="rptTest" runat="server">
<HeaderTemplate>
<table border="1">
<tr>
</HeaderTemplate>
<ItemTemplate>
<td>
<asp:Literal ID="litContent" runat="server" />
</td>
</ItemTemplate>
<SeparatorTemplate>
</tr>
<tr>
</SeparatorTemplate>
<FooterTemplate>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
The code-behind:
int counter = 0
, columnCount = 3;
rptTest.ItemDataBound += (rpt_sender, rpt_e) => {
if (rpt_e.Item.ItemType == ListItemType.Item || rpt_e.Item.ItemType == ListItemType.AlternatingItem) {
string cellData = (string)rpt_e.Item.DataItem;
Literal litContent = (Literal)rpt_e.Item.FindControl("litContent");
litContent.Text = cellData;
}
else if (rpt_e.Item.ItemType == ListItemType.Separator) {
if (++counter % columnCount != 0)
rpt_e.Item.Visible = false;
}
};
rptTest.DataSource = new string[] { "Cell 1", "Cell 2", "Cell 3", "Cell 4", "Cell 5", "Cell 6", "Cell 7", "Cell 8", "Cell 9", "Cell 10" };
rptTest.DataBind();