Style table in repeater from code behind - asp.net

Hey guys I need some help with an application that I'm developing.
I'm trying to add a css class / styling to a table depending on a certain value that I'm getting from the database ( e.g. 0 - 2).
This is the code where I need to change the styling of the table
Public Function projectType(ByVal value As Integer)
Dim projectName As String
If value = 0 Then
projectName = "Project"
mytable.AddAttributes("Style", "Background-color:#444444")
ElseIf value = 1 Then
projectName = "Support"
Else
projectName = "Not available"
End If
Return projectName
End Function
Markup:
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="1"
RepeatDirection="Vertical" CellPadding="0" CellSpacing="0">
<ItemTemplate>
<table cellpadding="0" cellspacing="0" style="width: 100%; text-align: left; border-bottom: 1px solid #999999;
padding-bottom: 15px;">
<tr>
<td style="width: 110px; vertical-align: top; padding-left: 20px; padding-top: 5px;
padding-bottom: 5px;">
<asp:Label ID="Label5" runat="server" Text='<%# projectType(Eval("Type")) %>' Font-Names="Verdana"
Font-Size="9pt" EnableTheming="false" />
</td>
<td style="width: 110px; vertical-align: top; padding-left: 20px; padding-top: 5px;
padding-bottom: 5px;">
<asp:Label ID="Label2" runat="server" Text='<%# hoursCheck(Eval("Duration")) %>'
Font-Names="Verdana" Font-Size="9pt" Style="text-align: right" EnableTheming="false" />
</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 5px; padding-top: 5px; text-align: center">
<asp:Label ID="Label7" runat="server" Text='<%# Eval("FullName") %>' Font-Names="Verdana"
Font-Size="7pt" EnableTheming="false" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
From this function I need to access the table by getting the parent table of the sender since I can't explicitly say I want Datalist1 since I have 5 of them, how can I do this?

First of all, please get rid of inline styles and replace them with CSS classes. Will save you a lot of headache later on. For instance, have two CSS classes, one for "Project", another for "Support" and "Not available"
As for the actual question, the easiest thing that comes to mind is to split the logic into two functions, one for text and one for css class:
Public Function projectTypeText(ByVal value As Integer)
...
Return projectName
End Function
Public Function projectTypeClass(ByVal value As Integer)
...
Return projectCssClass
End Function
And then use it exactly as you did:
<%-- This might actually need runat="server", not sure --%>
<table cellpadding="0" cellspacing="0" style='<%# projectTypeClass(Eval("Type")) %>'
<asp:Label ID="Label5" runat="server" Text='<%# projectType(Eval("Type")) %>'
Note: if you absolutely have to deal with inline classes, you can have projectTypeStyle which returns Background-color:#444444, but then inside the markup you will need to do nasty stuff like that:
<table cellpadding="0" cellspacing="0" style='<%# "width: 100%; rest of styles; " + projectTypeStyle(Eval("Type")) %>'
This is horrible, so please avoid at all cost.

Related

how to use update panel with model extender popup

