This is what my page should look like, this is displayed in IE:
This is what it looks like in Firefox:
This is my code:
#using CustPortal.serviceclass
#model CustomerData
<br/>
<div class="leftdiv">
<fieldset>
<legend>Customer Info</legend>
#Html.Partial("CustomerInfo", Model)
</fieldset>
</div>
<div class="rightdiv">
<fieldset>
<legend>Balance</legend>
<div>
#Html.Partial("AccountBalance", Model)
</div>
</fieldset>
</div>
<div>
<table style="width: 100%" id="ThinLineTable">
<tr>
<th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Date</th>
<th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Refer#</th>
<th class="ThinLineTdLeft ThinLineTh" style="width: 30%">Description</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 10%">Qty</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 15%">Total</th>
<th class="ThinLineTdRight ThinLineTh" style="width: 15%">Balance</th>
</tr>
#foreach (var item in (IEnumerable<TransactionHistory>) ViewBag.TransactionHistory)
{
<tr>
<td class="ThinLineTdLeft">#item.TransactionDate</td>
<td class="ThinLineTdLeft">#item.ReferenceNumber</td>
<td class="ThinLineTdLeft">#item.Description</td>
<td class="ThinLineTdRight">#item.Quantity</td>
<td class="ThinLineTdRight">#item.Total</td>
<td class="ThinLineTdRight">#item.Balance</td>
</tr>
}
</table>
</div>
And my css:
.ThinLineTdRight {
padding: 5px;
border: solid 1px #d4d0d0;
text-align: right;
}
.ThinLineTdLeft {
padding: 5px;
border: solid 1px #d4d0d0;
text-align: left;
}
.ThinLineTh {
background-color: #e8eef4;
}
.rightdiv {
float: right;
width: 49%;
text-align: left;
}
.leftdiv {
float: left;
width: 49%;
text-align: left;
}
I'm not great with CSS, I'm still learning. Can anyone tell me what I am doing wrong to make it display differently in FF than in IE?
Thank you!
Related
I tried looking for similar questions but couldn't find any. My aspx file looks something like this
<div align="center" style="height: 350px; overflow-y: scroll; overflow-x: scroll; width: 100%;">
<asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
<asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
</asp:TableHeaderRow>
</asp:Table>
</div>
Now whenever there are too many columns, the width gets fixed to 100% even though I don't have a max-width property. And the text in the cell ends up in multiple lines. I want it to horizontally overflow out of the div instead.
Edit: Looks like adding this ended up fixing it.
td {
white-space: nowrap;
}
Simple html snippet to demonstrate -
div {
width: 10%;
overflow: auto;
}
<div>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
EDIT -
Your updated code would look like -
<div align="center" style="height: 350px; overflow: auto; width: 100%;">
<asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
<asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
</asp:TableHeaderRow>
</asp:Table>
</div>
A HTML file is generated by Android MobileBiz Pro invoice app. I'm trying to make software for print HTML based invoice via receipt printer
I need to save necessary information of HTML file to string variable as mentioned below. I tried using IndexOf method. but it's not working for me. How can I get this information using visual c#?
string subtotal = 2,976.00;
string total = 2,976.00;
string payment= 2,760.00;
string balance= 216.00;
This is an example of the HTML code:
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
This is a complete HTML code of HTML file
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font-family:Verdana, Geneva, sans-serif;
font-size: 8pt;
padding: 0 50pt 0 50pt;
}
table td, table th, table.sales th, table td.footer-text {
font-size: 8pt;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
color:chocolate;
text-transform:uppercase;
font-size: inherit;
font-size: 1.5em;
}
h2 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:0px;
margin-bottom:0px;
color:chocolate;
text-transform:uppercase;
font-size: 1.3em;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
padding-bottom:2px;
margin-bottom:2px;
}
table.sales td {
padding: 4px 10px 4px 10px;
}
table.sales th {
padding: 5px 10px 5px 10px;
background-color:#CCC;
}
tr.saleline td {
border-bottom-color:chocolate;
border-bottom-width: 1pt;
border-bottom-style: solid;
vertical-align: top;
}
.signature {
display: none;
}
.horizontal-line {
border: 0;
height: 4pt;
color:chocolate;
background-color: chocolate;
}
.total {
font-weight:bold;
font-size:1.1em;
background-color:#CCC;
}
.block1 {
text-align:left;
vertical-align:bottom
}
.block2 {
text-align:right;
vertical-align:bottom
}
.block3 {
text-align:left;
vertical-align:top;
}
.block4 {
text-align:left;
vertical-align:top;
}
.block5 {
text-align:right;
vertical-align:bottom;
}
.block6 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block7 {
text-align:left;
vertical-align:top;
margin-top: 15px;
}
.block8 {
text-align:left;
vertical-align:bottom;
}
.block9 {
text-align:center;
vertical-align:bottom;
}
.block10 {
text-align:right;
vertical-align:bottom;
}
.block11 {
text-align:left;
padding: 25px 0 15px 0;
}
.extracols {
border-style:solid;
border-color:gray;
}
table.extracols {
border-top-width: 1pt;
border-right-width: 0;
border-bottom-width: 1pt;
border-left-width: 1pt;
border-collapse:collapse;
margin: 0 0 15pt 0;
}
table.extracols th {
padding: 5px 10px 5px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#CCC;
}
table.extracols td {
padding: 4px 10px 4px 10px;
border-top-width: 0;
border-right-width: 1pt;
border-bottom-width: 0;
border-left-width: 0;
border-color:gray;
border-style:solid;
background-color:#FFF;
}
#footer {
margin-top: 35px;
}
.footer-text {
font-size: inherit;
font-size: 0.97em
}
</style>
</head>
<body style="padding: 20 20 20 20">
<table width="100%">
<tr>
<td style="padding-bottom:20px"><table width="100%">
<tr>
<td style="text-align:left;"></td>
<td class="block2" align="right"><h3>Y.P.Brothers</h3>
No:55/B,<br/>Samagipura,<br/>Sewanagala.
<br/>077-6977139
<br/>mecduino#gmail.com
<br/>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><hr class="horizontal-line"/></td>
</tr>
<tr>
<td><table width="100%">
<tr>
<td style="padding:10px 0 20px 0;"><table width="100%">
<tr>
<td width="33%" class="block3"><strong>Bill To</strong><br />
ANUSHA SURIYA<br/>
</td>
<td class="block4"><strong></strong><br />
</td>
<td class="block5" align="right"><h1>invoice #1</h1>
<b>Date</b>: Oct 9, 2015
<br/><b>Due Date</b>: Oct 9, 2015
</td>
</tr>
</table></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td><table width="100%" class="sales">
<!-- Headers -->
<tr>
<th align="center">Qty</th> <th align="center">Item</th> <th align="right">Price</th> <th align="right">Amount</th>
</tr>
<!-- Rows -->
<tr class="saleline"> <td align="left">12</td> <td align="left">helaligth 35/=</td> <td align="right">35.00</td> <td align="right">420.00</td> </tr>
<tr class="saleline"> <td align="left">12</td> <td align="left">200p CR SR 195/=</td> <td align="right">195.00</td> <td align="right">2,340.00</td> </tr>
<tr class="saleline"> <td align="left">36</td> <td align="left">Sunlight 35g</td> <td align="right">6.00</td> <td align="right">216.00</td> </tr>
<!-- Totals -->
<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" style="margin-top:30px">
<tr>
<td width="50%" class="block6"><h2></h2>
</td>
<td width="50%" class="block7" align="right"><h2></h2>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table class="block11" width="100%">
<tr>
<td><table></table></td>
</tr>
</table></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div class="signature">
<table border="0" cellspacing="2" cellpadding="2" align="left">
<tr>
<td style="padding-bottom:30px"></td>
</tr>
<tr>
<td><b>Signed by:</b>
<br/><b>Date:</b>
<br/><b>Signature:</b><br/></td>
</tr>
</table>
</div>
<div id="footer">
<table width="100%" border="0" cellpadding="2">
<tr>
<td align="center"><span class="footer-text">Thank you for your business.</span></td>
</tr>
</table>
</div>
</body>
</html>
You need an html parser, try this one http://htmlagilitypack.codeplex.com/
Load page into HtmlDocument
HtmlWeb htmlWeb = new HtmlWeb();
HtmlDocument htmlDocument = htmlWeb.Load("url");
Get table with specified Id
HtmlNode table = htmlDocument.DocumentNode.Descendants("table").SingleOrDefault(x => x.Id == "tableId");
Loop through nodes to find values
foreach(HtmlNode child in table.ChildNodes)
{
if (child.NodeType != HtmlNodeType.Text)
{
Console.WriteLine(child.Name);
}
}
More you can check here http://www.codeproject.com/Articles/691119/Html-Agility-Pack-Massive-information-extraction-f
You have to use parseHTML function of jquery and then loop through each element to get the values. Below is the working example (It can be more refined as per your need)
$(document).ready(function () {
var str = '<tr><td align="right" colspan="3">Subtotal</td><td align="right">2,976.00</td></tr><tr><td align="right" colspan="3"><b>TOTAL</b></td><td align="right"><b>2,976.00</b></td></tr><tr><td align="right" colspan="3">Less Payment</td><td align="right">2,760.00</td></tr><tr class="total"><td align="right" colspan="3"><strong>Balance Due</strong></td><td align="right">216.00</td></tr>';
var html = $.parseHTML(str);
$.each(html, function (index, element) {
if ($(this).find("td:first").html() == "Subtotal")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first b").html() == "TOTAL")
console.log($(this).find("td:last b").html());
else if ($(this).find("td:first").html() == "Less Payment")
console.log($(this).find("td:last").html());
else if ($(this).find("td:first strong").html() == "Balance Due")
console.log($(this).find("td:last").html());
});
});
aspx code
<asp:ModalPopupExtender ID="MPE" runat="server" BackgroundCssClass="modalBackground"
PopupControlID="pnlGame" CancelControlID="imgCloseBtn" TargetControlID="btnHidden">
</asp:ModalPopupExtender>
<asp:Button runat="server" ID="btnHidden" Style="display: none" />
<asp:Panel ID="pnlGame" runat="Server" CssClass="pnl">
<div class="MsgPopup">
<%--<fieldset class="">--%>
<table style="height: 100%; width: 100%;">
<tr>
<td colspan="2" style="padding-top: 5px; padding-left: 4px;">
<table border="0" class="" style="width: 500px;">
<tr>
<td align="center">
<img src="../img/exclaimationIcon.jpg" width="65px" height="56px" alt="" />
</td>
</tr>
<tr>
<td align="center">
<div id="GameName" style="font-size: medium; width: 500px; font-size: 17px; font-weight: bold;
font-family: Arial; color: Black; font-variant: normal">
Please select the Child, From and To Dates
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td align="center">
<asp:ImageButton ID="imgCloseBtn" runat="server" Height="38px" ImageUrl="~/img/okButton.jpg"
Width="91px" ToolTip="Close" CausesValidation="False" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</asp:Panel>
cs code:
ScriptManager.RegisterStartupScript(Page, this.GetType(), "TestInitPageScript031",
string.Format("<script type=\"text/javascript\">ShowReport();</script>"), false);
Javascript Code:
<script type="text/javascript">
function ShowReport() {
var Asgn1 = document.getElementById("<%=ddlAssignments.ClientID%>").value;
var Assn1 = document.getElementById("<%=ddlAssessment.ClientID%>").value;
var Asgn2 = document.getElementById("<%=ddlAssignments1.ClientID%>").value;
var Assn2 = document.getElementById("<%=ddlAssessment1.ClientID%>").value;
alert(Asgn1);
if (Asgn1 == 0)
{
$find('<%= MPE.ClientID %>').show();
return false;
}
}
</script>
Here is my brief code.Problem is my modal pop up is not displaying. I can trace by alret in alert i am getting 0; but modal pop up not displaying. Can anyone help me to resolve?
asp:ModalPopupExtender is a Server control.
If you want to show it you ave to post a server side Show() event; client side (javascript I mean) won't work.
If you need to work client side, using jQuery, you don't need a server side control: an hidden div set at the top of the window will be enough for you.
HTML
<div class="outerframe">
<div class="innerframe" >
...
CSS
.outerframe {
background: url('../Images/site-bg2.png');
width: 100%;
height: 100%;
position:absolute;
display:block;
text-align: center;
top: 0px;
left: 0px;
z-index: 1000;
}
.innerframe {
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1200px;
text-align: left;
overflow: auto;
background: #ffffff; /* Fills the page */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #eeeeee); /* for firefox 3.6+ */
}
Set BehaviorID for modal popup extender..
<asp:ModalPopupExtender ID="MPE" runat="server" BackgroundCssClass="modalBackground"
PopupControlID="pnlGame" CancelControlID="imgCloseBtn" BehaviorID="PopUp"TargetControlID="btnHidden">
</asp:ModalPopupExtender>
Javascript:
<script type="text/javascript">
function ShowReport() {
var Asgn1 = document.getElementById("<%=ddlAssignments.ClientID%>").value;
var Assn1 = document.getElementById("<%=ddlAssessment.ClientID%>").value;
var Asgn2 = document.getElementById("<%=ddlAssignments1.ClientID%>").value;
var Assn2 = document.getElementById("<%=ddlAssessment1.ClientID%>").value;
alert(Asgn1);
if (Asgn1 == 0)
{
$find("<%=ModalPopupExtender1.BehaviorID%>").show();
return false;
}
}
</script>
Refer this for extra reading..
I am using the following HTML page to make an accordion control:
<!DOCTYPE >
<html >
<head >
<title></title>
<script language="JavaScript" type="text/javascript" >
function Show() {
document.getElementById("tdfirst").style.display = 'block';
}
function Hide() {
document.getElementById("tdfirst").style.display = 'none';
}
function Show2() {
document.getElementById("tdsecond").style.display = 'block';
}
function Hide2() {
document.getElementById("tdsecond").style.display = 'none';
}
function Show3() {
document.getElementById("tdthird").style.display = 'block';
}
function Hide3() {
document.getElementById("tdthird").style.display = 'none';
}
</script>
<style type="text/css">
.style1 {
width: 164px;
}
.style2
{
height: 98px;
}
.style3
{
width: 110px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr style="border-style: solid; border-width: thin; border-color: inherit;">
<div id="div1" >
<td class="style1"
style="border: thin solid #000000; text-align: right;">
<table><tr><td>Menu1</td><td class="style3">
<img alt="" onclick="Show()" src="Image/down%20arrow.jpg"
style="height: 15px; margin-left: 0px" /><img
alt="" onclick="Hide()" src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
</div>
</tr>
<tr>
<div id="div2">
<td id="tdfirst" class="style2"
style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu1</td>
</div>
</tr>
</table>
<div>
<table>
<tr style="border-style: solid; border-width: thin; border-color: inherit;">
<div id="div3" >
<td class="style1"
style="border: thin solid #000000; text-align: right;">
<table><tr><td>Menu2</td><td class="style3">
<img alt="" onclick="Show2()" src="Image/down%20arrow.jpg"
style="height: 15px; margin-left: 0px" /><img
alt="" onclick="Hide2()" src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
</div>
</tr>
<tr>
<div id="div4">
<td id="tdsecond" class="style2"
style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu2</td>
</div>
</tr>
</table>
<table>
<tr style="border-style: solid; border-width: thin; border-color: inherit;">
<div id="div5" >
<td class="style1"
style="border: thin solid #000000; text-align: right;">
<table><tr><td>Menu3</td><td class="style3">
<img id="imgdown" alt="" onclick="Show3()" src="Image/down%20arrow.jpg"
style="height: 15px; margin-left: 0px" /><img id="imgup"
alt="" onclick="Hide3()" src="Image/up%20arrow.jpg" style="height: 15px" /></td></tr></table> </td>
</div>
</tr>
<tr>
<div id="div6">
<td id="tdthird" class="style2"
style="border: thin solid #000080; text-align: left;display:none;"; >SubMenu3</td>
</div>
</tr>
</table>
</div>
</form>
</body>
</html>
When I try to display this HTML in a WebBrowser control, nothing appears and the control is blank.
XAML:
<phone:WebBrowser HorizontalAlignment="Left" Margin="0" VerticalAlignment="Top" x:Name="webBrowser1" Grid.Row="1" IsScriptEnabled="True" />
.cs:
webBrowser1.Navigate(new Uri("/Html_Pages/AboutUs.html", UriKind.Relative));
Can anyone see what I'm doing wrong? I'm using VS2012 and the WP8 emulator.
Hope This will help you. NavigateToString()
private void goNavigateToStringButton_Click(object sender, RoutedEventArgs e)
{
// Load HTML document as a string
Uri uri = new Uri(#"pack://application:,,,/HTMLDocumentWithoutScript.html", UriKind.Absolute);
Stream stream = Application.GetResourceStream(uri).Stream;
using (StreamReader reader = new StreamReader(stream))
{
// Navigate to HTML document string
this.webBrowser.NavigateToString(reader.ReadToEnd());
}
}
from : NavigateToString() method
I am using Infragistics version 7.1 (NetAdvantage 2008 vol 3 ) . I have a problem with UltraWebGrid headers alignment. when the grid is shown the headers of columns lose their alignment in all browsers except IE from content and footers I have already searched a lot for solution. Some solutions i tried are as follows:
1) Setting UseFixedHeaders to False.
2) Adding HtmlTextWriter in Render Event.
3) Setting Percentages for width rather than pixels.
4) Setting percentages for headers along with columns.
5) Adding Scrollbar button to Header along with other contents.
I cannot remove/ replace infragistics grid with some other sorcery. Any guidance will be highly appreciated.
Aspx File:
<%# Register Assembly="Infragistics2.WebUI.UltraWebGrid.ExcelExport.v7.1, Version=7.1.20071.40, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.UltraWebGrid.ExcelExport" TagPrefix="igtblexp" %>
<%# Register Assembly="Infragistics2.WebUI.Misc.v7.1, Version=7.1.20071.40, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.Misc" TagPrefix="igmisc" %>
<%# Register Assembly="Infragistics2.WebUI.UltraWebGrid.v7.1, Version=7.1.20071.40, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.UltraWebGrid" TagPrefix="igtbl" %>
<asp:Content ID="Content2" runat="Server" ContentPlaceHolderID="ContentPlaceHolder1">
<script language="javascript" type="text/javascript">
function SetVerticalScrollBar() {
var div = document.getElementById('ctl00xContentPlaceHolder1xgridReportMain_div');
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;
var div1 = document.getElementById('ctl00xContentPlaceHolder1xgridReportMain_hdiv');
// alert(hasVerticalScrollbar);
if (hasVerticalScrollbar) {
div1.style.overflowY = 'scroll';
} else {
div1.style.overflowY = 'hidden';
}
}
</script>
<igmisc:WebAsyncRefreshPanel ID="WebAsyncRefreshPanel1" runat="server" Height="100%"
InitializePanel="WebAsyncRefreshPanel1_InitializePanel" RefreshComplete="WebAsyncRefreshPanel1_RefreshComplete" Width="100%"
ToolTip="Filter Records" RefreshTargetIDs="lblTest">
<igtbl:UltraWebGrid ID="gridReportMain" runat="server" OnInitializeLayout="gridReportMain_InitializeLayout"
OnInitializeRow="gridReportMain_InitializeRow" OnPageIndexChanged="gridReportMain_PageIndexChanged"
OnSortColumn="gridReportMain_SortColumn" Style="left: 0px; top: 0px" OnItemCommand="gridReportMain_ItemCommand"
Height="380px" Width="1000px">
</igtbl:UltraWebGrid>
</igmisc:WebAsyncRefreshPanel>
Aspx.cs File
protected override void Render(HtmlTextWriter writer)
{
StringBuilder sb = new StringBuilder();
HtmlTextWriter tw = new HtmlTextWriter(new System.IO.StringWriter(sb));
//Render the page to the new HtmlTextWriter which actually writes to the stringbuilder
base.Render(tw);
//Get the rendered content
string sContent = sb.ToString();
// sContent=Util.SetCaptionWidth(sContent, gridReportMain);
sContent = Util.HandleColGroup(sContent, null);
//Now output it to the page, if you want
writer.Write(sContent);
// .... render using the provided writUtier
}
public void BindGrid()
{
gridReportMain.Columns.FromKey("col1").Width = Unit.Percentage(8);
gridReportMain.Columns.FromKey("col1").CellStyle.HorizontalAlign = HorizontalAlign.Center;
gridReportMain.Columns.FromKey("col2").Width = Unit.Percentage(17);
gridReportMain.Columns.FromKey("col2").CellStyle.HorizontalAlign = HorizontalAlign.Center;
gridReportMain.Columns.FromKey("col3").Width = Unit.Percentage(35);
gridReportMain.Columns.FromKey("col3").CellStyle.Wrap = true;
gridReportMain.Columns.FromKey("col3").CellStyle.HorizontalAlign = HorizontalAlign.Left;
gridReportMain.Columns.FromKey("col4").Width = Unit.Percentage(20);
gridReportMain.Columns.FromKey("col4").CellStyle.HorizontalAlign = HorizontalAlign.Center;
gridReportMain.Columns.FromKey("col5").CellStyle.Width = Unit.Percentage(20);
gridReportMain.Columns.FromKey("col5").CellStyle.HorizontalAlign = HorizontalAlign.Right;
}
//Rendered HTML of code by chrome browser is as follows
<div id="ctl00_ContentPlaceHolder1_WebAsyncRefreshPanel1" style="width: 100%; height: 100%;">
<input type="hidden" id="ctl00_ContentPlaceHolder1_gridReportMain" name="ctl00xContentPlaceHolder1xgridReportMain" value="">
<table border="0" cellpadding="0" cellspacing="0" id="ctl00xContentPlaceHolder1xgridReportMain_main" style="overflow: hidden; table-layout: fixed; position: relative; width: 100%; height: 420px;" class="ig_a92c6fb9_0" onresize="igtbl_onResize('ctl00xContentPlaceHolder1xgridReportMain');" onmousemove="igtbl_tableMouseMove(event,'ctl00xContentPlaceHolder1xgridReportMain');" onmouseup="igtbl_tableMouseUp(event,'ctl00xContentPlaceHolder1xgridReportMain');">
<tbody>
<tr style="">
<td align="left" style="overflow: hidden; width: 100%;">
<div id="ctl00xContentPlaceHolder1xgridReportMain_hdiv" onscroll="igtbl_onStationaryMarginScroll(event, 'ctl00xContentPlaceHolder1xgridReportMain', 'ctl00xContentPlaceHolder1xgridReportMain_hdiv')" style="overflow: hidden; width: 100%; position: relative;">
<table border="0" cellpadding="0" cellspacing="0" style="position: relative; table-layout: fixed; height: 100%; left: 0px;" bandno="0" width="100%">
<colgroup>
<col width="3%">
<col width="8%">
<col width="17%">
<col width="35%">
<col width="20%">
<col width="">
</colgroup>
<thead class="ig_a92c6fb9_2 ig_a92c6fb9_4" onmousedown="igtbl_headerClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_headerClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_headerMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_headerMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_headerMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_headerContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");" ondblclick="igtbl_cellDblClick(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<tr>
<th width="22px" height="21px">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_0" columnno="0" height="21px">
<nobr>col1</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_1" columnno="1" height="21px">
<nobr>Col2</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_2" columnno="2" height="21px">
<nobr>col3</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_3" columnno="3" height="21px">
<nobr>Col4</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_c_0_4" columnno="4" height="21px">
<nobr>col5</nobr>
</th>
</tr>
</thead>
</table>
</div>
</td>
</tr>
<tr id="ctl00xContentPlaceHolder1xgridReportMain_mr" style="height: 100%;">
<td id="ctl00xContentPlaceHolder1xgridReportMain_mc" align="left" style="height: 100%; width: 100%; vertical-align: top;">
<div id="ctl00xContentPlaceHolder1xgridReportMain_div" style="overflow: hidden; overflow-y: auto; width: 100%; height: 100%;" onscroll="igtbl_onScroll(event,"ctl00xContentPlaceHolder1xgridReportMain");" tabindexpage="0" hidefocus="true">
<table id="G_ctl00xContentPlaceHolder1xgridReportMain" bandno="0" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%; position: relative;" onselectstart="igtbl_selectStart(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousedown="igtbl_cellClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_cellClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_cellContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_cellMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_cellMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_cellMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" ondblclick="igtbl_cellDblClick(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<colgroup>
<col width="3%">
<col width="8%">
<col width="17%">
<col width="35%">
<col width="20%">
<col width="">
</colgroup>
<thead class="ig_a92c6fb9_2 ig_a92c6fb9_4" style="height: 21px; display: none;" onmousedown="igtbl_headerClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_headerClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_headerMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_headerMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_headerMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_headerContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<tr>
<th height="21px">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<th id="Th1" columnno="0" height="21px"> </th>
<th id="Th2" columnno="1" height="21px"> </th>
<th id="Th3" columnno="2" height="21px"> </th>
<th id="Th4" columnno="3" height="21px"> </th>
<th id="Th5" columnno="4" height="21px"> </th>
</tr>
</thead>
<tbody style="height: 100%" class="ig_a92c6fb9_2 ig_a92c6fb9_4">
<tr id="ctl00xContentPlaceHolder1xgridReportMain_r_0" style="height: 21px;" level="0">
<th id="ctl00xContentPlaceHolder1xgridReportMain_l_0" style="width: 22px; height: 21px;">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<td class="ig_a92c6fb9_15" level="0_0" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_0">
<nobr>1</nobr>
</td>
<td class="ig_a92c6fb9_16" level="0_1" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_1">
<nobr><div style="text-align:center">row1col2</div></nobr>
</td>
<td class="ig_a92c6fb9_17" level="0_2" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_2">
<div style="text-align: left">Row1Col3</div>
</td>
<td class="ig_a92c6fb9_18" level="0_3" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_3">
<nobr><div style="text-align:center">row1col4</div></nobr>
</td>
<td class="ig_a92c6fb9_19" level="0_4" id="ctl00xContentPlaceHolder1xgridReportMain_rc_0_4">
<nobr><div style="text-align:right">row1col5</div></nobr>
</td>
</tr>
</tbody>
<tfoot class="ig_a92c6fb9_2 ig_a92c6fb9_4 ig_a92c6fb9_5" style="height: 21px;" onmousedown="igtbl_headerClickDown(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseup="igtbl_headerClickUp(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseout="igtbl_headerMouseOut(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmousemove="igtbl_headerMouseMove(event,"ctl00xContentPlaceHolder1xgridReportMain");" onmouseover="igtbl_headerMouseOver(event,"ctl00xContentPlaceHolder1xgridReportMain");" oncontextmenu="igtbl_headerContextMenu(event,"ctl00xContentPlaceHolder1xgridReportMain");">
<tr>
<th height="21px">
<img src="/WebResource.axd?d=7pWSBIm8MJIGEb1Wa5NJl8vAQvyUcqnpFOduPjzVgdJugewSUhKHTQd6piYU4mvepwpZ0y9a-4ZQxtK6QCPcx7x1pdSR9sId6hyI6JggZaIW2Azd88swUnViW5RwSJFzBhHQxK_x-HAm2_7aBziVikxEEMyVFLgBQCk5MN44TpZWHnFoRlSrLaRv4OPBV-S3SAn5Jw2&t=634992170622404219" border="0" imgtype="blank" style="visibility: hidden;"></th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_0" height="21px" key="col1"> </th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_1" height="21px" key="col2">
<nobr>Total</nobr>
</th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_2" height="21px" key="col3"> </th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_3" height="21px" key="SubmissionDate"> </th>
<th id="ctl00xContentPlaceHolder1xgridReportMain_f_0_4" height="21px" key="TotalValueOfServices">
<nobr>10,302</nobr>
</th>
</tr>
</tfoot>
</table>
</div>
</td>
</tr>
<tr style="height: 1%">
<td id="ctl00$ContentPlaceHolder1$gridReportMain_pager" align="Right" class="ig_a92c6fb9_0 ig_a92c6fb9_1" style="border-top-width: 0px; height: 100%;" onclick="igtbl_onPagerClick('ctl00xContentPlaceHolder1xgridReportMain',event)"> </td>
</tr>
</tbody>
</table>
</div>