ListView - ItemTemplate table styling - asp.net

I am trying to create an ItemTemplate using a 4x3 table. I want the first column to contain an image and the cells in the other columns info about the image. I am using the code below but the 1st row renders at the bottom of the image and the 2nd row below it. What am I doing wrong?
Thanks in advance.
<LayoutTemplate>
<table runat="server" cellpadding="2" id="tblBooks" style="">
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td rowspan="4">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
</td>
<td colspan="2" style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
<asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
</td>
</tr>
<tr runat="server">
<td colspan="2" style="padding-left:10px;">
<asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
<asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
</td>
</tr>
<tr runat="server">
<td colspan="2" style="padding-left:10px;">
</td>
</tr>
<tr runat="server">
<td>
</td>
<td>
</td>
</tr>
</ItemTemplate>
EDIT: To be more clear, the result I am after is like this:
______________________________________________
| |___________Title_____________|
| Image |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
But what I get is this:
______________________________________________
| _____________ | |
|| Image | | |
|| | | |
||____________| |___________Title_____________|
| |____________Name_____________|
| |______Value_____|____Value___|
|_______________|______Value_____|____Value___|
The CSS is reset.

The rowspan automatically makes the column and all the other rows/cells will be added around it. You can remove all the colspans and the second td in the last row.
<ItemTemplate>
<tr runat="server">
<td rowspan="4">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# String.Format("~\\Static\\Images\\BookCovers\\{0}", Eval("CoverImageSmall")) %>' Height="120" Width="90"/>
</td>
<td style="font-size:large; padding-bottom:5px; padding-left:10px; color:Black;">
<asp:Label runat="server" ID="TitleLabel" Text='<%# Eval("Title") %>' />
</td>
</tr>
<tr runat="server">
<td style="padding-left:10px;">
<asp:Label runat="server" ID="FirstNameLabel" Text='<%# Eval("FirstName") %>' />
<asp:Label runat="server" ID="LastNameLabel" Text='<%# Eval("LastName") %>' />
</td>
</tr>
<tr runat="server">
<td style="padding-left:10px;">
</td>
</tr>
<tr runat="server">
<td>
</td>
</tr>
</ItemTemplate>
UPDATE: Based on the supplied jsfiddle, it shows the issue is with the use of the vertical-align:baseline attribute applied by the reset css stylesheet. If that CSS attribute is removed, or is overridden for the title cell to something like vertical-align:bottom it displays as expected. See http://jsfiddle.net/9HsvF/10/

I have write down a simple code: <tr> <td>Image Code</td> <td colspan="2">Title</td></tr><tr> <td rowspan="3"><td> <td colspan="2">Name</td></tr><tr> <td>Value1<td> <td>Value2</td></tr><tr> <td>Value1<td> <td>Value2</td></tr>
Try this with your code. Hope it will work as you want.

Related

table column width in datalist

How can I adjust the column width of a table inside a datalist ? I have tried applying the width through CSS and directly on the tag but it doesn't affect the table
<asp:DataList ID="DataList2" runat="server" DataSourceID="ObjectDataSource2" Height="409px" RepeatColumns="3" Width="600px" >
<ItemTemplate>
<table class="nav-justified" cellpadding="0" cellspacing="0" >
<tr>
<td><asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("productImage") %>' Width="120" Height="60" /></td>
</tr>
<tr style="width:120px">
<td> <asp:HyperLink ID="HyperLink2" runat="server" CssClass="productName" NavigateUrl='<%# string.Format("product.aspx?id={0}", Eval("productId")) %>'>HyperLink</asp:HyperLink> </td>
</tr>
<tr style="width:120px">
<td><asp:Label ID="Label1" runat="server" class="productPrice" Text='<%# Eval("productPrice") %>' ></asp:Label></td>
</tr>
<tr style="width:120px">
<td> <asp:Button ID="Button1" CssClass="addToCart" runat="server" Text="+" /> </td>
</tr>
</table>
</ItemTemplate>
The issue was with the Datalist width property. Changing it 400 made the columns to be closer
<asp:DataList ID="DataList2" runat="server" DataSourceID="ObjectDataSource2" Height="409px" RepeatColumns="3" Width="400px" >
<ItemTemplate>

Control inside repeater causing full postback even after keeping in update panel

