ASP.Net: Bind data into a template column

Suppost that we have a Grid View, with the property "AutoGenerateColumns" sat to false, when we declare a set of bound columns, it is easy to fill the data into the right column by giving each column the matching field name using the property "DataField". and just bind the data like this:

gridview1.DataSource = OurCollection
gridview1.DataBind()

But what if we needed to give a template column contains a check box or maybe a DropDownList a value from the database. in the same way. well no it is not so right to loop on each row and set the value manually.


the correct way is so simple just give the checked value a binded value like this:

Checked='< % # Bind("property or database field name") % > '

Java script Random Draw

If you need to draw randomly from a group of options, and remove the winner from the options; this is the right choice for you.!

Although this example is not that hard if it was applied on any "code behind" language; I decided to increase my javascript skills doing this example; and I wanted to share it with you.

The simple example conaint an input control to display the result and a button to perform the draw; in addition to 16 inputs to enter the results; the user will right up to 16 options or less; and on pressing the button the selected option will be removed.

function PickRandomly( ){

var Array= [ ]; // We will need an array to hold the options in.
var controlID;

var i =1;

while (i<=16) // Check on all the inputs if it is not empty; add the ID to the array.
{
controlID = "var" + i; // Control ID
if (document.getElementById(controlID).value != "")
{
Array.push(controlID);
}
i = i+1;
}

// We have an array filled with the IDs of the available

if (Array.length > 0)
{
var randomnumber=Math.floor(Math.random()*Array.length); // Generate a random number from zero to the maximum length of the array
document.getElementById("result").value = document.getElementById(Array[randomnumber]).value ; // Show the result.
document.getElementById(Array[randomnumber]).value = ""; // and remove it from the available options
}

Please find a running sample here.

Countdown javascript timer

After being desperate from finding any piece of javascript code to implement a countdown timer online, I tried to inhance an ordinary counter to fullfill my specific need.

I needed a countdown timer, to appear to students in an online exam, the exam will be automatically closed when the time runs out.

Although I could have used the same javascript timer to end the exam, I prefered to use a server-side ajax timer to check if the time of the exam had expired and finish it, the reason behind using the server-side is to prevent the manipulation of the exam time since the javascrip code depends on the local clock of the client, if they changed the time; the period will be expanded :D.

function sivamtime() {

' 1. retrieve and keep the current time from the client side clock.
now=new Date();

hour=now.getHours();
min=now.getMinutes();
sec=now.getSeconds();

' Retrieve exam period and exam starting time from a field on the web page. (Save and calculate the values on the page load; the values must be the total seconds on the time span for example if the start time is 09:27:05 the value will be [09*60*60 + 27*60 + 05 = 293225])
var examTime=document.getElementById('txtExamTime').value;
var startexamTime=document.getElementById('txtStartTime').value;

'Calculate how many seconds has passed from the beginning of the exam; and which equals [current time in seconds] - [start time of the exam in seconds] and substract the result from the [exam total duration in seconds].
var currentTime;
var SecondsFromStart;
var timeLeft;
var hours=0;
var minuts=0;
var seconds=0;
var h=0;
var m=0;
var s=0;
var time;
currentTime=0;
currentTime=hour*60*60;
currentTime=currentTime+(min*60);
currentTime=currentTime+sec;
SecondsFromStart=currentTime-startexamTime;
timeLeft=examTime-SecondsFromStart;

' check if the exam has finished.
if (SecondsFromStart > examTime)
{
document.getElementById('txtTime').value="00:00:00";
}
else
'otherwise calculate and show the remaining time.
{
hours=Math.floor(timeLeft/3600);
m=(timeLeft/3600)-hours;
minuts=Math.floor(m*60);
s=((m*60)-minuts);
seconds=Math.floor(s*60);

if (hours<=9) { hours = "0" + hours; } if (minuts<=9) { minuts = "0" + minuts; } if (seconds<=9) { seconds = "0" + seconds; } time = hours + ":" + minuts + ":" + seconds; document.getElementById('txtTime').value=time; ' recall this function every 500 millisecond
setTimeout("sivamtime()", 500);
}
}

' The following function will be called onload to save the start time.
function SetDateTime()
{
now=new Date();
hour=now.getHours();
min=now.getMinutes();
sec=now.getSeconds();
currentTime=0;
currentTime=hour*3600;
currentTime=currentTime+(min*60);
currentTime=currentTime+sec;
document.getElementById('txtStartTime').value=currentTime;
sivamtime();
}

One last thing, do not forget to end the exam, from the code behind ajax timer at the end of the time.

happy coding!