I'm using Bootstrap3 to working on my home view page in Visual Studio, but the carousel control icon shows different between sever side(looks like square) and localhost(looks normal), is anything I missed? Thank you so much for the help!
I attached the carousel part of my code below:
<div class="col-lg-5">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol> -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<table id="Report_InvHardCatExpiring-table" class="table table-striped styleTable table-hover" style="border:2px;">
<caption>Hardware expiring 90 days out.</caption>
<thead>
<tr bgcolor="#a0bac4">
<th>
#Html.LabelFor(model => model.Report_InvHardwareAggregateCat.FirstOrDefault().InvHardwareCatName)
</th>
<th>
#Html.LabelFor(model => model.Report_InvSoftwareAggregateCat.FirstOrDefault().CountType)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Report_InvHardwareAggregateCat)
{
<tr>
<td>
#item.InvHardwareCatName
</td>
<td>
#item.CountType
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="item">
<table id="Report_InvSoftCatExpiring-table" class="table table-striped styleTable table-hover" style="border:2px;">
<caption>Software expiring 90 days out.</caption>
<thead>
<tr bgcolor="#a0bac4">
<th>
#Html.LabelFor(model => model.Report_InvSoftwareAggregateCat.FirstOrDefault().InvSoftwareCatName)
</th>
<th>
#Html.LabelFor(model => model.Report_InvSoftwareAggregateCat.FirstOrDefault().CountType)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Report_InvSoftwareAggregateCat)
{
<tr>
<td>
#item.InvSoftwareCatName
</td>
<td>
#item.CountType
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="item">
<table id="Report_InvFurnitureCatExpiring-table" class="table table-striped styleTable table-hover" style="border:2px;">
<caption>Furniture expiring 90 days out.</caption>
<thead>
<tr bgcolor="#a0bac4">
<th>
#Html.LabelFor(model => model.Report_InvFurnitureAggregateCat.FirstOrDefault().InvFurnitureCatName)
</th>
<th>
#Html.LabelFor(model => model.Report_InvFurnitureAggregateCat.FirstOrDefault().CountType)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Report_InvFurnitureAggregateCat)
{
<tr>
<td>
#item.InvFurnitureCatName
</td>
<td>
#item.CountType
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="item">
<table id="Report_InvHardware_ByProdTypeByAmount-table" class="table table-striped styleTable table-hover" style="border:2px;">
<caption>Hardware category by cost.</caption>
<thead>
<tr bgcolor="#a0bac4">
<th>
#Html.LabelFor(model => model.Report_InvHardware_ByProdTypeByAmount.FirstOrDefault().Name)
</th>
<th>
#Html.LabelFor(model => model.Report_InvHardware_ByProdTypeByAmount.FirstOrDefault().CountInvProductTypeID)
</th>
<th>
#Html.LabelFor(model => model.Report_InvHardware_ByProdTypeByAmount.FirstOrDefault().SumAmount)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Report_InvHardware_ByProdTypeByAmount)
{
<tr>
<td>
#item.Name
</td>
<td>
#item.CountInvProductTypeID
</td>
<td>
#item.SumAmountFormatted
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="background-image: none;">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" style="background-image: none;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
What it shows on my server:
enter image description here
What it shows on my localhost:
enter image description here
Related
I'm trying to delete the 3rd and 4th <td> and <th> from my table using HtmlAgilityPack.
Example table string:
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Change</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2>Top Menu Items</h2>
</td>
</tr>
<tr>
<td> Diced Angus Steak <span>(7oz)</span></td>
<td>$13.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Kimchi Cheese Beef Pepper Rice</td>
<td>$15.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Classic Beef Pepper Rice</td>
<td>$13.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td>
<h2>Steaks</h2>
</td>
</tr>
<tr>
<td> Angus Rib Eye Steak <span>(8oz)</span></td>
<td>$25.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Angus Sirloin Steak <span>(8oz)</span></td>
<td>$22.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Diced Angus Steak <span>(7oz)</span> <span>(Steaks)</span></td>
<td>$13.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Chicken Breast Steak <span>(8oz)</span></td>
<td>$14.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Premium Hamburger Steak <span>(10oz)</span></td>
<td>$16.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td>
<h2>Pepper Rice</h2>
</td>
</tr>
<tr>
<td> Sambar Pepper Rice</td>
<td>$13.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Kimchi Cheese Beef Pepper Rice <span>(Pepper Rice)</span></td>
<td>$15.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Chicken Pepper Rice</td>
<td>$13.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Salmon Pepper Rice</td>
<td>$15.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Classic Beef Pepper Rice <span>(Pepper Rice)</span></td>
<td>$13.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td>
<h2>Sides</h2>
</td>
</tr>
<tr>
<td> Rice</td>
<td>$3.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Miso Soup</td>
<td>$3.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Sauteed String Beans</td>
<td>$4.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Sauteed Corn</td>
<td>$4.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Kimchi</td>
<td>$5.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> French Fries</td>
<td>$4.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Onion Rings</td>
<td>$5.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Deep Fried Dumpling</td>
<td>$8.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Sausages</td>
<td>$7.50</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td>
<h2>Salad</h2>
</td>
</tr>
<tr>
<td> Large Salad</td>
<td>$7.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Small Salad</td>
<td>$3.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Large Seaweed Salad</td>
<td>$9.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
<tr>
<td> Small Seaweed Salad</td>
<td>$5.00</td>
<td>
- -
</td>
<td>
<span>
</span>
<span>
</span>
</td>
</tr>
</tbody>
</table>
I send the following string to this method, to remove the 3rd and 4th <td> and <th>.
public static string deleteCols(string table)
{
var doc = new HtmlDocument();
doc.LoadHtml(table);
bool first = true;
foreach (HtmlNode row in doc.DocumentNode.SelectNodes("//tr"))
{
if (first)
{
try
{
var th3 = row.SelectSingleNode("th[3]");
row.RemoveChild(th3);
}
catch
{
}
try
{
var th4 = row.SelectSingleNode("th[4]");
row.RemoveChild(th4);
}
catch
{
}
first = false;
}
else
{
try
{
var td3 = row.SelectSingleNode("td[3]");
row.RemoveChild(td3);
}
catch
{
}
try
{
var td4 = row.SelectSingleNode("th[4]");
row.RemoveChild(td4);
}
catch
{
}
}
}
foreach (HtmlNode row2 in doc.DocumentNode.SelectNodes("//span"))
{
row2.Remove();
}
return doc.DocumentNode.InnerHtml;
}
Which gives me the following result:
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h2>Top Menu Items</h2>
</td>
</tr>
<tr>
<td> Diced Angus Steak </td>
<td>$13.50</td>
<td>
</td>
</tr>
<tr>
<td> Kimchi Cheese Beef Pepper Rice</td>
<td>$15.00</td>
<td>
</td>
</tr>
<tr>
<td> Classic Beef Pepper Rice</td>
<td>$13.50</td>
<td>
</td>
</tr>
<tr>
<td>
<h2>Steaks</h2>
</td>
</tr>
<tr>
<td> Angus Rib Eye Steak </td>
<td>$25.50</td>
<td>
</td>
</tr>
<tr>
<td> Angus Sirloin Steak </td>
<td>$22.50</td>
<td>
</td>
</tr>
<tr>
<td> Diced Angus Steak </td>
<td>$13.50</td>
<td>
</td>
</tr>
<tr>
<td> Chicken Breast Steak </td>
<td>$14.00</td>
<td>
</td>
</tr>
<tr>
<td> Premium Hamburger Steak </td>
<td>$16.00</td>
<td>
</td>
</tr>
<tr>
<td>
<h2>Pepper Rice</h2>
</td>
</tr>
<tr>
<td> Sambar Pepper Rice</td>
<td>$13.50</td>
<td>
</td>
</tr>
<tr>
<td> Kimchi Cheese Beef Pepper Rice </td>
<td>$15.00</td>
<td>
</td>
</tr>
<tr>
<td> Chicken Pepper Rice</td>
<td>$13.50</td>
<td>
</td>
</tr>
<tr>
<td> Salmon Pepper Rice</td>
<td>$15.00</td>
<td>
</td>
</tr>
<tr>
<td> Classic Beef Pepper Rice </td>
<td>$13.50</td>
<td>
</td>
</tr>
<tr>
<td>
<h2>Sides</h2>
</td>
</tr>
<tr>
<td> Rice</td>
<td>$3.00</td>
<td>
</td>
</tr>
<tr>
<td> Miso Soup</td>
<td>$3.00</td>
<td>
</td>
</tr>
<tr>
<td> Sauteed String Beans</td>
<td>$4.00</td>
<td>
</td>
</tr>
<tr>
<td> Sauteed Corn</td>
<td>$4.00</td>
<td>
</td>
</tr>
<tr>
<td> Kimchi</td>
<td>$5.00</td>
<td>
</td>
</tr>
<tr>
<td> French Fries</td>
<td>$4.00</td>
<td>
</td>
</tr>
<tr>
<td> Onion Rings</td>
<td>$5.00</td>
<td>
</td>
</tr>
<tr>
<td> Deep Fried Dumpling</td>
<td>$8.00</td>
<td>
</td>
</tr>
<tr>
<td> Sausages</td>
<td>$7.50</td>
<td>
</td>
</tr>
<tr>
<td>
<h2>Salad</h2>
</td>
</tr>
<tr>
<td> Large Salad</td>
<td>$7.00</td>
<td>
</td>
</tr>
<tr>
<td> Small Salad</td>
<td>$3.00</td>
<td>
</td>
</tr>
<tr>
<td> Large Seaweed Salad</td>
<td>$9.00</td>
<td>
</td>
</tr>
<tr>
<td> Small Seaweed Salad</td>
<td>$5.00</td>
<td>
</td>
</tr>
</tbody>
</table>
As you can see, some of the elements I wish to delete are still there. Does anybody know what I'm doing wrong here?!
When you remove the 3rd th/tds from the row's children, the 4th item becomes the 3rd, so you're trying to remove a non-existing element.
As a solution, you can either store the elements in variables at first, and then delete them; or you can start removing from the 4th index.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How to uncheck parent check box when one of the child check box is unchecked in asp.net mvc by JavaScript or any other manually created check box in asp.net mvc.
Code
<div class="admFunction">
<table class="table table-bordered">
<thead id="Finances">
<tr>
<th colspan="10">
<input type="checkbox" class="checkAll" id="Financescheck" onchange="CheckRootValue('Finances')">
Finances
</th>
<th class="text-center">
All
</th>
</tr>
</thead>
<tbody>
<tr>
<div id="erer">
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanApproveCreditTransfer, new { #class = "Finances checkAll" })
</th>
<td colspan="8">
Approve Credit Transfers
</td>
<td colspan="2" class="text-center">
</td>
</tr>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanViewTransactionCreditHistory, new { #class = "Finances checkAll" })
</th>
<td colspan="8">
View Transactions/Credit History
</td>
<td colspan="2" class="text-center">#Html.CheckBoxFor(model => model.CanViewTransactionCreditHistoryMasterAccess)
</td>
</tr>
</tbody>
<thead id="Projects">
<tr>
<th colspan="11">
<input type="checkbox" class="checkAll" id="Projectscheck" onchange="CheckRootValue('Projects')">
Projects
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanViewEditProjects, new { #class = "Projects checkAll" })
</th>
<td colspan="8">
View/Edit Projects
</td>
<td colspan="2" class="text-center">#Html.CheckBoxFor(model => model.CanViewEditProjectsMasterAccess)
</td>
</tr>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanViewManageReports, new { #class = "Projects checkAll" })
</th>
<td colspan="8">
View/Manage Reports
</td>
<td colspan="2" class="text-center">#Html.CheckBoxFor(model => model.CanViewManageReportsMasterAccess)
</td>
</tr>
</tbody>
<thead id="People">
<tr>
<th colspan="11">
<input type="checkbox" class="checkAll" id="Peoplecheck" onchange="CheckRootValue('People')">
People
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanCreateNewEditProfilers, new { #class = "People checkAll" })
</th>
<td colspan="8">
Create New/Edit Profilers
</td>
<td colspan="2" class="text-center">#Html.CheckBoxFor(model => model.CanCreateNewEditProfilersMasterAccess)
</td>
</tr>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanCreateNewEditCoachesReferents, new { #class = "People checkAll" })
</th>
<td colspan="8">
Create New/Edit Coaches & Referents
</td>
<td colspan="2" class="text-center">#Html.CheckBoxFor(model => model.CanCreateNewEditCoachesReferentsMasterAccess)
</td>
</tr>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanViewPeopleTracker, new { #class = "People checkAll" })
</th>
<td colspan="8">
View People-Tracker
</td>
<td colspan="2" class="text-center">#Html.CheckBoxFor(model => model.CanViewPeopleTrackerMasterAccess)
</td>
</tr>
</tbody>
<thead id="Advanced">
<tr>
<th colspan="11">
<input type="checkbox" id="Advancedcheck" class="checkAll" onchange="CheckRootValue('Advanced')">
Advanced
</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanDownloadFastData, new { #class = "Advanced checkAll" })
</th>
<td colspan="8">
Download Fast Data
</td>
<td colspan="2" class="text-center">
</td>
</tr>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanEditItemsEmailTemplates, new { #class = "Advanced checkAll" })
</th>
<td colspan="8">
Edit Items and Email Templates
</td>
<td colspan="2" class="text-center">
</td>
</tr>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanEditResources, new { #class = "Advanced checkAll" })
</th>
<td colspan="8">
Edit Resources
</td>
<td colspan="2" class="text-center">
</td>
</tr>
<tr>
<th style="width: 20px">#Html.CheckBoxFor(model => model.CanManageAdminFunctions, new { #class = "Advanced checkAll" })
</th>
<td colspan="8">
Manage Admin Functions
</td>
<td colspan="2" class="text-center">
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="12">
<input type="checkbox" id="select-all">
Select All
</th>
</tr>
</thead>
</table>
</div>
You can do that in following way.
$(".table tbody input[type=checkbox]").each(function(){
if(!$(this).is(":checked")){
$(".table thead#Finances").find("input[type=checkbox]").removeAttr("checked");
}
});
if ($('#childCb1').checked && $('#childCb1').checked && $('#childCb1').checked)
{
$('#parentCb').checked = true;
}
else
{
$('#parentCb').checked = false;
}
use the above code inside a function, call that function from onChange event of each child check box.
Hello in my ASP Dot Net c# website i have an html report is there.Now i want to take a printout of the same.So i used Javascript and its showing only the content as a raw information.So how can i display both content and its css .
Javascript
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementsByClassName('widget-content')[0];
var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
button Click
<input type="button" onclick="PrintDiv()" value="Print" />
HTML Content
<div class="widget-content">
<div class="invoice-content">
<div class="invoice-head">
<div class="invoice-meta">
<%--Invoice <span class="invoice-number">#96558 </span><span class="invoice-date">Date:
2012-07-15</span>--%>
</div>
<h5 style="margin-left: 40%; height: 20px; font-size: large">
Order Form</h5>
<div class="invoice-to">
<ul>
<li><span>Booking Date:<asp:Label ID="dispbookingDate" runat="server"></asp:Label></span>
<span>Name<asp:Label TextMode="MultiLine" runat="server" ID="dispName"></asp:Label></span>
<span>Address:<asp:Label TextMode="MultiLine" runat="server" ID="dispAddress"></asp:Label></span>
</li>
</ul>
</div>
<div class="invoice-from">
<ul>
<li><span>Order No.<asp:Label ID="dispOrderNo" runat="server"></asp:Label></span> <span>
Wedding Date:<asp:Label runat="server" ID="dispWeddingDate"></asp:Label></span>
<span>Malayalam Date:<asp:Label runat="server" ID="dispWeddingMalayam"></asp:Label></span>
</li>
</ul>
</div>
</div>
<div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="style1">
Description
</th>
<th class="style2">
Rs.
</th>
<th>
Ps.
</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="total-label" colspan="2">
Total:
</th>
<th class="total-amount">
<asp:Label ID="dispTotal" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Adavance:
</th>
<th class="total-amount">
<asp:Label ID="dispAvance" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Balance:
</th>
<th class="total-amount">
<asp:Label ID="dispBalance" runat="server"></asp:Label>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="style1">
Auditorium Rent
</td>
<td class="style2">
<asp:Label ID="dispRent" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
Dining Hall Rent
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Kathir Mandapam
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Tables and chairs
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Electricity charge for water
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Luxuary Tax
</td>
<td class="style2">
<asp:Label ID="dispLTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Central Service Tax
</td>
<td class="style2">
<asp:Label ID="dispCTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<%-- <p class="amount-word">
Amount in Word: <span>
<asp:Label ID="dispAmountWord" runat="server"></asp:Label></span>
</p>--%>
</div>
<input type="button" onclick="PrintDiv()" value="Print" />
</div>
Have you tried:
popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
EDIT: I guess you should also close the body tag in this line
popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
Your code should be like this:
function PrintDiv() {
var divToPrint = document.getElementsByClassName('widget-content')[0];
var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><head><link href="yourstylesheet.css" rel="stylesheet" type="text/css"></head><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
popupWin.document.close();
}
</script>
You have to use only one document.write() then it will definitely work try it .... :D
Net c# website i have an html report is there.Now i want to take a printout of the same.So i used Javascript and its showing only the popup box ,not the content.how to solve this issue.
Javascript
<script type="text/javascript">
function PrintDiv() {
var divToPrint = document.getElementById('widget-content');
var popupWin = window.open('', '_blank', 'width=300,height=400,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
button Click
<input type="button" onclick="PrintDiv()" value="Print" />
HTML Content
<div class="widget-content">
<div class="invoice-content">
<div class="invoice-head">
<div class="invoice-meta">
<%--Invoice <span class="invoice-number">#96558 </span><span class="invoice-date">Date:
2012-07-15</span>--%>
</div>
<h5 style="margin-left: 40%; height: 20px; font-size: large">
Order Form</h5>
<div class="invoice-to">
<ul>
<li><span>Booking Date:<asp:Label ID="dispbookingDate" runat="server"></asp:Label></span>
<span>Name<asp:Label TextMode="MultiLine" runat="server" ID="dispName"></asp:Label></span>
<span>Address:<asp:Label TextMode="MultiLine" runat="server" ID="dispAddress"></asp:Label></span>
</li>
</ul>
</div>
<div class="invoice-from">
<ul>
<li><span>Order No.<asp:Label ID="dispOrderNo" runat="server"></asp:Label></span> <span>
Wedding Date:<asp:Label runat="server" ID="dispWeddingDate"></asp:Label></span>
<span>Malayalam Date:<asp:Label runat="server" ID="dispWeddingMalayam"></asp:Label></span>
</li>
</ul>
</div>
</div>
<div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="style1">
Description
</th>
<th class="style2">
Rs.
</th>
<th>
Ps.
</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="total-label" colspan="2">
Total:
</th>
<th class="total-amount">
<asp:Label ID="dispTotal" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Adavance:
</th>
<th class="total-amount">
<asp:Label ID="dispAvance" runat="server"></asp:Label>
</th>
</tr>
<tr>
<th class="total-label" colspan="2">
Balance:
</th>
<th class="total-amount">
<asp:Label ID="dispBalance" runat="server"></asp:Label>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="style1">
Auditorium Rent
</td>
<td class="style2">
<asp:Label ID="dispRent" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
Dining Hall Rent
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Kathir Mandapam
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Tables and chairs
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Electricity charge for water
</td>
<td class="style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Luxuary Tax
</td>
<td class="style2">
<asp:Label ID="dispLTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
Central Service Tax
</td>
<td class="style2">
<asp:Label ID="dispCTax" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<%-- <p class="amount-word">
Amount in Word: <span>
<asp:Label ID="dispAmountWord" runat="server"></asp:Label></span>
</p>--%>
</div>
<input type="button" onclick="PrintDiv()" value="Print" />
</div>
In your javascript you are searching for the div with id widget-content
your code: var divToPrint = document.getElementById('widget-content');
but in your html you have <div class="widget-content"> and it has no id, it only has a class.
So you have 2 options.
OPTION 1
Change class to id
OPTION 2
Change your javascript to search for the class like so
var divToPrint = document.getElementsByClassName('widget-content')
NOTE: this will return an array of elements with that class, whether theres only one or more.
So in order to select the one you want; assuming there is only 1 div with this class you do like so:
var divToPrint = document.getElementsByClassName('widget-content')[0]
I have my table looking like this:
#model IEnumerable<CalcFactory.Models.Calculation>
<div id="exportToExcelDiv">
<table cellspacing="0" width="80%" id"detailTable">
<thead>
<tr>
<th>
Row
</th>
<th>
Date
</th>
<th>
Invoice amount
</th>
<th>
Interest rate
</th>
<th>
Interest amount
</th>
<th>
Amortization
</th>
<th>
Capital balance
</th>
<th></th>
</tr>
</thead>
#{var i = true;}
#{var rowID = 0;}
#{var cellID = 1;}
#foreach (var item in Model) {
if (i)
{
<tr id="#rowID">
<td align="center">
#rowID
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center">
</td>
<td align="center" id="startValue">
#Html.DisplayFor(modelItem => item.StartValue)
</td>
</tr>
i = false;
rowID++;
}
<tr id="#rowID">
<td align="center">
#rowID
</td>
<td align="center" id="A-#cellID">
#Html.DisplayFor(modelItem => item.PeriodStartDate)
- #Html.DisplayFor(modelitem => item.PeriodEndDate)
</td>
<td align="center" id="B-#cellID">
#Html.DisplayFor(modelItem => item.InvoiceAmount)
</td>
<td align="center" id="C-#cellID">
#Html.DisplayFor(modelItem => item.InterestRate)
</td>
<td align="center" id="D-#cellID">
#Html.DisplayFor(modelItem => item.InterestAmount)
</td>
<td align="center" id="E-#cellID">
#Html.DisplayFor(modelItem => item.Amortization)
</td>
<td align="center" id="F-#cellID">
#Html.DisplayFor(modelItem => item.PresentValue)
</td>
</tr>
rowID++;
cellID++;
}
</table>
</div>
<div class="calcGraph">
#{
var myChart = new Chart(width: 400, height: 300);
}
I want to create a nice chart/graph that from this table. I have no idea how to bind or put the values from the table into myChart. Is there any way to do this?
You can use Microsoft Chat Control which is a part of Dotnet Framework
It has support for 35 different chart types.
You can find many samples here :
http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591
Integration of MS charts with MVC is very easy: Refer to this:
http://www.codeproject.com/Articles/125230/ASP-NET-MVC-Chart-Control
hope this helps..