Available in the Full Version
Data Grid - Responsive Single Column Template
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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: </span><span>${Name}</span><br/>" +
"<span>Title: </span><span>${Title}</span><br/>" +
"<span>Phone: </span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
"<span>HireDate: </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: </span><span>${Name}</span><br/>" +
"<span>Title: </span><span>${Title}</span><br/>" +
"<span>Phone: </span><span><a href='${PhoneUrl}'>${Phone}</a></span><br/>" +
"<span>HireDate: </span><span>${HireDate}</span><br/>" +
"</div>"
}
}
]
});
});
</script>
</body>
</html>
var northwindEmployees = [
{ "ID": 1, "Name": "Davolio, Nancy", "Title": "Sales Representative", "ImageUrl": "../../images/samples/nw/employees/1.png", "Phone": "(206) 555-9857", "PhoneUrl": "tel:(206) 555-9857", "BirthDate":"1948-12-08T00:00:00", "HireDate":"1992-05-01T00:00:00", "Country": "USA", "Languages": [{ name: "English" }, { name: "Russian" }] },
{ "ID": 2, "Name": "Fuller, Andrew", "Title": "Vice President, Sales", "ImageUrl": "../../images/samples/nw/employees/2.png", "Phone": "(206) 555-9482", "PhoneUrl": "tel:(206) 555-9482", "BirthDate":"1952-02-19T00:00:00", "HireDate":"1992-08-14T00:00:00", "Country": "USA", "Languages": [{ name: "English" }, { name: "German" }] },
{ "ID": 3, "Name": "Leverling, Janet", "Title": "Sales Representative", "ImageUrl": "../../images/samples/nw/employees/3.png", "Phone": "(206) 555-3412", "PhoneUrl": "tel:(206) 555-3412", "BirthDate":"1963-08-30T00:00:00Z", "HireDate":"1992-04-01T00:00:00Z", "Country": "USA", "Languages": [{ name: "English" }] },
{ "ID": 4, "Name": "Peacock, Margaret", "Title": "Sales Representative", "ImageUrl": "../../images/samples/nw/employees/4.png", "Phone": "(206) 555-8122", "PhoneUrl": "tel:(206) 555-8122", "BirthDate":"1937-09-19T00:00:00Z","HireDate":"1993-05-03T00:00:00Z", "Country": "USA", "Languages": [{ name: "English" }, { name: "Spanish" }] },
{ "ID": 5, "Name": "Buchanan, Steven", "Title": "Sales Manager", "ImageUrl": "../../images/samples/nw/employees/5.png", "Phone": "(71) 555-4848", "PhoneUrl": "tel:(71) 555-4848", "BirthDate":"1955-03-04T00:00:00Z","HireDate":"1993-10-17T00:00:00Z", "Country": "UK", "Languages": [{ name: "English" }, { name: "Italian" }] },
{ "ID": 6, "Name": "Suyama, Michael", "Title": "Sales Representative", "ImageUrl": "../../images/samples/nw/employees/6.png", "Phone": "(71) 555-7773", "PhoneUrl": "tel:(71) 555-7773","BirthDate":"1963-07-02T00:00:00Z","HireDate":"1993-10-17T00:00:00Z", "Country": "UK", "Languages": [{ name: "English" }, { name: "Portuguese" }] },
{ "ID": 7, "Name": "King, Robert", "Title": "Sales Representative", "ImageUrl": "../../images/samples/nw/employees/7.png", "Phone": "(71) 555-5598", "PhoneUrl": "tel:(71) 555-5598", "BirthDate":"1960-05-29T00:00:00Z","HireDate":"1994-01-02T00:00:00Z", "Country": "UK", "Languages": [{ name: "English" }, { name: "French" }, { name: "Spanish" }] },
{ "ID": 8, "Name": "Callahan, Laura", "Title": "Inside Sales Coordinator", "ImageUrl": "../../images/samples/nw/employees/8.png", "Phone": "(206) 555-1189", "PhoneUrl": "tel:(206) 555-1189","BirthDate":"1958-01-09T00:00:00Z","HireDate":"1994-03-05T00:00:00Z", "Country": "USA", "Languages": [ { name: "English" }, { name: "Mandarin" }] },
{ "ID": 9, "Name": "Dodsworth, Anne", "Title": "Sales Representative", "ImageUrl": "../../images/samples/nw/employees/9.png", "Phone": "(71) 555-4444", "PhoneUrl": "tel:(71) 555-4444", "BirthDate":"1966-01-27T00:00:00Z","HireDate":"1994-11-15T00:00:00Z", "Country": "UK", "Languages": [{ name: "English" }, { name: "Japanese" }] }
]