Load data while scrolling the page (Like facebook)

I found some very very nice articles regarding this topic. Those URLs are given bellow –

Load data while scrolling-down an webpage with JQuery, AJAX & ASP.Net

How to Create an Infinite Scrolling Gallery in 10 Minutes

Rendering GridView Rows when scrolling down using AJAX concept

jQuery-paged-scroll: Facebook like infinite scroll for you site

jquery-paged-scroll – different approach for infinite scroll.Replace your old pagination easily.

Use GridView BoundField as hyperlink

Let’s say, You have UserId & UserName columns in a gridview. You can use UserName column as hyperlink. The code is following-

<asp:BoundField DataField=”UserId”
HeaderText=”User Id” />

<asp:HyperLinkField
DataTextField=”UserName”    //Datatable column name
DataNavigateUrlFields=”UserId”   //Value is taken from this field dynamically
DataNavigateUrlFormatString=”UserDetails.aspx?ID={0}”    //Page name with a place holder for dynamic data UserId
HeaderText=”User Name” />

Hyperlinked BoundField made easy.

.rdlc Report in ASP.Net

Note: Add a ScriptManager on the .aspx where the ReportViewer is placed.

using Microsoft.Reporting.WebForms;
try
{
dsTest ds = new dsTest();
DataTable dt = ds.Tables[0];

DataRow dr = dt.NewRow();
dr[0] = “1”; dr[1] = “A”;
dt.Rows.Add(dr);

ReportViewer1.Reset();

ReportViewer1.ProcessingMode = Microsoft.Reporting.WebForms.ProcessingMode.Local;

ReportDataSource rds = new ReportDataSource(“testReport”, dt);
ReportViewer1.LocalReport.DataSources.Add(rds);

ReportViewer1.LocalReport.ReportEmbeddedResource = “RdlcTestForDelete.testReport.rdlc”;

ReportViewer1.LocalReport.Refresh();
}
catch (Exception Ex)
{
throw Ex;
}

