jQuery UI Widgets Forums Editors CheckBox, RadioButton From first jqxgrid select row on click and pass to another new grid

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 3 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • dan123
    Participant

    jqxgrid help with row selection display? Please provide a good example

    So basically I want to select row by just clicking from the first grid, and then it would fetch that row into the other empty grid. Also be able to select all rows, and multiple checks, so It would retrieve those rows data into the empty grid. P

    Code is below

    Original:
    Original

    Actual Outcome needed:
    Actual Outcome

    Code:

    <!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.11.1.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/jqxcheckbox.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=”generatedata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    var source =
    {
    localdata: generatedata(10),
    datafields:
    [
    { name: ‘firstname’, type: ‘string’ },
    { name: ‘lastname’, type: ‘string’ },
    { name: ‘productname’, type: ‘string’ },
    { name: ‘Discontinued’, type: ‘bool’ }

    ],
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    var columns = [
    { text: ‘Discontinued’, columntype: ‘checkbox’, datafield: ‘Discontinued’ },
    { text: ‘First Name’, dataField: ‘firstname’, width: 100 },
    { text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
    { text: ‘Product’, dataField: ‘productname’ }
    ];
    // create data grids.
    $(“#grid”).jqxGrid(
    {
    width: 400,
    source: dataAdapter,
    autoheight: true,
    pageable: true,
    sortable: true,
    columns: columns,
    enabletooltips: true,
    editable: true,

    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’, 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 $destination = $(“#destinationGrid”);
    var targetX = $destination.offset().left;
    var targetY = $destination.offset().top;
    var width = $destination.width();
    var height = $destination.height();
    if (pageX >= targetX && pageX <= targetX + width) {
    if (pageY >= targetY && pageY <= targetY + height) {
    $destination.jqxGrid(‘addrow’, null, value);
    }
    }
    });
    }

    });

    $(“#destinationGrid”).jqxGrid(
    {
    height: 335,
    width: 400,
    keyboardnavigation: false,
    selectionmode: ‘none’,
    columns: [
    { text: ‘First Name’, dataField: ‘firstname’, width: 100 },
    { text: ‘Last Name’, dataField: ‘lastname’, width: 100 },
    { text: ‘Product’, dataField: ‘productname’ }
    ]
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’>
    <div id=”grid”>
    </div>
    </div>
    <br />
    <div id=”destinationGrid”>
    </div>
    </body>
    </html>

    • This topic was modified 3 years, 6 months ago by  dan123.

    Hristo
    Participant

    Hello dan123,

    You could use rowselect and rowunselect events, also addrow and deleterow methods of the Grid to achieve the desire result.
    Please, take a look this examples that could be useful:
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/checkboxselection.htm?light
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/masterdetails.htm?light

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.