Available in the OSS Version

Layout Manager - Grid Layout

This sample demonstrates the layout manager control’s grid layout.
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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.layout.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.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>