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
  • Drag and Drop Grid Column #29454

    dominicthoppil
    Participant

    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
    Dominic

    Drag and Drop Grid Column #29600

    Dimitar
    Participant

    Hello 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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Drag and Drop Grid Column #29664

    dominicthoppil
    Participant

    Dear Dimitar

    Thank you for your reply.

    Regards
    Dominic

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.