$("#grid").data("kendoGrid) undefined in $.getJSON success method in MVC Razor - kendo-ui

Question

I have following Kendo.mvc grid
#Html.HiddenFor(model => model.BarCode)
<div style="padding-left:10%;padding-top:2%">
#(Html.Kendo().Grid(Model.BarCodes)
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.DocumentSetName)
.Width(100)
.Title("Reference No");
columns.Bound(e => e.ScannedDate)
.Title("Scanning Date")
.Width(100);
})
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(3)
//.Read(read => read.Action("SearchUnregisteredIncomings", "Correspondence").Data("getSearchCriteria"))
)
.ClientDetailTemplateId("template")
)
and this is the ajax call I have made
$.getJSON('#Url.Action("Search")', {ReferenceNumber:'123'
}, function (data, status) {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.data(data);
grid.refresh();
$("#loading").stop().fadeOut('fast');
});
The grid variable is undefined.
The following is the names and sequence of .js files and scripts that are loaded in _Layout.cshtml file.
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/spin.js"></script>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
<script src="/Scripts/bootstrap-multiselect.js"></script>
<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/chosen.jquery.min.js"></script>
And the below scripts loaded after #RenderBody() section but before </body> tag
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/spcontext.js"></script>
<script src="/Content/vendors/jquery-1.9.1.js"></script>
<script src="/Content/vendors/modernizr-2.6.2-respond-1.1.0.min.js">/script>
<script src="/Content/vendors/jquery.uniform.min.js"></script>
<script src="/Content/vendors/chosen.jquery.min.js"></script>
<script src="/Content/vendors/bootstrap-datepicker.js"></script>
<script src="/Content/vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
<script src="/Content/vendors/wysiwyg/bootstrap-wysihtml5.js"></script>
<script src="/Content/vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="/Content/assets/treeview.js"></script>
<script src="/Content/assets/form-validation.js"></script>
<script>
$(function () {
$(".datepicker").datepicker();
$(".uniform_on").uniform();
$(".chzn-select").chosen();
$('.textarea').wysihtml5();
});
(function (window, undefined) {
var $ = window.jQuery;
var document = window.document;
$(document).ready(function () {
//some code here
});
})(window);
I think the problem is due to the sequence of .js files but can not figure it out.