jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
84 lines (78 loc) • 4.08 kB
HTML
<html ng-app="demoApp" lang="en">
<head>
<title id='Description'>This example shows the set the cells and columns alignment.
</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/angular.min.js"></script>
<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/jqxangular.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../sampledata/generatedata.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets", "jqwidgets-amd"]);
demoApp.controller("demoController", function ($scope) {
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datafields:
[
{ name: 'id', type: 'number'},
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
],
datatype: "array"
};
var columns = [
{ text: 'First Name', datafield: 'firstname', width: 200, cellsalign: 'center', align: 'center' },
{ text: 'Last Name', datafield: 'lastname', width: 200, cellsalign: 'center', align: 'center' },
{ text: 'Product', datafield: 'productname', width: 180, cellsalign: 'center', align: 'center' },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'center', align: 'center' },
{ text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'center', align: 'center', cellsFormat: 'c2' },
{ text: 'Total', datafield: 'total', cellsAlign: 'center', align: 'center', cellsformat: 'c2' }
];
$scope.gridSettings =
{
width: 850,
source: source,
selectionmode: 'multiplecellsextended',
columns: columns
};
var setAlignment = function (align) {
$scope.gridSettings.apply('beginupdate');
for (var index = 0; index < columns.length; index++) {
$scope.gridSettings.apply('setcolumnproperty', columns[index].datafield, 'align', align);
$scope.gridSettings.apply('setcolumnproperty', columns[index].datafield, 'cellsAlign', align);
}
$scope.gridSettings.apply('endupdate');
}
$scope.leftCheck = function () {
setAlignment('left');
};
$scope.centerCheck = function () {
setAlignment('center');
};
$scope.rightCheck = function () {
setAlignment('right');
};
});
</script>
</head>
<body ng-controller="demoController">
<jqx-grid jqx-settings="gridSettings"></jqx-grid>
<div>
<h3>Alignment</h3>
<jqx-radio-button jqx-width="100" style="float: left;" jqx-on-checked="leftCheck(event)">Left</jqx-radio-button>
<jqx-radio-button jqx-checked="true" jqx-width="100" style="float: left;" jqx-on-checked="centerCheck(event)">Center</jqx-radio-button>
<jqx-radio-button jqx-width="100" style="float: left;" jqx-on-checked="rightCheck(event)">Right</jqx-radio-button>
</div>
</body>
</html>