Balas Blog..

Wednesday, July 1, 2009

Inheritance using javascript.

After digging little inside in the prototype object. i have found can achieve inheritance. Really its nice to see the code in javascript. i will write some sample code. try to use your projects also.. In future am trying to implement javascript with the custom objects and methods. hope in future will see nice coding with javascript also.

Example

function Base()

{

this.a = "Bala";

this.b = "Bala1";

}

function Derive()

{

this.a = "Bala2";

}

function ShowAll()

{

Derive.prototype = new Base();

var show = new Derive();

alert(show.a);

alert(show.b);

}

Output

Bala2

Bala1

String Split for new line in C#

Today one of my friend faced problem in sorting. Spliting the new line('\r\n')

in the given text.

This is will be very use full for beginners.

Example:

string[] strSplit=new string[1];

strSplit[0]="\r\n";

string[] strarrayemail = txtEmail.Text.Split(strSplit,StringSplitOptions.RemoveEmptyEntries);

Array.Sort(strarrayemail);

txtEmail.Text =string.Empty;

foreach (string str in strarrayemail)

{

txtEmail.Text += str + "\r\n";

}

Tuesday, June 30, 2009

Protype objects using Javascript

I have come across some aritcle for javascript. just thought of sharing this to everyone.so that am writing this in my blog.

let me explain my faurouite Prototype objects in the javascript. If you want to write libraries and learn advance in javascript. please try to learn prototype objects. It will be very use full.

Protytype objects.

Prototype is the keyword, Using this, we can add the custom properties and methods. Let me go through in detail.

Let me explain about custom properties in prototype objects.

function circle()

{

}

circle.prototype.pi="3.14";

This PI property is common for all the instances of the methods.

Custom Methods:

function ReverseBack()

{

for(i=this.length-1;i<=0;i--)

{

document.write(this.charAt(i));

}

String.Protype.writeBack=ReverseBack();

var message1="Bala";

var message2="alaB";

message1.writeBack();

message2.writeBack();

Output:

alaB;

Bala;

Disabling the Drag for Source Object

Take this scenario, I have the table, in that having list of names, As per business logic some names should not allow the drag and drop functionality.

For that have to use set_cancel method. According to the condition it will not allow the drag and drop.

Example

ddb=new $Ig.DragDropBehaviour();

ddb.get_events().addDragStartHandler(DragStartHandler);

function DragStartHandler(sender, args)

{

args.set_cancel(true);

return;

}

Monday, June 29, 2009

Javascript Best Practices 6

Reduce Globals

Try to avoid the global variable in the javascirpt code. Instead of that use the method objects.

var name = 'Jeffrey';
var lastName = 'Way';

function doSomething() {...}

Better way of writing the code.

var DudeNameSpace =

{

name :'Bala',

lastname:'Subramaniyam',

doSumething : function()

{

//do something

}

Drag & Drop Events-Infragistics

1) addDragMoveHandler--- it will work, While moving the jobs from origin to destinaton origin.

2) addDragStartHandler-- When starting of drag will work., In this we can cancel the event using args.set_cancel(true);

3) addDragEndHandler--- it will work, After drop handler event fired,

4) addDragLeaveHandler--- it will work,after move out from the source block,

5) addDragCancelHandler--- it will work, After dragging not dropping to destination.

6) _removeHandler --It will remove only specified event handler.

7) clearHandler--It will clear all the event handler.

Validation Drag & Drop Infragisitics.

We are facing one problem in the Current project, The issue is dragging the jobs from source and droping to destination.

In the destination am doing validation, if the validation has fails. We should not drop the jobs and it should go back to the destination automatically. Still i didnt found the solution. Even had a discussion with the infragistics. hopefully will get the solution soon.

For the above i have found the alternate solution.

I am using the copy and paste method for dragging the jobs.

If the validation fails in the destionation. i will not drop the destionation. so no need to go back the source. Already will have to data in the source. Because we are using the copy and paste method.

