show matrix like data in listview - asp.net

i'm working on a advertising web site that shows its goods on one of pages.
i want to show that goods in a listview but i want to my list view shows its goods in matrix like view.
for example my listview reads data like name,description and image of goods and shows first four of those in first row and next four in second row and so on.
could you please help me how do i do this? i want to use div ins Listview's Itemtemplate
is this proper code for my reson?
<asp:DataList ID="datalist_Data" runat="server">
<HeaderTemplate>
<table>
<tr style="background-color: #6699FF; color: #FFFFFF; font-size: large;">
<td width="150">Column 1</td>
<td width="150">Column 2</td>
<td width="150">Column 3</td>
<td width="150">Column 4</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td width="150"><%# Eval("c1") %></td>
<td width="150"><%# Eval("c2") %></td>
<td width="150"><%# Eval("c3") %></td>
<td width="150"><%# Eval("c4") %></td>
</tr>
</table>
</ItemTemplate>

DataList has a set of property to deal with your problem : RepeatColumns, RepeatDirection and RepeatLayout
Read more about DataList control on MSDN
Here's the code for your need (where Foois the type of your good) :
<asp:DataList runat="server" ID="datalist" RepeatColumns="4" RepeatDirection="Horizontal" RepeatLayout="Table">
<HeaderTemplate>
<table>
<tr style="background-color: #6699FF; color: #FFFFFF; font-size: large;">
<td width="150">Column 1</td>
<td width="150">Column 2</td>
<td width="150">Column 3</td>
<td width="150">Column 4</td>
</tr>
</table>
</HeaderTemplate>
<ItemStyle Width="150" Wrap="true" />
<ItemTemplate>
<%# (Container.DataItem as Foo).Name %><br />
<%# (Container.DataItem as Foo).Description %><br />
<%# (Container.DataItem as Foo).ImageUrl %>
</ItemTemplate>
</asp:DataList>
Note that this writing avoid the Eval, which is poorly effective since it requires reflection.
EDIT : Here's the C# code :
protected void Page_Load(object sender, EventArgs e)
{
List<Foo> list = GetGoods();
datalist.DataSource = list;
datalist.DataBind();
}

Related

I cant add a border style in repeater table asp.net css

I have a <asp:Reapter> using basic HTML <table> markup.
My goal is to add a border to <table> cell using CSS, and have it styled as shown in the picture. The third column <td> cell will have a thick solid black border. image
I am having trouble getting this to work, each time the border is too small.
Please help!
<table class="table table-bordered">
<tbody>
<asp:Repeater ID="Repeaterim" runat="server">
<HeaderTemplate>
<thead>
<tr>
<th>Ürün ID</th>
<th style="text-align: center;">Ürün Görsel</th>
<th>Ürün Adı</th>
<th>Ürün Fiyatı</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr style="height: 200px;">
<td>
<%# Eval("UrunID") %>
</td>
<td style="background: url('<%# Eval(" UrunGorseli ") %>') no-repeat center;"></td>
<td>
<%# Eval("UrunAdi") %>
</td>
<td>
<%# Eval("UrunFiyati") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tfoot>
<tr>
<th>Ürün ID</th>
<th style="text-align: center">Ürün Görsel</th>
<th>Ürün Adı</th>
<th>Ürün Fiyatı</th>
</tr>
</tfoot>
</FooterTemplate>
</asp:Repeater>
</tbody>
</table>

Table layout in repeater control

I am trying to get the Table shown in the image as layout in a repeater control.Since i am newbie to it
Can someplease guide me on this. The section below Customer number is the only thing that should repeat vertially and I want only two repeats (i.e two item details per page ) on each page
Thank You
<asp:Repeater ID="RepeaterVersionsForPie" runat="server">
<HeaderTemplate>
<table id="VersionsTable">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="style3">CustomerNumber</td>
<td class="style4">Test1:</td>
<td class="style5">Test2</td>
<td class="style7">Test3:</td>
<td class="style8">Test4:</td>
</tr>
<tr>
<td class="style9"></td>
<td class="style10"></td>
<td class="style11"></td>
<td class="style12"></td>
<td class="style13"></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:Repeater ID="RepeaterVersionsForPie" runat="server">
<HeaderTemplate>
<table id="VersionsTable">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="style3">CustomerNumber</td>
<td class="style4">Test1:</td>
<td class="style5">Test2</td>
<td class="style7">Test3:</td>
<td class="style8">Test4:</td>
</tr>
<tr>
<td class="style9" colspan="5"></td>
</tr>
<tr>
<td>Item Type:</td>
<td rowspan="3" colspan="4" valign="top">Photo</td>
</tr>
<tr>
<td>Item Number:</td>
</tr>
<tr>
<td>Date:</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Here's a quick jsfiddle

Adding more than 1 column to ListView (ASP.NET)

