jQWidgets Forums

Tagged: jqxgrid

This topic contains 4 replies, has 3 voices, and was last updated by Milan Lodhiya 10 years, 3 months ago.

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

Author

Drag Drop in a grid – RowFilter is not enabled. Posts

September 10, 2013 at 10:03 pm Drag Drop in a grid – RowFilter is not enabled. #28722

kr.nanditha

Member

Is the RowFilter disabled on jqxgrid when drag drop functionality is present in the grid?

September 11, 2013 at 9:43 am Drag Drop in a grid – RowFilter is not enabled. #28771

Mariya

Participant

Hi kr.nanditha,

The filtering and the drag and drop functionality can be used together. The idea of our examples of a specific feature is to show to our clients the best and the easiest way to use them. If we do not combine two different features this does not mean that they can not be combined.
I hope I was helpful and if you have any further questions do not hesitate to contact us.

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

September 11, 2013 at 4:18 pm Drag Drop in a grid – RowFilter is not enabled. #28790

kr.nanditha

Member

Hi Mariya,

Thanks for your reply. I have put both drag drop and filter in my code as below. The rowfilter is shown but is disabled when dragdrop is present. However when i remove the rendered function, the rowfilter is enabled. Please find an example code below.

When I do remove dragdrop the $(“#jqxgrid”).jqxGrid(
{
width: 320,
source: dataAdapter,
theme: theme,
autoheight: true,
showfilterrow: true,
filterable: true,
selectionmode: ‘multiplerows’,
columns: columns,

rendered: function () {
// select all grid cells.
var gridCells = $(‘#jqxgrid’).find(‘.jqx-grid-cell’);
if ($(‘#jqxgrid’).jqxGrid(‘groups’).length > 0) {
gridCells = $(‘#jqxgrid’).find(‘.jqx-grid-group-cell’);
}
// initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
gridCells.jqxDragDrop({
appendTo: ‘body’, theme: theme, dragZIndex: 99999,
dropAction: ‘none’,
initFeedback: function (feedback) {
feedback.height(70);
feedback.width(220);
}
});
// initialize the dragged object.
gridCells.off(‘dragStart’);
gridCells.on(‘dragStart’, function (event) {
var value = $(this).text();
var position = $.jqx.position(event.args);
var cell = $(“#jqxgrid”).jqxGrid(‘getcellatposition’, position.left, position.top);
$(this).jqxDragDrop(‘data’, $(“#jqxgrid”).jqxGrid(‘getrowdata’, cell.row));
var rowsindexes = $(“#jqxgrid”).jqxGrid(‘getselectedrowindexes’);
var rows = [];
var clickedrow = cell.row;
var isselected = false;
for (var i = 0; i 1) {
// update feedback’s display value.
var feedback = $(this).jqxDragDrop(‘feedback’);
if (feedback) {
feedback.height(rows.length * 25 + 25);
var table = ”;
table += ”;
$.each(columns, function (index) {
table += ”;
table += this.text;
table += ”;
});
table += ”;
$.each(rows, function () {
table += ”;
table += ”;
table += this.FirstName;
table += ”;
table += ”;
table += this.LastName;
table += ”;
table += ”;
table += this.Organization;
table += ”;
table += ”;
});
table += ”;
feedback.html(table);
}
// set the dragged records as data
$(this).jqxDragDrop({ data: rows })
}
});
gridCells.off(‘dragEnd’);
gridCells.on(‘dragEnd’, function (event) {
var value = $(this).jqxDragDrop(‘data’);
var position = $.jqx.position(event.args);
var pageX = position.left;
var pageY = position.top;
var $destination = $(“#jqxgrid2”);
var targetX = $destination.offset().left;
var targetY = $destination.offset().top;
var width = $destination.width();
var height = $destination.height();
if (pageX >= targetX && pageX = targetY && pageY <= targetY + height) {
$destination.jqxGrid('addrow', null, value);
}
}
});
}

});

September 13, 2013 at 11:53 am Drag Drop in a grid – RowFilter is not enabled. #28943

Mariya

Participant

Hi kr.nanditha,

The jQuery selection that selects the Draggable Grid cells should not include the Cells from the Filter Row.
Please take a look at the provided 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/jqxdata.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.pager.js"></script>
       <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.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/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var source =
            {
                localdata: generatedata(100),
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create data grids.
            $("#grid1").jqxGrid(
            {
                width: 450,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                showfilterrow: true,
                filterable: true,
                sortable: true,
                rendered: function (type) {
                    // select all grid cells.
                    var gridCells = $('#grid1').find('.jqx-grid-content').find('.jqx-grid-cell');
                    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
                    gridCells.jqxDragDrop({
                        appendTo: 'body', theme: theme, dragZIndex: 99999,
                        dropAction: 'none',
                        initFeedback: function (feedback) {
                            feedback.height(25);
                        },
                        dropTarget: $('#grid2'), revert: true
                    });
                    gridCells.off('dragStart');
                    gridCells.off('dragEnd');
                    gridCells.off('dropTargetEnter');
                    gridCells.off('dropTargetLeave');
                    // disable revert when the dragged cell is over the second Grid.
                    gridCells.on('dropTargetEnter', function () {
                        gridCells.jqxDragDrop({ revert: false });
                    });
                    // enable revert when the dragged cell is outside the second Grid.
                    gridCells.on('dropTargetLeave', function () {
                        gridCells.jqxDragDrop({ revert: true });
                    });
                    // initialize the dragged object.
                    gridCells.on('dragStart', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid1").jqxGrid('getcellatposition', position.left, position.top);
                        $(this).jqxDragDrop('data', {
                            value: value
                        });
                    });
                    // set the new cell value when the dragged cell is dropped over the second Grid.      
                    gridCells.on('dragEnd', function (event) {
                        var value = $(this).text();
                        var position = $.jqx.position(event.args);
                        var cell = $("#grid2").jqxGrid('getcellatposition', position.left, position.top);
                        if (cell != null) {
                            $("#grid2").jqxGrid('setcellvalue', cell.row, cell.column, value);
                        }
                    });
                },
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 125 },
                  { text: 'Last Name', dataField: 'lastname', width: 125 },
                  { text: 'Product', dataField: 'productname', width: 200 }
                ]
            });
            $("#grid2").jqxGrid(
            {
                width: 450,
                theme: theme,
                selectionmode: 'singlecell',
                autoheight: true,
                source: {
                    totalrecords: 10, unboundmode: true, datafields:
                    [
                        { name: 'firstname' },
                        { name: 'lastname' },
                        { name: 'productname' }
                    ]
                },
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 125 },
                  { text: 'Last Name', dataField: 'lastname', width: 125 },
                  { text: 'Product', dataField: 'productname', width: 200 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="grid1"></div>
        <div style="margin-top: 20px; float: left;" id="grid2"></div>
    </div>
</body>
</html>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

March 17, 2015 at 10:24 pm Drag Drop in a grid – RowFilter is not enabled. #68773

Milan Lodhiya

Participant

put this code in rendered function
it will help you..
————————————————-
$(‘.jqx-grid-cell.jqx-grid-cell-filter-row’).jqxDragDrop({ disabled: true });
————————————————

thank you
Milan Lodhiya

Author

Posts

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

You must be logged in to reply to this topic.