Example

Sys.Application.add_load(appLoaded);

function appLoaded(){

var ddb = new $IG.DragDropBehavior();

var list = $get("imageList");

var count = list.childNodes.length;

var child;

for (var i = 0; i <>

child = list.childNodes[i];

if (child.getAttribute) {

ddb.addSourceElement(child);

}

ddb.addTargetElement($get("cartAreaDiv"), true);

ddb.get_events().addDropHandler(dropHandler);

}

function dropHandler(sender, args){

var srcItem = args.get_manager().get_source().element;

var target = $get("cartAreaDiv");

//debugger;

if (srcItem.id == "CD"){

alert("You can't add a CD!"); Validatiion got failed.

}

else{

target.appendChild(srcItem);

}

Drag & Drop Basics-Infragistics

Let me discuss some of the basic things about the Infragistics frame work. We have two type of drag and drop in the Infragistics.

1)Copy and paste. (Source will not delete, it will append to the destination)

2)Cut and paste. (Source will delete, it will not append to the destination)

If you want to enable the 1st one have to include the below code.

var ddb = new $IG.DragDropBehavior();

And include below code to enable the 2nd one.

var ddb = new $IG.DragDropBehavior();

var date = $get("ctl00_ContentPlaceHolder1_lblDate");

var wcgId = $get("ctl00_ContentPlaceHolder1_wcg_id");

Wednesday, June 24, 2009

Javascript Best Practices 5

Eval = Bad

Eval is the function, it will execute the string in to script code.

It will run through javascript compiler. So that it will reduce the performance of the code

Substantially.

for better code dont use Eval..

Javascript Best Practices 4

Use Always === operator, instead of ==

The issue of this operator (==) is, if the variable are different types it does not compare. It's end up with javascript error.

But in this operator( === ) variable will be converted in to objects. and it will compare.

1)!=

2) ==

Bettor Coding use below opertor instead of above.

1)!==

2)===

Tuesday, June 23, 2009

Javascript Best Practices 3

One interesting thing have faced today in the javascript. I was tried nearly two hour to enabling the focus for html tags (like table, tr, th). It does not work out.

After concluded we can give focus only for controls like textbox, button. Anchor tag..

So that I have used Anchor tag in my task.

Note:Hidden field can't give focus.

Custom ProgressBar using Javascript

Step 1:

Create below div tags in the aspx page.

</div>

Step 2:

Create stylesheet with below classes.

div.modalProgressOuter

{

background-color:White;

filter:alpha(opacity=40);

opacity:0.4;

position:absolute;

display:none;

}

div.modalProgressIn

{

vertical-align:middle;

}

Step 3:

Call the below javascript through control, i mean when you click on submit button..