I have a link on update panel,when i clicked on Cure Loan,model extender pop up should come up but instead of one popup all the popup on the page is come up
so please give me the solution how to use update panel with model extender pop up
here is my code
<asp:UpdatePanel ID="UPCureLoan" runat="server">
<ContentTemplate>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton2" EventName="click" />
</Triggers>
Panel->
<table style="width: 100%; background-color: #DDE2E5;">
<tr style="background-color: #522E8B; color: white; height: 50px">
<td colspan="4" style="text-align: center; font-size: medium"><b>Notification</b></td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td colspan="3" style="font-size: medium;"> I confirm that I have discussed the borrowers concerns with the borrower.<br />
Please enter your initials to confirm
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<br />
<br />
</td>
</tr>
<tr>
<td></td>
<td colspan="3" style="text-align: center">
<asp:CheckBox ID="CheckBox4" runat="server" Style="transform: scale(2) !important;" Height="20px" Width="20px" /><b> Resend Borrower Survey 1 </b></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr style="text-align: center">
<td> </td>
<td>
<td>
<asp:Button ID="Button4" runat="server" Text="Close" Height="30px" Width="120px" />
<asp:Button ID="Button5" OnClick="popupConfirm1" runat="server" Text="Confirm" Height="30px" Width="120px" /></td>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<%-- <cc1:CalendarExtender ID="CalendarExtender2" TargetControlID="TXTDate" Format="MM/dd/yyyy" runat="server" />--%>
</asp:Panel>
Model extender Popup->
ID="Modalpopupextender5" runat="server"
PopupControlID="Panel5" TargetControlID="hidForModel"
BackgroundCssClass="gridView" OkControlID="ButtonSave">
</cc1:ModalPopupExtender>
You are not using the UpdatePanel control properly.
All you're doing there is placing some HTML code (which is incorrect) inside the ContentTemplate.
<ContentTemplate>
<%-- Where is your <table> etc? --%>
<td style="border: 0.5px solid #000000; border-collapse: separate; height: 44px;" bgcolor="#CCCCCC">
<asp:Label ID="CFMessage" runat="server" Visible="False"></asp:Label>
<br />
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Cure Loan</asp:LinkButton>
</ContentTemplate>
You also have your other code outside of the UpdatePanel.
All your code that has to be controlled by the Panel and the modalpopup, must be inside the UpdatePanel. BUT your ModalPopupExtender itself can be outside the UpdatePanel. In fact, it should if you're treating the UpdatePanel as a "popup box".
This is how I use UpdatePanels with AJAX:
Firstly set up your styles for the background, the panels and the popup itself.
<style type="text/css">
.pnlCIR
{
position: absolute; top: 20%; left: 22%; width: 400px; border: 3px solid LightSlateGray;
background-color: #E0E8F0; padding: 3px; font-family: Arial; font-size: small;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
position:fixed;
overflow:hidden;
}
</style>
Next define your AJAX popup:
<asp:Button ID="btnCIR" runat="server" Text="Suggest Improvement (CIR)" CausesValidation="false" />
<ajaxToolkit:ModalPopupExtender ID="mpeCIR" runat="server"
BackgroundCssClass="modalBackground"
PopupControlID="upCIR"
TargetControlID="btnCIR">
</ajaxToolkit:ModalPopupExtender>
Next define your UpdatePanel as a "wrapper" around your code that you want to be inside the panel (in my case the "CIR" panel)
<asp:UpdatePanel ID="upCIR" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlCIR" runat="server" CssClass="pnlCIR" Width="700px">
<your code>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Note:
You must use UpdateMode conditional
You must have a Panel inside the UpdatePanel, so that the Panel is the actual popup, and the UpdatePanel is the control that keeps postbacks inside the UpdatePanel, avoiding the dread "postback flash" on your entire screen.

ASP.NET C# DataList - Find Hidden Field in Child DataList

