I am trying to print one gridview . For that I gave a button and on button click I call javascript for printing tha grid.
function doPrint() {
var prtContent = document.getElementById('<%= grdHistoricalData.ClientID %>');
prtContent.border = 0; //set no border here
var WinPrint = window.open('', '', 'left=50,top=100,border=1px,width=1000,textAlign=center,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
WinPrint.document.write(prtContent.outerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
This code is working fine but only thing is that print preview of gridview data is displaying left align.Normally Girdview Data is showing center align but when we print data shows in left align.
Gridview normal appearance
Print Preview of Gridview
Please help to do center align in print preview of Gridview.
There are several solutions I use in different circumstances.
1) external file. Load a small file to a iframe and call for data from parent.
<!--print.html -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Printer version</title>
<script type="text/javascript">
window.onload = function () {
var a = this.parent.getContent();
document.body.innerHTML = a;
}
function printMe() {
window.print();
}
</script>
<link href="/Styles/print.css" media="print" rel="stylesheet" />
</head>
<body>
</body>
</html>
Parent document.
<div id="divPrint" style="display:none;">
<div class="popup">
<div style="overflow:hidden;">Printer Version
<div style="float:right;">
<input type="button" ID="btnPrnClose" value="X" onclick="return closePrint()" />
</div>
</div>
<iframe id="frPrint" style="width:100%;"></iframe>
</div>
</div>
</div>
<script type="text/javascript">
function getContent() {
return '<div>' +
'<div class="right no-print" onclick="printMe();" style="cursor: pointer;" title="Print"> \
<img alt="Print" src="/images/printer.png" /></div>' + document.getElementById('gvOuterContainer').innerHTML+ '</div>';
}
function closePrint() {
document.getElementById('divPrint').style.display = 'none';
}
function PrintMessage() {
document.getElementById('divPrint').style.display = '';
document.getElementById('frPrint').src = "print.html?a=" + Math.random();//force no-cache
return false;
}
</script>
2) Print from the page.
<style type="text/css" media="print">
*
{
border: none!important;
}
.noprint,.popup
{
display: none!important;
}
#scrollContainer
{
width: auto!important;
}
.pop-show
{
display: table!important;
left: 0;
margin-left: 0;
top: 0;
width: 100%!important;
z-index: 100;
}
/* and so on */
</style>
Details may differ.
Finally got answer , I need to set gridview property that resolve this issue
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
Related
I am using JQuery tabs in my Asp.Net/C# app.
I am modelling my approach after this article. The JQuery is outside of my
<asp:UpdatePanel ID="UpdatePanel1"...></asp:UpdatePanel>
wrapper while the html components are inside.
Whenever I click a button, my tabs completely lose their CSS styling and I see all of the tab contents, rather than just the
<div id="current-tab">
for that tab.
Why is this happening and how do I fix it?
My guess is that its related to post-back or the update panel somehow, but I am not sure why the added C# code under page_load doesn't keep the selected tab current on post-back when the button is fired.
ASPX
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var tabs = $("#tabs").tabs({
activate: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
tabs.tabs('select', selected_tab);
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
...
</script>
....
<table>
<tr>
<td style="padding: 5px;">
<div id="tabs">
<ul>
<li>Tier 1</li>
<li>Tier 2</li>
<li>Tier 3</li>
<li>Tier 4</li>
</ul>
<div class="tab-content">
<div id="tab-1">
...
</div>
<div id="tab-2">
...
</div>
<div id="tab-3">
...
</div>
<div id="tab-4">
...
</div>
</div>
</div>
<asp:HiddenField ID="selected_tab" runat="server" />
</td>
</tr>
</table>
C#
protected void Page_Load(object sender, EventArgs e)
{
...
selected_tab.Value = Request.Form[selected_tab.UniqueID];
...
}
You are right, it has something to do with a Partial PostBack. So in order for jquery functions to work again you need to rebind it after the Partial PostBack is done.
<script type="text/javascript">
$(document).ready(function () {
buildTabs();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
buildTabs();
});
function buildTabs() {
var tabs = $("#tabs").tabs({
activate: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
tabs.tabs('select', selected_tab);
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
}
</script>
But the selected tab is a different story. You also need to store the active tab somewhere and re-apply it after the partial PostBack is done. See this answer for details.
But basically you need to store the active tab ID in SessionStorage, cookie or Hiddden input and re-apply it in prm.add_endRequest(function () {
I have the following HTML code that is being displayed in a WebBrowser control:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Welcome</title>
<style type="text/css">
/*<![CDATA[*/
body {
font: 8pt Verdana;
background: ThreeDFace;
}
#appname {
line-height: 1;
}
#appname h1 {
margin: 0;
font: bold 10pt Verdana;
}
#appname p {
margin: 0;
}
#actions_list {
list-style-type: none;
padding: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var ACTION_NEWPROJECT = 0x0001;
var ACTION_NEWFILE = 0x0002;
var ACTION_OPENPROJECT = 0x0003;
var ACTION_OPENFILE = 0x0004;
//]]>
</script>
</head>
<body>
<div id="appname">
<h1>Application</h1>
<p>Slogan</p>
</div>
<div id="actions">
<ul id="actions_list">
<li>New project</li>
<li>New file</li>
<li>Open project</li>
<li>Open file</li>
</ul>
</div>
<div id="recentfiles">
<p>Recent files:</p>
<ul id="recentfiles_list"></ul>
</div>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var recentFiles = window.external.GetRecentFiles();
var recentFilesDOMContainer = document.getElementById("recentfiles_list");
for (var i = 0; i < recentFiles.length; i++) {
var index = 0+i;
var fileDOMParent = window.document.createElement("li");
var fileDOMElement = window.document.createElement("a");
fileDOMElement.href = "#";
fileDOMElement.onclick = function() {
window.external.OpenRecentFile(index);
return false;
};
fileDOMElement.innerText = recentFiles[i];
fileDOMParent.appendChild(fileDOMElement);
recentFilesDOMContainer.appendChild(fileDOMParent);
}
};
//]]>
</script>
</body>
</html>
To communicate with the application I am using the WebBrowser.ObjectForScripting property so I can access a class with functions via window.external. That is also working perfectly.
But when I try to open the page below I get the following error:
Script Error
Line: 61
Char: 25
Error: Function expected
Code 0
Why is this happening? It seems to occur at the for loop.
the only thing I can think of is that recentFiles does not have an array in it. Did you try opening the developer console and typing in recentFiles to see what it contains? :)
I recently started working on a new project and this time around, I started off with a clean INSPINIA v2.7 theme. I used an empty page template from that theme and started building a simple search page with some filters and a functioning Kendo Grid.
Now, this website will be published to two orientation of screens: Landscape 1920 x 1080 and Portrait 1600 x 2560. I need to make the Kendo Grid behave accordingly. I google myself to this guide: Resize and Expand the Kendo UI Grid to 100% Height. I see that the first case is what I need. But there is a very simple container hierarchy there and the demo works very well.
In a bootstrap powered website, the hierarchy is not that simple.
Here is the _Layout.cshtml:
#using DA.Services.IBS.Web.FinancePortalFull.Helpers
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>#ViewBag.Title | Finance System</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- Add local styles, mostly for plugins css file -->
#if (IsSectionDefined("Styles"))
{
#RenderSection("Styles", required: false)
}
<!-- Add jQuery Style direct - used for jQGrid plugin -->
<link href="#Url.Content("~/Scripts/plugins/jquery-ui/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<!-- Primary Inspinia style -->
#Styles.Render("~/Content/css")
#Styles.Render("~/font-awesome/css")
</head>
<body class="md-skin">
<!-- Wrapper-->
<!-- PageClass give you ability to specify custom style for specific view based on action -->
<div id="wrapper" class="#Html.PageClass()">
<!-- Navigation -->
#Html.Partial("_Navigation")
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg #ViewBag.SpecialClass">
<!-- Top Navbar -->
#Html.Partial("_TopNavbar")
<!-- Main view -->
#RenderBody()
<!-- Footer -->
#Html.Partial("_Footer")
</div>
<!-- End page wrapper-->
</div>
<!-- End wrapper-->
<!-- Section for main scripts render -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/kendo")
#Scripts.Render("~/plugins/slimScroll")
#Scripts.Render("~/bundles/inspinia")
<!-- Handler for local scripts -->
#RenderSection("scripts", required: false)
</body>
</html>
And below is the View itself. I have tried to follow the guide on the kendo link by adding the parent div at different levels but the div and the grid within doesn't render 100% at all.
#model DA.Services.IBS.Web.FinancePortalFull.Models.EpayTransactionFilterViewModel
#{
ViewBag.Title = "Filter";
}
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">...</ol>
</div>
<div class="col-lg-2">...</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<form method="post" action="#Url.Action("FilterReport", "EpayReconcile")">
<div class="ibox-content m-b-sm border-bottom">
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
<div class="row">...</div>
<div class="row">...</div>
</div>
<div id="parent">
<div class="ibox">
<div class="ibox-content m-b-sm border-bottom">
<div class="row">
<div class="col-lg-12">
#(Html.Kendo().Grid(Model.SearchResults).Name("GridSearchResults")...)
</div>
</div>
</div>
</div>
</div>
</form>
</div>
#section Styles {
#Styles.Render("~/plugins/dataPickerStyles")
#Styles.Render("~/Content/plugins/chosen/chosenStyles")
<style>
html,
body,
#parent,
#GridSearchResults {
margin: 0;
padding: 0;
border-width: 0;
height: 100%; /* DO NOT USE !important for setting the Grid height! */
}
html
{
overflow: hidden;
font: 13px sans-serif;
}
</style>
}
#section Scripts {
#Scripts.Render("~/plugins/dataPicker")
#Scripts.Render("~/plugins/chosen")
<script type="text/javascript">
var gridElement = $("#GridSearchResults");
function resizeGrid() {
gridElement.data("kendoGrid").resize();
}
$(window).resize(function(){
resizeGrid();
});
</script>
}
Also, just for reference, the two screenshots from respective screens:
I need to know how to make the grid and the required containers and divs expand vertically as per viewport
If this is successful, I'll attempt to deal with dynamic page sizing so that maximum data can be displayed
Update:
I have this dojo: http://dojo.telerik.com/#DoomerDGR8/owoSeN
It works perfectly keeping performance in mind. I just need to make it work for all the containers and panels starting from _Layout.cshtml all the way down to my cshtml.
Update 2:
I added this style to the target view with the grid:
<style>
#GridSearchResults {
border-width: 0;
width: 100%;
height: 100%;
min-height: 100%;
}
html, body {
height:100%;
}
.fill {
min-height: 100%;
height: 100%;
}
html
{
overflow:hidden;
}
</style>
Also, modified script, view with grid only:
<script type="text/javascript">
$(document).ready(function () {
setPageSize();
});
function resizeGrid() {
var gridElement = $("#GridSearchResults");
// console.log(gridElement);
gridElement.data("kendoGrid").resize();
setPageSize();
}
function setPageSize(){
var grid = $("#GridSearchResults").data("kendoGrid");
var windowHeight = $(window).height();
//Custom Logic for pageSize
if (windowHeight >= 1200) {
grid.dataSource.pageSize(40);
}
else if (windowHeight >= 1000) {
grid.dataSource.pageSize(35);
}
else if(windowHeight >= 900){
grid.dataSource.pageSize(30);
}
else if(windowHeight >= 700){
grid.dataSource.pageSize(25);
}
else if(windowHeight >= 400){
grid.dataSource.pageSize(20);
}else{
grid.dataSource.pageSize(10);
}
}
$(window).resize(function(){
resizeGrid();
});
</script>
I still get no resizing effect and the grid remains fixed width as shown in earlier screenshots yet the JS is working. Here is what chrome inspects and it is all wrong as my height directives are being overridden at various places:
You'll notice I added the fill class to the page wrapper in _layout.cshtml that will only get applied if user is on the target view where .fill is defined.
No avail.
I am trying to use the sample off of jqWidgets for the ListBox. I have copied the code directly into my index.cshtml file. I am not seeing the desired results, which would be what the sample looks like. All it is showing me is the button.
Here is a link to the page. I have reduced the content and allowed for anyone to look at it: https://drive.azurewebsites.net/Question
Here is the sample's website: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-getting-started.htm
I'm not sure how to troubleshoot this or where to look to see what is really going wrong. I am using Chrome and pulled up Inspect Element. The scripts are being retrieved.
Here is my code:
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
];
// Create a jqxListBox
$("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
// disable the sixth item.
$("#jqxlistbox").jqxListBox('disableAt', 5);
// bind to 'select' event.
$('#jqxlistbox').bind('select', function (event) {
var args = event.args;
var item = $('#jqxlistbox').jqxListBox('getItem', args.index);
$("#eventlog").html('Selected: ' + item.label);
});
$("#button").jqxButton();
$("#button").click(function () {
var item = $('#jqxlistbox').jqxListBox('getSelectedItem');
if (item != null) {
alert(item.label);
}
});
});
</script>
<div id='jqxlistbox'>
</div>
<div style="margin-top: 10px;">
<input id="button" type="button" value="Get Selected Item" />
<div id="eventlog"></div>
</div>
</div>
</body>
Your Scripts are not referenced correctly. In MVC4, the process of referencing Scripts is different - http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm
I am using slayeroffice's custom alert box, slayeroffice(period)com/code/custom_alert/. (Can't post more than two links) On my browser it shows up like this. The alert box is the blue one in the middle of the screen.
http://i.stack.imgur.com/u1TEz.png
On my local it shows up like this, I highlighted the alert box. I wish i could image link this.
It works on the same version version of browser but one of them is on local.
http://i.stack.imgur.com/0xehV.png
What am I doing wrong?
Here's my code integrated with slayeroffice's code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>
<%# Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript">
function showPopUp(){
setTimeout(function() {alert("Warning");}, 5000);
}
function delayer(){
showPopUp();
}
// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";
// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
window.alert = function(txt) {
createCustomAlert(txt); //overrides alert method
}
}
function createCustomAlert(txt) {
// shortcut reference to the document object
d = document;
// if the modalContainer object already exists in the DOM, bail out.
if(d.getElementById("modalContainer")) return;
// create the modalContainer div as a child of the BODY element
mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
// make sure its as tall as it needs to be to overlay all the content on the page
mObj.style.height = document.documentElement.scrollHeight + "px";
// create the DIV that will be the alert
alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
if(false) alertObj.style.top = document.documentElement.scrollTop + "px";
// center the alert box
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
// create an H1 element as the title bar
h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));
// create a paragraph element to contain the txt argument
msg = alertObj.appendChild(d.createElement("p"));
msg.innerHTML = txt;
// create an anchor element to use as the confirmation button.
btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
// set up the onclick event to remove the alert when the anchor is clicked
btn.onclick = function() { removeCustomAlert();return false; }
}
// removes the custom alert from the DOM
function removeCustomAlert() {
document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
</script>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="delayer();return false;" />
</form>
</body>
</html>
You are missing the styles:
<style type="text/css">
#modalContainer {
background-color:transparent;
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:10000;
background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}
#alertBox {
position:relative;
width:300px;
min-height:100px;
margin-top:50px;
border:2px solid #000;
background-color:#F2F5F6;
background-image:url(alert.png);
background-repeat:no-repeat;
background-position:20px 30px;
}
#modalContainer > #alertBox {
position:fixed;
}
#alertBox h1 {
margin:0;
font:bold 0.9em verdana,arial;
background-color:#78919B;
color:#FFF;
border-bottom:1px solid #000;
padding:2px 0 2px 5px;
}
#alertBox p {
font:0.7em verdana,arial;
height:50px;
padding-left:5px;
margin-left:55px;
}
#alertBox #closeBtn {
display:block;
position:relative;
margin:5px auto;
padding:3px;
border:2px solid #000;
width:70px;
font:0.7em verdana,arial;
text-transform:uppercase;
text-align:center;
color:#FFF;
background-color:#78919B;
text-decoration:none;
}
</style>