Parent Child Display using Asp.net 2.0

I have comeacross some of friends needed this code to create parent and child combination in the webpage.

So thought of sharing them have created sample code for displaying the parent and child combination.

I am using Parent control as a Repeater control and child as a Gridview control.

Please go throgh the example:

Aspx Code:

<asp:Repeater ID="grdMulti" runat="server" OnItemDataBound="grdMulti_RowDataBound">

<ItemTemplate>

<table width="100%" border="1" style="border-style:solid">

<tr>

<td>

<table width="100%">

<tr>

<td>

<img id="imgExpand" runat="server" src="Image/add_up.gif" onclick="javascript:showChild(this)"

style="vertical-align: top" />

<img id="imgCollapse" runat="server" src="Image/del_up.gif" onclick="javascript:showChild(this)"

style="display: none; vertical-align: top" />

</td>

<td>

<asp:Label ID="lblServiceAddress" runat="server" Text='<%# Eval("ServiceId") %>'></asp:Label>

</td>

<td>

<asp:Label ID="Label1" runat="server" Text='<%# Eval("ServiceName") %>'></asp:Label>

</td>

<td>

<asp:Label ID="Label2" runat="server" Text='<%# Eval("ServiceAddress") %>'></asp:Label>

</td>

</tr>

</table>

</td>

</tr>

<tr id="ShowRow" runat="server" style="display:none">

<td>

<table width="100%">

<tr>

<td>

<div id="Show" runat="server" style="display: none">

<asp:GridView ID="grdChild" runat="server" Width="100%">

</asp:GridView>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>

</ItemTemplate>

</asp:Repeater>

Javscript:

<script language="javascript">

function showChild(obj) {

var imgId = obj.id, grdId, grdObj, objImg = document.getElementById(imgId), imgChangeId, imgChangeObj, rowid;

if (obj.id.indexOf('Expand') > 0) {

grdId = obj.id.replace('imgExpand', 'Show');

rowid = obj.id.replace('imgExpand', 'ShowRow');

imgChangeId = obj.id.replace('imgExpand', 'imgCollapse');

imgChangeObj = document.getElementById(imgChangeId);

grdObj = document.getElementById(grdId);

rowobj=document.getElementById(rowid);

if (objImg != null) {

objImg.style.display = 'none'

}

if (grdObj != null) {

grdObj.style.display = 'block'

}

if (imgChangeObj != null) {

imgChangeObj.style.display = 'block';

}

if (rowobj != null) {

rowobj.style.display = 'block';

}

}

else {

grdId = obj.id.replace('imgCollapse', 'Show');

rowid = obj.id.replace('imgExpand', 'ShowRow');

imgChangeId = obj.id.replace('imgCollapse', 'imgExpand');

imgChangeObj = document.getElementById(imgChangeId);

grdObj = document.getElementById(grdId);

rowobj = document.getElementById(rowid);

if (grdObj != null) {

grdObj.style.display = 'none'

}

if (objImg != null) {

objImg.style.display = 'none'

}

if (imgChangeObj != null) {

imgChangeObj.style.display = 'block';

}

if (rowobj != null) {

rowobj.style.display = 'none';

}

}

}

</script>

C#

public partial class MultiGrid : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

DataTable DTParent = new DataTable();

DataColumn dc1 = new DataColumn("ServiceId");

DataColumn dc2 = new DataColumn("ServiceName");

DataColumn dc3 = new DataColumn("ServiceAddress");

DTParent.Columns.Add(dc1);

DTParent.Columns.Add(dc2);

DTParent.Columns.Add(dc3);

DataRow DR = null;

for (int i = 0; i <>

{

DR = DTParent.NewRow();

DR[0] = i.ToString();

DR[1] = "bal";

DR[2] = "Address";

DTParent.Rows.Add(DR);

}

grdMulti.DataSource = DTParent;

grdMulti.DataBind();

}

}

protected void grdMulti_RowDataBound(object sender, RepeaterItemEventArgs e)

{

GridView GRDChild = (GridView)e.Item.FindControl("grdChild");

if (GRDChild != null)

{

DataTable DTChild = new DataTable();

DataColumn dc1 = new DataColumn("ServiceId");

DataColumn dc2 = new DataColumn("ServiceName");

DataColumn dc3 = new DataColumn("ServiceAddress");

DTChild.Columns.Add(dc1);

DTChild.Columns.Add(dc2);

DTChild.Columns.Add(dc3);

DataRow DR = null;

for (int i = 0; i <>

{

DR = DTChild.NewRow();

DR[0] = i.ToString();

DR[1] = "bal";

DR[2] = "Address";

DTChild.Rows.Add(DR);

}

GRDChild.DataSource = DTChild;

GRDChild.DataBind();

}

}

}

