@{
ViewBag.Title = "inlinecellEditing";
}
<h2>Inline Cell Editing</h2>
<table id="tbl_customers">
<thead>
<tr>
<th>Customer ID</th><th>Name</th><th>Age</th><th>Account Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Ram</td><td>20</td><td>Student Account</td>
</tr>
<tr>
<td>2 </td><td>Balu</td><td>20</td><td>Student Account</td>
</tr>
<tr>
<td>3</td><td>Sidhu</td><td>25</td><td>Savings Account</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
var tbl = $('#tbl_customers');
//inline cell editing for the initially loaded rows
$(tbl).find('tbody tr td').dblclick(function () {
var text = $(this).text();
$(this).text("");
var textBox = document.createElement('input');
textBox.setAttribute('type', 'text');
textBox.setAttribute('onkeypress', 'onKeyPress(event,this)');
$(textBox).val(text);
$(this).append(textBox);
});
//end of inline cell editing for the initially loaded rows
});
//for inline cell editing
function onKeyPress(event, txtbx) {
if (event.keyCode == 13) {
var parentTd = $(txtbx).closest('td');
var typedVal = $(txtbx).val();
$(txtbx).remove();
$(parentTd).text(typedVal);
}
}
</script>
Controller:-
public ActionResult inlinecellEditing()
{
try
{
return View();
}
catch (Exception)
{
}
return null;
}
No comments:
Post a Comment