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/2017.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2017.1/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2017.1/latest/js/infragistics.lob.js"></script>
<script src="http://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/2017.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/2017.1/latest/css/structure/infragistics.css" rel="stylesheet"></link>



<table id="grid"></table>


<button onclick="selectRow(369)">
  Select row with Id 369
</button>
<button onclick="upDateRow(369)">
  Update row with Id 369
</button>
<button onclick="scrollToSelectedRow(369)">
  Scroll to 369
</button>

<button onclick="scrollToSelectedRow(40)">
  Scroll to 40
</button>

JavaScript

$(function() {
	var i;
  for (i = 0; i < adventureWorks.length; i++) {
  	adventureWorks[i]["Id"] = i + 1;
  }
  var dsOptions = {
    primaryKey: "Id",
    dataSource: adventureWorks,
   // responseDataKey: "adventureWorks",

    //treeDS: {
    //  childDataKey: "Legs",
   // }
  };
  window.ds = new $.ig.TreeHierarchicalDataSource(dsOptions);


  $("#grid").igTreeGrid({
    primaryKey: "Id",
    autoGenerateColumns: false,
    renderCheckboxes: true,
    rowVirtualization: true,
    virtualizationMode: "continuous",
    width: "1000px",
    autoCommit: true,
    height: "500px",
    columns: [{
      headerText: "Id",
      key: "Id",
      dataType: "number",
      width: "100px"
    }, {
      headerText: "ProductID",
      key: "ProductID",
      dataType: "number",
      width: "100px"
    }, {
      headerText: "Product Name",
      key: "Name",
      dataType: "string",
      width: "200px"
    }, {
      headerText: "Product Number",
      key: "ProductNumber",
      dataType: "string",
      width: "100px"
    }, {
      headerText: "Make Flag",
      key: "MakeFlag",
      dataType: "bool",
      width: "100px"
    }],
    dataSource: ds, //adventureWorks.slice(0, 100),
    features: [{
      name: "Resizing"
    }, {
      name: "Paging",
      pageSize: 100
    }, {
      name: "ColumnMoving"
    }, {
      name: "Filtering"
    }, {
      name: "RowSelectors",
      enableCheckBoxes: true
    }, {
      name: "Selection",
      multipleSelection: true
    }, {
    	name: "Updating",
      editMode: "none"
    }]
  });
});

function selectRow(id) {
  $("#grid").igTreeGridSelection("selectRowById", id);
}

function upDateRow(rowId) {
  var row = {
    //"ProductID": 369,
    "Name": "UPDATED Thin-Jam Hex Nut 13"
  }
  //window.ds.updateRow(rowId, row, true);
	$("#grid").igTreeGridUpdating("updateRow", rowId, row);
  $("#grid").igTreeGrid("dataBind");
  //window.ds.dataBind();
  //window.ds.commit();
}

function scrollToSelectedRow(rowId) {
	var...