CHANGE TEXTBOX BACKGROUND COLOR ON FOCUS

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title></title>
<style>
input[type=text], textarea
{
border: 1px solid #ccc;
}
input[type=text]:focus, textarea:focus
{
background-color: #FFBFFF;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
ASP.Net<br />
<br />
<asp:TextBox ID=”TextBox2″ runat=”server”></asp:TextBox><br />
<br />
<asp:TextBox ID=”TextBox1″ runat=”server” TextMode=”MultiLine”></asp:TextBox><br />
<br />
<br />
</form>
</body>
</html>

 

This article has been taken from here.

HTML5 Best Practices: Table formatting via CSS3

<!DOCTYPE html>
<head>
<title>ALTERNATE TABLE ROWS | HTML5, CSS3</title>

<style type=”text/css”>

/*** central column on page ***/
div#divContainer
{
max-width: 800px;
margin: 0 auto;
font-family: Calibri;
padding: 0.5em 1em 1em 1em;

/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* add gradient */
background-color: #808080;
background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#808080));
background: -moz-linear-gradient(top, #606060, #808080);

/* add box shadows */
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

h1 {color:#FFE47A; font-size:1.5em;}

/*** sample table to demonstrate CSS3 formatting ***/
table.formatHTML5 {
width: 100%;
border-collapse:collapse;
text-align:left;
color: #606060;
}

/*** table’s thead section, head row style ***/
table.formatHTML5 thead tr td {
background-color: White;
vertical-align:middle;
padding: 0.6em;
font-size:0.8em;
}

/*** table’s thead section, coulmns header style ***/
table.formatHTML5 thead tr th
{
padding: 0.5em;
/* add gradient */
background-color: #808080;
background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
background: -moz-linear-gradient(top, #606060, #909090);
color: #dadada;
}

/*** table’s tbody section, odd rows style ***/
table.formatHTML5 tbody tr:nth-child(odd) {
background-color: #fafafa;
}

/*** hover effect to table’s tbody odd rows ***/
table.formatHTML5 tbody tr:nth-child(odd):hover
{
cursor:pointer;
/* add gradient */
background-color: #808080;
background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
background: -moz-linear-gradient(top, #606060, #909090);
color: #dadada;
}

/*** table’s tbody section, even rows style ***/
table.formatHTML5 tbody tr:nth-child(even) {
background-color: #efefef;
}

/*** hover effect to apply to table’s tbody section, even rows ***/
table.formatHTML5 tbody tr:nth-child(even):hover
{
cursor:pointer;
/* add gradient */
background-color: #808080;
background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
background: -moz-linear-gradient(top, #606060, #909090);
color: #dadada;
}

/*** table’s tbody section, last row style ***/
table.formatHTML5 tbody tr:last-child {
border-bottom: solid 1px #404040;
}

/*** table’s tbody section, separator row pseudo-class ***/
table.formatHTML5 tbody tr.separator {
/* add gradient */
background-color: #808080;
background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
background: -moz-linear-gradient(top, #606060, #909090);
color: #dadada;
}

/*** table’s td element, all section ***/
table.formatHTML5 td {
vertical-align:middle;
padding: 0.5em;
}

/*** table’s tfoot section ***/
table.formatHTML5 tfoot{
text-align:center;
color:#303030;
text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}
</style>

</head>
<body>

<!– CENTTERED COLUMN ON THE PAGE–>
<div id=”divContainer”>

<h1>ANNUALIZED INFLATION RATE ON SELECTED PRODUCTS |NYC 2000-2010</h1>

<!– HTML5 TABLE FORMATTED VIA CSS3–>
<table class=”formatHTML5″ >

<!– TABLE HEADER–>
<thead>
<tr><td colspan=3>DISCLAIMER: ALL DATA PROVIDED ‘AS IS’ FOR DEMO PURPOSE ONLY</td></tr>
<tr>
<th>Product</th><th>Inflation Rate</th><th>Note</th>
</tr>
</thead>

<!– TABLE BODY: MAIN CONTENT–>
<tbody>
<tr>
<td>Coke® Inflation Index</td><td>7.23%</td><td>Yeah, it’s about $2/bottle now</td>
</tr>
<tr>
<td>Gas Inflation Index</td><td>6.94%</td><td>Such a pain at the pump!</td>
</tr>
<tr>
<td>NY subway fare Inflation Index</td><td>4.14%</td><td><a href=”http://www.youtube.com/watch?v=Q07Zp7tQBRQ&#8221;
target=”_blank” title=”Listen to the music”>I want to ride my bicycle (Queens)</a></td>
</tr>
<tr>
<td>Oil (WTI) Inflation Index estimated</td><td>13.59%</td><td>Wow!</td>
</tr>
<tr>
<td>Post Stamp Inflation Index</td><td>2.92%</td><td>Email is still free</td>
</tr>
<tr>
<td>PC RAM (memory) Inflation Index</td><td>-28.34%</td><td>Rejoyce “Intel Inside”!</td>
</tr>

<!–SEPARATOR ROW USED DIFFERENT STYLE–>
<tr class=”separator”>
<td colspan=”3″>Precious metals Price Index: shown for comparison</td>
</tr>
<tr>
<td>Silver</td><td>20.94%</td><td><a href=”http://exm.nr/AuAgPt&#8221; target=”_blank” title=”Read the article online”>Element Ag</a></td>
</tr>
<tr>
<td>Gold</td><td>17.86%</td><td><a href=”http://exm.nr/AuAgPt&#8221; target=”_blank” title=”Read the article online”>Element Au</a></td>
</tr>
<tr>
<td>Platinum</td><td>10.98%</td><td><a href=”http://exm.nr/AuAgPt&#8221; target=”_blank” title=”Read the article online”>Element Pt</a></td>
</tr>
<tr>
<td>Palladium</td><td>-1.86% </td><td><a href=”http://exm.nr/AuAgPt&#8221; target=”_blank” title=”Read the article online”>Element Pd</a></td>
</tr>
</tbody>

<!– TABLE FOOTER–>
<tfoot>
<tr><td colspan=”3″>Copyright &#9400 2011 Infosoft International Inc</td></tr>
</tfoot>
</table>
</div>
</body>
</html>

 

This article has been taken from here.