Overview
DevExtreme HTML5 JavaScript Data Grid is an adaptive grid component available as an AngularJS directive. Data Grid supports two-way binding to scope properties and behaves like a native component. This demo showcases the grid's customizable layout and columns. Refer to other demos in this section for a detailed overview of other Data Grid features, like client-side exporting and printing, master-detail interface, searching with a search panel, etc.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
var collapsed = false;
$scope.dataGridOptions = {
dataSource: {
store: {
type: "odata",
url: "https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes",
beforeSend: function(request) {
request.params.startDate = "2018-05-10";
request.params.endDate = "2018-05-15";
}
}
},
paging: {
pageSize: 10
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [10, 25, 50, 100]
},
remoteOperations: false,
searchPanel: {
visible: true,
highlightCaseSensitive: true
},
groupPanel: { visible: true },
grouping: {
autoExpandAll: false
},
allowColumnReordering: true,
rowAlternationEnabled: true,
showBorders: true,
columns: [
{
dataField: "Product",
groupIndex: 0
},
{
dataField: "Amount",
caption: "Sale Amount",
dataType: "number",
format: "currency",
alignment: "right",
},
{
dataField: "Discount",
caption: "Discount %",
dataType: "number",
format: "percent",
alignment: "right",
allowGrouping: false,
cellTemplate: "discountCellTemplate",
cssClass: "bullet"
},
{
dataField: "SaleDate",
dataType: "date"
},
{
dataField: "Region",
dataType: "string"
},
{
dataField: "Sector",
dataType: "string",
},
{
dataField: "Channel",
dataType: "string",
},
{
dataField: "Customer",
dataType: "string",
width: 150
}
],
onContentReady: function(e) {
if(!collapsed) {
collapsed = true;
e.component.expandRow(["EnviroCare"]);
}
}
};
$scope.customizeTooltip = function(pointsInfo) {
return { text: parseInt(pointsInfo.originalValue) + "%" };
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="gridContainer" dx-data-grid="dataGridOptions" dx-item-alias="discount">
<div data-options="dxTemplate:{ name:'discountCellTemplate' }">
<div class="chart-cell">
<div dx-bullet="{
onIncidentOccurred: null,
size: {
width: 150,
height: 35
},
margin: {
top: 5,
bottom: 0,
left: 5
},
showTarget: false,
showZeroLevel: true,
value: discount.value * 100,
startScaleValue: 0,
endScaleValue: 100,
tooltip: {
enabled: true,
font: {
size: 18
},
paddingTopBottom: 2,
customizeTooltip: customizeTooltip,
zIndex: 5
}
}"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.dx-datagrid .dx-data-row > td.bullet {
padding-top: 0;
padding-bottom: 0;
}