@{
ViewBag.Title = "modifycolumnHeader";
}
<h2>Modify Column Header</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');
//change the cursor to hand on hovering the columns
$(tbl).find('thead tr th').hover(function () {
$(this).css('cursor', 'pointer');
});
//open jquery dialog to modify column header on double click of column header
$(tbl).find('thead tr th').unbind('dblclick').dblclick(function () {
var currentHeader = $(this);
var oldheaderText = $(this).html();
custominputDialog(currentHeader, oldheaderText);
});
});
//for jquery custom dialog box
function custominputDialog(currentHeader, oldheaderText) {
//remove the existing div
var divs = $('body').find('div[id="div_custominputDialog"]');
$.each(divs, function (index, divItem) {
$(divItem).remove();
});
//add new div
$('body').append('<div id="div_custominputDialog"><input type="text" id="txt_colheader"/></div>');
var txtinput = $('#div_custominputDialog').find('#txt_colheader');
$(txtinput).val(oldheaderText);
$('#div_custominputDialog').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: 'Modify header',
minHeight: 75,
buttons: {
OK: function () {
$(currentHeader).html($('#div_custominputDialog').find('#txt_colheader').val());
$(this).dialog('close');
$(this).dialog('destroy');
},
CANCEL: function () {
$(this).dialog('close');
$(this).dialog('destroy');
}
}
});
$('#div_custominputDialog').dialog('open');
}
</script>
Controller:-
public ActionResult modifycolumnHeader()
{
try
{
return View();
}
catch (Exception)
{ }
return null;
}
No comments:
Post a Comment