This topic contains 1 reply, has 2 voices, and was last updated by Hristo 8 years, 3 months ago.
-
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:
Actual Outcome needed:
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>
You must be logged in to reply to this topic.