Extending Boundfield - asp.net

All,
I have been looking thru countless articles and I haven't really found a solution that will work. What I am looking to do is extent the BoundField to allow additional properties to be set that will be passed into the html. Here is what I would like it to look like:
<asp:Gridview id="theGV" runat="server" AutoGenerateColumns="false">
<custom:AdvancedBoundField HeaderText="Status" DataField="Status" htmlProperty="Something" />
<custom:AdvancedBoundField HeaderText="Name" DataField="Name" htmlProperty="Goes" />
<custom:AdvancedBoundField HeaderText="Average" DataField="Count"/>
<custom:AdvancedBoundField HeaderText="Count" DataField="Count" htmlProperty="Here" />
</asp:GridView>
and it would output something like:
<table>
<tr>
<td htmlProperty="Something">
Status
</td>
<td htmlProperty="Goes">
Name
</td>
<td>
Average
</td>
<td htmlProperty="Here">
Count
</td>
</tr>
<tr>
<td htmlProperty="Something">
Active
</td>
<td htmlProperty="Goes">
Nick
</td>
<td>
3
</td>
<td htmlProperty="Here">
14
</td>
</tr>
<tr>
<td htmlProperty="Something">
Inactive
</td>
<td htmlProperty="Goes">
Sam
</td>
<td>
123
</td>
<td htmlProperty="Here">
45
</td>
</tr>
</table>
any suggestions???

Related

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

putting drop down on page in proper place

i am designing Daily Attendance System. I have designed a page where Employer can put date range FROM--TO to find attendance of some worker for particular date range now i have been told to put NAME field too like an employer can search by date range but even for particular worker in particular date range. Now i am confused about design that where ti is best to put Name Drop DOwn List, which position on page sounds great for it which will make it better looking.
Interface:
You can try this.
<table>
<tr>
<td colspan="4">
Search By
</td>
</tr>
<tr>
<td>
Student Name :
</td>
<td colspan="3">
<asp:DropDownList ID="ddlStudentName" Width="320px" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
From Date :
</td>
<td>
<asp:TextBox ID="txtFromDate" runat="server" CssClass="datepicker" onkeypress="return false;"
Width="120px"></asp:TextBox>
</td>
<td style="width: 70px;">
To Date :
</td>
<td>
<asp:TextBox ID="txtToDate" runat="server" CssClass="datepicker" onkeypress="return false;"
Width="120px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
<td style="width: 70px;">
</td>
<td>
</td>
</tr>
</table>
Stack vertically with a two column three row layout. Labels on the left, right justified.

Table tag malforming in aspx master page

I am having a problem with a nested table on my master page, it has been working up until the latest addition I added to one of the nested pages.
In this table i have a asp:contentplaceholder in the body that I use to fill in for the rest of the pages
The table on the master page looks like:
<table class="headermaintable" frame="vSides">
<tr>
<td class="headermaintd">
<table id="MasterTableID" style="height:100%;" class="widewidth" cellpadding="7">
<tr class="headertop">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td></td>
<td colspan="2" style="border-left:2px solid #000000;">
<a class="BlueLink" href="..." target="_blank">
<asp:Image ID="Image2" runat="server' ImageUrl="~/images/image2.gif" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
and what I have found that it is doing, is it is taking the last table row from the nested table and putting into the main table like this:
...
<td>
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
<tr>
<td></td>
<td colspan="2" style="border-left:2px solid #000000;">
<a class="BlueLink" href="..." target="_blank">
<asp:Image ID="Image2" runat="server' ImageUrl="~/images/image2.gif" />
</a>
</td>
</tr>
</td>
</tr>
</table>
I have looked over the html in the other page and all tags are properly opened and closed. Has anyone seen anything similar to this? If you need an example from the nested page its having problems with I can add something.
Thanks to all that can offer helpful advice
<asp:Panel ID="pnlPriceDisc" runat="server" Visible="false">
<asp:DataList ID="dlQtyBreak" RepeatLayout="Table" Runat="Server" width="85%" CellPadding="1" CellSpacing="1">
<HeaderTemplate>
<tr class="style4" bgcolor="#dedede">
<td colspan="5" align="center">
<b>Current Price Breaks</b>
</td>
</tr>
<tr bgcolor="#dedede" class="style4">
<td align="center" width="20%"><b>Low</b></td>
<td align="center" width="20%"><b>High</b></td>
<td align="center" width="20%"><b>Price</b></td>
<td align="center" width="20%"><b>Sale Price</b></td>
<td align="center" width="20%"><b>Delete</b></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="style5" bgcolor="#eeeeee">
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBLowQty" ... />
<asp:RequiredFieldValidator ... />
<asp:RegularExpressionValidator ... />
</td>
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBHighQty"... />
<asp:RequiredFieldValidator ... />
<asp:RegularExpressionValidator ... />
</td>
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBPrice" ../ />
<asp:RequiredFieldValidator ... />
<asp:RegularExpressionValidator ... />
</td>
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBSalesPrice" ... />
<asp:RegularExpressionValidator ... />
</td>
<td align="center" valign="middle" width="20%">
<asp:Button id="btnPBDelete" ... />
<asp:Label id="lblPBLinenum" ... />
</td>
</tr>
</ItemTemplate>
</asp:DataList>
<table width="85%" id="PBRowAdd" runat="server" cellpadding="1" cellspacing="1" visible="false">
<tr bgcolor="#eeeeee" class="style5">
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBLowQtyAdd" ... />
<asp:RequiredFieldValidator ... />
<asp:RegularExpressionValidator .../>
</td>
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBHighQtyAdd" ... />
<asp:RequiredFieldValidator ... />
<asp:RegularExpressionValidator ... />
</td>
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBPriceAdd" ... />
<asp:RequiredFieldValidator ... />
<asp:RegularExpressionValidator ... />
</td>
<td align="center" valign="middle" width="20%">
<asp:TextBox id="txtPBSalesPriceAdd" ... />
<asp:RegularExpressionValidator ... />
</td>
<td align="center" valign="middle" width="20%">
<asp:Button id="btnPBAddNew" ... />
</td>
</tr>
</table>
<br>
<table>
<tr>
<td>
<asp:Button ID="btnPBRowAdd" .../>
<asp:button id="btnPBBack" ... />
<asp:button id="btnPBUpdateQtyBreakList" ... />
</td>
</tr>
</table>
</asp:Panel>
Now in this example is the only one I have found where it causes the issue, and if I hide table "PBRowAdd" the issue goes away, but as soon as I make the table visible it causes the problem. What is it doing to cause it?
Again thanks to anyone who can offer help on the issue.

