/* this is my source,i had binded succesfully,but how to make Eid as editable and remark as dropdown if update is clicked the changes should be saved to database and reset is clicked the old value should be display how to do..Pls help me*/
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>Editable Column Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindDatatable",
data: "{}",
dataType: "json",
success: function(data) {
for (var i = 0; i < data.d.length; i++) {
$("#tbDetails").append(
"<tr><td>" + data.d[i].Eid+
"</td><td>" + data.d[i].Ename +
"</td><td>" + data.d[i].Edesgn +
"</td><td>" + data.d[i].Esalary +
"</td><td>" + data.d[i].Remarks +
"</td></tr>");
}
},
error: function(result) {
alert("Error");
}
});
});
</script>
<style type="text/css">
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</style>
</head>
<body>
<form>
<table id="tbDetails" cellpadding="0" cellspacing="0">
<thead style="background-color:#DC5807; color:White; font-weight:bold">
<tr style="border:solid 1px #000000">
<th>Eid</th>
<th>Ename</th>
<th>Edesgn</th>
<th>Esalary</th>
<th>Remarks</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$('td.editable').bind('click', function() {
alert(1);
if (!$(this).has('input').length) {
var value = $(this).html();
var input = $('<input/>', {
'type': 'text',
'value': value,
change: function() {
var new_value = $(this).val();
var cell = $(this).parent();
var cell_index = $(this).parent().parent().children().index(cell);
var identifier = $('thead th:eq(' + cell_index + ')').html();
$(this).replaceWith(new_value);
}
});
$(this).empty();
$(this).append(input);
}
});
</script>
</form>
<p>
<input id="Submit1" type="submit" value="submit" />
<input id="Reset1" type="reset" value="reset" /></p>
</body>
</html>
/* code behind*/
Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
<webmethod()> _
Public Shared Function BindDatatable() As EmpDetails()
Dim dt As New DataTable()
Dim details As New List(Of EmpDetails)()
Using con As New SqlConnection("Data Source=WINXSER4\MSSQL05;Initial Catalog=Emp-DB;User ID=gowri103;Password=Seema10@")
Using cmd As New SqlCommand("select * from employee1", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(dt)
For Each dtrow As DataRow In dt.Rows
Dim emp As New EmpDetails()
emp.Eid = dtrow("Eid").ToString()
emp.Ename = dtrow("Ename").ToString()
emp.Edesgn = dtrow("Edesgn").ToString()
emp.Esalary = dtrow("Esalary").ToString()
emp.Remarks = dtrow("Remarks").ToString()
details.Add(emp)
Next
End Using
End Using
Return details.ToArray()
End Function
Public Class EmpDetails
Public Property Eid() As String
Get
Return e_Eid
End Get
Set(ByVal value As String)
e_Eid = value
End Set
End Property
Private e_Eid As String
Public Property Ename() As String
Get
Return e_Ename
End Get
Set(ByVal value As String)
e_Ename = value
End Set
End Property
Private e_Ename As String
Public Property Edesgn() As String
Get
Return e_Edesgn
End Get
Set(ByVal value As String)
e_Edesgn = value
End Set
End Property
Private e_Edesgn As String
Public Property Esalary() As String
Get
Return e_Esalary
End Get
Set(ByVal value As String)
e_Esalary = value
End Set
End Property
Private e_Esalary As String
Public Property Remarks() As String
Get
Return e_Remarks
End Get
Set(ByVal value As String)
e_Remarks = value
End Set
End Property
Private e_Remarks As String
End Class
End Class