jQWidgets Forums

Tagged: Kate Spade outlet 38194990

This topic contains 4 replies, has 2 voices, and was last updated by mijus 11 years, 9 months ago.

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

Author

No keyboard navigation if jqxDragDrop appended Posts

August 22, 2013 at 7:20 am No keyboard navigation if jqxDragDrop appended #27357

mijus

Participant

If DragDrop plugin appended…

gridCells.jqxDragDrop({
appendTo: ‘body’, theme: theme, dragZIndex: 99999,
dropAction: ‘none’,
initFeedback: function (feedback) {
feedback.height(25);
},
dropTarget: $(‘#grid2’), revert: true
});

…keyboard navigation does not works until user clicks on grid header. If grid is sortable, clicking on header invokes undesired grid sorting.
Is there solution of this problem?

August 22, 2013 at 7:22 am No keyboard navigation if jqxDragDrop appended #27358

Peter Stoev

Keymaster

Hi mijus,

We cannot offer a solution about that. The “focus” is in the Drag feedback, not in the Grid and that’s the reason the keyboard navigation will not be functional.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 22, 2013 at 10:06 am No keyboard navigation if jqxDragDrop appended #27402

mijus

Participant

Interesting what happens when user clicks on grid header? Maybe we could generate that event on grid load?

August 22, 2013 at 10:16 am No keyboard navigation if jqxDragDrop appended #27404

Peter Stoev

Keymaster

Hi mijus,

The header is not draggable and does not create a Drag feedback which takes the focus. Well, you can use the Grid’s “focus” method if you want to manually put the Forus into the Grid.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to setup a one way drag and drop from a Grid to a Form.</title>
    <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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.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(10),
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columns = [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname' }
                ];
            $("#grid").on('rowclick', function () {
                $("#grid").jqxGrid('focus');
            });
       
            // create data grids.
            $("#grid").jqxGrid(
            {
                width: 400,
                source: dataAdapter,
                theme: theme,
                autoheight: true,
                pageable: true,
                sortable: true,
                columns: columns,
                rendered: function () {
                    // select all grid cells.
                    var gridCells = $('#grid').find('.jqx-grid-cell');
                    if ($('#grid').jqxGrid('groups').length > 0) {
                        gridCells = $('#grid').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 = $("#grid").jqxGrid('getcellatposition', position.left, position.top);
                        $(this).jqxDragDrop('data', $("#grid").jqxGrid('getrowdata', cell.row));
                        var groupslength = $('#grid').jqxGrid('groups').length;
                        // update feedback's display value.
                        var feedback = $(this).jqxDragDrop('feedback');
                        var feedbackContent = $(this).parent().clone();
                        var table = '<table>';
                        $.each(feedbackContent.children(), function (index) {
                            if (index < groupslength)
                                return true;
                                table += '<tr>';
                                table += '<td>';
                                table += columns[index - groupslength].text + ': ';
                                table += '</td>';
                                table += '<td>';
                                table += $(this).text();
                                table += '</td>';
                                table += '</tr>';                           
                        });
                        table += '</table>';
                        feedback.html(table);
                    });
                    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 $form = $("#form");
                        var targetX = $form.offset().left;
                        var targetY = $form.offset().top;
                        var width = $form.width();
                        var height = $form.height();
                        // fill the form if the user dropped the dragged item over it.
                        if (pageX >= targetX && pageX <= targetX + width) {
                            if (pageY >= targetY && pageY <= targetY + height) {
                                $("#firstName").val(value.firstname);
                                $("#lastName").val(value.lastname);
                                $("#product").val(value.productname);
                            }
                        }
                    });
                }
            });
    
            $("#form").jqxExpander({ width: 250, theme: theme, toggleMode: 'none', showArrow: false });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div style="float: left;" id="grid">
        </div>
        <div style="margin-left: 20px; float: left;" id="form">
            <div>
                Form Panel
            </div>
            <div>
                <form>
                <table>
                    <tr>
                        <td>
                            First Name:
                        </td>
                        <td>
                            <input id="firstName" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Last Name:
                        </td>
                        <td>
                            <input id="lastName" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Product:
                        </td>
                        <td>
                            <input id="product" />
                        </td>
                    </tr>
                </table>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 22, 2013 at 11:41 am No keyboard navigation if jqxDragDrop appended #27425

mijus

Participant

Thank you, that solves the problem.

Author

Posts

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

You must be logged in to reply to this topic.