JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/js-data/northwind"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<br />
<table id="rowSelectionGrid">
</table>
JavaScript
$(function () {
/*----------------- Instantiation -------------------------*/
createRowSelectionGrid();
$(document).delegate("#rowSelectionGrid", "iggridselectionrowselectionchanged", function (evt, ui) {
//return reference to igGridSelection object
ui.owner;
//return reference to row object
ui.row;
//return reference to selected cells object array
ui.selectedCells;
if(ui.owner.grid.id().indexOf("child") >= 0)
{
var result = "";
for(i = 0; i <= ui.row.element.find("td").length; i++){
result += $(ui.row.element.find("td")[i]).text() + "; ";
}
alert(result);
var cells = $(ui.owner.grid.id()).igGridSelection("selectedCells");
}
});
});
function createRowSelectionGrid()
{
$( "#rowSelectionGrid" ).igHierarchicalGrid( {
width: "100%",
autoGenerateColumns: false,
dataSource: northwind,
responseDataKey: "results",
dataSourceType: "json",
features: [
{
name: "Responsive",
enableVerticalRendering: false,
columnSettings: [
{
columnKey: "Title",
classes: "ui-hidden-tablet"
},
{
columnKey: "Address",
classes: "ui-hidden-tablet"
}
]
},
{
...