Available in the OSS Version
Layout Manager - Grid Layout
This sample demonstrates the layout manager control’s grid layout.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Last Run Speed
Total Distance Last Week
49 km
Total Cal Last Week
3675 cal
Total Distance Last Month
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
The control allows you to position items arbitrarily in a grid with a predefined size including for items with different rowspan and colspan settings.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ignite UI for jQuery Layout Manager - grid layout with absolute positioning</title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.layout.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Modernizr/jQuery/jQuery UI -->
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="/data-files/last-month-run-km.js"></script>
<script src="/data-files/running-speed.js"></script>
<style type="text/css">
ul {
list-style-type: none;
}
#layout {
position: relative;
}
.ig-layout-item {
padding: 5px;
}
.ig-layout-item > div {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 5px;
}
.box {
background-color: #fff;
border: 1px solid #888;
color: grey;
}
.box-title {
color:#fff;
background-color:#888;
font-size: 16px;
padding: 6px 0 10px 10px;
}
.box table td {
padding: 0;
}
.box-body-big-text {
font-size: 60px;
margin-top: 15px;
text-align: center;
color: #f60;
}
@media all and (max-width: 910px) {
.box-title {
font-size: 14px;
}
.box-body-big-text {
font-size: 49px;
margin-top: 24px;
}
}
@media all and (max-width: 740px) {
.box-title {
font-size: 12px;
}
.box-body-big-text {
font-size: 38px;
margin-top: 34px;
}
}
@media all and (max-width: 570px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 20px;
margin-top: 47px;
}
}
@media all and (max-width: 360px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 17px;
margin-top: 45px;
}
}
</style>
</head>
<body>
<div id="layout-wrapper">
<div id="layout">
<div>
<div class="box">
<div class="box-title">Last Run Speed</div>
<div id="speedLineChart" class="chartElement"></div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Week</div>
<div class="box-body-big-text">49 km</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Cal Last Week</div>
<div class="box-body-big-text">3675 cal</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Month</div>
<div id="totalKmBarChart" class="chartElement"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#layout').igLayoutManager({
layoutMode: "grid",
width: "100%",
height: "500px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
});
$("#speedLineChart").igDataChart({
width: "100%",
height: "283px",
dataSource: runningSpeedData,
axes: [
{
name: "kmAxis",
type: "categoryX",
label: "km"
},
{
name: "averageSpeedAxis",
type: "numericY",
minimumValue: 8,
maximumValue: 15,
title: "Speed (km/h)",
}
],
series: [
{
name: "speed",
type: "spline",
title: "speed",
xAxis: "kmAxis",
yAxis: "averageSpeedAxis",
valueMemberPath: "speedPerHour",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
brush: "#f60",
thickness: 3
}
]
});
$("#totalKmBarChart").igDataChart({
width: "100%",
height: "117px",
dataSource: lastMonthKmRun,
outlines: ["rgba(0,0,0,0)"],
axes: [{
name: "monthDayAxis",
type: "categoryX",
label: "monthDay",
interval: 1
},
{
name: "kmRunAxis",
type: "numericY",
title: "km"
}],
series: [{
name: "lastMonth",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "monthDayAxis",
yAxis: "kmRunAxis",
valueMemberPath: "kmRun",
brush: "#f60",
thickness: 0,
radius: 0
}]
});
});
</script>
</body>
</html>
var lastMonthKmRun = [
{ "monthDay": 1, "kmRun": 5 },
{ "monthDay": 2, "kmRun": 0 },
{ "monthDay": 3, "kmRun": 10 },
{ "monthDay": 4, "kmRun": 11 },
{ "monthDay": 5, "kmRun": 0 },
{ "monthDay": 6, "kmRun": 0 },
{ "monthDay": 7, "kmRun": 5 },
{ "monthDay": 8, "kmRun": 0 },
{ "monthDay": 9, "kmRun": 7 },
{ "monthDay": 10, "kmRun": 7 },
{ "monthDay": 11, "kmRun": 0 },
{ "monthDay": 12, "kmRun": 14 },
{ "monthDay": 13, "kmRun": 0 },
{ "monthDay": 14, "kmRun": 15 },
{ "monthDay": 15, "kmRun": 0 },
{ "monthDay": 16, "kmRun": 9 },
{ "monthDay": 17, "kmRun": 0 },
{ "monthDay": 18, "kmRun": 13 },
{ "monthDay": 19, "kmRun": 16 },
{ "monthDay": 20, "kmRun": 0 },
{ "monthDay": 21, "kmRun": 15 },
{ "monthDay": 22, "kmRun": 10 },
{ "monthDay": 23, "kmRun": 0 },
{ "monthDay": 24, "kmRun": 0 },
{ "monthDay": 25, "kmRun": 9 },
{ "monthDay": 26, "kmRun": 20 },
{ "monthDay": 27, "kmRun": 0 },
{ "monthDay": 28, "kmRun": 10 }
];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<style>
ul {
list-style-type: none;
}
#layout {
position: relative;
}
.ig-layout-item {
padding: 5px;
}
.ig-layout-item > div {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 5px;
}
.box {
background-color: #fff;
border: 1px solid #888;
color: grey;
}
.box-title {
color:#fff;
background-color:#888;
font-size: 16px;
padding: 6px 0 10px 10px;
}
.box table td {
padding: 0;
}
.box-body-big-text {
font-size: 60px;
margin-top: 15px;
text-align: center;
color: #f60;
}
@media all and (max-width: 910px) {
.box-title {
font-size: 14px;
}
.box-body-big-text {
font-size: 49px;
margin-top: 24px;
}
}
@media all and (max-width: 740px) {
.box-title {
font-size: 12px;
}
.box-body-big-text {
font-size: 38px;
margin-top: 34px;
}
}
@media all and (max-width: 570px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 20px;
margin-top: 47px;
}
}
@media all and (max-width: 360px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 17px;
margin-top: 45px;
}
}
</style>
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'grid-layout.ts' ).then( null, console.error.bind( console ) );
</script>
</body>
</html>
import { Component, NgModule, OnInit } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IgDataChartComponent, IgLayoutManagerComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/map';
declare var jQuery: any;
@Component({
selector: 'my-app',
template: `
<div id="layout-wrapper">
<ig-layout-manager widgetId="layout" [(options)]="layoutConfig">
<div>
<div class="box">
<div class="box-title">Last Run Speed</div>
<ig-data-chart widgetID="speedLineChart" class="chartElement" [(options)]="speedChartConfig"></ig-data-chart>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Week</div>
<div class="box-body-big-text">49 km</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Cal Last Week</div>
<div class="box-body-big-text">3675 cal</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Month</div>
<ig-data-chart widgetId="totalKmBarChart" class="chartElement" [(options)]="totalKmChartConfig"></ig-data-chart>
</div>
</div>
</ig-layout-manager>
</div>
`
})
export class AppComponent implements OnInit {
private lastMonthRunUrl: string = "/data-files/last-month-run-km.js";
private runningSpeedUrl: string = "/data-files/running-speed.js";
public runningSpeedData: any[] = [];
public lastMonthKmRun: any[] = [];
public layoutConfig = {
layoutMode: "grid",
width: "100%",
height: "500px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
};
public speedChartConfig = {
width: "100%",
height: "283px",
dataSource: this.runningSpeedData,
axes: [
{
name: "kmAxis",
type: "categoryX",
label: "km"
},
{
name: "averageSpeedAxis",
type: "numericY",
minimumValue: 8,
maximumValue: 15,
title: "Speed (km/h)",
}
],
series: [
{
name: "speed",
type: "spline",
title: "speed",
xAxis: "kmAxis",
yAxis: "averageSpeedAxis",
valueMemberPath: "speedPerHour",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
brush: "#f60",
thickness: 3
}
]
};
public totalKmChartConfig = {
width: "100%",
height: "117px",
dataSource: this.lastMonthKmRun,
outlines: ["rgba(0,0,0,0)"],
axes: [{
name: "monthDayAxis",
type: "categoryX",
label: "monthDay",
interval: 1
},
{
name: "kmRunAxis",
type: "numericY",
title: "km"
}],
series: [{
name: "lastMonth",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "monthDayAxis",
yAxis: "kmRunAxis",
valueMemberPath: "kmRun",
brush: "#f60",
thickness: 0,
radius: 0
}]
};
constructor(private http: Http) {}
public ngOnInit() {
let getLastMonth = this.http.get(this.lastMonthRunUrl).map(res => res.json());
let getRunningSpeed = this.http.get(this.runningSpeedUrl).map(res => res.json());
Observable.forkJoin([getLastMonth, getRunningSpeed]).subscribe(res => {
this.lastMonthKmRun = res[0];
this.runningSpeedData = res[1];
});
}
}
@NgModule({
bootstraps: [AppComponent],
declarations: [AppComponent, IgDataChartComponent, IgLayoutManagerComponent],
imports: [BrowserModule, HttpModule]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
<script src="/js-data/last-month-run-km"></script>
<script src="/js-data/running-speed"></script>
<style>
ul {
list-style-type: none;
}
#layout {
position: relative;
}
.ig-layout-item {
padding: 5px;
}
.ig-layout-item > div {
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 5px;
}
.box {
background-color: #fff;
border: 1px solid #888;
color: grey;
}
.box-title {
color:#fff;
background-color:#888;
font-size: 16px;
padding: 6px 0 10px 10px;
}
.box table td {
padding: 0;
}
.box-body-big-text {
font-size: 60px;
margin-top: 15px;
text-align: center;
color: #f60;
}
@media all and (max-width: 910px) {
.box-title {
font-size: 14px;
}
.box-body-big-text {
font-size: 49px;
margin-top: 24px;
}
}
@media all and (max-width: 740px) {
.box-title {
font-size: 12px;
}
.box-body-big-text {
font-size: 38px;
margin-top: 34px;
}
}
@media all and (max-width: 570px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 20px;
margin-top: 47px;
}
}
@media all and (max-width: 360px) {
.box-title {
font-size: 10px;
}
.box-body-big-text {
font-size: 17px;
margin-top: 45px;
}
}
</style>
</head>
<body>
<div id="app">
<script type="text/babel">
let App = React.createClass({
getConfig: function() {
return {
layout: {
layoutMode: "grid",
width: "100%",
height: "500px",
gridLayout: {
cols: 3,
rows: 3
},
items: [
{
rowSpan: 2,
colSpan: 2,
colIndex: 0,
rowIndex: 0
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 0,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 1,
rowIndex: 1,
colIndex: 2
},
{
rowSpan: 1,
colSpan: 3,
colIndex: 0,
rowIndex: 2
}
]
},
speedChart: {
width: "100%",
height: "283px",
dataSource: runningSpeedData,
axes: [
{
name: "kmAxis",
type: "categoryX",
label: "km"
},
{
name: "averageSpeedAxis",
type: "numericY",
minimumValue: 8,
maximumValue: 15,
title: "Speed (km/h)",
}
],
series: [
{
name: "speed",
type: "spline",
title: "speed",
xAxis: "kmAxis",
yAxis: "averageSpeedAxis",
valueMemberPath: "speedPerHour",
isTransitionInEnabled: true,
isHighlightingEnabled: true,
brush: "#f60",
thickness: 3
}
]
},
totalKmChart: {
width: "100%",
height: "117px",
dataSource: lastMonthKmRun,
outlines: ["rgba(0,0,0,0)"],
axes: [{
name: "monthDayAxis",
type: "categoryX",
label: "monthDay",
interval: 1
},
{
name: "kmRunAxis",
type: "numericY",
title: "km"
}],
series: [{
name: "lastMonth",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "monthDayAxis",
yAxis: "kmRunAxis",
valueMemberPath: "kmRun",
brush: "#f60",
thickness: 0,
radius: 0
}]
}
};
},
render: function() {
return (
<div id="layout-wrapper">
<IgLayoutManager id="layout" options={this.getConfig().layout}>
<div>
<div class="box">
<div class="box-title">Last Run Speed</div>
<IgDataChart id="speedLineChart" class="chartElement" options={this.getConfig().speedChart} />
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Week</div>
<div class="box-body-big-text">49 km</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Cal Last Week</div>
<div class="box-body-big-text">3675 cal</div>
</div>
</div>
<div>
<div class="box">
<div class="box-title">Total Distance Last Month</div>
<IgDataChart id="totalKmBarChart" class="chartElement" options={this.getConfig().totalKmChart} />
</div>
</div>
</IgLayoutManager>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</div>
</body>
</html>