I am new to ASP.NET. I have been trying all morning, but couldn't get this to work. In my DataList1, there is a child dataList (childList), which lists the Company names and checkboxes. I also stored the CompanyID in the hidden field (hiddenCompanyID).
What I like to do is when the user checkes a boxes (under child Datalist), it will trigger the event (chkChildCompany_CheckedChanged) and capture the CompanyID from the hidden field so I can process the database update. I could not figure how to find the Hidden field control with in the child Datalist.
Please help,
Thanks,
<asp:DataList BackColor="#ffffff" id="DataList1" DataSourceID="dsCompanyListPartialMatch" runat="server" Width="80%" DataKeyField="Company1Word"
UseAccessibleHeader="true"
CssClass="books"
HeaderStyle-CssClass="header"
ItemStyle-CssClass="item"
AlternatingItemStyle-CssClass="alternating"
GridLines="Both"
CellPadding="0"
CellSpacing="0" BorderColor="Black"
ItemStyle-BorderColor="Black" BorderWidth="0"
HorizontalAlign="Center"
RepeatDirection="Vertical"
>
<HeaderTemplate>
<table border="0" width="100%">
<tr class="div_hover">
<th style="width: 5%; border-right:1px solid black; border-spacing:0; text-align:center; "></th>
<th style="width: 5%; border-right:1px solid black; border-spacing:0; text-align:center; ">Num</th>
<th style="width: 70%; border-right:1px solid black; border-spacing:0; text-align:center; ">Company Name</th>
<th style="width: 10%; border-right:1px solid black; border-spacing:0; text-align:center; ">Add?</th>
</tr>
</table>
</HeaderTemplate>
<ItemStyle BorderColor="black" Font-Size="Medium" />
<ItemTemplate>
<table border="0" width="100%">
<tr class="div_hover">
<td style="width: 5%; border-right:1px solid black; border-spacing:0; text-align:center; ">
<asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" Text="+" CommandArgument='<%#Container.ItemIndex%>'
OnCommand="LinkButton1_Command"
Font-Underline="false"
Height="25"
Font-Bold="true"
></asp:LinkButton>
</td>
<td style="width: 5%; border-right:1px solid black; border-spacing:0; text-align:right; padding-right:10px;"><%#Eval("Row")%></td>
<td style="width: 70%"><asp:Literal ID="litFoo" runat="server" Text='<%#Eval("Company")%>' /> </td>
<td style="width: 10%;text-align:right;">
<div style="<%# (Eval("CompanyID") == null || Eval("CompanyID").ToString() == "") ? "": "display: none" %>">
<asp:CheckBox id="check1" runat="server" />
</div>
<div style="<%# (Eval("CompanyID") == null || Eval("CompanyID").ToString() != "") ? "": "display: none" %>">
<asp:HyperLink
ID="HyperLink1"
runat="server" ForeColor="Blue"
Text='<%# Eval("CompanyID")%>'
NavigateUrl='<%# Eval("CompanyID", "/Apps/ERP/Other/CompanyInfo.asp?CompanyID={0}")%>'
/>
</div>
</td>
<asp:Label ID="lblRow" Visible="False" runat="Server" Text='<%# DataBinder.Eval(Container.DataItem, "Row") %>' />
</tr>
</table>
<asp:Panel ID="pnlChildView" runat="server" style="padding-left:200px;">
<asp:DataList ID="childList" runat="server" Width="100%">
<ItemTemplate>
<div class="div_hover">
<table class="table1" width="80%">
<tr>
<td style="width: 60%; border-right:0px solid black; border-spacing:0;">• <%#Eval("CompanyName")%></td>
<td style="width: 20%;text-align:right; "><a href="/Apps/ERP/Other/CompanyInfo.asp?CompanyID=<%#Eval("CompanyID")%>" ><%#Eval("CompanyID")%></a></td>
<td style="width: 20%;text-align:right;">
<asp:CheckBox id="chkChildCompany" runat="server" value="123Test"
AutoPostBack="true"
OnCheckedChanged="chkChildCompany_CheckedChanged" /></td>
<asp:HiddenField ID="hiddenCompanyID" runat="server" Value='<%#Eval("CompanyID") %>' />
</tr>
</table>
</div>
</ItemTemplate>
</asp:DataList>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
checkbox event
protected void chkChildCompany_CheckedChanged(object sender, EventArgs e)
{
//Process through child DataList (childList)
//Capture the CompanyID from hidden field value if checkbox is checked;
// Then I will update the database record with the ID....
}
A couple different ways to tackle this. My first instinct is to cast sender to the appropriate type and then check the .Parent property. That will probably allow you to do this:
HiddenField hidden = (HiddenField) myCheckbox.Parent.FindControl("hiddenCompanyID");
If that doesn't work... another option would be to embed a postback reference that already includes the appropriate hidden field value, which is triggered by the checkbox. Or modify things slightly so that you've got a button there, which accepts a CommandArgument param. In this case you'd just set it to <%#Eval("CompanyID") %>, and then that would be available in the event handler.
I would add an attribute to your checkbox, and then obtain the value you need from the checkbox itself.
<asp:CheckBox id="chkChildCompany" runat="server" value="123Test"
AutoPostBack="true" CustomAttribute='<%#Eval("CompanyID") %>'
OnCheckedChanged="chkChildCompany_CheckedChanged" />
CodeBehind:
var CompanyID = (sender as CheckBox).Attributes["CustomAttribute"]
You can use the NamigContainer property to get the DataListItem, then use FindControl:
protected void chkChildCompany_CheckedChanged(object sender, EventArgs e)
{
var chk = (CheckBox) sender;
var item = (DataListItem) chk.NamingContainer;
var hiddenCompanyID = (HiddenField) item.FindControl("hiddenCompanyID");
// here you are ...
}
By the way, this technique works in all web-databound controls like Repeater, GridView etc. Using the NamingContainer is safer than using Parent.Parent or other approaches.
In your case, you should store the CompanyID in ViewState instead of a hidden field:
ViewState["MicrosoftID"] = "4536";
Later, you can access it like this:
protected void chkChildCompany_CheckedChanged(object sender, EventArgs e)
{
string companyID = ViewState["MicrosoftID"];
}
Hope that helps!

