Asp DataGrid with Editable cell with out Postback using Javascript

This is created for one of my friend. he want's in his project. so i thought of sharing with everyone am writing in my blog.

step 1:

create asp grid control with binding dummy value.

step 2:

<asp:GridView ID="grView" runat="server" AutoGenerateColumns="false"

onprerender="grView_PreRender">

<Columns>

<asp:TemplateField>

<ItemTemplate>

<div id="lblDiv" runat="server">

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

</div>

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

<asp:TextBox ID="txtID" runat="server" Text='<%# Eval("Empid") %>'></asp:TextBox>

</div>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

step 3:

DataTable DT = new DataTable();

DataColumn dc1 = new DataColumn("Empid");

DataColumn dc2 = new DataColumn("Empname");

DataColumn dc3 = new DataColumn("EmpSalary");

DataColumn dc4 = new DataColumn("EmpAddress");

DT.Columns.Add(dc1);

DT.Columns.Add(dc2);

DT.Columns.Add(dc3);

DT.Columns.Add(dc4);

DataRow DR;

for (int i = 0; i <>

{

DR = DT.NewRow();

DR["Empid"] = i.ToString();

DR["Empname"] = "Bala";

DR["Empid"] = "Salary";

DR["Empid"] = "Address";

DT.Rows.Add(DR);

}

grView.DataSource = DT;

grView.DataBind();

step 4:

Calling javascript for the cell through.

protected void grView_PreRender(object sender, EventArgs e)

{

foreach (GridViewRow dr in grView.Rows)

{

Label lbl = (Label)dr.FindControl("lblID");

lbl.ID = "lblID";

lbl.Attributes.Add("onclick", "javascript:lbltoTxt(this)");

TextBox txt = (TextBox)dr.FindControl("txtID");

txt.Attributes.Add("onblur", "javascript:txttoLbl(this)");

}

}

Step 5:

<script language="javascript">

function lbltoTxt(obj)

{

var divtxtObj = document.getElementById(obj.id.replace('lblID', 'txtDiv'));

var txtObj = document.getElementById(obj.id.replace('lblID', 'txtID'));

if (divtxtObj != null)

{

if (divtxtObj.style.display == "none")

{

divtxtObj.style.display = "block";

txtObj.focus();

}

}

var divlblObj = document.getElementById(obj.id.replace('lblID', 'lblDiv'));

if (divlblObj != null)

{

if (divlblObj != null)

{

divlblObj.style.display = "none"

}

}

}

function txttoLbl(obj) {

var divlblObj = document.getElementById(obj.id.replace('txtID', 'lblDiv'));

var lblObj = document.getElementById(obj.id.replace('txtID', 'lblID'));

if (divlblObj != null) {

if (divlblObj.style.display == "none") {

divlblObj.style.display = "block";

lblObj.innerText = obj.value;

}

}

var divtxtObj = document.getElementById(obj.id.replace('txtID', 'txtDiv'));

if (divtxtObj != null) {

if (divtxtObj != null) {

divtxtObj.style.display = "none"

}

}

}

</script>

What is the use of "Canvas" Controls?????

Canvas is one of the layout control for the silverlight. This is just like container will contain the controls.

In silverlight wright now we have three layout controls. The layout types are as given below.

1)Canvas.

2)StackPanel.

3)Grid.

My first feel with Silverlight

first of all have to say thanks to microsoft to developing this kind of product.

I have started learning about the silverlight. it's nearly nice to see in the browser with rich user experience. Really interesting to learn all new controls and new way of approuch. This is really very good treat for dotnet developer.

Let's start learning with next generation technology.

javascript listbox problem

just thought of sharing this info with everyone. I am writing in my blog.

Every one no about list box control in the asp.net controls. I have tried to write javascript for selected value when enabled the multiselection for the control. In this situation am unable to get the selected value index correctly. it's coming differentyly.. post me if you know the answer..

To fire onclick event automatically on page load using Javascript

if(navigator.appName !="Microsoft Internet Explorer")

{
HTMLElement.prototype.click = function()

{
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
}

}

Avoid Special Character using Javascript with Regular Expression

javascript validation for special charcter.

function checkSpecial(obj,objEvent)

{

var specialChar = "^[A-Za-z0-9_]+$" //regular expression defining a 5 digit number

var objVal = obj.value;

var objVallen = obj.value.length;

if (objVal != "")

{

if (objVal.search(specialChar) == -1) //if match failed

{

if (objEvent == "keyup") {

if (objVallen > 1) {

obj.value = objVal.substring(0, parseInt(objVallen) - 1);

}

else {

obj.value = "";

}

}

else {

obj.value = "";

}

alert("Invalid character");

obj.focus();

}

}

}

Fileupload control not working with in updatepanel

I have found the problem, while accessing the fileupload control with in update panel. selected file path get cleared when postback.. i have found one solution for that problem. let me explain the solution with example.

i have used one asp hidden control, using javascript before postback am assigning the path in to hidden control. while accessing server side am getting the path from hidden contrl.

Let's go through the sample.

Aspx Code

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">

</asp:ScriptManager>

<asp:UpdatePanel ID="upDate" runat="server">

<ContentTemplate>

<asp:FileUpload ID="fileUpload" runat="server" />

<asp:Button ID="btnSave" runat="server" onclick="btnSave_Click" />

<asp:HiddenField ID="hidFileName" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

Javascript:

function fileUploads(objGetId, objHidId) {

var objfile = document.getElementById(objGetId);

var objhid = document.getElementById(objHidId);

if (objfile != null) {

objhid.value = objfile.value;

}

}

C# Code

protected void Page_Load(object sender, EventArgs e)

{

btnSave.Attributes.Add("onclick", "javascript:fileUploads('fileUpload','"+hidFileName.ClientID+"')");

// string test = fileUpload.FileName;

}

protected void btnSave_Click(object sender, EventArgs e)

{

string test = hidFileName.Value;

}

ExcelDataReader

hi guys, This is one of the best approuch for converting excel in to dataset. I am using this in our project. This exceldatareader will read very faster than any other approach so far.

So that we are using in our project. Its very good approach.. let's download in the below url

http://www.codeplex.com/ExcelDataReader

Then include in your project. Just include in your project as a DLL. Then access all the classes.

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