function showProgress() {

var objModalProgress = document.getElementById("modalOut");

var objModalIn = document.getElementById("modalIn");

if (objModalProgress != null) {

objModalIn.style.marginLeft = parseInt(document.body.offsetWidth) / 2;

objModalIn.style.marginTop = parseInt(document.body.offsetHeight) / 2;

objModalProgress.style.height = document.body.offsetHeight;

objModalProgress.style.width = document.body.offsetWidth;

objModalProgress.style.display = "block";

objModalProgress.style.left = 10;

objModalProgress.style.top = 25;

}

Javascript Best Practices 2

Always, Always Use Semicolons.

If you not use ;(semicolon) in the code, it's very difficult to find the error.

So please try to use everystatement with semi colon.

var someItem = 'some string'
function doSomething() {
return 'something'
}

Better

var someItem = 'some string';
function doSomething() {
return 'something';
}

Javascript Best Practices 1

Remove "Language" in the Script tag

we have used years ago, Because we unable to find that language.

Now its deprecated, so leave it out.

Itextsharp

Itextsharp

I have come across this from one of my friend, I just thought of sharing with everyone. i am writing in my blog.

This is opensource library, Which will create the PDF on the fly. Basically its taken from java library. now purely written in the C#.NET

Everyone can use this library with .net framework 1.1 and 2.O

You can download the dll in the given URL

http://sourceforge.net/projects/itextsharp/

Monday, June 22, 2009

C# 4.0 -Optional Parameters

I was really excited, when i have seen upcoming feature in c# 4.0, After come across some article, This feature will be very useful.

Optional Parameters

Let’s say I have a class Employee and I provide few overloads of the constructor to enable making certain parameters as optional as follows:

Older Method

public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Qualification { get; set; }
public string MiddleName { get; set; }

public Employee(string firstName, string lastName)
{
FirstName= firstName;
LastName= lastName;
Qualification= "N/A";
MiddleName= string.Empty;
}
public Employee(string firstName, string lastName, string qualification)
{
FirstName= firstName;
LastName= lastName;
Qualification= qualification;
MiddleName= string.Empty;

}
public Employee(string firstName, string lastName, string qualification,
string middleName)
{
FirstName= firstName;
LastName= lastName;
Qualification= qualification;
MiddleName= middleName
}
}

Newer Method

public Employee(string firstName, string lastName,
string qualification = "N/A", string middleName = "")
{
FirstName= firstName;
LastName= lastName;
Qualification= qualification;
MiddleName = middleName;
}

Drag & Drop In Infragistics New Framework

Infragistics(2009.1), In the new version drag & drop features implemented. We can implement this feature in the html element.

Note:This is very good support for DIV element in the HTML. Dont use other thin div. when you add more functionality in the page, it may give problem when you use other than DIV.

Make sure Div elment in the outermost..

Example:

Step 1:

Download original version from Infragistics 2008 or 2009

Step 2:

Download below three files from Infragistics installed folder.

1)igDragDrop.js

2)5_igObjects.js

3)igAnimation.js

Maintain same order, when you add the Above javascript in the page.

Step 3:

Add the below script in the page, which you are going to implement the drag & drop feature.This is the script will allow the drag and drop feature.

if (typeof (Sys) !== 'undefined')

{

Sys.Application.notifyScriptLoaded();

Sys.Application.add_load(appLoaded);

}

</script>

Step 4:

In the below script have two method which will enable the drag & drop for html elements.Also am adding the script in the addsource element and adddrag element.

1)addSourceElement

2)addTargetElement

It will deside the from and destination of the elements.

