hai to all......
here My requirement is: adding and removing column by drag and drop functionality dynamically from treeview to dataTable 1.9;for that i took html table with some static data ;thats i binded to data table;currently i can able to add columns dynamically and i can remove the columns using drag and drop functionality but here is the problem drag and drop functionality is working only for static data; i am working on .net framework 3.5
here is my code:
<head runat="server">
<title></title>
<style type="text/css" title="currentStyle">
@import "../DataTabels/demo_table.css";
</style>
<script src="Scripts/JQuery1.9.1.js" type="text/javascript"></script>
<script src="DataTabels/jquery.dataTables.js" type="text/javascript"></script>
<script src="DataTabels/ColumnIndex.js" type="text/javascript"></script>
<link rel="stylesheet" href="
http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="
http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
debugger;
$(document).ready(function () {
$(".treeNode").draggable({ helper: 'clone' });
$("#droppable").droppable({
drop: function (event, ui) {
var columnName = $(ui.draggable).text() + ' ' + "";
var duplicateCol = $("#sampleTable thead th");
var a = 0;
for (i = 0; i < duplicateCol.length; i++) {
if (duplicateCol[i].innerText.toString() == columnName.toString()) {
a = 1;
break;
}
}
if (a == 0) {
var mytable = $("#sampleTable").dataTable(),
iter = 0;
mytable.find('tr').each(function () {
var trow = $(this);
if (trow.index() === 0) {
//here i added "ui-draggable "class dynamically for making my column DnD;but its not working
trow.append('<th>' + columnName + ' ' + '</th>').addClass("ui-draggable");
}
else if (trow.index() >= 1) {
trow.append('<td> Acer </td>');
}
iter += 1;
});
var oTable = $("#sampleTable").dataTable();
oTable.fnDestroy();
$("#sampleTable").dataTable();
}
else {
$(".treeNode").draggable({ revert: true });
}
}
});
});
$(document).ready(function () {
$("#sampleTable th").draggable({
cursor: 'move',
stack: $('#TreeviewDiv')
});
$("#TreeviewDiv").droppable({
drop: function (event, ui) {
var columnName = $(ui.draggable).select().text();
var oTable = $('#sampleTable').dataTable();
var colIndex = oTable.fnGetColumnIndex(columnName);
alert(colIndex);
var index = colIndex + 1;
$.fn.removeCol = function (col) {
$('tr td:nth-child(' + col + '), tr th:nth-child(' + col + ')', this).remove();
return this;
};
$('#sampleTable').removeCol(index);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="TreeviewDiv">
<asp:TreeView ID="TreeView1" runat="server" ImageSet="BulletedList3">
<Nodes>
<asp:TreeNode Text="AccountGeneral" Value="AccountGeneral">
<asp:TreeNode Text="AccountOwner" Value="AccountOwner"></asp:TreeNode>
<asp:TreeNode Text="CreatedBy" Value="CreatedBy"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
<NodeStyle CssClass="treeNode" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
<ParentNodeStyle Font-Bold="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
</div>
<div>
</div>
<br />
<div id="droppable">
<table id="sampleTable">
<thead><tr><th>AccountType </th> <th> AccountName </th></tr></thead> <tbody> <tr><td> New </td> <td> Name1</td></tr> <tr> <td> Lead</td> <td> Name2 </td></tr><tr> <td> test </td><td> Name3 </td> </tr>
</tbody>
</table>
</div>
</form>
</body>
Please guide me if i done wrong ;and suggest me how to resolve the issue.....
Thanks in advance