unable to perform drag and drop on Dynamically added columns

unable to perform drag and drop on Dynamically added columns

ManoRamaManoRama Posts: 5Questions: 0Answers: 0
edited April 2013 in DataTables 1.9
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

Replies

  • allanallan Posts: 63,386Questions: 1Answers: 10,449 Site admin
    There is no ability in DataTables to dynamically add and remove columns at this time.

    Allan
  • ManoRamaManoRama Posts: 5Questions: 0Answers: 0
    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
This discussion has been closed.