In my page, I have one search button and a repeater. I have wrapped everything inside UpdatePanel. My search button do not causes full postback, i.e ideal but RadioButtonList inside Repeater control does. I have no idea what to do.
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<table align="center" border="1" cellspacing="0" class="tabmn6">
<tr id="trheader" runat="server">
<th id="trEdit" runat="server">Edit</th>
<th>User Name </th>
<th>Role</th>
<th>From Date</th>
<th>To Date</th>
<th>Comment</th>
<th>Status</th>
</tr>
<asp:Repeater ID="rpUserDetails" runat="server" OnItemDataBound="rpUserDetails_ItemDataBound">
<ItemTemplate>
<tr>
<td id="tdRPEdit" runat="server" align="center">
<input type="button" class="editbtn" name="btnEdit" id="btnEdit" runat="server" onclick='<%# string.Format("javascript:return AddBoardCast(\"{0},{1}\")", Eval("BC_ID"),"Edit") %>'>
</td>
<td id="trRPTL" runat="server" align="center">
<asp:Label ID="lblUName" runat="server" ForeColor="Red" Text='<%#Eval("UserName")%>' />
</td>
<td align="center">
<asp:Label ID="lblRoleName" runat="server" ForeColor="Black" Text='<%#Eval("RoleName")%>' />
</td>
<td align="center">
<asp:Label ID="lblToDate" runat="server" ForeColor="Black"><%#DataBinder.Eval(Container.DataItem, "BC_FromDate", "{0:dd/MM/yyyy}")%></asp:Label>
</td>
<td align="center"><asp:Label ID="lblFromDate" runat="server" ForeColor="Black"><%#DataBinder.Eval(Container.DataItem, "BC_TODate", "{0:dd/MM/yyyy}")%></asp:Label></td>
<td align="center" width="20%">
<div style="color: black"><%#Eval("BC_Comment")%></div>
</td>
<td align="center">
<asp:HiddenField ID="hdnBC_ID" runat="server" Value='<%#Eval("BC_ID") %>' />
<asp:HiddenField ID="hdnUserID" runat="server" Value='<%#Eval("UserID") %>' />
<asp:RadioButtonList ID="rdStatus" runat="server" Height="48px" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rdStatus_SelectedIndexChanged" CssClass="rad">
<asp:ListItem Text="Active" Value="1"></asp:ListItem>
<asp:ListItem Text="Deactive" Value="0"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Listview Layout Template Error

I am querying a column from my db and when I test the query with the sqldatasource the numbers shows up fine. However, when I run the application, all the numbers in the column add two zeros at the end of it.
For example,
Instead of 1 it is 100
Instead of 2 it is 200
I dont know what the cause of this may be.
Here is my LayoutTemplate:
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table id="itemPlaceholderContainer" runat="server" border="1" style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
<tr runat="server" style="background-color: #E0FFFF;color: #333333; ">
<th runat="server"></th>
<th runat="server"> FormTitle</th>
<th runat="server">FormSection</th>
<th runat="server">SubSection</th>
<th runat="server">SectionItem</th>
<th runat="server">SortOrder</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
<asp:DataPager ID="DataPager1" runat="server" PageSize="7">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
ItemTemplate:
<ItemTemplate>
<tr style="background-color: #E0FFFF;color: #333333;">
<td>
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="Delete" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="Edit" />
</td>
<td>
<asp:Label ID="FormTitleLabel" runat="server" Text='<%# Eval("FormTitle") %>' />
</td>
<td>
<asp:Label ID="FormSectionLabel" runat="server" Text='<%# Eval("FormSection") %>' />
</td>
<td>
<asp:Label ID="SubSectionLabel" runat="server" Text='<%# Eval("SubSection") %>' />
</td>
<td>
<asp:Label ID="SectionItemLabel" runat="server" Text='<%# Eval("SectionItem") %>' />
</td>
<td>
<asp:Label ID="SortOrder" runat="server" Text='<%# Eval("SortOrder") %>' />
</td>
</tr>
</ItemTemplate>

How to get this ListView as a two-column table?

