Ive initialised my grid using MVC helper and set the selection mode to row but this is not being respected when the grid is rendered, if I hover over the grid , all the rows are 'selected'.  Im populating my grid via an ajax call (im populating a graph and grid from the same datasource).  Why is single row selection not being honoured ?

heres the grid definition

@(Html.Infragistics()
                                                    .Grid(Model.Records)
                                                    .ID("Grid")
                                                    .Width("100%")
                                                    .Height("400px")
                                                    .PrimaryKey("ID")
                                                    .AutoGenerateColumns(false)
                                                    .AutoGenerateLayouts(false)
                                                    .Columns(column =>
                                                    {
                                                        column.For(x => x.PriceDateString).HeaderText("Price Date").Width("25%");
                                                        column.For(x => x.MaximumnPrice).HeaderText("High (£/MWh)").Width("25%");
                                                        column.For(x => x.AveragePrice).HeaderText("Average (£/MWh)").Width("25%");
                                                        column.For(x => x.MinimumnPrice).HeaderText("Low (£/MWh)").Width("25%");
                                                    })
                                                    .Features(features =>
                                                    {
                                                        features.Selection().Activation(true).MultipleSelection(false).Mode(SelectionMode.Row);
                                              
                                                    })
                                                    .ResponseDataKey("Records")
                                                    .Render())

and the ajax call to populate it

function Populate() {
var dayOption = $("input[name='optDays']:checked").val();
$.ajax({
url: '@Url.Action("GetpriceData", "Price")',
data: { period: dayOption },
async: true,
type: 'GET',
success: function (returnval) {

if (returnval.success == true) {

$("#Chart").igDataChart({
dataSource: returnval.Records
});
$("#Grid").igGrid("option", "dataSource", returnval.Records);
}
if (returnval.success == false) {
bootbox.alert({ title: '<div class="text-center text-danger"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;ERROR</div>', message: returnval['responseText'] });
}
},
error: function (returnval) {

}
});
}

both the chart and grid are populated exactly as i expected but the grid will not honour single row selection, whats going on here ?  anyone help ?