hai to all,
here my requirement is removing a column from data table using drag and drop on treeview ;i am unable to get the column Index here;please guide me how to acheive this;If i need any api's guide me how to add it;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 type="text/javascript" src="DataTabels/ColReorder.js"></script>
<script src="DataTabels/DragandDrop.js" type="text/javascript"></script>
<script src="Scripts/jquery.dndtable.js" type="text/javascript"></script>
<script src="DataTabels/ColVis.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 mytable = $("#sampleTable").dataTable(),
iter = 0;
//adding dragged treeview Node as column in data table
mytable.find('tr').each(function () {
var trow = $(this);
if (trow.index() === 0) {
trow.append('<th >' + columnName + '</th>');
}
else if (trow.index() >= 1) {
trow.append('<td> Acer </td>');
}
iter += 1;
});
var oTable = $("#sampleTable").dataTable();
oTable.fnDestroy();
//displaying Data
$("#sampleTable").dataTable();
}
});
});
$(document).ready(function () {
$("#sampleTable tr ").draggable({
cursor: 'move',
stack: $('#TreeviewDiv')
});
$("#TreeviewDiv").droppable({
drop: function (event, ui) {
var oTable = $("#sampleTable").dataTable();
//when i dropped on treeview Data Table column has to be delete.
//getting position of column
var aPos = oTable.fnGetPosition(this);
// var aPos = oTable.fnGetPosition($("thead tr").index(this));
$.fn.removeCol = function (col) {
if (!col) { col = 1; }
$('tr td:nth-child(' + col + '), tr th:nth-child(' + col + ')', this).remove();
return this;
};
$('#sampleTable').removeCol(aPos);
}
});
});
</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>
here my requirement is removing a column from data table using drag and drop on treeview ;i am unable to get the column Index here;please guide me how to acheive this;If i need any api's guide me how to add it;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 type="text/javascript" src="DataTabels/ColReorder.js"></script>
<script src="DataTabels/DragandDrop.js" type="text/javascript"></script>
<script src="Scripts/jquery.dndtable.js" type="text/javascript"></script>
<script src="DataTabels/ColVis.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 mytable = $("#sampleTable").dataTable(),
iter = 0;
//adding dragged treeview Node as column in data table
mytable.find('tr').each(function () {
var trow = $(this);
if (trow.index() === 0) {
trow.append('<th >' + columnName + '</th>');
}
else if (trow.index() >= 1) {
trow.append('<td> Acer </td>');
}
iter += 1;
});
var oTable = $("#sampleTable").dataTable();
oTable.fnDestroy();
//displaying Data
$("#sampleTable").dataTable();
}
});
});
$(document).ready(function () {
$("#sampleTable tr ").draggable({
cursor: 'move',
stack: $('#TreeviewDiv')
});
$("#TreeviewDiv").droppable({
drop: function (event, ui) {
var oTable = $("#sampleTable").dataTable();
//when i dropped on treeview Data Table column has to be delete.
//getting position of column
var aPos = oTable.fnGetPosition(this);
// var aPos = oTable.fnGetPosition($("thead tr").index(this));
$.fn.removeCol = function (col) {
if (!col) { col = 1; }
$('tr td:nth-child(' + col + '), tr th:nth-child(' + col + ')', this).remove();
return this;
};
$('#sampleTable').removeCol(aPos);
}
});
});
</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>