Friday, March 13, 2009

Gridview Column Resize by javascript

// JScript File
//the below code is used to pass gridview client Id to the resize code
language="javascript" type="text/javascript">
var gridViewCtlId = ''; //grv_Test = Id of the gridview
var gridViewCtl=null;

function getGridViewControl()
{
gridViewCtl = document.getElementById(gridViewCtlId);

}
function Resize() // Call the Resize function to resize the grid
{
getGridViewControl();
pageLoading(gridViewCtl);
}

// The below code is used to resize gridview column
language="javascript" type="text/javascript">


// true when a header is currently being resized
var _isResizing;
// a reference to the header column that is being resized
var _element;
// an array of all of the tables header cells
var _ths;

function pageLoading(ref){ // ref = ClientID of the gridview
// get all of the th elements from the gridview
//_ths = $get('gvCustomers').getElementsByTagName('TH');
_ths = ref.getElementsByTagName('TH');

// if the grid has at least one th element
if(_ths.length > 1){

for(i = 0; i < _ths.length; i++){
// determine the widths
_ths[i].style.width = Sys.UI.DomElement.getBounds(_ths[i]).width + 'px';

// attach the mousemove and mousedown events
if(i < _ths.length - 1){
$addHandler(_ths[i], 'mousemove', _onMouseMove);
$addHandler(_ths[i], 'mousedown', _onMouseDown);
}
}

// add a global mouseup handler
$addHandler(document, 'mouseup', _onMouseUp);
// add a global selectstart handler
$addHandler(document, 'selectstart', _onSelectStart);
}
}

function _onMouseMove(args){
if(_isResizing){

// determine the new width of the header
var bounds = Sys.UI.DomElement.getBounds(_element);
var width = args.clientX - bounds.x;

// we set the minimum width to 1 px, so make
// sure it is at least this before bothering to
// calculate the new width
if(width > 1){

// get the next th element so we can adjust its size as well
var nextColumn = _element.nextSibling;
var nextColumnWidth;
if(width < _toNumber(_element.style.width)){
// make the next column bigger
nextColumnWidth = _toNumber(nextColumn.style.width) + _toNumber(_element.style.width) - width;
}
else if(width > _toNumber(_element.style.width)){
// make the next column smaller
nextColumnWidth = _toNumber(nextColumn.style.width) - (width - _toNumber(_element.style.width));
}

// we also don't want to shrink this width to less than one pixel,
// so make sure of this before resizing ...
if(nextColumnWidth > 1){
_element.style.width = width + 'px';
nextColumn.style.width = nextColumnWidth + 'px';
}
}
}
else{
// get the bounds of the element. If the mouse cursor is within
// 2px of the border, display the e-cursor -> cursor:e-resize
var bounds = Sys.UI.DomElement.getBounds(args.target);
if(Math.abs((bounds.x + bounds.width) - (args.clientX)) <= 2) {
args.target.style.cursor = 'e-resize';
}
else{
args.target.style.cursor = '';
}
}
}

function _onMouseDown(args){
// if the user clicks the mouse button while
// the cursor is in the resize position, it means
// they want to start resizing. Set _isResizing to true
// and grab the th element that is being resized
if(args.target.style.cursor == 'e-resize') {
_isResizing = true;
_element = args.target;
}
}

function _onMouseUp(args){
// the user let go of the mouse - so
// they are done resizing the header. Reset
// everything back
if(_isResizing){

// set back to default values
_isResizing = false;
_element = null;

// make sure the cursor is set back to default
for(i = 0; i < _ths.length; i++){
_ths[i].style.cursor = '';
}
}
}

function _onSelectStart(args){
// Don't allow selection during drag
if(_isResizing){
args.preventDefault();
return false;
}
}

function _toNumber(m) {
// helper function to peel the px off of the widths
return new Number(m.replace('px', ''));
}

Tuesday, January 20, 2009

Start date and End date of a week

Javascript function to to get the starting date and end date of a week by giving the week number (1 to 5), Month number (1 to 12), valid year as parameter:

function GetWeekStartEndDate(){
var week = 5;
var month = 2;
var year = 2002;

var PositiveOneDay = new Date(new Date('1/2/2000') - new Date('1/1/2000'));
var NegetiveOneDay = new Date(new Date('1/1/2000') - new Date('1/2/2000'));
var dt , stDate , endDate
//Get first day of month
dt = new Date(month + '/1/' + year);
//Seek to intended week
var i = 1;
for(i = 1 ; i < (week-1)*7 ; i++){
dt = new Date(dt - NegetiveOneDay);
}
//if found date is week end get immediate next week start date
while (dt.getDay() == 0 || dt.getDay() == 6){
dt = new Date(dt - NegetiveOneDay);
}
//if found date is in next month then invalid input
if (dt.getMonth() == month - 1){
stDate = dt;
endDate = dt;
//Seek to week start date
while (stDate.getDay() != 1)
{
stDate = new Date(stDate - PositiveOneDay);
}
//Seek to week end date
while (endDate.getDay() != 5)
{
endDate = new Date(endDate - NegetiveOneDay);
}

alert('Starting date of a week : ' + stDate.toString());
alert('Ending date of a week : ' + endDate.toString());
}
else{
alert('Invalid Input');
}
}