......
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
</system.webServer>
</configuration>
/* HTML Selectors */
h1
{
font-family: Verdana, Calibry, Tahoma;
color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:21px;
text-decoration: bold;
}
h2
{
font-family: Verdana, Calibry, Tahoma;
color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:18px;
text-decoration: underline;
text-align:center;
}
p
{
font-family: Verdana, Calibry, Tahoma;
text-align:justify;
padding: 4px 4px 4px 4px;
}
/* Class Selectors */
.textBox
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding-right: 10px;
padding-left: 6px;
padding-top: 2px;
padding-bottom: 2px;
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
border: solid 1px black;
font-size: 13px;
text-decoration: none;
margin-left: 0px;
}
.button
{
font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
border-top: 1px solid #dec227;
background: #ffd800;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
background: -moz-linear-gradient(top, #ffd800, #65a9d7);
background: -ms-linear-gradient(top, #ffd800, #65a9d7);
background: #ffd800;
padding: 1px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
-webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 13px;
text-decoration: none;
vertical-align: middle;
height: 27px;
}
/* ID Selectors */
#footer {
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
font-size: 15px;
color: red;
background-color: #ffd800;
text-align:center;
}
<html>
<head>
<title>CSS Stylesheets & Selectors </title>
<style>
/* HTML Selectors */
h1
{
font-family: Verdana, Calibry, Tahoma;
color:green; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:21px;
text-decoration: bold;
}
h2
{
font-family: Verdana, Calibry, Tahoma;
color:blue; /* You are strictly suggested to use Hexa color code. Ex. #ff0000 etc. */
font-size:18px;
text-decoration: underline;
text-align:center;
}
p
{
font-family: Verdana, Calibry, Tahoma;
text-align:justify;
padding: 4px 4px 4px 4px;
}
/* Class Selectors */
.textBox
{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding-right: 10px;
padding-left: 6px;
padding-top: 2px;
padding-bottom: 2px;
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
border: solid 1px black;
font-size: 13px;
text-decoration: none;
margin-left: 0px;
}
.button
{
font-family: Calibri,Tahoma,'Segoe UI',Verdana, Geneva, 'DejaVu Sans', sans-serif;
border-top: 1px solid #dec227;
background: #ffd800;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #ffd800, #65a9d7);
background: -moz-linear-gradient(top, #ffd800, #65a9d7);
background: -ms-linear-gradient(top, #ffd800, #65a9d7);
background: #ffd800;
padding: 1px 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
-webkit-text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 13px;
text-decoration: none;
vertical-align: middle;
height: 27px;
}
/* ID Selectors */
#footer {
font-family: Calibri,Tahoma,Verdana,'Segoe UI';
font-size: 15px;
color: red;
background-color: #ffd800;
text-align:center;
}
</style>
</head>
<body>
<H1>Types of Selectors in CSS</H1>
<p>In this topic we will be discussing about different types of Selectors in CSS (Cascaded Style Sheets). You will learn about all kind of selectors with examples at the last of this post.</p>
<h2>1. HTML Selector</h2>
<p>As on this line, we did not applied any of stylesheet tags (class or ID). But you will see the changes in style of H1 , H2 and P tag. These are HTML Tags and automatically used by HTTP Web server as they are present in stylesheet.<p>
<h2>2. Class Selectors</h2>
<input type="text" class="textBox" name="FirstName" value="Enter your first Name." />
<input type="button" class="button" name="Submit" value="Click to Submit" />
<p>In above two lines we used class="textbox" and class="button". As in above stylesheet we have created them with period (.) and used with class attribute of HTML element, so these are called Class selectors.</p>
<h2>3. ID Selector</h2>
<p>We will be applying these settings in last of this webpage where we will write footer.</p>
<div id="footer">All Rights are reserved.</div>
</body>
</html>
text-align : left ;
<link href="path/to/file.css" rel="stylesheet">
<html>
<head>
<title>Introduction to CSS</title>
<style type="text/css">
h1
{
font-family: Calibri,Tahoma,Verdana, Geneva, 'DejaVu Sans', sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
</style>
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<h1>Introduction to CSS</h1>
<p style="text-align: justify;">This is random text in paragraph.Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme. Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign. Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another device.</p>
</body>
</html>
<asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false" AllowPaging="false" AlternatingRowStyle-BackColor="Linen" HeaderStyle-BackColor="SkyBlue" Width="100%" OnPageIndexChanging="gvProducts_PageIndexChanging" EmptyDataText="Sorry! No Products to List. First Add from Add Product Link.">
<Columns>
<asp:TemplateField HeaderText="Product ID">
<ItemTemplate>
<asp:Label ID="lblProductID" runat="server" Text='<%#Eval("ProductID")%>' ToolTip="ID of Product as stored in Database."></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:Label ID="lblProductName" runat="server" ToolTip="Name of Product" Text='<%#Eval("ProductName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Brand">
<ItemTemplate>
<asp:Label ID="lblBrandName" runat="server" ToolTip="Brand of Product" Text='<%#Eval("BrandName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="Category">
<ItemTemplate>
<asp:Label ID="lblProductCat" runat="server" ToolTip="Category of Product" Text='<%#Eval("CategoryName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<Columns>
<asp:TemplateField HeaderText="In Stock">
<ItemTemplate>
<asp:Label ID="lblProductinStock" runat="server" ToolTip="Quantity available in Stock"
Text='<%#Eval("UnitsInStock")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConToStore"].ConnectionString);
SqlDataAdapter adp = new SqlDataAdapter("Select * from Products,Brands,Category where Products.BrandID=Brands.BrandID and Products.CategoryID=Category.CategoryID", con);
DataSet ds = new DataSet();
adp.Fill(ds);
gvProducts.DataSource = ds.Tables[0];
gvProducts.DataBind();
}
}
<table width="70%" id="pnlGridView" runat="server" align="center" class="ContentTable">
<tr>
<td colspan="2" align="center">
<h1>All Products in Store</h1>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">
<asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false" AllowPaging="false"
AlternatingRowStyle-BackColor="Linen" HeaderStyle-BackColor="SkyBlue" Width="100%"
OnPageIndexChanging="gvProducts_PageIndexChanging"
EmptyDataText="Sorry! No Products to List. First Add from Add Product Link.">
...............
.............
</asp:GridView>
</td>
</tr>
<tr>
<td align="right">
<asp:LinkButton ID="lnkPrint" runat="server" ToolTip="Click to Print All Records" Text="Print Data" OnClick="lnkPrint_Click"></asp:LinkButton>
<asp:LinkButton ID="lnkExportAll" runat="server" ToolTip="Export this List" Text="Export to Excel" OnClick="lnkExportAll_Click"></asp:LinkButton>
<asp:LinkButton ID="lnkAddNew" runat="server" ToolTip="Add New Product"
Text="Add New" OnClick="lnkAddNew_Click"></asp:LinkButton>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function PrintPage() {
var printContent = document.getElementById('<%= pnlGridView.ClientID %>');
var printWindow = window.open("All Records", "Print Panel", 'left=50000,top=50000,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
}
</script>
Now lets click on Print Link button which we have created. Following will be output for above code.
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.pageName + ", " + data:blog.title' name='Keywords'/>
</b:if>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Rich Text Editor in Single TextArea among many</title>
</head>
<body>
<form id="form1" runat="server">
<h1>Rich Text Editor in Single TextArea among many</h1>
<fieldset>
<legend>Profile Update</legend>
<p>
<label>Name</label>
<input type="text" id="txtName" runat="server" />
</p>
<p>
<label>Gender</label>
<input type="radio" name="Gender" id="radioMale" runat="server" value="Male" />
<input type="radio" name="Gender" id="radioFemale" runat="server" value="Female" />
</p>
<p>
<label>Email ID</label>
<input type="text" id="txtEmail" runat="server" />
</p>
<p>
<label>About</label>
<textarea rows="5" cols="50" id="txtAbout" class="Editor" runat="server"></textarea>
</p>
<p>
<label>Remarks</label>
<textarea rows="2" cols="50" id="txtremarks" runat="server"></textarea>
</p>
<p>
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
<input type="reset" value="Clear Form" runat="server" />
</p>
</fieldset>
</form>
</body>
</html>
Here we are using TinyMCE version 4.0.xx. This version is major upgrade and has completely different look and internal architecture compared to version 3.xx. So here is some difference in its integration.<script src="script/tinymce/tinymce.min.js" type="text/javascript"></script>
<script type="text/javascript">
tinymce.init({
selector: ".Editor",
theme: "modern",
plugins: ["lists link image charmap print preview hr anchor pagebreak"],
});
</script>
</head>
<script type="text/javascript"
src="script/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" language="javascript">
tinyMCE.init({
// General options
// mode: "textareas",
// Set mode to Exact.
mode: "exact",
// Write the name of ID of TextArea where you want editor to appear in element property.
elements : "txtRemarks",
theme: "advanced",
plugins: "pagebreak,style,layer,table,save,
advhr,advimage,advlink,emotions,iespell,inlinepopups",
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
text-align: justify;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1 class="auto-style1">
Export to Word
</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Width="590px">
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
<br />
<asp:Button ID="Button1" runat="server" Font-Bold="True" OnClick="Button1_Click" Text="Export to Word" />
</div>
</form>
</body>
</html>
Now bind data to this gridview from backend.
protected void Page_Load(object sender, EventArgs e)
{
string ConString = "Server=.\\sqldb;database=Store;integrated security=true;";
SqlConnection con = new SqlConnection(ConString);
string QueryText = "SELECT DISTINCT Products.ProductName, Brands.BrandName, Category.CategoryName,
Products.UnitPrice, Products.UnitsInStock from products,brands,Suppliers,Category
where Products.BrandID=Brands.BrandID and Products.CategoryID=Category.CategoryID;";
SqlDataAdapter adp = new SqlDataAdapter(QueryText, con);
DataTable dt = new DataTable();
adp.Fill(dt);
GridView1.DataSource = dt.DefaultView;
GridView1.DataBind();
}
Let's view page in Browser. You must see data from your database. Mine query has resulted below data in grid.
public override void VerifyRenderingInServerForm(Control control)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition", string.Format("attachment;filename=Products.doc"));
Response.ContentType = "application/vnd.ms-word ";
StringWriter WriterForWord = new StringWriter();
HtmlTextWriter HTMLWriter = new HtmlTextWriter(WriterForWord);
GridView1.AllowPaging = false;
GridView1.DataBind();
GridView1.RenderControl(HTMLWriter);
Response.Output.Write(WriterForWord.ToString());
Response.Flush();
Response.End();
}
Its time to check our code, Click on Export to Word button. I have attached snapshot of Firefox because it prompts user.
.png)
<div align="center">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="DistID" DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Height="240px" Width="667px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="DistID" HeaderText="DistID" InsertVisible="False" ReadOnly="True" SortExpression="DistID" />
<asp:BoundField DataField="StateID" HeaderText="StateID" SortExpression="StateID" />
<asp:BoundField DataField="DistName" HeaderText="DistName" SortExpression="DistName" />
<asp:BoundField DataField="DistDesc" HeaderText="DistDesc" SortExpression="DistDesc" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>" SelectCommand="SELECT * FROM [Districts]"></asp:SqlDataSource>
</div>
..style="height:400px; overflow:auto".. //You can change overflow:auto to overflow:scroll but that will show both Scrollbar and always. Above will show Vertical Scrollbar only when the Height of GridView exceeds than assigned height.
<script>
function redirect()
{
//You change your Domain name just in place of "http://www.pyarb.com".
window.location = "http://www.pyarb.com/" + window.location.pathname;
}
</script>
...... ....... </head> <body onload="redirect();"> ......... .........