attachEvent& detachEvent using Javascript

attachEvent& detachEvent

If you want to add dynamically event for the given control..have to use attach event

At the same removing have to use detach event.

Example:

<html>

<body>

<button id="myButton">Button</button>

<button onclick="function3();">Apply an event handler "Button"</button>

<button onclick="function2();">Detach</button>

<script language="JavaScript">

function function3() {

document.all.myButton.attachEvent("onclick", function1)

}

function function1() {

document.bgColor = 'red';

}

function function2() {

document.bgColor = 'white';

document.all.myButton.detachEvent('onclick', function1);

}

</script>

</body>

</html>

Javascript Libraries

Javascript Libraries

Shared via AddThis

Tip of the day

Calling classes with out Instance

1) Creating static objects.

2) Making the modifier as a public in the base class method. then inherit in to the derived class. after call that method directly.

3) After inheriting base class to derived class. using base key we can get the all the methods.

Example.

All programmers knows the first option. let me explain another two scenoria with the appropriate example.

public class classA

{

public classA()

{

}

public string A()

{

return "s";

}

}

public class classB: classA

{

public string callWithoutInstance()

{

//Inherite the base class then directly call the public method

return A();

}

public string callWithoutInstanceBase()

{

//Inherite the base class then call the public method through base class.

return base.A();

}

}

Encapsulation

Definition:

It's one of the basic concept in the object oriented software development. Wrapping up of a data in to a single unit is called encapsulation. It's basically hiding the objects.

Example:

Class

Polymorphism

Definition:

Polymorphism is a Greek word, it means more than one form in a single unit. it's one of the basic concepts in the object oriented programming language. specifically it allow variable to refer more than one objects.

Virtual methods allows to express the polymorphism concept.

They are two types of polymorphism. The types are as follows.

1) Compile time polymorphism

2) Run time polymorphism

Compile time polymorphism

Define:

Same member signature different type of arguments. it will decide the member in the compile time itself

Example:

1)Function overloading.

2)operator overloading.

Runtime Polymorphism.

This will decide the method at runtime.

Example:

Inheritance

Virtual polymorphism

Copy Constructor

Define:

Constructor will initialize only one at a time while coping the objects. New instance will not create. it will refer the existing class.

Copy constructor will not provide c# directly. But we can copy the objects using methods.

let me explain further with example.

public string var1 = string.Empty;

public string var2 = string.Empty;

//Copy Constructor

public CopyConstructor(CopyConstructor cpyCons)

{

var1 = cpyCons.var1;

var2 = cpyCons.var2;

}

//Instance of constructor

public CopyConstructor()

{

this.var1 = "s";

this.var2 = "s1";

}

CopyConstructor ss = new CopyConstructor();

CopyConstructor ss1 = new CopyConstructor(ss); //Coping the class using copy constructor.

RegEx.Split vs. String.Split

String.split has some limitations in the split. but in the Regex.split will split duplicate delimeter.

The delimeter such as ||, ~~ and ::

string[] output  = null;  string inputSentence = "I am a developer|| I work on .Net || " +     "The latest framework available is 3.5";  //the following line will not work 

output = inputSentence .Split("||".ToCharArray());  

//use RegEx Split instead 

output =  System.Text.RegularExpressions.Regex.Split(inputSentence, System.Text.RegularExpressions.Regex.Escape("||"));

Static Constructor in C#

Constructor:

Object will be created when it is declared or dynamically constructed on the heap through new key word

Static Constructor:

1) Static constructor initialize only one at a time.

2) No parameter for the method.

3) Access modifier are not allowed for the static constrcutor.

4) Only static datamember will be used in the static member.

Better Sound in Framework 3.0

In previous version we have system.media namespace. it nice to see this in frame work 2.0.

Using this namespace can play wav files. At a time can run only one file in the media player.

But we can't mix multiple files.

But now in frame work 3.0 come with new namespace for running the sound files. The new name space is system.media.SoundPlayer. In this we will run all the media extension like .wav,.mp3..

also simultaneously can run the files.

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);

}

<body onload="javascript:ShowAll()">

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";

}

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;

}

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");

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)===

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.