Print html table in 2 columns per page with fixed header - c#

i need to print some content in a way that it maximizes space and fills the whole page. For splitting content in 2 columns i do this on server side. I have a list and divide it in half. While this worked when i did it directly on the content coming from database, it does not work after i grouped countent by classes in order to not repeat information. Hence why everything looks uneven on the html page.
AbastecimentosColuna1 = referenciasList.Take(referenciasList.Count() / 2).ToList();
AbastecimentosColuna2 = referenciasList.Skip(referenciasList.Count() / 2).ToList();
In other words, how can keep content adjusted to whole page? Or is there any other way to split content in 2 columns without splitting the array from server side?
content
<div class="row">
<div class="col-6 table-responsive">
<table class="table table-sm table-bordered border-dark text-center">
<thead>
<tr>
<th>Referência</th>
<th>Qtd. Abastecimento</th>
<th>Peças Por Caixa</th>
<th>Nº Caixas</th>
<th>Localização - Etiqueta FIFO</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.AbastecimentosColuna1)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Referencia)
</td>
<td>
#Html.DisplayFor(modelItem => item.QtdAbastecimento)
</td>
<td>
#Html.DisplayFor(modelItem => item.QtdPecasPorCaixa)
</td>
<td>
#Html.DisplayFor(modelItem => item.QtdCaixas)
</td>
<td>
#foreach (var localizacao in item.Localizacoes)
{
<div class="row py-2">
<div class="col-6">
#localizacao.Localizacao
</div>
<div class="col-6">
#foreach (var etiqueta in localizacao.Etiquetas)
{
#etiqueta.Etiqueta
<br />
}
</div>
</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="col-6 table-responsive">
<table class="table table-sm table-bordered border-dark text-center">
<thead>
<tr>
<th>Referência</th>
<th>Qtd. Abastecimento</th>
<th>Peças Por Caixa</th>
<th>Nº Caixas</th>
<th>Localização - Etiqueta FIFO</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.AbastecimentosColuna2)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Referencia)
</td>
<td>
#Html.DisplayFor(modelItem => item.QtdAbastecimento)
</td>
<td>
#Html.DisplayFor(modelItem => item.QtdPecasPorCaixa)
</td>
<td>
#Html.DisplayFor(modelItem => item.QtdCaixas)
</td>
<td>
#foreach (var localizacao in item.Localizacoes)
{
<div class="row py-2">
<div class="col-6">
#localizacao.Localizacao
</div>
<div class="col-6">
#foreach (var etiqueta in localizacao.Etiquetas)
{
#etiqueta.Etiqueta
<br />
}
</div>
</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>

Related

Problem in recognizing some classes in bootstrap for PDF conversion in ASP.NET MVC using C#

I have an Html string generated by Bootstrap, I want to convert this text to PDF using the HtmlToPdfConverter library, but the problem is that it doesn't recognize all the cols and lowers the cols and the PDF file It does not create HTML as an image.
Html markup:
<html>
<head><meta charset="utf-8"><meta http-equiv="content-type" content="text/html; charset=UTF8">
<link href='***/font.css' rel="stylesheet"/>
<link href='*****/bootstrap.min.css' rel='stylesheet'/>
<link href='****/main.css' rel='stylesheet'/>
<link href='****/main-light-color.css' rel='stylesheet'/>
<link href='****/css-controller.css' rel='stylesheet'/>
</head>
<body>
<div class="page-wrapper">
<div class="main-container">
<div class="row gutters justify-content-center font15">
<div style="text-align: center;">
<strong>BaseTitre</strong>
</div>
</div>
<div class="row gutters justify-content-center">
<div class="col-12">
<div class="card-body">
<div class="row gutters">
<div class="list-group-item justify-content-between col-3">
<span class="font12 IranSansBold t-pink">Sample 0</span>
</div>
<div class="list-group-item justify-content-between col-3"> Sample1: <span class="font12 IranSansBold">***** </div>
<div class="list-group-item justify-content-between col-3"> Sample2: <span class="font12 IranSansBold">*****</span>
</div>
<div class="list-group-item justify-content-between col-3"> Sample3: <span class="font12 IranSansBold">****</span>
</div>
</div>
</div>
</div>
</div>
<div class="row gutters justify-content-center">
<div class="col-3">
<div class="table-responsive">
<table class="table custom-table m-0">
<thead>
<tr>
<td colspan="2" style="background-color: #229954;" class="text-center IranSansBold font12 text-white">****</td>
</tr>
</thead>
<tbody>
<tr>
<td>*****</td>
<td class="font12 IranSansBold">****</td>
</tr>
<tr>
<td>****</td>
<td class="font12 IranSansBold">*****</td>
</tr>
<tr>
<td>****</td>
<td class="font12 IranSansBold">****</td>
</tr>
<tr>
<td>****</td>
<td class="font12 IranSansBold">*****</td>
</tr>
<tr>
<td>***</td>
<td class="font12 IranSansBold">****</td>
</tr>
<tr>
<td>*****</td>
<td class="font12 IranSansBold">****</td>
</tr>
<tr>
<td>****</td>
<td class="font12 IranSansBold">****</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-3">
<div class="table-responsive">
<table class="table custom-table m-0">
<thead>
<tr>
<td colspan="2" style="background-color: #e74c3c;" class="text-center IranSansBold font12 text-white">****</td>
</tr>
</thead>
<tbody>
<tr>
<td>*****</td>
<td class="font12 IranSansBold">*****</td>
</tr>
<tr>
<td>*****</td>
<td class="font12 IranSansBold">*****</td>
</tr>
<tr>
<td>*****</td>
<td class="font12 IranSansBold">****</td>
</tr>
<tr>
<td>****</td>
<td class="font12 IranSansBold">****</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-3">
<div class="table-responsive">
<table class="table custom-table m-0">
<thead>
<tr>
<td colspan="3" style="background-color: #884ea0;" class="text-center IranSansBold font12 text-white">****</td>
</tr>
</thead>
<thead>
<tr>
<td class="text-center IranSansBold font12 text-black-50">****</td>
<td class="text-center IranSansBold font12 text-black-50">****</td>
<td class="text-center IranSansBold font12 text-black-50">****</td>
</tr>
</thead>
<tbody>
<tr>
<td>******</td>
<td class="font12 IranSansBold">*****</td>
<td class="font12 IranSansBold">*****</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-3">
<div class="table-responsive">
<table class="table custom-table m-0">
<thead>
<tr>
<td colspan="2" style="background-color: #2e86c1;" class="text-center IranSansBold font12 text-white">***</td>
</tr>
</thead>
<tbody>
<tr>
<td>*****</td>
<td class="font12 IranSansBold">***</td>
</tr>
<tr>
<td>****</td>
<td class="font12 IranSansBold">***</td>
</tr>
<tr>
<td>*****</td>
<td class="font12 IranSansBold">***</td>
</tr>
<tr>
<td>******</td>
<td class="font12 IranSansBold">***</td>
</tr>
<tr>
<td>****</td>
<td class="font12 IranSansBold">***</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row gutters justify-content-center mt-2">
<div class="col-12">
<div class="card-body">
<div class="bg-dark text-center p-2 text-white">*****</div>
<div class="row gutters mx-1">
<div class="list-group-item text-dark justify-content-between col-4"> ***** : <span class="font12 IranSans badge badge-success">****</span>
</div>
<div class="list-group-item text-dark justify-content-between col-4"> **** : <span class="font12 IranSansBold">****</span>
</div>
<div class="list-group-item text-dark justify-content-between col-4"> **** <span class="font12 IranSansBold">****</span>
</div>
<div class="list-group-item text-dark justify-content-between col-4"> **** : <span class="font12 IranSansBold">***</span>
</div>
<div class="list-group-item text-dark justify-content-between col-4"> **** : <span class="font12 IranSansBold">****</span>
</div>
<div class="list-group-item text-dark justify-content-between col-4"> **** <span class="font12 IranSansBold">****</span>
</div>
<div class="list-group-item text-dark justify-content-between col-4"> *** <span class="font12 IranSansBold">****</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
C# for converting Html to PDF:
[HttpPost]
[Route("GeneratedHtmlToPdf")]
[NoCache]
public HttpResponseMessage GeneratedHtmlToPdf(GeneratedHtmlToPdfRequest request)
{
try
{
var pdf = new HtmlToPdfConverter()
{
Orientation = PageOrientation.Landscape,
Size = PageSize.A4,
LowQuality = false
};
var response = new HttpResponseMessage(HttpStatusCode.OK)
{
Content = new StreamContent(new MemoryStream(pdf.GeneratePdf(request.Html)))
};
response.Content.Headers.ContentType =
new System.Net.Http.Headers.MediaTypeHeaderValue("application/pdf");
return response;
}
catch
{
return null;
}
}
HTML screenshot:
But the final file looks like this:

Scrollable list

I have table with data that I display at table
Here is Controller
public ActionResult Index()
{
return View(db.Companies.ToList());
}
Here is View
#foreach (var item in Model)
{
<tr>
<td class="point">
#(rowNo += 1)
</td>
<td class="title" style="text-align: center; font-size:20px">
#Html.DisplayFor(modelItem => item.CompanyName)
</td>
<td class="title" style="text-align: center; font-size:20px">
#Html.DisplayFor(modelItem => item.Vacancies.FirstOrDefault().VacancyName)
</td>
<td style="text-align: end;">
<a href='#Url.Action("Edit", "Companies", new {id = item.CompanyID})'>
<img src='#Url.Content("~/Images/Edit.png")'/>
</a>
<a href='#Url.Action("Delete", "Companies", new {id = item.CompanyID})'>
<img src='#Url.Content("~/Images/Delete.png")'/>
</a>
</td>
</tr>
}
Vacancies is Related Data Table to Companies
Company may have 1-10 Vacancies.
How I can show all Vacancies via scrollable list here <td class="title" style="text-align: center; font-size:20px">
#Html.DisplayFor(modelItem => item.Vacancies.FirstOrDefault().VacancyName)
</td>

Assuming that Vacancies is an IEnumerable, or similar collection object (probably is given your use of FirstOrDefault), you could simply iterate them, much the same way you're iterating the Companies list:
#foreach (var item in Model)
{
<tr>
<td class="point">
#(rowNo += 1)
</td>
<td class="title" style="text-align: center; font-size:20px">
#Html.DisplayFor(modelItem => item.CompanyName)
</td>
<td class="title" style="text-align: center; font-size:20px">
<div style="height: 100px; overflow-y: scroll">
#foreach (var vacancy in item.Vacancies)
{
<div>#Html.DisplayFor(v => vacancy.VacancyName)</div>
}
</div>
</td>
<td style="text-align: end;">
<a href='#Url.Action("Edit", "Companies", new {id = item.CompanyID})'>
<img src='#Url.Content("~/Images/Edit.png")'/>
</a>
<a href='#Url.Action("Delete", "Companies", new {id = item.CompanyID})'>
<img src='#Url.Content("~/Images/Delete.png")'/>
</a>
</td>
</tr>
}
On an unrelated note, you could, and arguably should, stick to double quotes for HTML attributes:
<img src="#Url.Content("~/Images/Edit.png")" />

how to pass a label value to session variable in c# in asp.net

How to pass a label value to session variable in c# in asp.net?
The subtotal label shows the value but does not pass any value into session variable: .session["subtotal"]=subtotal.text;
my code below could you please help #
<%# Page Title="" Language="C#" MasterPageFile="~/SiteProduct.Master" AutoEventWireup="true" CodeBehind="Checkout.aspx.cs" Inherits="Ecommerce.Checkout" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!-- check out -->
<div class="container">
<div class="check-sec">
<div class="col-md-3 cart-total">
<a class="continue" href="Default.aspx">Continue to basket</a>
<div class="price-details">
<h3>Price Details</h3>
<span>Total</span>
<div class="total">
<span class="simpleCart_total"></span> </div>
<span>Discount</span>
<span class="total1">$00.00</span>
<span>Delivery Charges</span>
<span class="total1">$00.00(free)</span>
<div class="clearfix"></div>
</div>
<ul class="total_price">
<li class="last_price"> <h4>TOTAL</h4></li>
<div class="total">
<span class="simpleCart_total"></span> </div>
</ul>
<div class="clearfix"></div>
<div class="clearfix"></div>
<a class="order" href="Checkoutsignin.aspx">Place Order</a>
</div>
<div class="col-md-9 cart-items">
<h1>My Shopping Bag </h1>
<%--here cart view start 06/06/2016 --%>
<table style="width:100%;" class="table table-hover">
<ul >
<tr style="width:100%;" >
<td style="width:100%;color:red;background-color:lightblue;margin:10px;display:inline-block;padding:18px;" class="simpleCart_items">
</td>
</tr>
</ul>
<tr >
<td> </td>
<td> </td>
<td> </td>
<td><h5>Subtotal</h5></td>
<td>
<div><asp:Label ID="subtotal" class="simpleCart_total" runat="server"></asp:Label></div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Estimated shipping</h5></td>
<td><div class="simpleCart_shipping"></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td>
<div id="grandtotal" class="simpleCart_grandTotal"></div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><a class="order" href="Checkoutsignin.aspx">FinalCheckout</a></td>
<td style="visibility:hidden"> <asp:TextBox ID="myTextBox" runat="server"></asp:TextBox> </td>
</tr>
</table>
<%-- here cart view end 06/06/2016--%>
<%-- This part is close start 07/06/2016--%>
<%-- This part is close End 07/06/2016--%>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //check out -->
</asp:Content>

Try this:
<asp:Label ID="subtotal" Text="SomeText" class="simpleCart_total" runat="server"></asp:Label>
<%Session["subtotal"] = subtotal.Text; %>

Tab Indexing not working in Grid

![enter image description here][1]In my application, I have used the MVC telerik grid, bounded with input textboxes. While I run the application in Internet Explorer and the Chrome browser, the tab indexing in working fine and control is moving from one textbox to the other. But when using the Firefox browser, the tab indexing is moving from table row to table row and highlighting the complete cell.
Please help me to fix this.
<div class="appln-cnt-c2">
<div class="frm-fldrow">
<div class="appln-txtrow" style="width: 800px; position: relative; left: 45px;">
#{
Html.Telerik().Grid(Model.FacultyCompositions)
.Name("FacultyComositionGrid")
.DataKeys(keys => keys.Add(m => m.FacultyCompositionPK))
.ClientEvents(events => events.OnComplete("FacultyComositionGrid_onComplete").OnError("FacultyComositionGrid_onError").OnDelete("OnDelete").OnEdit("OnEdit"))
.Columns(columns =>
{
columns.Bound(m => m.EthnicityDescription)
.Title("<strong>Ethnicity</strong>").Width(180).Filterable(false).Sortable(false).ReadOnly(true);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear1Male" #(Model.ReadOnlyFacultyCompositionNew[0])#(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear1Female" #(Model.ReadOnlyFacultyCompositionNew[0]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" />
</td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[0] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[0]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear2Male" #(Model.ReadOnlyFacultyCompositionNew[1]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<div style="position: relative;">
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear2Female" #(Model.ReadOnlyFacultyCompositionNew[1]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" />
</div>
</td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[1] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[1]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear3Male" #(Model.ReadOnlyFacultyCompositionNew[2]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
</td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear3Female" #(Model.ReadOnlyFacultyCompositionNew[2]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" /></td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[2] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[2]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(20);
columns.Template(#<text>
<table cellspacing="0" cellpadding="0">
<tr id="data">
<td>
<input type="text" class="FacultyCompositionTextbox" value="#item.FCYear4Male" #(Model.ReadOnlyFacultyCompositionNew[3]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" /></td>
<td>
<input class="FacultyCompositionTextbox" type="text" value="#item.FCYear4Female" #(Model.ReadOnlyFacultyCompositionNew[3]) #(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
<input class="FacultyCompositionTextbox" type="hidden" value="#item.EthnicityPK" /></td>
</tr>
</table>
</text>)
.HeaderTemplate(
#<text>
<table cellspacing="0" cellpadding="0">
#if (Model.FacultyCompositionColumnHeader[3] != "")
{
<tr>
<td colspan="2"><strong>#Model.FacultyCompositionColumnHeader[3]</strong></td>
</tr>
<tr>
<td><span>M</span></td>
<td><span>F</span></td>
</tr>
}
else
{
<tr>
<td colspan="2"><strong></strong></td>
</tr>
<tr>
<td><span></span></td>
<td><span></span></td>
</tr>
}
</table>
</text>).Width(60);
})
.DataBinding(dataBinding => dataBinding.Ajax())
.ABAGridConfiguration(true)
.KeyboardNavigation(kbd => kbd.EditOnTab(false))
.Render();
}
</div>
</div>
</div>