I am creating a webpage that is listing the names of places using ASP.NET. I am using a data source to read the data from a database file. The list view is displaying all the data in one column. What I am trying to do is add 7 rows of data and then as soon as the 7th row has been added, add another column, and then continue writing the data in the new created column. Here is my code:
<asp:ListView runat="server" DataSourceID="cwDataSource">
<ItemTemplate>
<tr style="">
<td>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
<td>
VIEW STORE PAGE
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr>
<td>
&nbsp
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<td>COLUMN #</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
<tr>
<td>
&nbsp
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
Example of what the output should look like (The 'VIEW STORE PAGE' is just a link):
COLUMN 1 COLUMN 2
A.ADDED VIEW STORE PAGE H.ADDED VIEW STORE PAGE
B.ADDED VIEW STORE PAGE I.ADDED VIEW STORE PAGE
C.ADDED VIEW STORE PAGE J.ADDED VIEW STORE PAGE
D.ADDED VIEW STORE PAGE K.ADDED VIEW STORE PAGE
E.ADDED VIEW STORE PAGE L.ADDED VIEW STORE PAGE
F.ADDED VIEW STORE PAGE M.ADDED VIEW STORE PAGE
G.ADDED VIEW STORE PAGE N.ADDED VIEW STORE PAGE
Any help would be appreciated.
I got it working:
<asp:DataList ID="cwDataList" runat="server" DataSourceID="cwDataSource" RepeatDirection=Vertical RepeatColumns=2 style="text-align: center">
<ItemTemplate>
<table style="width: 500px;">
<tr style="">
<td align="left" style="width: 250px; height: 18px">
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td align="left" style="width: 250px; height: 18px">
VIEW STORE PAGE
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>

Using Repeater control in vb.net

I am using a repeater control to view database table data, I want to add a link button next to each row to delete a specific row, how can I do that using vb.net??
There is nothing to do much, do you want to display it(link button for all the rows? if yes then try the following code)
<table cellpadding="0" cellspacing="0">
<tr valign="top" class="list_heading">
<td width="25%">
Column
</td>
<td width="25%">
Operation
</td>
<td width="19%" style="display: none;">
And/Or
</td>
<td width="25%">
Value
</td>
<td width="06%">
Remove
</td>
</tr>
<tbody>
<asp:Repeater ID="rpSearchItems" runat="server">
<ItemTemplate>
<tr>
<td style="display: none;">
</td>
<td>
<%# Eval("ColumnName") %>
</td>
<td>
<%# Eval("Operation") %>
</td>
<td style="display: none;">
<%# Eval("AndOr") %>
</td>
<td>
<%# Eval("Value") %>
</td>
<td align="center">
<asp:ImageButton ID="ibtnRemoveSearchItem" ImageUrl="~/Controls/ImagesForSearch/Remove.png"
CommandArgument=' <%# Eval("Id") %>' CssClass="RemoveUitem" ToolTip="Remove Item"
runat="server" OnClick="ibtnRemoveSearchItem_Click" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tr valign="top" class="list_bottom">
<td colspan="6">
</td>
</tr>
</table>
And in code behind code you can go like this:
Protected Sub ibtnRemoveSearchItem_Click(sender As Object, e As EventArgs)
ImageButton ibtnRemoveSearchItem = (ImageButton)sender;
Int32 Id = Convert.ToInt32(ibtnRemoveSearchItem.CommandArgument);
//Using the above two lines you can get the Coomand Argument, pass it to you delete stored proc thats all
// do your stuff here
End Sub
hope this will help you
UPDATE : If you want to add it conditionally then you can do it from "OnItemDataBound" event of repeater
for much info review this
This one also can help you

How to be overflow the row of table?

I created a webpage with the uploaded files and the uploading control in asp.net. I got a problem that is design problem.
<table style="width:500px;height:500px">
<tr>
<td>Uploading page<td>
</tr>
<tr>
<td style="height:300px;overflow:auto">
<asp:Repeater ID="UploadedFileList" runat="server">
<ItemTemplate>
<%# Eval("FileName") %>
</ItemTemplate>
</asp:Repeater>
<td>
</tr>
<tr>
<td><asp:FileUpload ID="FileUpload1" runat="server"/></td>
</tr>
</table>
I want to be overflow the sencod row. How can I do that?
You should keep another DIV inside the td to work better in this situation.
<table style="width:500px;height:500px">
<tr>
<td>Uploading page<td>
</tr>
<tr>
<td style="height:300px;">
<div style="height:300px;overflow:auto">
<asp:Repeater ID="UploadedFileList" runat="server">
<ItemTemplate>
<%# Eval("FileName") %>
</ItemTemplate>
</asp:Repeater>
</div>
<td>
</tr>
<tr>
<td><asp:FileUpload ID="FileUpload1" runat="server"/></td>
</tr>
</table>

Resources