UpdatePanel alignment issue inside the Table

I am using UpdatePanel control in the middle of the page for partial postback of Address Type radio button change. Everything works fine but I am struggling with alignment issue. The controls inside the UpdatePanel do not align with outside controls. How could I solve this issue? Please let me know.
<table id="tblEdit" class="cssclass1" cellpadding="3" runat="server">
<tr>
<td class="cssclass1" align="right">
Title
</td>
<td>
<telerik:RadTextBox ID="textbox1" runat="server" Width="280px" ReadOnly="true"
BackColor="LightGray" />
</td>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblFirstName" runat="server">First Name</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtFirstName" runat="server" MaxLength="30">
</telerik:RadTextBox>
<asp:Image ID="Image1" ImageUrl="../../../images/requiredfield.gif" AlternateText="Required Field"
runat="server"></asp:Image><asp:HiddenField ID="hfCaseEntityId" runat="server" />
</td>
</tr>
<tr>
<td colspan="4">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<tr>
<td class="cssclass1" align="right">
Address Type
</td>
<td align="left">
<asp:RadioButtonList ID="AddressType" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="AddressType_SelectedIndexChanged" AutoPostBack="true" >
<asp:ListItem Value="1" Selected="True">Home</asp:ListItem>
<asp:ListItem Value="2">Work</asp:ListItem>
</asp:RadioButtonList>
</td>
<td class="cssclass1" align="right">
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeStreet1" runat="server">Address</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeStreet1" runat="server" MaxLength="40" >
</telerik:RadTextBox>
<asp:Image ID="Image10" ImageUrl="../../../images/requiredfield.gif" AlternateText="Required Field"
runat="server"></asp:Image>
</td>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeStreet2" runat="server">Street 2</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeStreet2" runat="server" MaxLength="40" Width="280px">
</telerik:RadTextBox>
</td>
</tr>
<tr>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeCity" runat="server">City</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeCity" runat="server" MaxLength="30">
</telerik:RadTextBox>
</td>
<td align="right">
<asp:Label CssClass="cssclass1" ID="LblHomeState" runat="server">State</asp:Label>
</td>
<td align="left">
<telerik:RadTextBox ID="txtHomeState" runat="server" MaxLength="30">
</telerik:RadTextBox>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
Your HTML is invalid. The first line in your <ContentTemplate> is a <tr>, however, it looks like you are trying to include another <table> there. You might want to look into cellpading=0 and cellspacing=0 on your inner table. Also, you could add a CSSClass to your UpdatePanel to do any additional formatting.

Why the <DIV> CSS applied for Repeater Control get Distorted when placed in UpdatePanel?

i am new to AJAX i am trying to update a Repeater Control When user Click on Search Button which is out side the updatePanel using Trigger event of UpdatePanel the CSS get Distorted when Repeater Control is Placed inside UpdatePanel Whhen the Update Panel is Removed Then the CSS is applied perfectly why does it happen?
Code:
<div class="jqueryresultsBackground">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Repeater ID="ResultsRepeater" runat="server">
<HeaderTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<table align="center" width="100%">
<tr>
<td align="left" class="searchResFieldName" width="40%">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/deleted.png"
Style="z-index: 1; position: absolute; margin-left: -5px;"
Visible='<%# DeletedImageVisibility(Eval("IsActive"))%>' />
<br />
<%# Eval("UnicodeFullName")%>
</td>
<td width="10%">
Col1
</td>
</tr>
</table>
</td>
<td width="10%">
Col2
</td>
<td width="10%">
Col3
</td>
<td width="8%">
Col4
</td>
<td width="5%">
Col5
</td>
<td width="10%">
Col6
</td>
</tr>
<tr>
<td align="left" class="searchResFieldName" width="35%">
<%# Eval("EnglishFullName")%>
</td>
<tr>
<td align="left">
<%# Eval("HouseNumber")%>
<br />
<%# Eval("UnicodeAddress")%>
</td>
<td>
<b><%# Eval("ConstituencyNumber")%></b>
</td>
<td>
<b><%# Eval("PartNumber")%></b>
</td>
<td>
<b><%# Eval("SerialInPart")%></b>
</td>
<td>
<b><%# Eval("Age")%></b>
</td>
<td>
<b><%# Eval("Sex")%></b>
</td>
<td>
<b><%# Eval("CardNo")%></b>
</td>
</tr>
<tr>
<td>
<%# Eval("Address")%>
</td>
<tr>
<td>
</td>
<td align="left" class="searchResPrabhag" colspan="7">
</td>
</tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr>
<td>
</td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:HiddenField ID="CurrentPageHiddenField" runat="server" />
</div>
Your HTML is broken... The HeaderTemplate is closing your table.

Resources