I am a new ASP.NET developer and I am struggling in getting the ListView that I am working on it as the image shown below:
How to do that?
My ASP.NET Code:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" >
<ItemTemplate>
<tr style="">
<td>
<p>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</p>
</th>
<td>
<p>
<asp:Label ID="UsernameLabel" runat="server"
Text='<%# Eval("Username") %>' />
</p>
</td>
<td>
<p>
<asp:Label ID="JobTitleLabel" runat="server" Text='<%# Eval("JobTitle") %>' />
</p>
</td>
<td>
<p>
<asp:Label ID="DivisionLabel" runat="server" Text='<%# Eval("DivisionName") %>' />
</p>
</td>
<td>
<p>
<asp:Label ID="RoleLabel" runat="server" Text='<%# Eval("RoleName") %>' />
</p>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2" runat="server">
<tr id="Tr5" runat="server">
<td id="Td4" runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="1" style="">
<tr id="Tr6" runat="server">
<td id="Td6" runat="server" colspan="3">
<center>Personal Information</center>
</td>
</tr>
<tr id="Tr9" runat="server" style="">
<th id="Th3" runat="server">
Name</th>
</tr>
<tr id="Tr10" runat="server">
<th id="Th4" runat="server">
Username</th>
</tr>
<tr id="Tr11" runat="server">
<th id="Th5" runat="server">
JobTitle</th>
</tr>
<tr id="Tr12" runat="server">
<th id="Th6" runat="server">
Badge Number</th>
</tr>
<tr id="Tr13" runat="server">
<th id="Th7" runat="server">
Division</th>
</tr>
<tr id="Tr14" runat="server">
<th id="Th8" runat="server">
Role</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr8" runat="server">
<td id="Td7" runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server" PageSize="5">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
What I am getting right now is listing the headers or titles on the left column and the retreived values underneath them in a one instead of showing each value with its header. Here's a snapshot of what I am getting right now:
UPDATE:
UPDATE #2:
I am still struggling with this issue and getting the same result as in the snapshot.
Your html is so massive.
<tr style="">
**<td>**
<p>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</p>
**</th>**
see a mark **.Open td and closing with th.
<tr style="">
<td>
<p>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</p>
</th>
<td>
<p>
<asp:Label ID="UsernameLabel" runat="server"
Text='<%# Eval("Username") %>' />
</p>
</td>
Close your tr after above code and reopen your tr for next row.
HERE IS THE JSFIDDLE: http://jsfiddle.net/collabcoders/xSbyG/
Okay. I reworked it and tested it. This is the result I get:
First I add some css to clean the code and formatting.
<style>
.rightcolumn {
text-align:right;
height:25px;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
font-weight:bold;
}
.leftcolumn {
text-align:left;
height:25px;
text-overflow:ellipsis;
overflow: hidden;
white-space:nowrap;
}
</style>
Then the ListView Template and Layout:
<asp:listview id="ListView1" runat="server" datasourceid="SqlDataSource1">
<ItemTemplate>
<table style="width:200px;">
<tr>
<td class="leftcolumn">
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="UsernameLabel" runat="server" Text='<%# Eval("Username") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="JobTitleLabel" runat="server" Text='<%# Eval("JobTitle") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="BadgeNumberLabel" runat="server" Text='<%# Eval("BadgeNumber") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="DivisionLabel" runat="server" Text='<%# Eval("DivisionName") %>' />
</td>
</tr>
<tr>
<td class="leftcolumn">
<asp:Label ID="RoleLabel" runat="server" Text='<%# Eval("RoleName") %>' />
</td>
</tr>
</table>
</ItemTemplate>
<LayoutTemplate>
<table id="outertable" border="1" runat="server">
<tr>
<td colspan="2" style="font-weight:bold;">
<center>Personal Information</center>
</td>
</tr>
<tr>
<td>
<table id="itemPlaceholderContainer" style="width:150px;" runat="server">
<tr>
<td class="rightcolumn">
Name
</td>
</tr>
<tr>
<td class="rightcolumn">
Username
</td>
</tr>
<tr>
<td class="rightcolumn">
Job Title
</td>
</tr>
<tr>
<td class="rightcolumn">
Badge Number
</td>
</tr>
<tr>
<td class="rightcolumn">
Division
</td>
</tr>
<tr>
<td class="rightcolumn">
Role
</td>
</tr>
</table>
</td>
<td id="itemPlaceholder" runat="server">
<!---List Item Template Goes Here--->
</td>
</tr>
<tr>
<td colspan="2">
<asp:DataPager ID="DataPager1" runat="server" PageSize="5">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:listview>

How to set radio button Id property based on database value?

I have grid view which contains five radio buttons per row. Out of these five only one can be checked at a time. To achieve this I tried to keep Id property of radio button corresponding to database value. But it gives me an error in Id field. .Net does not allow to use eval function in ID property. The rows will depend on number of records in database. I want to keep 5 radio button in database and out of these five, only one can be checked. How to achieve this task?
//My code of .aspx page is as below.
<%# Page Title="Applicant Rating Form" Language="C#" MasterPageFile="~/Interviewer/interviewerMasterPage.master" AutoEventWireup="true" CodeFile="AppRatingForm.aspx.cs" Inherits="Interviewer_AppRatingForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table cellpadding="2" width="100%">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Interview Rating Form</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td width="25%">
Name of Applicant</td>
<td>
<asp:Label ID="nameLbl" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
Post Applied For</td>
<td>
</td>
</tr>
<tr>
<td>
Department</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Assessment</td>
</tr>
<tr>
<td align="left" colspan="2">
<asp:GridView ID="assesmentGrid" runat="server" AutoGenerateColumns="False"
onpageindexchanging="assesmentGrid_PageIndexChanging">
<Columns>
<asp:BoundField HeaderText="ID" DataField="SecId"/>
<asp:BoundField HeaderText="Traits" DataField="SecName"/>
<asp:TemplateField>
<HeaderTemplate>
A
</HeaderTemplate>
<ItemTemplate>
<asp:RadioButton ID='<%# Eval("SecId") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
B
</HeaderTemplate>
<ItemTemplate>
<asp:RadioButton ID='<%# Eval("SecId") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
C
</HeaderTemplate>
<ItemTemplate>
<asp:RadioButton ID='<%# Eval("SecId") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
D
</HeaderTemplate>
<ItemTemplate>
<asp:RadioButton ID='<%# Eval("SecId") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
E
</HeaderTemplate>
<ItemTemplate>
<asp:RadioButton ID='<%# Eval("SecId") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Comments
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="commentBox" runat="server" TextMode="MultiLine"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
</table>
</asp:Content>
You need to set the GroupName property of all RadioButtons in the same group/row. This will only allow one to be selected at a time. I wouldn't suggest trying to set the IDs dynamically using Eval, just make sure they are all unique and it should work fine.

Resources