jQWidgets Forums

Tagged: angular grid, angulargrid, angulargrid.net, jqwidgets grid

This topic contains 2 replies, has 2 voices, and was last updated by arunthatham 10 years ago.

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

Author

Reorder issue in Columns hierarchy Posts
May 13, 2015 at 7:24 am Reorder issue in Columns hierarchy #71048

arunthatham
Participant

HI,

I want to reorder all the columns in the array. I understand that the column groups can not be dragged to reorder. But I want to place a column which is not part of any group in front of a group. The modified code is below. I have remove column “Price” from the “ProductDetails” group. Now I want to drag and drop in front of the group. ie., next to SupplierName. How do I achieve that?

Note: Am able to drag drop a column in front of the group if there are already two columns if front of the group.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This sample illustrates the Columns Hierarchy feature of jqxGrid.
</title>
<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.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.columnsresize.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/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.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/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘SupplierName’, type: ‘string’ },
{ name: ‘Quantity’, type: ‘number’ },
{ name: ‘OrderDate’, type: ‘date’ },
{ name: ‘OrderAddress’, type: ‘string’ },
{ name: ‘Freight’, type: ‘number’ },
{ name: ‘Price’, type: ‘number’ },
{ name: ‘City’, type: ‘string’ },
{ name: ‘ProductName’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ }
],
url: ‘../sampledata/orderdetailsextended.xml’,
root: ‘DATA’,
record: ‘ROW’
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {

}
});
// create jqxgrid.
$(“#jqxgrid”).jqxGrid(
{
width: 850,
groupable:false,
source: dataAdapter,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columnsreorder:true,
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘SupplierName’, width: 110 },
{ text: ‘Name’, columngroup: ‘ProductDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
{ text: ‘Quantity’, columngroup: ‘ProductDetails’, datafield: ‘Quantity’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 80 },
{ text: ‘Freight’, columngroup: ‘OrderDetails’, datafield: ‘Freight’, cellsformat: ‘d’, cellsalign: ‘center’, align: ‘center’, width: 100 },
{ text: ‘Order Date’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, cellsformat: ‘d’, datafield: ‘OrderDate’, width: 100 },
{ text: ‘Order Address’, columngroup: ‘OrderDetails’, cellsalign: ‘center’, align: ‘center’, datafield: ‘OrderAddress’, width: 100 },
{ text: ‘Price’, datafield: ‘Price’, cellsformat: ‘c2’, align: ‘center’, cellsalign: ‘center’, width: 70 },
{ text: ‘Address’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘Address’, width: 120 },
{ text: ‘City’, columngroup: ‘Location’, cellsalign: ‘center’, align: ‘center’, datafield: ‘City’, width: 80 }
],
columngroups:
[
{ text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’ },
{ text: ‘Order Details’, parentgroup: ‘ProductDetails’, align: ‘center’, name: ‘OrderDetails’ },
{ text: ‘Location’, align: ‘center’, name: ‘Location’ }
]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>

Thanks,
arunthatham

May 13, 2015 at 10:37 am Reorder issue in Columns hierarchy #71062

Peter Stoev
Keymaster

Hi arunthatham,

Reorder can be done only within the Groups i.e you can’t add column from one group to another.

Regards,
Peter stoev

May 13, 2015 at 2:06 pm Reorder issue in Columns hierarchy #71072

arunthatham
Participant

Hi,

Am asking about columns which are in between 2 groups. In the above sample code I have given, column “Price” is not part of any group. Now I want to move that in front of the ProductDetails group. ie., next to the column “SupplierName” which is also not part of any group. Please suggest.

Thanks,
Arunthatham
Author

Posts

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

You must be logged in to reply to this topic.