Finally found the solution :)
Steps Invloved :
1. To find the associated key value with TAB key
2. Once Keydown event fires focus moves to next control
$('input.FacultyCompositionTextbox').keydown(function(event) {
if(event.which == 9) {
//alert('a');
$(this).next('input.FacultyCompositionTextbox').focus();
}
});
Regards,
Praveen Nelge

Parsing HTML with XPath following Categories

I have the following HTML structure, each tr tag is separated with each other, so when i tried to parse with XPATH, it is supposed to have 2 subitems for just one category, but with my code below it selects all 4 subitems into 1 category, so each category has 4 subitems instead of just 2.
<table class="available">
<tbody>
<tr>
<td class="catname" colspan="2">
<span>Category 1</span>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem1-1
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="preprice">
<strong class="price">39.99 €</strong>
</div>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem1-2
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="preprice">
<strong class="price">49.99 €</strong>
</div>
</td>
</tr>
<tr>
<td class="catname" colspan="2">
<span>Category 2</span>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem2-1
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="preprice">
<strong class="price">59.99 €</strong>
</div>
</td>
</tr>
<tr>
<td rowspan="2" colspan="1" class="itemdetail">
<div class="subname">
SubItem2-2
</div>
</td>
<td class="precioseleccion desgloseth">
<div class="tooltip3">
<strong class="price">69.99 €</strong>
</div>
</td>
</tr>
</tbody>
</table>
var doc = new HtmlDocument(); // with HTML Agility pack
doc.LoadHtml(uricontent);
var rooms = doc.DocumentNode
.SelectNodes("//table[#class='available']//td[#class='catname']")
.Select(r => new
{
Type= r.InnerText.CleanInnerText(),
SubTypes= r.SelectNodes("../..//tr//td[#class='itemdetail']//div[#class='subname']")
.Select(s => new
{
SubType= s.InnerText.CleanInnerText(),
Price =
s.SelectSingleNode(".//parent::td/following-sibling::td[#class='allprice']//div[#class='preprice']//strong[#class='price']")
.InnerText.CleanInnerText()
}).ToArray()
}).ToArray();

If I understand your question correctly, to select all the Categories you want //tr[td[#class='catname']], and to select their sub-items you want following-sibling::tr/td[div[#class='subname']].

Categories