Available in the Full Version
Data Grid - Row Selectors
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Default Row Selectors
Row Selectors With Checkboxes
Row Numbering
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to configure row selectors in the igGrid control.
Note: When you want to select an igGrid row under touch platform devices, the only way to do this is to use the igGrid
row selector's checkboxes. In this sample igGrid checkboxes are enabled when the sample is opened from a touch device browser,
while under Desktop browser they are off, because in such cases you are not required to use the checkboxes.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></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/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>
</head>
<body>
<h3>Default Row Selectors</h3>
<!-- Target element for the Default RowSelectors igGrid -->
<table id="defaultRowSelectors">
</table>
<br />
<h3>Row Selectors With Checkboxes</h3>
<!-- Target element for the Checkboxes RowSelectors igGrid -->
<table id="cbRowSelectors">
</table>
<br />
<h3>Row Numbering</h3>
<!-- Target element for the RowNumbering igGrid -->
<table id="rowNumbering">
</table>
<!--Sample JSON Data-->
<script src="/data-files/nw-employees.js"></script>
<script>
$(function () {
/*----------------- Instantiation -------------------------*/
createDefaultSelectorsGrid();
createCboxSelectorsGrid();
createRowNumberingGrid();
});
function createDefaultSelectorsGrid() {
$("#defaultRowSelectors").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px", hidden: true },
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "Title", key: "Title", dataType: "string"},
{ headerText: "Phone", key: "Phone", dataType: "string" },
{ headerText: "Country", key: "Country", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'Country',
classes: 'ui-hidden-phone'
}
]
},
{
name: "RowSelectors",
enableRowNumbering: false
},
{
name: "Selection"
}
]
});
}
function createCboxSelectorsGrid() {
$("#cbRowSelectors").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px", hidden: true },
{ headerText: "Name", key: "Name", dataType: "string"},
{ headerText: "Title", key: "Title", dataType: "string" },
{ headerText: "Phone", key: "Phone", dataType: "string" },
{ headerText: "Country", key: "Country", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'Country',
classes: 'ui-hidden-phone'
}
]
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false
},
{
name: "Selection"
}
]
});
}
function createRowNumberingGrid() {
$("#rowNumbering").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px", hidden: true },
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "Title", key: "Title", dataType: "string" },
{ headerText: "Phone", key: "Phone", dataType: "string" },
{ headerText: "Country", key: "Country", dataType: "string" }
],
features: [
{
name: "Responsive",
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'Country',
classes: 'ui-hidden-phone'
}
]
},
{
name: "RowSelectors",
enableRowNumbering: true
},
{
name: "Selection"
}
]
});
}
</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" }] }
]