unable to perform drag and drop on Dynamically added columns

ManoRama

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:



@import "../DataTabels/demo_table.css";







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('' + columnName + ' ' + '').addClass("ui-draggable");
}
else if (trow.index() >= 1) {
trow.append(' Acer ');
}
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);
}

});
});























AccountType AccountName New Name1 Lead Name2 test Name3





Please guide me if i done wrong ;and suggest me how to resolve the issue.....

Thanks in advance

allan

There is no ability in DataTables to dynamically add and remove columns at this time.

Allan

ManoRama

Thanks for Your Reply ....when I am giving title for columns like this:
$("#sampleTable thead tr").append("" + $.trim(columnName) + "").draggable({});
In Out put :a new column is adding to Data table1.9 .and columnName is coming fine;But when mouse over on columnHead('th') cell title is not showing properly;i.e. If title of columnName="Billing Address" ...On Mouse Over it is Displaying as "Billing" Only....y it is Spliting?...and how can i get My 'th' title same as columnName ..Please Guide Me