function appLoaded() {

ddb = new $IG.DragDropBehavior();

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.set_dragDropMode($IG.DragDropEffects.Move);

var list = $get("DragUnassign");

var count = list.childNodes.length;

for (var i = 0; i <>

var child = list.childNodes[i];

if (child.getAttribute)

ddb.addSourceElement(child);

}

for (var k in techIds) {

ddb.addTargetElement($get(techIds[k]), true); //Techids nothing but a div //element of the id

var jobs = $get(techIds[k]);

if (jobs != null) {

if (jobs.childNodes != null) {

var jobCount = jobs.childNodes.length;

for (var x = 0; x <>

var job = jobs.childNodes[x];

if (job.getAttribute)

ddb.addSourceElement(job);

}

ddb.addTargetElement($get("DragUnassign"), true);

ddb.get_events().addDropHandler(dropHandler);

var autoComplete = $find('Auto');

}

Step 5:

In this method "$IG.DragDropBehavior()" we have method called drop Handler.

This is method it will enable the events.

Note:In the present version, It cannot write a server side method for the drag & drop feature.

Step 6:

This is the method will call the webservice.

function dropHandler(sender, args)

{

var manager = args.get_manager();

if (args.get_manager()._dragging == true) {

var progressEnable = false;

var target = manager.get_targetElement().id.replace("tech", "");

techId = target;

var obtblid = techId.replace("tech", "parent");

var sourceElement = manager.get_source().element.id;

var sourceObject = manager.get_source().element.offsetParent.id;

////////////////////This is for Dragging & droping Jobs from Unassigned to Technician////////////

if ((sourceObject == "DragUnassign") && (manager.get_targetElement().id.indexOf("tech") != -1)) {

progressEnable = true;

LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.AssignJob(target, sourceElement,drcCommitdate, "ADD", onSuccessDrag, onFailureDrag);

}

//////////////////// End for Dragging Jobs from Unassigned to Technician////////////////////////

////////////////////This is for Dragging & droping Jobs from Technician to Technician////////////

else if ((sourceObject.indexOf("tech") != -1) && (manager.get_targetElement().id.indexOf("tech") != -1)) {

progressEnable = true;

LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.AssignJob(target, sourceElement,drcCommitdate, "UPDATE", onSuccessDrag, onFailureDrag);

}

////////////////////End for Dragging & droping Jobs from Technician to Technician////////////

else

{

////////////////////This is for Dragging & droping Jobs from Technician to Unassigned ////////////

progressEnable = true;

LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.UnassignJob(sourceElement);

//LTDWebApp.WebClient.WebPages.Dispatcher.TechDetails.GetUnassignedJobs(wcgId, drcCommitdate, onSuccessDragUnassign, onFailureDrag);

////////////////////End for Dragging & droping Jobs from Technician to Unassigned////////////

}

if (progressEnable == true)

{

showProgress(techId.replace("tech", "")); ////////Showing the Progress Bar

}

Step 7:

function onSuccessDrag(Result)

{

var ddb = new $IG.DragDropBehavior();

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.set_dragDropMode($IG.DragDropEffects.Move);

var obtblid = "parent"+techId;

var objTbl = document.getElementById(obtblid);

var objTbody = objTbl.getElementsByTagName("tbody")[0];

objTbl.setAttribute("cellpadding", "0");

objTbl.setAttribute("cellspacing", "0");

objTbl.setAttribute("frame", "box");

objTbl.setAttribute("className", "tblAssignParenttech");

var preRows = objTbody.rows.length;

for (j = 0; j <>

{

if (j != 0)

{

objTbody.removeChild(objTbody.rows[j]);

}

var objRow = document.createElement("tr");

var objTd = document.createElement("td");

var objDiv = document.createElement("div");

objRow.setAttribute("className", "tblAssignParenttechRow");

objDiv.setAttribute("className", "tblscrollAssign");

objDiv.setAttribute("id", "tech"+techId);

var len = Result.length;

for (i = 0; i <>

objSplit = Result[i].split("||");

jobId = objSplit[0];

JobInterval = objSplit[1];

JobMON = objSplit[2];

var objchildjobDiv = document.createElement("div");

objchildjobDiv.setAttribute("id", jobId);

var objchildTbl = document.createElement("table");

var objchildTblBody = document.createElement("tbody");

objchildTbl.setAttribute("border", "0");

objchildTbl.setAttribute("width", "100%");

objchildTbl.setAttribute("cellpadding", "3");

objchildTbl.setAttribute("cellspacing", "1");

objchildTbl.setAttribute("className", "liBorder");

var objchildRow = document.createElement("tr");

var objchildTd = document.createElement("td");

objchildTd.setAttribute("className", "borderstyle");

var objchildTd1 = document.createElement("td");

objchildTd.innerText = JobInterval;

objchildTd1.innerText = JobMON;

objchildRow.appendChild(objchildTd);

objchildRow.setAttribute("ondblclick", "javscript:showJob(this);");

objchildRow.appendChild(objchildTd1);

objchildTblBody.appendChild(objchildRow);

objchildTbl.appendChild(objchildTblBody);

objchildjobDiv.appendChild(objchildTbl);

objDiv.appendChild(objchildjobDiv);

ddb.addSourceElement(objchildjobDiv);

}

objTd.appendChild(objDiv);

objRow.appendChild(objTd);

objTbody.appendChild(objRow);

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.addTargetElement($get("DragUnassign"), true);

ddb.addTargetElement($get("tech" + techId), true);

ddb.get_events().addDropHandler(dropHandler);

hidemodalProgress();

}

Step 8:

Once the request is succeed with above method. I am generating the client side table with array data using javascript.

function onSuccessDrag(Result)

{

var ddb = new $IG.DragDropBehavior();

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.set_dragDropMode($IG.DragDropEffects.Move);

var obtblid = "parent"+techId;

var objTbl = document.getElementById(obtblid);

var objTbody = objTbl.getElementsByTagName("tbody")[0];

objTbl.setAttribute("cellpadding", "0");

objTbl.setAttribute("cellspacing", "0");

objTbl.setAttribute("frame", "box");

objTbl.setAttribute("className", "tblAssignParenttech");

var preRows = objTbody.rows.length;

for (j = 0; j <>

{

if (j != 0)

{

objTbody.removeChild(objTbody.rows[j]);

}

var objRow = document.createElement("tr");

var objTd = document.createElement("td");

var objDiv = document.createElement("div");

objRow.setAttribute("className", "tblAssignParenttechRow");

objDiv.setAttribute("className", "tblscrollAssign");

objDiv.setAttribute("id", "tech"+techId);

var len = Result.length;

for (i = 0; i <>

objSplit = Result[i].split("||");

jobId = objSplit[0];

JobInterval = objSplit[1];

JobMON = objSplit[2];

var objchildjobDiv = document.createElement("div");

objchildjobDiv.setAttribute("id", jobId);

var objchildTbl = document.createElement("table");

var objchildTblBody = document.createElement("tbody");

objchildTbl.setAttribute("border", "0");

objchildTbl.setAttribute("width", "100%");

objchildTbl.setAttribute("cellpadding", "3");

objchildTbl.setAttribute("cellspacing", "1");

objchildTbl.setAttribute("className", "liBorder");

var objchildRow = document.createElement("tr");

var objchildTd = document.createElement("td");

objchildTd.setAttribute("className", "borderstyle");

var objchildTd1 = document.createElement("td");

objchildTd.innerText = JobInterval;

objchildTd1.innerText = JobMON;

objchildRow.appendChild(objchildTd);

objchildRow.setAttribute("ondblclick", "javscript:showJob(this);");

objchildRow.appendChild(objchildTd1);

objchildTblBody.appendChild(objchildRow);

objchildTbl.appendChild(objchildTblBody);

objchildjobDiv.appendChild(objchildTbl);

objDiv.appendChild(objchildjobDiv);

ddb.addSourceElement(objchildjobDiv);

}

objTd.appendChild(objDiv);

objRow.appendChild(objTd);

objTbody.appendChild(objRow);

ddb.set_defaultDropAction($IG.DragDropAction.Insert);

ddb.addTargetElement($get("DragUnassign"), true);

ddb.addTargetElement($get("tech" + techId), true);

ddb.get_events().addDropHandler(dropHandler);

hidemodalProgress();

}

Balas Blog..

Wednesday, July 1, 2009

Inheritance using javascript.

String Split for new line in C#

Tuesday, June 30, 2009

Protype objects using Javascript

Disabling the Drag for Source Object

Monday, June 29, 2009

Javascript Best Practices 6

Drag & Drop Events-Infragistics

Validation Drag & Drop Infragisitics.

Drag & Drop Basics-Infragistics

Wednesday, June 24, 2009

Javascript Best Practices 5

Javascript Best Practices 4

Tuesday, June 23, 2009

Javascript Best Practices 3

Custom ProgressBar using Javascript

Javascript Best Practices 2

Javascript Best Practices 1

Itextsharp

Monday, June 22, 2009

C# 4.0 -Optional Parameters

Drag & Drop In Infragistics New Framework

Technology

Start Counter