how to remove space under a table?

Here what I've done and whats my problem. First of all i got a big table with a lot of td the first td on top of my table containt anoter table and (here come my problem) theres a space under that little table and I don't know why.
Here's the code for my table:
<div runat="server" class="ReportPage" >
<table runat="server" class="ListReportBigTable" align="center">
<tr>
<td class="style13" colspan="3" >
<table width="46%" align="center"style="height:50%; "cellpadding="0">
<tr>
<td align="left">
<asp:Label ID="LB_ChooseReport" runat="server"
Text="Choisissez un dossier médical: " Font-Size="Small">
</asp:Label>
</td>
</tr>
<tr>
<td style="vertical-align:bottom" align="left">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div id="div_Filter" runat="server" visible="false" align="left">
<asp:Label ID="LBL_FilteredBy" runat="server" width="18%" Text="Patient : "
Font-Size="Small" style="margin-left: 0px"></asp:Label>
<asp:DropDownList ID="DDL_FilterSelect" runat="server" AutoPostBack="true"
Width="25%" CssClass="DDL_Filter" Font-Size="Small" Height="18px"></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel></td></tr></table>
<br />
</td>
and here the CSS:
.ListReportBigTable
{
height:25%;
width:55%;
text-align:center;
vertical-align:middle;
border: thick solid black;
margin-left: 0px;
}
thx in advance
I don't know if it's a typo but you are closing with a </td> after your closing </table> tag. In addition you have a <br /> before the closing misplaced </td> which would obviously add space to the bottom.
Try changing the closing </td> to </table></div> and removing the <br />
In addition, in your CSS try adding margin-bottom: 0px; and padding-bottom: 0px; to see if this has an effect.
Also, what is after the table? Maybe whatever is being displayed after the table has it's own top margin/padding?
Do you have a link to the actual page where this is occuring so we can examine with Firebug or similar and try to figure it out?

Visual Studio 2010 does not follow my CSS ... help pls

