Available in the Full Version

Data Grid - Responsive Single Column Template

ImageNameTitlePhoneHire Date
Davolio, NancySales Representative(206) 555-98575/1/1992
Fuller, AndrewVice President, Sales(206) 555-94828/14/1992
Leverling, JanetSales Representative(206) 555-34124/1/1992
Peacock, MargaretSales Representative(206) 555-81225/3/1993
Buchanan, StevenSales Manager(71) 555-484810/17/1993
Suyama, MichaelSales Representative(71) 555-777310/17/1993
King, RobertSales Representative(71) 555-55981/2/1994
Callahan, LauraInside Sales Coordinator(206) 555-11893/5/1994
Dodsworth, AnneSales Representative(71) 555-444411/15/1994
 

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The responsive single column template allows you to define a custom template that renders the data from a row into a single column based on the current layout mode (tablet or phone). This option allows you to create a specialized look for the data in the grid when it's rendered on small devices. In order to see the different modes take effect please open this sample on a mobile device or resize the browser's window.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .right {
            height: 100%;
            padding: 3px;
        }

        .right > span:nth-of-type(odd) {
            font-weight: bold;
        }

        #grid1_responsiveAdaptive > div {
            float: left;
            width: 33%;
        }
    </style>

    <!-- 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/infragistics.css" rel="stylesheet" />

    <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>


    <!--Sample JSON Data-->
    <script src="/data-files/nw-employees.js"></script>
</head>
<body>

    <table id="grid1"></table>

    <script>
        $(function () {
            $("#grid1").igGrid({
                dataSource: northwindEmployees,
                primaryKey: "ID",
                width: "100%",
                height: "500px",
                autoGenerateColumns: false,
                columns: [
                    { headerText: "Employee ID", key: "ID", dataType: "number", hidden: true },
                    { headerText: "Image", key: "ImageUrl", dataType: "string", template: "<img width='100' height='90' src='${ImageUrl}'></img>" },
                    { headerText: "Name", key: "Name", dataType: "string" },
                    { headerText: "Title", key: "Title", dataType: "string" },
                    { headerText: "Phone", key: "Phone", dataType: "string" },
                    { headerText: "Hire Date", key: "HireDate", dataType: "date" }
                ],
                features: [
                    {
                        name: "Responsive",
                        enableVerticalRendering: false,
                        singleColumnTemplate: {
                            phone:
                                "<div style='float: left;'>" +
                                    "<img width='100' height='90' src='${ImageUrl}'></img>" +
                                "</div>" +
                                "<div class='right' style='float: left; font-size: 1.1em;'>" +
                                    "<span>Name:&nbsp;</span><span>${Name}</span><br/>" +
                                    "<span>Title:&nbsp;</span><span>${Title}</span><br/>" +
                                    "<span>Phone:&nbsp;</span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
                                    "<span>HireDate:&nbsp;</span><span>${HireDate}</span><br/>" +
                                "</div>",
                            tablet:
                                "<div style='float: left;'>" +
                                    "<img width='100' height='90' src='${ImageUrl}'></img>" +
                                "</div>" +
                                "<div class='right' style='float: left; font-size: 0.9em;'>" +
                                    "<span>Name:&nbsp;</span><span>${Name}</span><br/>" +
                                    "<span>Title:&nbsp;</span><span>${Title}</span><br/>" +
                                    "<span>Phone:&nbsp;</span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
                                    "<span>HireDate:&nbsp;</span><span>${HireDate}</span><br/>" +
                                "</div>"
                        }
                    }
                ]
            });
        });
    </script>
</body>
</html>