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/nw-employees"></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>
<h3>Multiple Row Selection</h3>
<input id="input1" />
<select id="select1">
<option value="Sales Representative">Sales Representative</option>
<option value="Vice President, Sales">Vice President, Sales</option>
<option value="Sales Manager">Sales Manager</option>
<option value="Inside Sales Coordinator">Inside Sales Coordinator</option>
<option value=" " selected> </option>
</select>
<table id="rowSelectionGrid">
</table>
JavaScript
$(function () {
createRowSelectionGrid();
//Delegate
$(document).delegate("#rowSelectionGrid", "iggridselectionactiverowchanged", function (evt, ui) {
//return reference to igGridSelection object
ui.owner;
//return reference to row object
ui.row;
var name = $($(ui.row.element).find("td")[0]).text();
$("#input1").val(name);
var title = $($(ui.row.element).find("td")[1]).text();
$("#select1 option[value='" + title + "']").attr("selected", "selected");
});
});
function createRowSelectionGrid() {
$("#rowSelectionGrid").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px" },
{ headerText: "Name", key: "Name", dataType: "string"},
{ headerText: "Title", key: "Title", dataType: "string" },
{ headerText: "Phone", key: "Phone", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'ID',
classes: 'ui-hidden-phone'
}
]
},
{
name: "Selection",
mode: 'row',
multipleSelection: true
}
]
});
}