here is my CSS:
.body
{
font-family : Segoe UI;
}
.table{
width : 50%;
font-size:medium;
border-spacing:5px;
}
.leftCol
{
width:15%
}
.RightCol
{
width:35%
}
.header
{
width:35%;
font-weight:900;
text-align:left;
}
.dates
{
color:GrayText;
font-size:small
}
.pictures
{
width:10%;
}
.userName
{
width:10%;
text-align:left;
}
.smallTable
{
width:20%;
}
Here is the HTML markup:
<table class=".table">
<tr>
<td rowspan="3" class=".leftCol">
<asp:Label ID="ImageLabel" runat="server" Text='<%# Eval("Image") %>' />
</td>
<td class=".header">
<asp:Label ID="UserNameLabel" runat="server" Text='<%# Eval("UserName") %>' />
</td>
</tr>
<tr>
<td class=".rightCol">
<asp:Label ID="TextLabel" runat="server" Text='<%# Eval("Text") %>' />
</td>
</tr>
<tr>
<td class=".dates">
<asp:Label ID="DateLabel" runat="server" Text='<%# Eval("Date") %>' />
</td>
</tr>
</table><hr />
the other one:(this table width actually works)
<table class=".smallTable">
<tr >
<td class=".pictures">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Pictures") %>' /></td>
<td class=".userName" align="left">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>' /></td>
</tr>
</table><hr />
so, instead of following the rules, VS uses 100% width for the table using .table class, and then it just arranges in justified. The dates does not appear in gray colour ... and basically nothing follows. But i can assure you that the class names i wrote and everything is correct as i check. It just doesnt work . Do you know anyway i can force VS 2010 to do this ?
In all class that you declare on the tags you must place them with out the dot. Eg:
<table class="smallTable">
and change the class name .table to something else because the table is reserve for all tables and probably this type of variables lead to bugs. Do not mix up the tag names with the css declare.
The css table{ width : 50%; } change all the tables on the page.
The css body{ font-family : Segoe UI; } change all the body fonts.
The css .body{ font-family : Segoe UI; } is change only what you declare on class as body but eventually can lead to bugs and errors .

NumericUpDownExtender buttons same height as the textbox

I'm using the NumericUpDownExtender control, but my buttons on the side of the textbox are bigger then my textbox, is there a way to make the buttons the same height as my textbox?
Edit: I found my problem. I was using the standard buttons, which can't be handled?. Now I've created custom ones, but they won't appear on each other, but next to each other.
my code:
<asp:TextBox ID="txtHerst" runat="server" Text="0" Style="text-align: center"></asp:TextBox><cc1:NumericUpDownExtender ID="extHerst" runat="server" TargetControlID="txtHerst"
Width="50" Enabled="True" Maximum="1.7976931348623157E+308" Minimum="-1.7976931348623157E+308"
RefValues="" ServiceDownMethod="" ServiceDownPath="" ServiceUpMethod="" Tag=""
TargetButtonDownID="imgBtnDown" TargetButtonUpID="imgBtnUp"></cc1:NumericUpDownExtender><asp:ImageButton ID="imgBtnUp" runat="server" ImageUrl="Images/up.jpg" /><asp:ImageButton ID="imgBtnDown" runat="server" ImageUrl="Images/down.jpg" />`
You should be able to use css to do that...
I encountered the same problem, and eventually replaced the extender to RangeValidator.
first all of you should create some Css.
<style type="text/css">
.auto-style1 {
width: 78px;
}
.auto-style2 {
height: 5px;
width: 19%;
}
</style>
So, in my case I've created a table and set the columns with the controllers and buttons that need it, works for me
<table border="1">
<tr >
<td class="auto-style1" ><asp:TextBox ID="TextBox1" runat="server" Width="100%" Text='<%# Bind("Secuencia") %>' Height="18px"></asp:TextBox></tdstyle="width=70%> </td>
<td class="auto-style2" >
<asp:ImageButton ID="up" runat="server" style="max-height:100%; max-width:100%" ImageUrl="~/Imagenes/up.gif" Width="10px" />
<asp:ImageButton ID="down" runat="server" style="max-height:100%; max-width:100%" ImageUrl="~/Imagenes/down.gif" Width="10px" />
</td>
</tr>
</table>
<ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" Width="20" runat="server"
TargetButtonUpID="up" TargetButtonDownID="down" TargetControlID="TextBox1" />

Resources