html table with cell editable as textfield and one as dropdown and data must be bind from sql server

Question

0.00/5 (No votes)

See more:

/* 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*/

XML

<%@ 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>
     <!--<tbody>
     <tr>
         <!-- The "identifier" class makes it so we have an id
         to pass to our ajax script so we know what to change -->

       <!--  <td class="editable" >Eid</td>
         <td>Ename</td>
         <td>Edesgn</td>
         <td>Esalary</td>
         <td class="editable">Remarks<select Name="Rem">
         </select></td>
         </tr>-->
    <!--   </tbody> -->
       </table>

<script type="text/javascript">
        // bind our event handler to all td elements with class editable
    $('td.editable').bind('click', function() {
        alert(1);
        // Only create an editable input if one doesn't exist
        if (!$(this).has('input').length) {
            // Get the text from the cell containing the value
            var value = $(this).html();

            // Create a new input element with the value of the cell text
            var input = $('<input/>', {
                'type': 'text',
                'value': value,

                // Give it an onchange handler so when the data is changed
                // It will do the ajax call
                change: function() {
                    var new_value = $(this).val();

                    // This finds the sibling td element with class identifier so we have
                    // an id to pass to the ajax call
                    var cell = $(this).parent();

                    // Get the position of the td cell...
                    var cell_index = $(this).parent().parent().children().index(cell);

                    // .. to find its corresponding header
                    var identifier = $('thead th:eq(' + cell_index + ')').html();

                    //ajax post with id and new value
                    $(this).replaceWith(new_value);

                }
            });

            // Empty out the cell contents...
            $(this).empty();

            // ... and replace it with the input field that has the value populated
            $(this).append(input);

        }
    });

     </script>
</form>
     <p>
         <input id="Submit1" type="submit" value="submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input id="Reset1" type="reset" value="reset" /></p>
  </body>
  </html>

VB

/* 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

Posted 13-Aug-12 1:02am

jisee

Updated 13-Aug-12 1:26am

Kenneth Haugland

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Christian Graus · Answer 1 · 2012-08-13T09:44:00

Solution 1

You need to write code that inserts a textbox and drop down using jquery, with two buttons, one that show the old value again and another that saves the new with an AJAX call. Assuming you wrote this code, that should be pretty easy for you.

Posted 13-Aug-12 9:44am

Christian Graus

Comments

jisee 14-Aug-12 0:13am

i need solution

Christian Graus 14-Aug-12 0:25am

You mean you need copy and paste code b/c you have no idea what you're doing ? It's not actually possible, based on what you said. Why not do some research, post your attempts to solve this, we'll be glad to help, and you'll end up with maintainable code b/c you'll understand it ?

jisee 14-Aug-12 2:51am

actually i'm having the code for make it editable the problem is after data binded from db it binded successfully,but no action is taken when i click the Emp id cell how to change it as editable i need clear idea

jisee 16-Aug-12 4:35am

still i didn't get solution can u help me out with this.my task is want to edit employee id and another column as dropdown data was populated from sql server using jquery.I want code for make that editable as i mentioned above and if i click i will have chance to chane id and dropdown value after pressing update button the change value have to store in db and shown in html if i press reset the old value should be placed there only client side scripting i need.Help me with this i already send my code

Christian Graus 16-Aug-12 13:23pm

I suggest using debugging in Chrome and with breakpoints in your AJAX code ( and replaceWith only calls AJAX if it's a third party library doing it for you ), to see where it's going wrong