I have an existing CSS file with these 2 id selectors:
#TableHead {
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
color: #000000;
border-top-width: thin;
border-top-style: solid;
border-top-color: #A9AAAA;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #A9AAAA;
}
#TableDivs {
border-bottom-width: 1px;
font-size:11px;
border-bottom-style: dotted;
font-family:Arial, Helvetica, sans-serif;
border-bottom-color: #A9AAAA;
}
I need to use "TableHead" to style Gridview header and "TableDivs" to style the rest of the Gridview control.
I am able to use TableDivs by enclosing the gridview in section.
How can I use TableHead to style the header? Where should I specify id="TableHead"?
The rendered source code of Gridview after adding is:
<div id="TableDivs">
<div>
<table cellspacing="0" rules="all" border="0" id="ctl00_Main_GridView1" style="border-width:0px;font-weight:normal;border-collapse:collapse;">
<tr>
<th align="left" scope="col">
File Name
</th>
<th align="left" scope="col">Description
</th>
<th align="left" scope="col">Folder Name
</th>
<th align="left" scope="col">
Date Added
</th>
</tr>
<tr>
<td style="width:30%;">
<a id="ctl00_Main_GridView1_ctl02_btnDownload" href="javascript:__doPostBack('ctl00$Main$GridView1$ctl02$btnDownload','')">2.txt</a>
</td>
<td style="width:40%;">222222</td><td style="width:25%;">group11</td>
<td style="width:5%;">
<span id="ctl00_Main_GridView1_ctl02_lblDateAdded"></span>
</td>
</tr>
<tr>
...
</tr>
</table>
</div>
</div>
<asp:GridView HeaderStyle-CssClass="your_class" ></asp:GridView>
You should ideally use
Gridview .table, Gridview .th, Gridview .tr, Gridview .tr
selectors. This will help you select the gridview or all similar gridviews and give them a common look and feel.
It also allows CSS to do the styling instead of writing code in .NET and specifying the class.
<asp:GridView ID="gridId" runat="server" >
<HeaderStyle CssClass="TableHead" />
<RowStyle CssClass="TableDivs" />
</asp:GridView>
<asp:GridView ID="TableDivs" runat="server" >
use some js to get the parent of ths or just thead(if GridView can export thead), then add #TableHead to the element.
</asp:GridView>
Thanks everyone for the help.
Finally I had no choice but to modify all the css files and add new class selectors, because I had no way of using the id selectors. I used the new class selectors in GridView's HeaderStyle, RowStyle, PagerStyle cssclass attribute.
It is working fine now.
Related
My application generates email which opens perfectly when opened in browser(example chrome). But when the same email is opened in Microsoft Outlook, it gets distorted heavily(like text is not visible, button text gets wrapped). Any suggestions what could be the problem. I have verified that all the scripting(js and css) has been done inline, ie on the .aspx page.
Email when opened in Outlook :
Email when opened in Web browser :
HTML Code
<table class="footer" style="border-collapse: collapse;border-spacing: 0;width: 100%;background-color: #f6f9fb">
<tbody>
<tr>
<td class="inner" style="padding: 0;vertical-align: top;padding-top: 60px;padding-bottom: 55px" align="center">
<table class="cols" style="border-collapse: collapse;border-spacing: 0;width: 600px">
<tbody>
<tr>
<td class="left" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 22px;text-align: left;width: 35%;padding-right: 5px;color: #b3b3b3;font-family: sans-serif">
<table class="social" style="border-collapse: collapse;border-spacing: 0">
<tbody>
<tr>
<td colspan="3">
<p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 4px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"><strong>Test Inc.</strong><br/>1234 Road Parkway<br/>Houston, Texas 77077<br/>1-811-811-9611<br/><br/>
<img style="border: 0;-ms-interpolation-mode: bicubic;display: block;max-width: 200px" src="SomeURL" alt="myatomDirect" width="135" height="58" border="0" />
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="right" style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 5px;text-align: right;width: 65%;padding-left: 5px;color: #b3b3b3;font-family: sans-serif">
<div id="campaign">
<p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 10px;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;">You are receiving this email because you registered for an account on
. Please do not reply to this message; it was sent from an unmonitored e-mail address. This message is a service e-mail related to your use of . For general inquiries or to request support with your account, please email us at
SomeURL.</p>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<p style="padding: 0;vertical-align: top;font-size: 11px;font-weight: 400;letter-spacing: 0.01em;line-height: 17px;padding-bottom: 15px;text-align: center;padding-left: 5px;color: #b3b3b3;font-family: sans-serif;text-transform:none;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any suggestions will highly appreciated.
Since Outlook uses Microsoft Word to render the emails, therefore there are certain issues that might arise in Outlook and not in any other Email client. So you need to be extra careful with your emails.
<table class="cols" style="border-collapse: collapse; border-spacing: 0; width: 600;">
Try using the width attribute without the px.
This has been discussed here
Tips to bridge Outlook hurdles
In case the primary font is not available on the subscriber’s device, Outlook tends to render the entire email copy in Times New Roman, ignoring the specified fallback font. In such cases, you need to force Outlook to render the fallback font that is specified using a conditional code.
<!--[if mso]> <style> h1 {
font-family: Primary font, Fallback font;
} </style><![endif]-->
Outlook will not automatically wrap text into the tables you create. Instead, table cells will widen to try and accommodate large URLs or other unbroken text strings. To avoid this, you can include the following:
<td style="word-break:break-all;">
Hope this works for you.
I have treeview in asp website when click linked node it redirect the whole page the treeview not remain to the page. but what i want only to change the the main page the tree view must remain in all page like windows explorer. I'm using asp.net website please help me how can i do that?
This is my treevew.
Home
page1
page2
page3
page4
Create a Master page that have tree view within the table as following
<table border="0" cellspacing="0" cellpadding="0" id="content-container" style="width: 1016px; height: 407px;">
<tbody>
<tr>
<td id="content-left" style="width: 200px; height: 424px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; border-bottom-color: buttonface; border-top-color: buttonface; border-right-color: buttonface; border-left-color: buttonface;">
<!--
LEFT COLUMN
-->
<br />
<asp:Panel ID="Panel1" runat="server" Height="455px" Width="220px">
<asp:TreeView ID="tvNodes" runat="server" Height="448px" Width="215px" ShowLines="True">
</asp:TreeView>
</asp:Panel>
</td>
<td id="content" style="width: 736px; height: 424px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-bottom-color: buttonface; border-top-color: buttonface; border-right-color: buttonface; ">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" >
</asp:contentplaceholder>
</td>
</tr>
</tbody>
</table>
And load the page to the ContentPlaceHolder1 on node click event.
I realize this is a strange/simple question. I have HTML—tables and rows—that make up a grid. I need the resulting grid to look exactly like the HTML does, with data pulled from a DataTable.
How should I go about doing that? If I replace the HTML with a GridView the result will look different from what I need it to look like. Do I create a custom grid class that spits out tables and rows?
To clarify: I've been given an HTML grid...
<div>
<table>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
</table>
</div>
...which I now need to populate with data from a table, and preserve the original HTML.
If you want to use ASP.Net databinding capabilities, go with a Repeater. The markup will look something like this:
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<asp:Repeater runat="server">
<ItemTemplate>
<tr>
<td><%# Eval("SomeFieldName") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
You can also build the markup manually in the code-behind by instantiating table/row/cell objects and adding them to the controls collection of the page, control, or parent container control. This tends to be time-consuming but it's a valid option in some cases, such as when you wish to have highly dynamic content that isn't easy to express in a Repeater.
A third option is to mix server markup with client markup, e.g.
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<% foreach( var obj in someCollection ){ %>
<tr>
<td><%= obj.Property %></td>
</tr>
<% } %>
</tbody>
</table>
The last option is quite similar (albeit more verbose) to Razor syntax used in ASP.Net MVC views.
I think your best bet for that would be a repeater. Link below.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater(v=vs.100).aspx
Another option would be to use a ListView with your HTML table setup as the LayoutTemplate.
quick example:
<asp:ListView ID="MyListView" runat="server">
<LayoutTemplate>
<table id="Table1" cellpadding="1" width="100%" runat="server">
<tr id="Tr1" runat="server">
<th id="Th1" style="font-weight: bold; text-align: left" runat="server">
Header1
</th>
<th id="Th2" style="font-weight: bold; text-align: left" runat="server">
Header2
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr id="Tr2" runat="server">
<td style="text-align: left">
<%# Eval("Field1")%>
</td>
<td style="text-align: left">
<%# Eval("Field2")%>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
in my aspx page, i have 3 td inside a table where i have placed
divs to display my content.i'm using ajax to load the data inside
each of the div.in the same td in which i am displaying my content div
i have also placed a div to show loading indicator when the data div
loads.
My problem is positioning the loading indicator div when its seen through
different machines with different resolution or screen size.
At present my loading indicator div are of type absolute.
Can any one suggest an elegant method of position my loading
indicator div in the three td's so dat its correctly centered
no matter whatever is the screen size or resolution.
i'm using c# web application.
Below is the markup of one of the td's,
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="Box">
<tr>
<td class="Box_TopLeftCurve">
</td>
<td valign="top" class="Box_TopRep">
</td>
<td class="Box_TopRightCurve">
</td>
</tr>
<tr>
<td class="Box_LeftRep">
</td>
<td align="left" valign="top">
<div class="Box_GridArea">
Data Here
</div>
<div style="position: absolute; top: 347px; left: 207px; width: 134px;display:none;">
Loading Indicator
</div>
</td>
<td class="Box_RightRep">
</td>
</tr>
<tr>
<td class="Box_BaseLeftCurve">
</td>
<td class="Box_BaseRep">
</td>
<td class="Box_BaseRightCurve">
</td>
</tr>
Display the indicator as a background image so that it is easy to center on any resolution.
.loader { background: url('/images/loader.gif') center center no-repeat; }
You could assign the background image to the table or the td in which it should appear.
When loaded you could remove the loader class using jQuery for example:
if (is_loaded) {
$('table td').removeClass('loader')
}
<td colspan ="2" style="width: 64px">
<div style="float:left; padding-left:9px;">
<asp:LinkButton ID="lnkremoveloc" runat="server"
OnClick="lnkremoveloc_Click" CssClass="linkclass"
style="cursor:pointer" Font-Underline="True"
Font-Bold="true" Font-Size="12px">
Remove Location
</asp:LinkButton>
</div>
</td>
This is the link button from where i get a popup when clicked.
The popup page is like below. But when i click this link, the same page gets refreshed and i loose Save and Cancel button instead of opening a popup. Can someone help me out. I have no idea where i am doing wrong. Thanks a lot...
<%# Page Language="C#" AutoEventWireup="true" CodeFile="DisableLocation.aspx.cs" Inherits="DisableLocation" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%--<html xmlns="http://www.w3.org/1999/xhtml" >--%>
<script language ="javascript" type="text/javascript" >
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no,
status=no, menubar=no,scrollbars=no, resizable=no, copyhistory=no, width='+w+',
height='+h+', top='+top+', left='+left);
}
</script language ="javascript" type="text/javascript">
<html>
<head runat="server">
<title>Disable Location | DealTown.com</title>
</head>
<body>
<form id="form1" runat="server">
<div style="display: block; background: url(images/reusable_blue_bg.jpg) repeat-x 0 -15px;border-left: #88b9c7 1px solid; border-bottom:#88b9c7 1px solid; border-top:#88b9c7 1px solid; border-right: #88b9c7 1px solid; padding: 0px 2px; height: 236px; min-height: 236px; height: auto; margin-left: auto; margin-right: auto;">
<table align="center" style="width: 554px; border-top-style: none; border-right-style: none;
border-left-style: none; border-bottom-style: none" id="TABLE1">
<tr >
<td align="center" colspan="5" style="font-weight:normal;font-size:18px;margin: 0px;font-family: Arial;color: #1e7c9b;" >Disable Location</td>
</tr>
<asp:GridView ID="diableloc" runat="server" AutoGenerateColumns="False"
DataKeyNames="LocationName" DataSourceID="getGridMerchantLocationData"
AllowPaging="True" EnableViewState="False">
<Columns>
<asp:BoundField DataField="chkbox" HeaderText="Select"
SortExpression="Selection" />
<asp:BoundField DataField="locname" HeaderText="Location Name"
ReadOnly="True" SortExpression="Locnames" />
</Columns>
</asp:GridView>
<asp:ObjectDataSource ID="ProductsDataSource" runat="server"
OldValuesParameterFormatString="original_{0}"
SelectMethod="GetLocations" TypeName="string">
</asp:ObjectDataSource>
</table>
<tr>
<td style="width: 44px; height: 63px">
</td>
<td style="width: 127px; height: 63px">
</td>
<td align="left" colspan="2" style="height: 63px; width: 196px;">
<asp:ImageButton ID="btnDisable" runat="server" ImageUrl="~/images/save.gif" OnClick="btnDisable_Click"
ValidationGroup="group1" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/images/cancel.gif" OnClick="btnCancel_Click" /></td>
<td colspan="1" style="width: 92px; height: 63px">
</td>
</tr>
</div>
</form>
</body>
</html>
Sounds like the page is posting back. Did you try AutoPostBack="false"? Not sure you need a LinkButton here. Can you just use a anchor tag with onclick instead to invoke the popup?
Do you have code that needs to execute on the server side when the LinkButton is clicked? If you need both you can use the OnClientClick property to have both. It has been a while, but I think you can make it so the server code won't execute if the value returned from the client side code in onclientclick returns false.
I don't see how your current LinkButton shows the popup.
Instead of OnClick use OnClientClick="lnkremoveloc_Click" where lnkremoveloc_Click is JavaScript function (somthing like PopupCenter you already have) that opens popup window.
Set the onclientclick instead of onclick. And while rendering(page load) itself set the onclientclick as "PopupCenter('url','title',....);return false;"
The url, title, width, etc can be set on load. The last part "return false" will annul the effect of click. Thus it prevents post back.
Note: If you want something to be processed at server side, its better not to set the onclientclick and use
Response.write("<script>PopupCenter('url','title',....);</script>");
I hope that helps.
This is my first post :)