igHierarchicalGrid - Select First Child Row

HTML

<link rel="stylesheet" href="https://secure-cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="https://secure-cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css">
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>
<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>
<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>

<table id="hierarchicalGrid"></table>

CSS

th.ui-iggrid-header:nth-child(3){

           text-align: right !important;
	}
	.ui-iggrid .ui-iggrid-tablebody td:nth-child(3) {

           text-align: right !important;
	}

JavaScript

$(function () {

            var data = [
                   {
                       "Name" : "Food", 
                       "Quantity": 3,
                       "Products": [
                           { "Name": "Bread", 
                            "Quantity": 3, 
                             "Product1": [
                                   { "Name": "Level3", 
                                    "Quantity": 4, 
                                    "Products": [] }
                               ] },
                           
                           { "Name": "Pizza", 
                            "Quantity": 4, 
                            "Products": [] }
                       ]
                   },
                   {
                       "Name": "Beverages", 
                       "Quantity": 3,
                       "Products": [
                           { "Name": "Milk", 
                            "Quantity": 1, 
                            "Products": [] },
                           {
                               "Name": "Fruit punch", 
                              " Quantity": 4,
                               "Product1": [
                                   { "Name": "Level3", 
                                    "Quantity": 4, 
                                    "Products": [] }
                               ]
                           }
                       ]
                   }
                ];

            $("#hierarchicalGrid").igHierarchicalGrid({
                width: "100%",
                dataSource: data, //Array of objects defined above
                autoGenerateLayouts: true,
                 defaultChildrenDataProperty: "Products",
                    features: [
                        {
                            name: "Selection"
                        }]
            });

        });