Adding/Removing column Dynamically to grid by drag and drop

Hi all,

Requirement is:On left hand side i have treeview ;when we drag and drop the treeview Node On grid it will become column in grid ..and same way when i drag and drop the grid column on tree view grid column to be deleted/Removed in c# asp.Net 3.5

Thanks,

8970458158

Requirement is:On left hand side i have treeview ;when we drag and drop the treeview Node On grid it will become column in grid ..and same way when i drag and drop the grid column on tree view grid column to be deleted/Removed in c# asp.Net 3.5

Following link is useful

http://api.jqueryui.com/draggable/

http://stackoverflow.com/questions/3188130/how-do-i-trigger-the-drop-event-with-jquery-ui-droppable-without-actually-draggi

http://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-events

You need to study about drag drop event handling. e.g.

$("#droppable").droppable({
        drop: function(event, ui) {
            //do stuff remove row by calling backend function or service etc.
        }
    });

can i use sql database for every reflections like adding/remove column by dnd

thanks for your reply …when iam dragging a node on grid it will become column..how can i update this into SqlDB for this requirement which grid i need to use please suggest me

Hi,

My suggestion will be do not use asp.net griview in this case. You can use plain table or any other table library like datatable.net.

thanks for your reply……I took one html table iam binding that to DataTable ..but sorting(default function) is not applying to newly added columns,Sorting and reordering columns is coming only for existing data,not for Dynamic Columns…How to make it
….Suggest me

Hi

I am actually trying to do exactly the same thing, using a jquery grid that I bound to an SQL database

I am still trying to figure out how to dynamically be able to add a column to the the grid and mirror the effect in the SQL database, so I am just wondering if you managed to find a solution for this problem?

Kind regards

hi…Thanks for Your Response,I am using Data Table 9.1;using this i achieve My goal 50%;I am able to add column dynamically and i can remove the column dynamically by drag and drop but it is working Only on existing Columns like col1,col2 etc but not for
Dynamic columns(newly added like nth Column)..  i am unable to drag and drop for Dynamic Columns…If you guide me in this..I can reach my goal 100%;

Here is My Code……

 <style type="text/css" title="currentStyle">
        @import "../DataTabels/demo_table.css";
    </style>
    <script src="DataTabels/jquery.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>
    <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"),
                                             iter = 0;
                    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 tableData = $("#sampleTable").dataTable();
                }
            });
        });
        $(document).ready(function () {
            $("#sampleTable th").draggable();
            $("#TreeviewDiv").droppable({
                drop: function (event, ui) {
                    var tableData = $("#sampleTable").dataTable();
                    var aPos = tableData.fnGetPosition(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" class="draggable">
            <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>
</html>

hai to all…..here i am using data tables 1.9 ;My requirement is Removing column from data table using Drag and drop;but i am unable to get the column index ;kindly help me;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>

Thanks in advance

Leave a Reply