jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Drag and Drop Grid Column
This topic contains 2 replies, has 2 voices, and was last updated by dominicthoppil 11 years, 10 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
Hi
Is it possible to drag and drop the grid column for hide/show columns. I have seen your Show/Hide column example, i just want to drag the column to a box for hiding that column. To show that column again, drag the column from the square box and drop in the grid.
Is it possible ?
Regards
DominicHello Dominic,
Here is an example:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; $("#jqxlistbox").jqxListBox({ allowDrag: true, width: 200, height: 200, theme: theme }); var url = "../sampledata/beverages.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'name' }, { name: 'type' }, { name: 'calories', type: 'int' }, { name: 'totalfat' }, { name: 'protein' } ], id: 'id', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 400, source: dataAdapter, theme: theme, ready: function () { // callback function which is called by jqxGrid when the widget is initialized and the binding is completed. }, columnsresize: true, columns: [ { text: 'Name', datafield: 'name', hidden: true, width: 250 }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180 }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', minwidth: 120 } ], rendered: function () { var draggedColumn; var headers = $("#jqxgrid .jqx-grid-column-header"); headers.jqxDragDrop({ appendTo: "body", dropAction: "none", dropTarget: $("#jqxlistbox"), initFeedback: function (feedback) { feedback.height(25); }, onTargetDrop: function (a, b, c, d, e) { $("#jqxgrid").jqxGrid('hidecolumn', draggedColumn); $("#jqxlistbox").jqxListBox('addItem', draggedColumn); } }); headers.off('dragStart'); headers.bind('dragStart', function (event) { draggedColumn = event.args.target.textContent; switch (draggedColumn) { case "Name": draggedColumn = "name"; break; case "Beverage Type": draggedColumn = "type"; break; case "Calories": draggedColumn = "calories"; break; case "Total Fat": draggedColumn = "totalfat"; break; case "Protein": draggedColumn = "protein"; break; }; }); } }); $("#jqxlistbox").on('dragEnd', function (event) { var label = event.args.label; if (label) { var ev = event.args.originalEvent; var x = ev.pageX; var y = ev.pageY; if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) { var touch = event.args.originalEvent.originalEvent.changedTouches[0]; x = touch.pageX; y = touch.pageY; }; var offset = $("#jqxgrid").offset(); var width = $("#jqxgrid").width(); var height = $("#jqxgrid").height(); var right = parseInt(offset.left) + width; var bottom = parseInt(offset.top) + height; if (x >= parseInt(offset.left) && x <= right) { if (y >= parseInt(offset.top) && y <= bottom) { $("#jqxlistbox").jqxListBox('removeItem', label); $("#jqxgrid").jqxGrid("showcolumn", label); }; }; }; }); }); </script></head><body class='default'> <div id='jqxWidget'> <div style="float: left;" id="jqxlistbox"> </div> <div style="margin-left: 20px; float: left;" id="jqxgrid"> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dear Dimitar
Thank you for your reply.
Regards
Dominic -
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.